Skip to content
PostCSS plugin enabling custom properties sets references
Branch: master
Clone or download
Latest commit 70d8c62 Feb 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
develop Update all build, test, lint things Jan 26, 2019
src Remove Flow Jan 26, 2019
test Update all build, test, lint things Jan 26, 2019
.babelrc Remove Flow Jan 26, 2019
.editorconfig Initial commit Aug 26, 2015
.eslintrc Remove Flow Jan 26, 2019
.gitignore Remove Flow Jan 26, 2019
.npmrc Fix lock file Feb 27, 2019
.prettierrc Prettify codebase Mar 10, 2018
.travis.yml Update Travis config Jan 26, 2019
CHANGELOG.md Release 0.12.0 Feb 27, 2019
README.md Update README.md Sep 23, 2018
UNLICENSE Initial commit Aug 26, 2015
codecov.yml Add codecov config file Mar 8, 2017
jest.config.js Update all build, test, lint things Jan 26, 2019
package.json Release 0.12.0 Feb 27, 2019
rollup.config.js Update all build, test, lint things Jan 26, 2019
yarn.lock Fix lock file Feb 27, 2019

README.md

postcss-apply

CSS Standard Status npm version Build Status Coverage Status

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

⚠️ 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:

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: { [customPropertyName: string]: Object | string }
default: {}
Allows you to pass an object or string of custom property sets for :root. These definitions will be prepended, in such overridden 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

Licence

postcss-apply is unlicensed.

You can’t perform that action at this time.