Skip to content
The postcss plugin for rcs-core
JavaScript
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.
.babelrc
.eslintrc.json
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json
test.js
yarn.lock

README.md

postcss-rcs

Build Status Coverage Status

The PostCSS plugin for rcs-core

Installation

$ npm i postcss-rcs -S

or

$ yarm add postcss-rcs

Usage

postcss([ require('postcss-rcs') ])

See PostCSS docs for examples for your environment.

What does it do

@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:

@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:

postcss([ require('postcss-simple-vars')({ replaceKeyframes: true }) ])

replaceKeyframes

Replaces animation and animation-name if a specific @keyframes is set.

Type: boolean

Default: false

Example:

// { replaceKeyframes: true }
@keyframes move {
  from {}
  to {}
}

.selector {
  animation: move 4s infinite;
  animation-name: move;
}

will be processed to:

// { 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 }

.move[class$="lector"] {}
.selector {}

will be process to:

.a[class$="lector"] {}
.selector {}

{ ignoreAttributeSelectors: true }

.move[class$="lector"] {}
.selector {}

will be process to:

.a[class$="lector"] {}
.b {}

prefix

Prefixes every selectors and attribute selectors (if ignoreAttributeSelectors is false).

Type: string

Default: ''

Example:

// { ignoreAttributeSelectors: false, prefix: 'pre-' }
.move[class^="sel"] {}
.selector {}

will be process to:

// { 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:

// { ignoreAttributeSelectors: false, suffix: '-suf' }
.move[class$="lector"] {}
.selector {}

will be process to:

// { ignoreAttributeSelectors: false, suffix: '-suf' }
.a-suf[class$="lector-suf"] {}
.selector-suf {}
You can’t perform that action at this time.