Enable PostCSS plugins directly in your stylesheet.
npm install postcss-use> Enable PostCSS plugins directly in your stylesheet.
``css
@use postcss-preset-env(stage: 0, browsers: "last 2 versions");
h1 {
& a {
color: red
}
}
`
With npm do:
``
npm install postcss-use --save
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.
#### Standard syntax
With [postcss-discard-comments]:
`css`
@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.
`css`
@use postcss-discard-comments {
removeAll: true
}
`css`
h1 {
color: red
}
#### options
##### modules
Type: array|string
Required option.
The modules option specifies a list of allowable PostCSS Plugins, expressedString
as a , Array, or RegExp. By default, all plugins are disabled in
order to prevent malicious usage in browser environments.
`js`
use({
// allow plugins starting with autoprefixer, postcss, precss, and cssnano
modules: [
/^autoprefixer/,
/^postcss/,
/^precss/,
/^cssnano/
]
})
`js`
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.
`js`
use({
resolveFromFile: true
})
##### options
Type: object (default: {})
The options option specifies individual options for specific plugins by
plugin name.
`js``
use({
options: {
'postcss-preset-env': {
stage: 0,
browsers: 'last two versions'
}
}
})
See the PostCSS documentation for
examples for your environment.
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!
MIT Β© Ben Briggs
[all-contributors]: https://github.com/kentcdodds/all-contributors
[ci]: https://travis-ci.org/postcss/postcss-use
[postcss]: https://github.com/postcss/postcss
[postcss-discard-comments]: https://github.com/ben-eb/postcss-discard-comments