postcss-apply

postcss-apply

PostCSS plugin enabling custom property 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.

/!\ Heads up

The @apply rule and custom property sets most likely won't get any real support from browser vendors and the spec is yet considered deprecated.
See:

• https://discourse.wicg.io/t/needed-new-champion-for-css-apply-rule/2012
• https://github.com/w3c/webcomponents/issues/300#issuecomment-276210974

Installation

npm install postcss-apply --save-dev

Usage

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

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

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

Examples

In CSS declared sets

/* input */

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

.Toolbar {
  @apply --toolbar-theme;
}

/* output */

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

In JS declared sets

const themes = {
  /* Set names won't be transformed, just `--` will be prepended. */
  'toolbar-theme': {
    /* Declaration properties can either be camel or kebab case. */
    backgroundColor: 'rebeccapurple',
    color: 'white',
    border: '1px solid green',
  },
};

[...]
postcss().use(apply({ sets: themes }))
[...]

/* input */

.Toolbar {
  @apply --toolbar-theme;
}

/* output */

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

options

preserve

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

sets

type: Object
default: {}
Allows you to pass an object of custom property sets for :root. These definitions will be prepended, in such overriden by the one declared in CSS if they share the same name. The keys are automatically prefixed with the CSS -- to make it easier to share sets in your codebase.

Credits

• Pascal Duez

Licence

postcss-apply is unlicensed.

Changelog

[0.7.0] - 2017-05-08

Changed

• PostCSS 6 upgrade.

Fixed

• Polyfill Object.entries for node versions lower than 7.