INSTALL.md

Installing PostCSS Editor Styles

PostCSS Editor Styles runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Node

Add PostCSS Editor Styles to your project:

npm install postcss-editor-styles --save-dev

Use PostCSS Editor Styles to process your CSS:

const postcssEditorStyles = require("postcss-editor-styles");

postcssEditorStyles.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require("postcss");
const postcssEditorStyles = require("postcss-editor-styles");

postcss([postcssEditorStyles(/* pluginOptions */)]).process(
	YOUR_CSS /*, processOptions */
);

PostCSS CLI

Add PostCSS CLI to your project:

npm install postcss-cli --save-dev

Use PostCSS Editor Styles in your postcss.config.js configuration file:

const postcssEditorStyles = require("postcss-editor-styles");

module.exports = {
	plugins: [postcssEditorStyles(/* pluginOptions */)]
};

Webpack

Add PostCSS Loader to your project:

npm install postcss-loader --save-dev

Use PostCSS Editor Styles in your Webpack configuration:

const postcssEditorStyles = require("postcss-editor-styles");

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					"style-loader",
					{ loader: "css-loader", options: { importLoaders: 1 } },
					{
						loader: "postcss-loader",
						options: {
							ident: "postcss",
							plugins: () => [
								postcssEditorStyles(/* pluginOptions */)
							]
						}
					}
				]
			}
		]
	}
};

Create React App

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 Editor Styles in your config-overrides.js file:

const reactAppRewirePostcss = require("react-app-rewire-postcss");
const postcssEditorStyles = require("postcss-editor-styles");

module.exports = config =>
	reactAppRewirePostcss(config, {
		plugins: () => [postcssEditorStyles(/* pluginOptions */)]
	});

Gulp

Add Gulp PostCSS to your project:

npm install gulp-postcss --save-dev

Use PostCSS Editor Styles in your Gulpfile:

const postcss = require("gulp-postcss");
const postcssEditorStyles = require("postcss-editor-styles");

gulp.task("css", () =>
	gulp
		.src("./src/*.css")
		.pipe(postcss([postcssEditorStyles(/* pluginOptions */)]))
		.pipe(gulp.dest("."))
);

Grunt

Add Grunt PostCSS to your project:

npm install grunt-postcss --save-dev

Use PostCSS Editor Styles in your Gruntfile:

const postcssEditorStyles = require("postcss-editor-styles");

grunt.loadNpmTasks("grunt-postcss");

grunt.initConfig({
	postcss: {
		options: {
			use: [postcssEditorStyles(/* pluginOptions */)]
		},
		dist: {
			src: "*.css"
		}
	}
});