You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

94 lines
2.4 KiB

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