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.
|
---|