postcss-rcs

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
• ignoreAttributeSelectors
• prefix
• suffix

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