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: '*' }) ]);

options

Type: object (default: {})

Default options for plugins, keyed by plugin name. If both the default and the specified options are objects, they are merged. Otherwise, the options specified in the CSS are used.

postcss([
    use({
        modules: '*',
        options: {
            autoprefixer: {
                browsers: ['> 1%', 'IE 7']
            }
        }
    })
]);