postcss-apply

postcss-apply

PostCSS plugin enabling custom properties sets references

Aka @apply rule.
Spec (editor's draft): https://tabatkins.github.io/specs/css-apply-rule
Browser support: https://www.chromestatus.com/feature/5753701012602880
Refers to postcss-custom-properties for DOMless limitations, although being future proof and spec compliant is the plugin primary goal.

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;
}

options

preserve

type: Boolean
default: false
Allow for keeping resolved declarations and @apply rules alongside.

Credits

• Pascal Duez

Licence

postcss-apply is unlicensed.