Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

postcss-css-vars

0.0.10 • Public • Published

PostCSS Css Vars - Resolve CSS Custom Properties

Build Status

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);
    border: 1px solid var(-color);
}
/* becomes */
.foo {
    color: red;
    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;
        border: 1px solid 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.

Install

npm i postcss-css-vars

DownloadsWeekly Downloads

4

Version

0.0.10

License

MIT

Unpacked Size

83.7 kB

Total Files

119

Last publish

Collaborators

  • avatar