# postcss-modules-values

> PostCSS plugin for CSS Modules to pass arbitrary values between your module files

Latest version **4.0.0** (published 2020-10-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-modules-values
pnpm add postcss-modules-values
yarn add postcss-modules-values
bun add postcss-modules-values
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2020-10-13 |
| First published | 2015-09-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/postcss-modules-values) |
| Module format | CommonJS |
| Node | ^10 \|\| ^12 \|\| >= 14 |
| Dependencies | 1 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 41 |
| Author | Glen Maddern |
| Maintainers | markdalgleish, sokra, geelen, evilebottnawi |
| Keywords | css, modules, postcss |

## Links

- npm: https://www.npmjs.com/package/postcss-modules-values
- Repository: https://github.com/css-modules/postcss-modules-values
- Homepage: https://github.com/css-modules/postcss-modules-values#readme
- Issues: https://github.com/css-modules/postcss-modules-values/issues
- npm.io page: https://npm.io/package/postcss-modules-values

## Dependencies (1)

- [icss-utils](https://npm.io/package/icss-utils.md) ^5.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2020-10-13
- 4.0.0-rc.4 (next) — 2020-10-08
- 4.0.0-rc.5 — 2020-10-11
- 4.0.0-rc.3 — 2020-10-08
- 4.0.0-rc.2 — 2020-09-22
- 4.0.0-rc.1 — 2020-09-22
- 4.0.0-rc.0 — 2020-09-16
- 3.0.0 — 2019-05-07
- 2.0.0 — 2018-11-23
- 1.3.0 — 2017-05-21
- 1.2.2 — 2016-08-15
- 1.2.1 — 2016-08-15
- 1.2.0 — 2016-08-15
- 1.1.3 — 2016-05-12
- 1.1.2 — 2016-03-21
- … 3 more at https://npm.io/package/postcss-modules-values/versions

## README

# CSS Modules: Values

Pass arbitrary values between your module files

### Usage

```css
/* colors.css */
@value primary: #BF4040;
@value secondary: #1F4F7F;

.text-primary {
  color: primary;
}

.text-secondary {
  color: secondary;
}
```

```css
/* breakpoints.css */
@value small: (max-width: 599px);
@value medium: (min-width: 600px) and (max-width: 959px);
@value large: (min-width: 960px);
```

```css
/* my-component.css */
/* alias paths for other values or composition */
@value colors: "./colors.css";
/* import multiple from a single file */
@value primary, secondary from colors;
/* make local aliases to imported values */
@value small as bp-small, large as bp-large from "./breakpoints.css";
/* value as selector name */
@value selectorValue: secondary-color;

.selectorValue {
  color: secondary;
}

.header {
  composes: text-primary from colors;
  box-shadow: 0 0 10px secondary;
}

@media bp-small {
  .header {
    box-shadow: 0 0 4px secondary;
  }
}
@media bp-large {
  .header {
    box-shadow: 0 0 20px secondary;
  }
}
```

**If you are using Sass** along with this PostCSS plugin, do not use the colon `:` in your `@value` definitions. It will cause Sass to crash.

Note also you can _import_ multiple values at once but can only _define_ one value per line.

```css
@value a: b, c: d; /* defines a as "b, c: d" */
```

## License

ISC

## With thanks

- Mark Dalgleish
- Tobias Koppers
- Josh Johnston

---

Glen Maddern, 2015.

---
_Source: https://npm.io/package/postcss-modules-values · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._