[6a3a178] | 1 | [![Build Status](https://travis-ci.org/css-modules/icss-utils.svg)](https://travis-ci.org/css-modules/icss-utils)
|
---|
| 2 |
|
---|
| 3 | # ICSS Utils
|
---|
| 4 |
|
---|
| 5 | ## replaceSymbols
|
---|
| 6 |
|
---|
| 7 | Governs the way tokens are searched & replaced during the linking stage of ICSS loading.
|
---|
| 8 |
|
---|
| 9 | This is broken into its own module in case the behaviour needs to be replicated in other PostCSS plugins
|
---|
| 10 | (i.e. [CSS Modules Values](https://github.com/css-modules/postcss-modules-values))
|
---|
| 11 |
|
---|
| 12 | ```js
|
---|
| 13 | import { replaceSymbols, replaceValueSymbols } from "icss-utils";
|
---|
| 14 |
|
---|
| 15 | replaceSymbols(css, replacements);
|
---|
| 16 | replaceValueSymbols(string, replacements);
|
---|
| 17 | ```
|
---|
| 18 |
|
---|
| 19 | Where:
|
---|
| 20 |
|
---|
| 21 | - `css` is the PostCSS tree you're working with
|
---|
| 22 | - `replacements` is an JS object of `symbol: "replacement"` pairs, where all occurrences of `symbol` are replaced with `replacement`.
|
---|
| 23 |
|
---|
| 24 | A symbol is a string of alphanumeric, `-` or `_` characters. A replacement can be any string. They are replaced in the following places:
|
---|
| 25 |
|
---|
| 26 | - In the value of a declaration, i.e. `color: my_symbol;` or `box-shadow: 0 0 blur spread shadow-color`
|
---|
| 27 | - In a media expression i.e. `@media small {}` or `@media screen and not-large {}`
|
---|
| 28 |
|
---|
| 29 | ## extractICSS(css, removeRules = true, mode = 'auto')
|
---|
| 30 |
|
---|
| 31 | Extracts and remove (if removeRules is equal true) from PostCSS tree `:import`, `@icss-import`, `:export` and `@icss-export` statements.
|
---|
| 32 |
|
---|
| 33 | ```js
|
---|
| 34 | import postcss from "postcss";
|
---|
| 35 | import { extractICSS } from "icss-utils";
|
---|
| 36 |
|
---|
| 37 | const css = postcss.parse(`
|
---|
| 38 | :import(colors) {
|
---|
| 39 | a: b;
|
---|
| 40 | }
|
---|
| 41 | :export {
|
---|
| 42 | c: d;
|
---|
| 43 | }
|
---|
| 44 | `);
|
---|
| 45 |
|
---|
| 46 | extractICSS(css);
|
---|
| 47 | /*
|
---|
| 48 | {
|
---|
| 49 | icssImports: {
|
---|
| 50 | colors: {
|
---|
| 51 | a: 'b'
|
---|
| 52 | }
|
---|
| 53 | },
|
---|
| 54 | icssExports: {
|
---|
| 55 | c: 'd'
|
---|
| 56 | }
|
---|
| 57 | }
|
---|
| 58 | */
|
---|
| 59 | ```
|
---|
| 60 |
|
---|
| 61 | By default both the pseudo and at-rule form of the import and export statements
|
---|
| 62 | will be removed. Pass the `mode` option to limit to only one type.
|
---|
| 63 |
|
---|
| 64 | ## createICSSRules(icssImports, icssExports, mode = 'rule')
|
---|
| 65 |
|
---|
| 66 | Converts icss imports and exports definitions to postcss ast
|
---|
| 67 |
|
---|
| 68 | ```js
|
---|
| 69 | createICSSRules(
|
---|
| 70 | {
|
---|
| 71 | colors: {
|
---|
| 72 | a: "b",
|
---|
| 73 | },
|
---|
| 74 | },
|
---|
| 75 | {
|
---|
| 76 | c: "d",
|
---|
| 77 | },
|
---|
| 78 | // Need pass `rule` and `decl` from postcss
|
---|
| 79 | // Please look at `Step 4` https://evilmartians.com/chronicles/postcss-8-plugin-migration
|
---|
| 80 | postcss
|
---|
| 81 | );
|
---|
| 82 | ```
|
---|
| 83 |
|
---|
| 84 | By default it will create pseudo selector rules (`:import` and `:export`). Pass
|
---|
| 85 | `at-rule` for `mode` to instead generate `@icss-import` and `@icss-export`, which
|
---|
| 86 | may be more resilient to post processing by other tools.
|
---|
| 87 |
|
---|
| 88 | ## License
|
---|
| 89 |
|
---|
| 90 | ISC
|
---|
| 91 |
|
---|
| 92 | ---
|
---|
| 93 |
|
---|
| 94 | Glen Maddern, Bogdan Chadkin and Evilebottnawi 2015-present.
|
---|