silverwind/remap-css

Remap CSS rules based on declaration value

remap-css

Remap CSS rules based on declaration value

Usage

npm i remap-css

import remapCss from "remap-css";

const css = await remapCss([{
  css: `
    a {
      color: red;
    }
  `}
], {
  "color: red": "color: blue"
});
// a {
//   color: blue;
// }

API

remapCss(sources, mappings, [opts])

Returns a Promise that resolves to a CSS string.

• sources: Array Array of sources
  • source: Object
    • css: string A CSS string
    • prefix: string A CSS selector to be prefixed to all output rules
    • match: string A array of plain CSS selectors that prevent a prefix addition on exact match
    • name: string Optional name used in comments
• mappings: Object CSS declaration value-to-value mapping. The key is either a exact match CSS declaration or a special rule starting with $. The value is the a replacement declaration or a replacement value in the case of a special rule.
• options: Object
  • indentSize: number Numbers of spaces to indent rules and declarations. Default: 2.
  • indentCss: number Numbers of spaces to indent the output. Default: 0.
  • lineLength: number Number of characters after which to wrap lines. Default: 80.
  • ignoreSelectors: Array of RegExp Regular expressions of selectors to ignore. Default: [].
  • comments: boolean Whether to output comments. Default: false.
  • stylistic: boolean Whether to perform stylistic tweaks on selectors. Default: false.
  • validate: boolean Validate properties and discard ones that fail. Default: false.
  • keep: boolean Retain non-matching declarations in the output. Default: false.

These special mapping keys supported:

• $border: value: Any occurance of value in a border rule.
• $background: value Any occurance of value in a background rule.
• $box-shadow: value Any occurance of value in a box-shadow rule.
• $value: value: Any occurance of value.

On special rules, only specify the replacement value alone (not the whole declaration).

Related

• fetch-css - Extract CSS from websites and browser extensions

© silverwind, distributed under BSD licence

remap-css's Issues

Option to preserve non-matching rules in output CSS

Support emitting media queries

Media queries are currently stripped from the output, they should actually be emitted as-is instead which in turn will make the deviceType and deviceWidth options obsolete.

$box-shadow/$color special rule

To catch stuff like box-shadow: inset 1px 0 0 #fff;

Monochrome color special rule

I imagine it would be nice to have a special rule that processes monochrome colors and either outputs a pure inversion or a hue-saturation-modified variant.

{
  "$color: $monochrome": "$invert", // pure inversion
  "$color: $monochrome": "$hue(220) $saturate(50)", // shift color to blue
  "$background: $monochrome": "$invert", // pure inversion
  "$background: $monochrome": "$hue(220) $saturate(50)", // shift color to blue
}

If another user rule is present that matches the same value, the user rule should have precedence.

Don't remap `border: 1px solid`

StylishThemes/GitHub-Dark@5404b4f

https://github.com/sindresorhus/refined-github/blob/81742c3b35da9b9abb50ff51654281ce69b86f1b/source/features/recently-pushed-branches-enhancements.css

	border-color: currentColor !important;
	border-top: 1px solid !important;

Option to emit rules in original order

Rules are emitted in mappings order but in most cases it would actually be preferable to emit them in original stylesheet order. Should make a option for this.