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

2.0.1 - August, 03 2019

• 8e37705 Chore: change rcs-core and postcss as peerDependency (JPeer264)

2.0.0 - December, 23 2018

• db97c07 Chore: upgrade dependencies (JPeer264)
• 0e58986 Chore: drop node v4 support (JPeer264)
• bc4778a Chore: update rcs-core (JPeer264)
• db51c35 1.0.0 (JPeer264)
• 6aea9e9 Docs: fix prefix/suffix description (JPeer264)
• 9757639 Docs: fix codeblock formatting (JPeer264)
• 2b6812e Docs: add coveralls badge (JPeer264)
• 0253002 Docs: add travis badge (JPeer264)
• 0a4d56f Docs: add documentation (JPeer264)
• fc12778 Initial commit (JPeer264)