Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/m-e-h/postcss-editor-styles
Remove your styles from the editors scope
https://github.com/m-e-h/postcss-editor-styles
Last synced: about 2 months ago
JSON representation
Remove your styles from the editors scope
- Host: GitHub
- URL: https://github.com/m-e-h/postcss-editor-styles
- Owner: m-e-h
- License: gpl-2.0
- Created: 2018-10-05T21:50:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-07T21:49:19.000Z (7 months ago)
- Last Synced: 2024-07-19T05:18:29.771Z (2 months ago)
- Language: CSS
- Homepage:
- Size: 45.9 KB
- Stars: 21
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostCSS Editor Styles [
][postcss]
[![NPM Version][npm-img]][npm-url]
PostCSS Editor Styles lets you do this in CSS.
```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:
```bash
npm install postcss-editor-styles --save-dev
```
Use PostCSS Editor Styles to process your CSS:
```js
const postcssEditorStyles = require("postcss-editor-styles");
postcssEditorStyles.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
Or use it as a [PostCSS] plugin:
```js
const postcss = require("postcss");
const postcssEditorStyles = require("postcss-editor-styles");
postcss([postcssEditorStyles(/* pluginOptions */)]).process(
YOUR_CSS /*, processOptions */
);
```
## Options
defaults:
```js
// 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](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| ----------------------- | ------------------------------------- | ----------------------------- | ----------------------------------------------- | ----------------------- | ------------------------- |
[npm-img]: https://img.shields.io/npm/v/postcss-editor-styles.svg
[npm-url]: https://www.npmjs.com/package/postcss-editor-styles
[postcss]: https://github.com/postcss/postcss