mdings / postcss-use

Enable PostCSS plugins directly in your stylesheet.

postcss-use

Enable PostCSS plugins directly in your stylesheet.

Install

With npm do:

npm install postcss-use --save

Example

Both hash maps and arrays are supported; note that functions are not, for security reasons. A hash map uses the CSS format of option: value; option2: value2, but please note that values must be valid JSON syntax. For example if a module takes a string option, it must be wrapped in quotation marks.

Input

Standard syntax

With postcss-discard-comments:

@use postcss-discard-comments(removeAll: true);
/*! test */
h1 {
    color: red
}

Alternative syntax

You may also use configuration blocks that are more CSS-like. Note that array options cannot be parsed by this method.

@use postcss-discard-comments {
    removeAll: true
}

Output

h1 {
    color: red
}

API

use(options)

options

modules

Type: array|string Required option.

You must specify this array of postcss plugins to use, for security purposes. This prevents malicious usage of postcss-use in browser environments.

postcss([ use({ modules: ['autoprefixer', 'cssnano', 'cssnext']}) ]);

Note that you may also set this option to '*' to disable whitelisting of modules. This is not recommended for environments where you may be accepting arbitrary user input; use at your own risk.

resolveFromFile

Type: boolean (default: false)

Set this to true in order to resolve plugins relative to the file that referenced them. This enables the usage of different versions of the same plugin, for instance.

postcss([ use({ resolveFromFile: true, modules: '*' }) ]);

Usage

See the PostCSS documentation for examples for your environment.

Contributors

Thanks goes to these wonderful people (emoji key):

Ben Briggs 💻 📖 👀 ⚠️	Jonathan Neal 💻 ⚠️	一丝 💻	Maxime Thirouin 📖	Bogdan Chadkin 📖 👀	Espen Hovlandsdal 💻 ⚠️	Andrey Sitnik 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Ben Briggs