Postcss-class-apply NPM

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://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md

Installation

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

Usage

const fs = require('fs');
const postcss = require('postcss');
const apply = require("postcss-class-apply/dist/index")

module.exports = {
  plugins: [
    apply()
  ]
}


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


.btn-reset {
  outline: none;
  border: 1px solid;
}

.btn-primary {
  border-color: #204486;
  background: #3d82ff;
}

.button {
  margin: 3px 8px;
  @apply btn-primary;
}

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

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


.btn-reset {
  outline: none;
  border: 1px solid;
}

.btn-primary {
  border-color: #204486;
  background: #3d82ff;
}

.button {
  margin: 3px 8px;
  border-color: #204486;
  background: #3d82ff;
  outline: none;
  border: 1px solid;
}