postcss-class-apply

postcss-class-apply

PostCSS plugin enabling custom property sets references

Refer to postcss-custom-properties for DOMless limitations.

Web Platform status

Spec (editor's draft): https://tabatkins.github.io/specs/css-apply-rule
Browser support: https://www.chromestatus.com/feature/5753701012602880

:warning: The @apply rule and custom property sets most likely won't get any more support from browser vendors as the spec is yet considered deprecated and alternative solutions are being discussed.
Refer to following links for more infos:

• https://discourse.wicg.io/t/needed-new-champion-for-css-apply-rule/2012
• https://github.com/w3c/webcomponents/issues/300#issuecomment-276210974
• http://www.xanthir.com/b4o00
• https://github.com/w3c/csswg-drafts/issues/1047

Installation

npm install postcss-class-apply --save-dev

Usage

const fs = require('fs');
const postcss = require('postcss');
const apply = require('postcss-class-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 */

.reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list_item {
  @apply reset;
}

/* output */

.list_item {
  margin: 0;
  padding: 0;
  list-style: none;
}

Credits

• Rasel Mahmud

Licence

postcss-class-apply is unlicensed.

Changelog

[1.0.0] - 2021-11-26

Changed

• initial commit