PostCSS Editor Styles

PostCSS Editor Styles lets you do this in CSS.

:root {           /* ignored */
  --color-text: #24292e;
}

html {            /* removed */
  font-family: sans-serif;
}

body {            /* replaced */
  color: var(--color-text);
}

button {          /* scoped and negated */
  min-height: 1.5rem;
}

.block-heading {  /* scoped */
  background-color: #eee;
}

/* becomes */

:root {
  --color-text: #24292e;
}

.editor-styles-wrapper {
  color: var(--color-text);
}

.editor-styles-wrapper button:not([class^="components-"]):not([class^="editor-"]):not([class^="block-"]):not([aria-owns]) {
  min-height: 1.5rem;
}

.editor-styles-wrapper .block-heading {
  background-color: #eee;
}

Usage

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 */
);

Options

defaults:

// The selector we're working within.
scopeTo: '.editor-styles-wrapper',

// Increase specificity by repeating the selector.
repeat: 1,

remove: ['html'],

replace: ['body'],

ignore: [':root'],

tags: ['a', 'button', 'input', 'label', 'select', 'textarea', 'form'],

tagSuffix: ':not([class^="components-"]):not([class^="editor-"]):not([class^="block-"]):not([aria-owns])'

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

| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | ----------------------- | ------------------------------------- | ----------------------------- | ----------------------------------------------- | ----------------------- | ------------------------- |