PostCSS Css Vars - Resolve CSS Custom Properties

PostCSS plugin for CSS Custom Properties. The purpose is mainly to write more modern CSS code if you need to support older browsers like the Internet Explorer 11.

Examples

Direct usage

.foo {
    --color: red;
    color: var(--color);
    font-size: var(--font-size, 1em);
    border: 1px solid var(-color);
}
/* becomes */
.foo {
    color: red;
    font-size: 1em;
    border: 1px solid red;
}

Host/Body - usage

:host {
    --color: red;
}
.foo {
    color: var(--color);
    border: 1px solid var(--color);
}
/* becomes */
.foo {
    color: red;
    border: 1px solid red;
}

Media Queries

:host {
    --color: red;
}
.foo {
    color: var(--color);
    border: 1px solid var(--color);
}
@media (min-width: 30em) {
    --color: orange;
}
/* becomes */
.foo {
    color: red;
    border: 1px solid red;
}
@media (min-width: 30em) {
    .foo {
        color: orange;
    }
}

Permutations

:host {
    --color: red;
}
.foo {
    color: var(--color);
    border: 1px solid var(--color);
}
.orange {
    --color: orange;
}
/* becomes */
.foo {
    color: red;
    border: 1px solid red;
}
.orange .foo {
    color: orange;
    border: 1px solid orange;
}

Usage

Install the package:

$ yarn add postcss-css-vars --save

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-css-vars'),
    require('autoprefixer')
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.