PostCSS Short runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Add PostCSS Short to your project:
npm install postcss-short --save-dev
Use PostCSS Short to process your CSS:
const postcssShort = require('postcss-short');
postcssShort.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssShort = require('postcss-short');
postcss([
postcssShort(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Add PostCSS CLI to your project:
npm install postcss-cli --save-dev
Use PostCSS Short in your postcss.config.js
configuration file:
const postcssShort = require('postcss-short');
module.exports = {
plugins: [
postcssShort(/* pluginOptions */)
]
}
Add PostCSS Loader to your project:
npm install postcss-loader --save-dev
Use PostCSS Short in your Webpack configuration:
const postcssShort = require('postcss-short');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssShort(/* pluginOptions */)
]
} }
]
}
]
}
}
Add React App Rewired and React App Rewire PostCSS to your project:
npm install react-app-rewired react-app-rewire-postcss --save-dev
Use React App Rewire PostCSS and PostCSS Short in your
config-overrides.js
file:
const reactAppRewirePostcss = require('react-app-rewire-postcss');
const postcssShort = require('postcss-short');
module.exports = config => reactAppRewirePostcss(config, {
plugins: () => [
postcssShort(/* pluginOptions */)
]
});
Add Gulp PostCSS to your project:
npm install gulp-postcss --save-dev
Use PostCSS Short in your Gulpfile:
const postcss = require('gulp-postcss');
const postcssShort = require('postcss-short');
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssShort(/* pluginOptions */)
])
).pipe(
gulp.dest('.')
));
Add Grunt PostCSS to your project:
npm install grunt-postcss --save-dev
Use PostCSS Short in your Gruntfile:
const postcssShort = require('postcss-short');
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssShort(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});