PostCSS Environment Variables lets you use env() variables in CSS,
following the CSS Environment Variables specification.
@media (max-width: env(--branding-small)) {
body {
padding: env(--branding-padding);
}
}
/* becomes */
@media (min-width: 600px) {
body {
padding: 20px;
}
}
/* when the `variables` option is: {
"--branding-small": "600px",
"--branding-padding": "20px"
} */Add PostCSS Environment Variables to your build tool:
npm install postcss-env-function --save-devUse PostCSS Environment Variables to process your CSS:
import postcssEnvFunction from 'postcss-env-function';
postcssEnvFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);Add PostCSS to your build tool:
npm install postcss --save-devUse PostCSS Environment Variables as a plugin:
import postcss from 'gulp-postcss';
import postcssEnvFunction from 'postcss-env-function';
postcss([
postcssEnvFunction(/* pluginOptions */)
]).process(YOUR_CSS);Add PostCSS Loader to your build tool:
npm install postcss-loader --save-devUse PostCSS Environment Variables in your Webpack configuration:
import postcssEnvFunction from 'postcss-env-function';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssEnvFunction(/* pluginOptions */)
]
} }
]
}
]
}
}Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse PostCSS Environment Variables in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssEnvFunction from 'postcss-env-function';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssEnvFunction(/* pluginOptions */)
])
).pipe(
gulp.dest('.')
));Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse PostCSS Environment Variables in your Gruntfile:
import postcssEnvFunction from 'postcss-env-function';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssEnvFunction(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});