|
1 |
| -# CSS Layers |
| 1 | +# css-layer-tree |
2 | 2 |
|
3 |
| -Discover the composition of your CSS `@layer`s |
| 3 | +Lay out the composition of your CSS `@layer` architecture. See which layers are used, where they are defined and how they are nested. |
4 | 4 |
|
5 |
| -WORK IN PROGRESS | CHECK BACK SOON |
| 5 | +## Installation |
| 6 | + |
| 7 | +``` |
| 8 | +npm install @projectwallace/css-layer-tree |
| 9 | +``` |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +```js |
| 14 | +import { get_tree } from '@projectwallace/css-layer-tree' |
| 15 | + |
| 16 | +let css = ` |
| 17 | +@import url("test.css") layer; |
| 18 | +@import url("test.css") LAYER(test); |
| 19 | +@layer anotherTest { |
| 20 | + @layer moreTest { |
| 21 | + @layer deepTest {} |
| 22 | + } |
| 23 | +}; |
| 24 | +/* anonymous @layer */ |
| 25 | +@layer {} |
| 26 | +` |
| 27 | + |
| 28 | +let tree = get_tree(css) |
| 29 | +``` |
| 30 | + |
| 31 | +This example would result in this `tree`: |
| 32 | + |
| 33 | +```js |
| 34 | +;[ |
| 35 | + { |
| 36 | + name: '__anonymous-1__', |
| 37 | + locations: [{ line: 2, column: 3, start: 3, end: 33 }], |
| 38 | + children: [], |
| 39 | + }, |
| 40 | + { |
| 41 | + name: 'test', |
| 42 | + locations: [{ line: 3, column: 3, start: 36, end: 72 }], |
| 43 | + children: [], |
| 44 | + }, |
| 45 | + { |
| 46 | + name: 'anotherTest', |
| 47 | + locations: [{ line: 4, column: 3, start: 75, end: 148 }], |
| 48 | + children: [ |
| 49 | + { |
| 50 | + name: 'moreTest', |
| 51 | + locations: [{ line: 5, column: 4, start: 99, end: 144 }], |
| 52 | + children: [ |
| 53 | + { |
| 54 | + name: 'deepTest', |
| 55 | + locations: [{ line: 6, column: 5, start: 121, end: 139 }], |
| 56 | + children: [], |
| 57 | + }, |
| 58 | + ], |
| 59 | + }, |
| 60 | + ], |
| 61 | + }, |
| 62 | +] |
| 63 | +``` |
| 64 | + |
| 65 | +## Related projects |
| 66 | + |
| 67 | +- [Online CSS Layers visualizer](https://www.projectwallace.com/css-layers-visualizer) - See this library in action online! |
| 68 | +- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) - The best CSS analyzer that powers all analysis on [projectwallace.com](https://www.projectwallace.com) |
0 commit comments