# postcss-custom-values

> [![NPM Version][npm-img]][npm-url] [![Build Status][cli-img]][cli-url] [![Support Chat][git-img]][git-url]

Latest version **0.0.6** (published 2018-11-01) · CC0-1.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2018-11-01 |
| First published | 2018-09-08 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 1 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| Author | Gavin McFarland |
| Maintainers | mindthetic |
| Keywords | postcss, css, postcss-plugin, values, keywords, units, custom, tokens |

## Links

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

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^7.0.2

## 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

- 0.0.6 (latest) — 2018-11-01
- 0.0.5 — 2018-10-07
- 0.0.4 — 2018-09-09
- 0.0.3 — 2018-09-09
- 0.0.2 — 2018-09-08
- 0.0.1 — 2018-09-08

## README

# PostCSS Custom Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

_This is a work in progress and not recommended for production_

With [PostCSS Custom Values] you can create your own CSS values such as keywords and units.

```pcss
/* Create a keyword which can be used with any property */
@value long {
  value: 500px;
};

/* Create a keyword restricted to certain properties */
@value small property(padding, margin) {
  value: 20px;
};
@value small property(font-size) {
  value: 12px;
};

/* Create a custom unit using <tokens> */
@value <number>gu {
  value: calc($0 * 4px);
};

.example {
  position: absolute;
  top: long;
  width: long;
  font-size: small;
  padding: small;
  margin: 5gu 10px 10gu 1em;
}
```

Output:
```css
.example {
  position: absolute;
  top: 500px;
  width: 500px;
  font-size: 12px;
  padding: 20px;
  margin: calc(5 * 4px) 10px calc(10 * 4px) 1em;
}
```

## Tokens

Tokens can be placed anywhere within the value identifier.

```pcss
@value layout_<side> {...}
@value <number>gu {...}
@value _<integer>_ {...}
```

Data is captured by the token and can be used to calculate the value by referencing it using `$0`.

```pcss
@value space_<integer> {
  value: calc($0 * 10px);
}
```

Below are a list of the currently available tokens.

| Key         | Description                                              |
|-------------|----------------------------------------------------------|
| `<number>`  | Any number including decimal points and negative numbers |
| `<integer>` | Only whole numbers including negative integers           |
| `<side>`    | top, right, bottom or left                               |


## Setup

```bash
npm install postcss-custom-values --save-dev
```

[cli-img]: https://img.shields.io/travis/mindthetic/postcss-custom-values.svg
[cli-url]: https://travis-ci.org/mindthetic/postcss-custom-values
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/postcss-custom-values.svg
[npm-url]: https://www.npmjs.com/package/postcss-custom-values

[PostCSS]: https://github.com/postcss/postcss
[PostCSS Custom Values]: https://github.com/mindthetic/postcss-custom-values

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