https://github.com/projectwallace/css-layer-tree
Discover the composition of your CSS @layers
https://github.com/projectwallace/css-layer-tree
architecture composition css layer
Last synced: 3 months ago
JSON representation
Discover the composition of your CSS @layers
- Host: GitHub
- URL: https://github.com/projectwallace/css-layer-tree
- Owner: projectwallace
- License: mit
- Created: 2024-11-10T08:36:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-29T13:17:42.000Z (about 1 year ago)
- Last Synced: 2025-01-04T15:29:52.986Z (12 months ago)
- Topics: architecture, composition, css, layer
- Language: JavaScript
- Homepage: https://www.projectwallace.com/css-layers-visualizer
- Size: 141 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-layer-tree
Lay out the composition of your CSS `@layer` architecture. See which layers are used, where they are defined and how they are nested.
## Installation
```
npm install @projectwallace/css-layer-tree
```
## Usage
```js
import { layer_tree } from '@projectwallace/css-layer-tree'
let css = `
@import url("test.css") layer;
@import url("test.css") LAYER(test);
@layer anotherTest {
@layer moreTest {
@layer deepTest {}
}
};
/* anonymous @layer */
@layer {}
`
let tree = layer_tree(css)
```
This example would result in this `tree`:
```js
;[
{
name: '__anonymous-1__',
locations: [{ line: 2, column: 3, start: 3, end: 33 }],
children: [],
},
{
name: 'test',
locations: [{ line: 3, column: 3, start: 36, end: 72 }],
children: [],
},
{
name: 'anotherTest',
locations: [{ line: 4, column: 3, start: 75, end: 148 }],
children: [
{
name: 'moreTest',
locations: [{ line: 5, column: 4, start: 99, end: 144 }],
children: [
{
name: 'deepTest',
locations: [{ line: 6, column: 5, start: 121, end: 139 }],
children: [],
},
],
},
],
},
{
name: '__anonymous-2__',
locations: [{ line: 10, column: 3, start: 176, end: 185 }],
children: [],
},
]
```
## Related projects
- [Online CSS Layers visualizer](https://www.projectwallace.com/css-layers-visualizer) - See this library in action online!
- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) - The best CSS analyzer that powers all analysis on [projectwallace.com](https://www.projectwallace.com)