Skip to content

Commit a5ed3aa

Browse files
committed
fix tests, types and exported name
1 parent 56677aa commit a5ed3aa

File tree

8 files changed

+76
-50
lines changed

8 files changed

+76
-50
lines changed

README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ This example would result in this `tree`:
5959
},
6060
],
6161
},
62+
{
63+
name: '__anonymous-2__',
64+
locations: [{ line: 10, column: 3, start: 176, end: 185 }],
65+
children: [],
66+
},
6267
]
6368
```
6469

index.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ export type TreeNode = {
1313
locations: Location[];
1414
}
1515

16-
export function get_tree_from_ast(ast: CssNode): TreeNode['children'];
17-
export function get_tree(css: string): TreeNode['children'];
16+
export function layer_tree_from_ast(ast: CssNode): TreeNode[];
17+
export function layer_tree(css: string): TreeNode[];

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Discover the composition of your CSS @layers",
55
"repository": {
66
"type": "git",
7-
"url": "git+https://github.com/projectwallace/css-layers.git"
7+
"url": "git+https://github.com/projectwallace/css-layer-tree.git"
88
},
99
"homepage": "https://github.com/projectwallace/css-layer-tree",
1010
"issues": "https://github.com/projectwallace/css-layer-tree/issues",

src/TreeNode.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export class TreeNode {
77
/** @type {Map<string, TreeNode<T>>} */
88
this.children = new Map()
99
/** @type {T[]} */
10-
this.locations = [] // Store metadata for each location added
10+
this.locations = []
1111
}
1212

1313
/**
@@ -53,8 +53,7 @@ export class TreeNode {
5353
name: this.name,
5454
locations: this.locations,
5555
children: Array
56-
.from(this.children.values())
57-
.map((child) => child.to_plain_object()),
56+
.from(this.children.values(), (child) => child.to_plain_object())
5857
}
5958
}
6059
}

src/index.js

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,22 @@ function is_layer(node) {
2929
return node.name.toLowerCase() === 'layer'
3030
}
3131

32+
/**
33+
* @param {import('css-tree').AtrulePrelude} prelude
34+
* @returns {string[]}
35+
*/
36+
function get_layer_names(prelude) {
37+
return csstree
38+
// @todo: fewer loops plz
39+
.generate(prelude)
40+
.split('.')
41+
.map((s) => s.trim())
42+
}
43+
3244
/**
3345
* @param {import('css-tree').CssNode} ast
3446
*/
35-
export function get_tree_from_ast(ast) {
47+
export function layer_tree_from_ast(ast) {
3648
/** @type {string[]} */
3749
let current_stack = []
3850
let root = new TreeNode('root')
@@ -44,18 +56,6 @@ export function get_tree_from_ast(ast) {
4456
return `__anonymous-${anonymous_counter}__`
4557
}
4658

47-
/**
48-
* @param {import('css-tree').AtrulePrelude} prelude
49-
* @returns {string[]}
50-
*/
51-
function get_layer_names(prelude) {
52-
return csstree
53-
// @todo: fewer loops plz
54-
.generate(prelude)
55-
.split('.')
56-
.map((s) => s.trim())
57-
}
58-
5959
csstree.walk(ast, {
6060
visit: 'Atrule',
6161
enter(node) {
@@ -66,10 +66,7 @@ export function get_tree_from_ast(ast) {
6666
let layer_name = get_anonymous_id()
6767
root.add_child(current_stack, layer_name, location)
6868
current_stack.push(layer_name)
69-
return
70-
}
71-
72-
if (node.prelude.type === 'AtrulePrelude') {
69+
} else if (node.prelude.type === 'AtrulePrelude') {
7370
if (node.block === null) {
7471
// @ts-expect-error CSSTree types are not updated yet in @types/css-tree
7572
let prelude = csstree.findAll(node.prelude, n => n.type === 'Layer').map(n => n.name)
@@ -140,7 +137,7 @@ export function get_tree_from_ast(ast) {
140137
/**
141138
* @param {string} css
142139
*/
143-
export function get_tree(css) {
140+
export function layer_tree(css) {
144141
let ast = csstree.parse(css, {
145142
positions: true,
146143
parseAtrulePrelude: true,
@@ -149,5 +146,5 @@ export function get_tree(css) {
149146
parseCustomProperty: false,
150147
})
151148

152-
return get_tree_from_ast(ast)
149+
return layer_tree_from_ast(ast)
153150
}

test/global.spec.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import { test } from 'uvu'
22
import * as assert from 'uvu/assert'
3-
import { get_tree } from '../src/index.js'
3+
import { layer_tree } from '../src/index.js'
44

55
test('handles empty input', () => {
6-
assert.equal(get_tree(''), [])
6+
assert.equal(layer_tree(''), [])
77
})
88

99
test('handles CSS without layers', () => {
10-
assert.equal(get_tree('@media all { body { color: red; } }'), [])
10+
assert.equal(layer_tree('@media all { body { color: red; } }'), [])
1111
})
1212

1313
test('mixed imports and layers', () => {
14-
let actual = get_tree(`
14+
let actual = layer_tree(`
1515
@import url("test.css") layer;
1616
@import url("test.css") LAYER(test);
1717
@layer anotherTest {
1818
@layer moreTest {
1919
@layer deepTest {}
2020
}
21-
};
21+
}
2222
/* anonymous @layer */
2323
@layer {}
2424
`)
@@ -49,6 +49,11 @@ test('mixed imports and layers', () => {
4949
]
5050
}
5151
]
52+
},
53+
{
54+
name: '__anonymous-2__',
55+
locations: [{ line: 10, column: 3, start: 176, end: 185 }],
56+
children: []
5257
}
5358
]
5459
assert.equal(actual, expected)

test/import.spec.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { test } from 'uvu'
22
import * as assert from 'uvu/assert'
3-
import { get_tree } from '../src/index.js'
3+
import { layer_tree } from '../src/index.js'
44

55
test('@import url() layer', () => {
6-
let actual = get_tree('@import url("foo.css") layer;')
6+
let actual = layer_tree('@import url("foo.css") layer;')
77
let expected = [{
88
name: '__anonymous-1__',
99
locations: [{ line: 1, column: 1, start: 0, end: 29 }],
@@ -13,7 +13,7 @@ test('@import url() layer', () => {
1313
})
1414

1515
test('@import url() LAYER', () => {
16-
let actual = get_tree('@import url("foo.css") LAYER;')
16+
let actual = layer_tree('@import url("foo.css") LAYER;')
1717
let expected = [{
1818
"name": "__anonymous-1__",
1919
locations: [{ line: 1, column: 1, start: 0, end: 29 }],
@@ -23,7 +23,7 @@ test('@import url() LAYER', () => {
2323
})
2424

2525
test('@import url() layer()', () => {
26-
let actual = get_tree('@import url("foo.css") layer();')
26+
let actual = layer_tree('@import url("foo.css") layer();')
2727
let expected = [{
2828
name: '__anonymous-1__',
2929
locations: [{ line: 1, column: 1, start: 0, end: 31 }],
@@ -33,7 +33,7 @@ test('@import url() layer()', () => {
3333
})
3434

3535
test('@import url() LAYER()', () => {
36-
let actual = get_tree('@import url("foo.css") LAYER();')
36+
let actual = layer_tree('@import url("foo.css") LAYER();')
3737
let expected = [{
3838
name: '__anonymous-1__',
3939
locations: [{ line: 1, column: 1, start: 0, end: 31 }],
@@ -43,7 +43,7 @@ test('@import url() LAYER()', () => {
4343
})
4444

4545
test('@import url() layer(named)', () => {
46-
let actual = get_tree('@import url("foo.css") layer(named);')
46+
let actual = layer_tree('@import url("foo.css") layer(named);')
4747
let expected = [{
4848
name: 'named',
4949
locations: [{ line: 1, column: 1, start: 0, end: 36 }],
@@ -53,7 +53,7 @@ test('@import url() layer(named)', () => {
5353
})
5454

5555
test('@import url() LAYER(named)', () => {
56-
let actual = get_tree('@import url("foo.css") LAYER(named);')
56+
let actual = layer_tree('@import url("foo.css") LAYER(named);')
5757
let expected = [{
5858
name: 'named',
5959
locations: [{ line: 1, column: 1, start: 0, end: 36 }],
@@ -63,7 +63,7 @@ test('@import url() LAYER(named)', () => {
6363
})
6464

6565
test('@import url() layer(named.nested)', () => {
66-
let actual = get_tree('@import url("foo.css") layer(named.nested);')
66+
let actual = layer_tree('@import url("foo.css") layer(named.nested);')
6767
let expected = [{
6868
name: 'named',
6969
locations: [{ line: 1, column: 1, start: 0, end: 43 }],
@@ -77,7 +77,7 @@ test('@import url() layer(named.nested)', () => {
7777
})
7878

7979
test('@import url() layer(named.nested )', () => {
80-
let actual = get_tree('@import url("foo.css") layer(named.nested );')
80+
let actual = layer_tree('@import url("foo.css") layer(named.nested );')
8181
let expected = [{
8282
name: 'named',
8383
locations: [{ line: 1, column: 1, start: 0, end: 48 }],
@@ -91,7 +91,7 @@ test('@import url() layer(named.nested )', () => {
9191
})
9292

9393
test('@import url() layer(/* test */named.nested )', () => {
94-
let actual = get_tree('@import url("foo.css") layer(/* test */named.nested );')
94+
let actual = layer_tree('@import url("foo.css") layer(/* test */named.nested );')
9595
let expected = [{
9696
name: 'named',
9797
locations: [{ line: 1, column: 1, start: 0, end: 58 }],

test/layer.spec.js

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { test } from 'uvu'
22
import * as assert from 'uvu/assert'
3-
import { get_tree } from '../src/index.js'
3+
import { layer_tree } from '../src/index.js'
44

55
test('single anonymous layer without body', () => {
6-
let actual = get_tree('@layer;')
6+
let actual = layer_tree('@layer;')
77
let expected = [
88
{
99
name: '__anonymous-1__',
@@ -15,7 +15,7 @@ test('single anonymous layer without body', () => {
1515
})
1616

1717
test('single anonymous layer with body', () => {
18-
let actual = get_tree('@layer {}')
18+
let actual = layer_tree('@layer {}')
1919
let expected = [
2020
{
2121
name: '__anonymous-1__',
@@ -27,7 +27,7 @@ test('single anonymous layer with body', () => {
2727
})
2828

2929
test('single named layer without body', () => {
30-
let actual = get_tree('@layer first;')
30+
let actual = layer_tree('@layer first;')
3131
let expected = [
3232
{
3333
name: 'first',
@@ -39,7 +39,7 @@ test('single named layer without body', () => {
3939
})
4040

4141
test('single named layer with body', () => {
42-
let actual = get_tree('@layer first {}')
42+
let actual = layer_tree('@layer first {}')
4343
let expected = [
4444
{
4545
name: 'first',
@@ -51,7 +51,7 @@ test('single named layer with body', () => {
5151
})
5252

5353
test('multiple named layers in one line', () => {
54-
let actual = get_tree(`@layer first, second;`)
54+
let actual = layer_tree(`@layer first, second;`)
5555
let expected = [
5656
{
5757
name: 'first',
@@ -68,7 +68,7 @@ test('multiple named layers in one line', () => {
6868
})
6969

7070
test('repeated use of the same layer name', () => {
71-
let actual = get_tree(`
71+
let actual = layer_tree(`
7272
@layer first {}
7373
@layer first {}
7474
`)
@@ -86,7 +86,7 @@ test('repeated use of the same layer name', () => {
8686
})
8787

8888
test('nested layers', () => {
89-
let actual = get_tree(`
89+
let actual = layer_tree(`
9090
@layer first {
9191
@layer second {
9292
@layer third {}
@@ -123,7 +123,7 @@ test('nested layers', () => {
123123
})
124124

125125
test('nested layers with anonymous layers', () => {
126-
let actual = get_tree(`
126+
let actual = layer_tree(`
127127
@layer {
128128
@layer {}
129129
}
@@ -144,8 +144,28 @@ test('nested layers with anonymous layers', () => {
144144
assert.equal(actual, expected)
145145
})
146146

147+
test('consecutive anonymous layers', () => {
148+
let actual = layer_tree(`
149+
@layer {}
150+
@layer {}
151+
`)
152+
let expected = [
153+
{
154+
name: '__anonymous-1__',
155+
locations: [{ line: 2, column: 3, start: 3, end: 12 }],
156+
children: [],
157+
},
158+
{
159+
name: '__anonymous-2__',
160+
locations: [{ line: 3, column: 3, start: 15, end: 24 }],
161+
children: [],
162+
},
163+
]
164+
assert.equal(actual, expected)
165+
})
166+
147167
test('nested layers with anonymous layers and duplicate names', () => {
148-
let actual = get_tree(`
168+
let actual = layer_tree(`
149169
@layer {
150170
@layer first {}
151171
}

0 commit comments

Comments
 (0)