Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpeer264/postcss-rcs
The postcss plugin for rcs-core
https://github.com/jpeer264/postcss-rcs
css minify postcss postcss-plugin rcs rename
Last synced: about 8 hours ago
JSON representation
The postcss plugin for rcs-core
- Host: GitHub
- URL: https://github.com/jpeer264/postcss-rcs
- Owner: JPeer264
- License: mit
- Created: 2017-05-25T20:55:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T17:46:50.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T22:14:31.783Z (7 months ago)
- Topics: css, minify, postcss, postcss-plugin, rcs, rename
- Language: JavaScript
- Homepage:
- Size: 706 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-rcs
[](https://travis-ci.org/JPeer264/postcss-rcs)
[](https://coveralls.io/github/JPeer264/postcss-rcs?branch=master)
> The PostCSS plugin for [rcs-core](https://github.com/JPeer264/node-rcs-core)
## Installation
```sh
$ npm i postcss-rcs -S
```
or
```sh
$ yarm add postcss-rcs
```
## Usage
```js
postcss([ require('postcss-rcs') ])
```
See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment.
## What does it do
```css
@keyframes move {
from {}
to {}
}
@media screen and (min-width: 480px) {
.selector {
background-color: lightgreen;
animation: move 4s infinite;
animation-name: move;
}
}
.main.selector {
border: 1px solid black;
}
ul li {
padding: 5px;
}
```
will be processed to:
```css
@keyframes move {
from {}
to {}
}
@media screen and (min-width: 480px) {
.a {
background-color: lightgreen;
animation: move 4s infinite;
animation-name: move;
}
}
.b.a {
border: 1px solid black;
}
ul li {
padding: 5px;
}
```
## Options
Call the plugin to set options:
```js
postcss([ require('postcss-simple-vars')({ replaceKeyframes: true }) ])
```
- [replaceKeyframes](#replacekeyframes)
- [ignoreAttributeSelectors](#ignoreattributeselectors)
- [prefix](#prefix)
- [suffix](#suffix)
### replaceKeyframes
Replaces `animation` and `animation-name` if a specific `@keyframes` is set.
Type: `boolean`
Default: `false`
Example:
```css
// { replaceKeyframes: true }
@keyframes move {
from {}
to {}
}
.selector {
animation: move 4s infinite;
animation-name: move;
}
```
will be processed to:
```css
// { replaceKeyframes: true }
@keyframes a {
from {}
to {}
}
.b {
animation: a 4s infinite;
animation-name: a;
}
```
### ignoreAttributeSelectors
If set to `true` it does not care about attribute selectors. If set to `false` the attribute selector `[class$="lector"]` will not rename `.selector` as it the class ends with `lector`.
Type: `boolean`
Default: `false`
Example:
**{ ignoreAttributeSelectors: false }**
```css
.move[class$="lector"] {}
.selector {}
```
will be process to:
```css
.a[class$="lector"] {}
.selector {}
```
**{ ignoreAttributeSelectors: true }**
```css
.move[class$="lector"] {}
.selector {}
```
will be process to:
```css
.a[class$="lector"] {}
.b {}
```
### prefix
Prefixes every selectors and attribute selectors (if `ignoreAttributeSelectors` is `false`).
Type: `string`
Default: `''`
Example:
```css
// { ignoreAttributeSelectors: false, prefix: 'pre-' }
.move[class^="sel"] {}
.selector {}
```
will be process to:
```css
// { ignoreAttributeSelectors: false, prefix: 'pre-' }
.pre-a[class^="pre-sel"] {}
.pre-selector {}
```
### suffix
Suffixes every selectors and attribute selectors (if `ignoreAttributeSelectors` is `false`).
Type: `string`
Default: `''`
Example:
```css
// { ignoreAttributeSelectors: false, suffix: '-suf' }
.move[class$="lector"] {}
.selector {}
```
will be process to:
```css
// { ignoreAttributeSelectors: false, suffix: '-suf' }
.a-suf[class$="lector-suf"] {}
.selector-suf {}
```