Enable PostCSS plugins directly in your stylesheet.
Clone or download
Latest commit ce2b50b Feb 14, 2018
Permalink
Failed to load latest commit information.
src Update for PostCSS 6 Feb 14, 2018
.all-contributorsrc Credit all contributors. Jun 22, 2016
.babelrc Update for PostCSS 6 Feb 14, 2018
.editorconfig Initial commit. Jun 22, 2015
.gitignore Rewrote to ES6. Jun 22, 2016
.travis.yml Update for PostCSS 6 Feb 14, 2018
CHANGELOG.md Update for PostCSS 6 Feb 14, 2018
LICENSE-MIT Initial commit. Jun 22, 2015
README.md Update for PostCSS 6 Feb 14, 2018
package.json 3.0.0 Feb 14, 2018

README.md

postcss-use Build Status

Enable PostCSS plugins directly in your stylesheet.

@use postcss-preset-env(stage: 0, browsers: "last 2 versions");

h1 {
  & a {
    color: red
  }
}

Install

With npm do:

npm install postcss-use --save

Example

Options may be passed into plugins as a JSON object, an array, a hash map, or as declarations. Hash maps will follow the format of option: value, option2: value2.

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 root 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.

The modules option specifies a list of allowable PostCSS Plugins, expressed as a String, Array, or RegExp. By default, all plugins are disabled in order to prevent malicious usage in browser environments.

use({
  // allow plugins starting with autoprefixer, postcss, precss, and cssnano
  modules: [
    /^autoprefixer/,
    /^postcss/,
    /^precss/,
    /^cssnano/
  ]
})
use({
  // allow autoprefixer, postcss-preset-env, and postcss-flexbugs-fixes
  modules: [ 'autoprefixer', 'postcss-preset-env', 'postcss-flexbugs-fixes' ]
})

Setting the option to "*" will allow PostCSS Use to require any plugins. This is not recommended for environments where you may be accepting arbitrary user input; use at your own risk.

resolveFromFile

Type: boolean (default: false)

The resolveFromFile option specifies whether plugins should be resolved relative to the file that referenced them. This may be used to enable the usage of different versions of the same plugin. By default, it is disabled.

use({
  resolveFromFile: true
})
options

Type: object (default: {})

The options option specifies individual options for specific plugins by plugin name.

use({
  options: {
    'postcss-preset-env': {
      stage: 0,
      browsers: 'last two versions'
    }
  }
})

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