source: trip-planner-front/node_modules/icss-utils/README.md@ 571e0df

Last change on this file since 571e0df was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.4 KB
RevLine 
[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
7Governs the way tokens are searched & replaced during the linking stage of ICSS loading.
8
9This 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
13import { replaceSymbols, replaceValueSymbols } from "icss-utils";
14
15replaceSymbols(css, replacements);
16replaceValueSymbols(string, replacements);
17```
18
19Where:
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
24A 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
31Extracts and remove (if removeRules is equal true) from PostCSS tree `:import`, `@icss-import`, `:export` and `@icss-export` statements.
32
33```js
34import postcss from "postcss";
35import { extractICSS } from "icss-utils";
36
37const css = postcss.parse(`
38 :import(colors) {
39 a: b;
40 }
41 :export {
42 c: d;
43 }
44`);
45
46extractICSS(css);
47/*
48 {
49 icssImports: {
50 colors: {
51 a: 'b'
52 }
53 },
54 icssExports: {
55 c: 'd'
56 }
57 }
58*/
59```
60
61By default both the pseudo and at-rule form of the import and export statements
62will be removed. Pass the `mode` option to limit to only one type.
63
64## createICSSRules(icssImports, icssExports, mode = 'rule')
65
66Converts icss imports and exports definitions to postcss ast
67
68```js
69createICSSRules(
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
84By 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
86may be more resilient to post processing by other tools.
87
88## License
89
90ISC
91
92---
93
94Glen Maddern, Bogdan Chadkin and Evilebottnawi 2015-present.
Note: See TracBrowser for help on using the repository browser.