Awesome
postcss-property-lookup
PostCSS plugin that allows referencing property values without a variable, similar to Stylus.
.Test {
margin-left: 20px;
margin-right: @margin-left;
color: red;
background: @color url('test.png');
line-height: 1.5;
font-size: @(line-height)em;
}
.Test {
margin-left: 20px;
margin-right: 20px;
color: red;
background: red url('test.png');
line-height: 1.5;
font-size: 1.5em;
}
Check the test fixtures for more examples.
Usage
postcss([ require('postcss-property-lookup') ])
See PostCSS docs for examples for your environment.
Installation
$ yarn add postcss-property-lookup
Usage
JavaScript
postcss([
require('postcss-property-lookup')(/* options */),
// more plugins...
])
TypeScript
///<reference path="node_modules/postcss-property-lookup/.d.ts" />
import postcssPropertyLookup from 'postcss-property-lookup';
postcss([
postcssPropertyLookup(/* options */),
// more plugins...
])
Options
logLevel
Type: string: <error|warn>
<br>
Required: false
<br>
Default: warn
When a lookup cannot be resolved, this specifies whether to throw an error or log a warning. In the case of a warning, the invalid lookup value will be replaced with an empty string.