Skip to content
Remove your styles from the editors scope
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
index.js
package.json

README.md

PostCSS Editor Styles PostCSS

NPM Version Build Status Support Chat

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
You can’t perform that action at this time.