PostCSS Custom Values

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.

/* 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:

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

@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.

@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

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