Rewrite Selector At Rule - tomhodgins/process-css-demo GitHub Wiki

A custom at rule that rewrites all of the selectors of top-level rules for the CSS added inside of it.

Syntax

@--rewrite-selector <function list> { <list of css rules> }

• <function list> is one or more of the following in a comma-separated list: prefix(), suffix(), replace()

Usage

prefix()

This function takes a CSS selector and prefixes it to the start of the existing CSS selectors is finds.

@--rewrite-selector prefix(.one) {
  .two {}
}

.one.two {}

suffix()

This function takes a CSS selector an affixes the selector onto the end of any CSS selector it finds:

@--rewrite-selector suffix(.two) {
  .one {}
}

.one.two {}

replace()

This function takes two strings, a regular expression pattern, and a replacement string and it will create a new regular expression from the first string, and use the second string as the replacement string.

@--rewrite-selector replace('old-theme-name', 'new-theme-name') {
  .old-theme-name nav {}
}

.new-theme-name nav {}