Discover the composition of your CSS @layers in a tree-based format.
npm install @projectwallace/css-layer-treeLay out the composition of your CSS @layer architecture. See which layers are used, where they are defined and how they are nested.
``
npm install @projectwallace/css-layer-tree
`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: [],
},
]
- Online CSS Layers visualizer - See this library in action online!
- CSS Analyzer - The best CSS analyzer that powers all analysis on projectwallace.com