Adds support for transforming stylesheets with PostCSS. This plugin does not work with PostCSS versions below 8, if you want to use PostCSS 7, please use the older version of this plugin.
Install it using npm
npm i -D @reboost/plugin-postcss
Install postcss
package, if not already installed.
npm i postcss
Import it from the package
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');
Add it to the plugins array
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');
start({
plugins: [
PostCSSPlugin({
// Options
})
]
})
Now it will transform all stylesheets with your PostCSS plugins.
This plugin uses postcss-load-config
to load PostCSS
configurations. Please read their readme
to understand how configuration files are loaded.
Type: object
This plugin exposes context ctx
to the config file, so that your config file can be dynamic.
Like so
postcss.config.js
module.exports = ({ file, options, env }) => {
parser: file.extname === '.sss' ? 'sugarss' : undefined
// More configurations
}
You can set ctx
to an object
to pass the data to the options
object in
your postcss.config.js
, like so
reboost.js
const { start } = require('reboost');
const PostCSSPlugin = require('@reboost/plugin-postcss');
start({
plugins: [
PostCSSPlugin({
ctx: {
usePreset: true
}
})
]
})
postcss.config.js
module.exports = ({ file, options, env }) => {
plugins: {
// `usePreset` is now available in `options` object
'postcss-preset-env': options.usePreset ? {} : false
}
}
Type: string
The path to search for any of the configuration files. Configurations can be loaded from
Using this option you can specify another directory that should be searched for the config file, like when you store your config files in different directories. The value should be a path to a DIRECTORY (where the config file is stored), not a path to a FILE.