Skip to content

Commit 0784783

Browse files
authored
Readme + types (#2)
1 parent c56289f commit 0784783

File tree

6 files changed

+135
-875
lines changed

6 files changed

+135
-875
lines changed

README.md

+66-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,68 @@
1-
# CSS Layers
1+
# css-layer-tree
22

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

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)

index.d.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { type CssNode } from "css-tree";
2+
3+
export type Location = {
4+
line: number;
5+
column: number;
6+
start: number;
7+
end: number;
8+
}
9+
10+
export type TreeNode = {
11+
name: string;
12+
children: TreeNode[];
13+
locations: Location[];
14+
}
15+
16+
export function get_tree_from_ast(ast: CssNode): TreeNode['children'];
17+
export function get_tree(css: string): TreeNode['children'];

0 commit comments

Comments
 (0)