JSPM

@projectwallace/css-layer-tree

2.0.0-alpha.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 55
  • Score
    100M100P100Q71302F
  • License MIT

Discover the composition of your CSS @layers in a tree-based format.

Package Exports

  • @projectwallace/css-layer-tree

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

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:

;[
    {
        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: [],
    },
]