remap-css

3.0.0 • Public • Published

remap-css

Remap CSS rules based on declaration value

Usage

npm i remap-css
const remapCss = require("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
  • 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 corresponding replacement declaration or a color in the case of a special rule.
  • options: Object
    • indentDeclaration: number Numbers of spaces to indent declarations. Default: 2.
    • indentCss: number Numbers of spaces to indent the output CSS. 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: [].
    • limitSpecial: number Maximum amount of iteration per special mappings. Default: 25.
    • deviceType: string CSS media query device type to match. Default: "screen".
    • deviceWidth: "string" CSS media query device width to match. Default: "1024px".
    • comments: boolean Whether to output comments. Default: false.
    • stylistic: boolean Whether to perform stylistic tweaks on selectors. Default: false.
    • order: string Ordering of the output CSS rules. Either mappings or source. Default: "mappings".
    • combine: boolean Whether to combine CSS rules with the same declarations. Default: true.

There are special mapping keys supported to reduce the need for similar border and background rules:

  • $border: value: Variations of border-colors
  • $background: value Variations of background-colors

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

Related

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

© silverwind, distributed under BSD licence

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
7.0.546latest

Version History

VersionDownloads (Last 7 Days)Published
7.0.546
7.0.40
7.0.30
7.0.20
7.0.10
7.0.00
6.0.10
6.0.00
5.0.130
5.0.120
5.0.110
5.0.100
5.0.90
5.0.80
5.0.70
5.0.60
5.0.50
5.0.40
5.0.31
5.0.20
5.0.10
5.0.00
4.11.50
4.11.40
4.11.30
4.11.20
4.11.10
4.11.00
4.10.00
4.9.20
4.9.10
4.9.00
4.8.40
4.8.30
4.8.20
4.8.10
4.8.00
4.7.30
4.7.20
4.7.10
4.7.00
4.6.00
4.5.60
4.5.50
4.5.40
4.5.30
4.5.20
4.5.10
4.5.00
4.4.10
4.4.00
4.3.30
4.3.20
4.3.10
4.3.00
4.2.00
4.1.00
4.0.80
4.0.70
4.0.60
4.0.50
4.0.40
4.0.30
4.0.20
4.0.10
4.0.00
3.0.10
3.0.00
2.3.20
2.3.10
2.3.00
2.2.20
2.1.20
2.1.10
2.1.00
2.0.90
2.0.80
2.0.70
2.0.60
2.0.50
2.0.40
2.0.30
2.0.20
2.0.10
2.0.00
1.0.00

Package Sidebar

Install

npm i remap-css@3.0.0

Version

3.0.0

License

BSD-2-Clause

Unpacked Size

15.8 kB

Total Files

4

Last publish

Collaborators

  • silverwind