Skip to content

Commit 1ec6ade

Browse files
bartvenemanbartveneman
committed
fix implementation 😅
1 parent 5dc5de0 commit 1ec6ade

File tree

3 files changed

+209
-19
lines changed

3 files changed

+209
-19
lines changed

‎src/index.js

+79-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,61 @@
11
import * as csstree from 'css-tree'
22

3+
/**
4+
* @typedef {Object} LayerTree
5+
* @property {string} name
6+
* @property {LayerTree[]} children
7+
*/
8+
9+
class List {
10+
/** @type {string} */
11+
name
12+
/** @type {List[]} */
13+
children
14+
15+
/**
16+
* @param {string | undefined} name
17+
*/
18+
constructor(name = undefined) {
19+
this.name = name || 'root'
20+
this.children = []
21+
}
22+
23+
/** @param {string} name */
24+
has(name) {
25+
for (let child of this.children) {
26+
if (child.name === name) {
27+
return true
28+
}
29+
}
30+
return false
31+
}
32+
33+
/**
34+
*
35+
* @param {string} name
36+
* @returns
37+
*/
38+
push(name) {
39+
if (this.has(name) && name !== '<anonymous>') {
40+
return this.children.find((child) => child.name === name)
41+
}
42+
43+
let new_item = new List(name)
44+
this.children.push(new_item)
45+
return new_item
46+
}
47+
48+
/**
49+
* @returns {LayerTree}
50+
*/
51+
serialize() {
52+
return {
53+
name: this.name,
54+
children: this.children.map((child) => child.serialize()),
55+
}
56+
}
57+
}
58+
359
/**
460
* Get the parent Atrule for `childNode`
561
* @param {import('css-tree').CssNode} ast The AST to search in
@@ -113,7 +169,7 @@ export function get_ast_tree(ast) {
113169

114170
/**
115171
* @param {string} css
116-
* @returns {string[][]}
172+
* @returns {LayerTree[]}
117173
*/
118174
export function get_tree(css) {
119175
let ast = csstree.parse(css, {
@@ -123,5 +179,26 @@ export function get_tree(css) {
123179
parseValue: false,
124180
parseCustomProperty: false,
125181
})
126-
return get_ast_tree(ast)
182+
let list_of_layers = get_ast_tree(ast).map((layer) => layer.join('.'))
183+
184+
let known = new List()
185+
186+
for (let name of list_of_layers) {
187+
if (name.includes('.')) {
188+
let parts = name.split('.')
189+
// @ts-expect-error Let me just do a while loop plz
190+
let last_item = known.push(parts.shift())
191+
192+
while (parts.length > 0 && last_item) {
193+
// @ts-expect-error Let me just do a while loop plz
194+
last_item = last_item.push(parts.shift())
195+
}
196+
197+
continue
198+
}
199+
200+
known.push(name)
201+
}
202+
203+
return known.children.map((child) => child.serialize())
127204
}

‎test/import.spec.js

+47-9
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,93 @@ import { get_tree } from '../src/index.js'
44

55
test('@import url() layer', () => {
66
let actual = get_tree('@import url("foo.css") layer;')
7-
let expected = [['<anonymous>']]
7+
let expected = [
8+
{
9+
name: '<anonymous>',
10+
children: []
11+
}
12+
]
813
assert.equal(actual, expected)
914
})
1015

1116
test('@import url() LAYER', () => {
1217
let actual = get_tree('@import url("foo.css") LAYER;')
13-
let expected = [['<anonymous>']]
18+
let expected = [{
19+
"name": "<anonymous>",
20+
"children": []
21+
}]
1422
assert.equal(actual, expected)
1523
})
1624

1725
test('@import url() layer()', () => {
1826
let actual = get_tree('@import url("foo.css") layer();')
19-
let expected = [['<anonymous>']]
27+
let expected = [{
28+
name: '<anonymous>',
29+
children: []
30+
}]
2031
assert.equal(actual, expected)
2132
})
2233

2334
test('@import url() LAYER()', () => {
2435
let actual = get_tree('@import url("foo.css") LAYER();')
25-
let expected = [['<anonymous>']]
36+
let expected = [{
37+
name: '<anonymous>',
38+
children: []
39+
}]
2640
assert.equal(actual, expected)
2741
})
2842

2943
test('@import url() layer(named)', () => {
3044
let actual = get_tree('@import url("foo.css") layer(named);')
31-
let expected = [['named']]
45+
let expected = [{
46+
name: 'named',
47+
children: []
48+
}]
3249
assert.equal(actual, expected)
3350
})
3451

3552
test('@import url() LAYER(named)', () => {
3653
let actual = get_tree('@import url("foo.css") LAYER(named);')
37-
let expected = [['named']]
54+
let expected = [{
55+
name: 'named',
56+
children: []
57+
}]
3858
assert.equal(actual, expected)
3959
})
4060

4161
test('@import url() layer(named.nested)', () => {
4262
let actual = get_tree('@import url("foo.css") layer(named.nested);')
43-
let expected = [['named.nested']]
63+
let expected = [{
64+
name: 'named',
65+
children: [{
66+
name: 'nested',
67+
children: []
68+
}]
69+
}]
4470
assert.equal(actual, expected)
4571
})
4672

4773
test('@import url() layer(named.nested )', () => {
4874
let actual = get_tree('@import url("foo.css") layer(named.nested );')
49-
let expected = [['named.nested']]
75+
let expected = [{
76+
name: 'named',
77+
children: [{
78+
name: 'nested',
79+
children: []
80+
}]
81+
}]
5082
assert.equal(actual, expected)
5183
})
5284

5385
test('@import url() layer(/* test */named.nested)', () => {
5486
let actual = get_tree('@import url("foo.css") layer(/* test */named.nested );')
55-
let expected = [['named.nested']]
87+
let expected = [{
88+
name: 'named',
89+
children: [{
90+
name: 'nested',
91+
children: []
92+
}]
93+
}]
5694
assert.equal(actual, expected)
5795
})
5896

‎test/layer.spec.js

+83-8
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,62 @@ import { test } from 'uvu'
22
import * as assert from 'uvu/assert'
33
import { get_tree } from '../src/index.js'
44

5+
test('single anonymous layer without body', () => {
6+
let actual = get_tree('@layer;')
7+
let expected = [
8+
{
9+
name: '<anonymous>',
10+
children: [],
11+
},
12+
]
13+
assert.equal(actual, expected)
14+
})
15+
16+
test('single anonymous layer with body', () => {
17+
let actual = get_tree('@layer {}')
18+
let expected = [
19+
{
20+
name: '<anonymous>',
21+
children: [],
22+
},
23+
]
24+
assert.equal(actual, expected)
25+
})
26+
527
test('single named layer without body', () => {
628
let actual = get_tree('@layer first;')
7-
let expected = [['first']]
29+
let expected = [
30+
{
31+
name: 'first',
32+
children: [],
33+
},
34+
]
835
assert.equal(actual, expected)
936
})
1037

1138
test('single named layer with body', () => {
1239
let actual = get_tree('@layer first {}')
13-
let expected = [['first']]
40+
let expected = [
41+
{
42+
name: 'first',
43+
children: [],
44+
},
45+
]
1446
assert.equal(actual, expected)
1547
})
1648

1749
test('multiple named layers in one line', () => {
1850
let actual = get_tree('@layer first, second;')
19-
let expected = [['first'], ['second']]
51+
let expected = [
52+
{
53+
name: 'first',
54+
children: [],
55+
},
56+
{
57+
name: 'second',
58+
children: [],
59+
},
60+
]
2061
assert.equal(actual, expected)
2162
})
2263

@@ -26,29 +67,63 @@ test('nested layers', () => {
2667
@layer second {}
2768
}
2869
`)
29-
let expected = [['first'], ['first', 'second']]
70+
let expected = [
71+
{
72+
name: 'first',
73+
children: [
74+
{
75+
name: 'second',
76+
children: [],
77+
},
78+
],
79+
},
80+
]
3081
assert.equal(actual, expected)
3182
})
3283

33-
test('nested layers with anonymous layers', () => {
84+
test.skip('nested layers with anonymous layers', () => {
3485
let actual = get_tree(`
3586
@layer {
3687
@layer {}
3788
}
3889
`)
39-
let expected = [['<anonymous>'], ['<anonymous>', '<anonymous>']]
90+
let expected = [
91+
{
92+
name: '<anonymous>',
93+
children: [
94+
{
95+
name: '<anonymous>',
96+
children: [],
97+
},
98+
],
99+
},
100+
]
40101
assert.equal(actual, expected)
41102
})
42103

43-
test('nested layers with anonymous layers and duplicate names', () => {
104+
test.skip('nested layers with anonymous layers and duplicate names', () => {
44105
let actual = get_tree(`
45106
@layer {
46107
@layer first {}
47108
}
48109
49110
@layer first {}
50111
`)
51-
let expected = [['<anonymous>'], ['<anonymous>', 'first'], ['first']]
112+
let expected = [
113+
{
114+
name: '<anonymous>',
115+
children: [
116+
{
117+
name: 'first',
118+
children: [],
119+
}
120+
],
121+
},
122+
{
123+
name: 'first',
124+
children: [],
125+
},
126+
]
52127
assert.equal(actual, expected)
53128
})
54129

0 commit comments

Comments
 (0)