morewry/postcss-apply

PostCSS plugin enabling custom properties sets references

postcss-apply

PostCSS plugin enabling custom properties sets references

Disclaimer:
Just toying around an interesting idea, not even a spec.
The plugin is in a very early state, some features are missing.

Installation

npm install postcss-apply --save-dev

Usage

var fs = require('fs');
var postcss = require('postcss');
var apply = require('postcss-apply');

var input = fs.readFileSync('input.css', 'utf8');

postcss()
  .use(apply)
  .process(input)
  .then(function (result) {
    fs.writeFileSync('output.css', result.css);
  });

Examples

input:

:root {
  --toolbar-theme: {
    background-color: rebeccapurple;
    color: white;
    border: 1px solid green;
  };
  --toolbar-title-theme: {
    color: green;
  };
}

.toolbar {
  @apply --toolbar-theme;
}
.toolbar__title {
  @apply --toolbar-title-theme;
}

output:

.toolbar {
  background-color: rebeccapurple;
  color: white;
  border: 1px solid green;
}
.toolbar__title {
  color: green;
}

Credits

• Pascal Duez

Licence

postcss-apply is unlicensed.