README
PostCSS Constants With Reload
PostCSS plugin to process imported constants from a file.
constants.js
module.exports = {
colors: {
primary: '#8EE7D3',
}
};
input
@constants "./constants";
.foo {
color: @constants.colors.primary;
}
output
.foo {
color: #8EE7D3;
}
Within static values
constants.js
module.exports = {
borders: {
weight: '2px',
style: 'solid',
},
};
input
@constants "./constants.js";
.foo {
border: @constants.borders.weight @constants.borders.style black;
}
output
.foo {
border: 2px solid black;
}
@ Rules
constants.js
module.exports = {
queries: {
maxWidth: '200px',
},
}
input
@constants: "./constants.js";
@media (max-width: @constants.queries.maxWidth) {
color: blue;
}
output
@media (max-width: 200px) {
color: blue;
}
Usage
postcss([ require('postcss-constants-with-reload') ])
You can pass a default set of constants (that can be overriden), if you want to update default constants in webpack hot reload:
postcss([
constants({
defaults: {
colors: {
primary: 'blue',
},
}
})
])
you can pass an alias
option, which will be used to resolve related constants file
postcss([
constants({
alias: path.resolve( process.cwd(), 'css' )
})
])
then you can write code like this
@constants: "css/constants.js";
if 'css' was found in alias option, 'css/constants.js' will be parsed to complete path
webpack user?
you can pass an webpack
option in option
postcss: function( webpack ){
return [
constantsWithReload({
webpack: webpack
})
];
}
it will add constants files as dependency. when you modify the constants file, it causes webpack recomplie all related resource and livereload in browser.
Call postcss-constants
before any plugins that will compute values stored in constants. See PostCSS docs for examples for your environment.