Skip to content

Commit 9238e00

Browse files
brc-ddbrc-dd
committed
test: add postcssIsolateStyles snapshots
1 parent 0944777 commit 9238e00

File tree

2 files changed

+160
-17
lines changed

2 files changed

+160
-17
lines changed

‎__tests__/unit/node/postcss/__snapshots__/isolateStyles.test.ts.snap‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`node/postcss/isolateStyles > transforms selectors and skips keyframes 1`] = `
4+
"
5+
/* simple classes */
6+
.example:not(:where(.vp-raw, .vp-raw *)) { color: red; }
7+
.class-a:not(:where(.vp-raw, .vp-raw *)) { color: coral; }
8+
.class-b:not(:where(.vp-raw, .vp-raw *)) { color: deepskyblue; }
9+
10+
/* escaped colon in class */
11+
.baz\\:not\\(.bar\\):not(:where(.vp-raw, .vp-raw *)) { display: block; }
12+
.disabled\\:opacity-50:not(:where(.vp-raw, .vp-raw *)):disabled { opacity: .5; }
13+
14+
/* pseudos (class + element) */
15+
.button:not(:where(.vp-raw, .vp-raw *)):hover { color: pink; }
16+
.button:not(:where(.vp-raw, .vp-raw *)):focus:hover { color: hotpink; }
17+
.item:not(:where(.vp-raw, .vp-raw *))::before { content: '•'; }
18+
:not(:where(.vp-raw, .vp-raw *))::first-letter { color: pink; }
19+
:not(:where(.vp-raw, .vp-raw *))::before { content: ''; }
20+
21+
/* universal + :not */
22+
*:not(:where(.vp-raw, .vp-raw *)) { background-color: red; }
23+
*:not(:where(.vp-raw, .vp-raw *)):not(.b) { text-transform: uppercase; }
24+
25+
/* combinators */
26+
.foo:hover .bar:not(:where(.vp-raw, .vp-raw *)) { background: blue; }
27+
ul > li.active:not(:where(.vp-raw, .vp-raw *)) { color: green; }
28+
a + b ~ c:not(:where(.vp-raw, .vp-raw *)) { color: orange; }
29+
30+
/* ids + attribute selectors */
31+
#wow:not(:where(.vp-raw, .vp-raw *)) { color: yellow; }
32+
[data-world] .d:not(:where(.vp-raw, .vp-raw *)) { padding: 10px 20px; }
33+
34+
/* :root and chained tags */
35+
:not(:where(.vp-raw, .vp-raw *)):root { --bs-blue: #0d6efd; }
36+
:root .a:not(:where(.vp-raw, .vp-raw *)) { --bs-green: #bada55; }
37+
html:not(:where(.vp-raw, .vp-raw *)) { margin: 0; }
38+
body:not(:where(.vp-raw, .vp-raw *)) { padding: 0; }
39+
html body div:not(:where(.vp-raw, .vp-raw *)) { color: blue; }
40+
41+
/* grouping with commas */
42+
.a:not(:where(.vp-raw, .vp-raw *)), .b:not(:where(.vp-raw, .vp-raw *)) { color: red; }
43+
44+
/* multiple repeated groups to ensure stability */
45+
.a:not(:where(.vp-raw, .vp-raw *)), .b:not(:where(.vp-raw, .vp-raw *)) { color: coral; }
46+
.a:not(:where(.vp-raw, .vp-raw *)) { animation: glow 1s linear infinite alternate; }
47+
48+
/* nested blocks */
49+
.foo:not(:where(.vp-raw, .vp-raw *)) {
50+
svg:not(:where(.vp-raw, .vp-raw *)) { display: none; }
51+
.bar:not(:where(.vp-raw, .vp-raw *)) { display: inline; }
52+
}
53+
54+
/* standalone pseudos */
55+
:not(:where(.vp-raw, .vp-raw *)):first-child { color: pink; }
56+
:not(:where(.vp-raw, .vp-raw *)):hover { color: blue; }
57+
:not(:where(.vp-raw, .vp-raw *)):active { color: red; }
58+
59+
/* keyframes (should be ignored) */
60+
@keyframes fade {
61+
from { opacity: 0; }
62+
to { opacity: 1; }
63+
}
64+
@-webkit-keyframes glow {
65+
from { color: coral; }
66+
to { color: red; }
67+
}
68+
@-moz-keyframes glow {
69+
from { color: coral; }
70+
to { color: red; }
71+
}
72+
@-o-keyframes glow {
73+
from { color: coral; }
74+
to { color: red; }
75+
}
76+
"
77+
`;

‎__tests__/unit/node/postcss/isolateStyles.test.ts‎

Lines changed: 83 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,93 @@
11
import { postcssIsolateStyles } from 'node/postcss/isolateStyles'
22
import postcss from 'postcss'
33

4-
function apply(selector: string) {
5-
const { root } = postcss([postcssIsolateStyles()]).process(`${selector} {}`)
6-
return (root.nodes[0] as any).selector
4+
const INPUT_CSS = `
5+
/* simple classes */
6+
.example { color: red; }
7+
.class-a { color: coral; }
8+
.class-b { color: deepskyblue; }
9+
10+
/* escaped colon in class */
11+
.baz\\:not\\(.bar\\) { display: block; }
12+
.disabled\\:opacity-50:disabled { opacity: .5; }
13+
14+
/* pseudos (class + element) */
15+
.button:hover { color: pink; }
16+
.button:focus:hover { color: hotpink; }
17+
.item::before { content: '•'; }
18+
::first-letter { color: pink; }
19+
::before { content: ''; }
20+
21+
/* universal + :not */
22+
* { background-color: red; }
23+
*:not(.b) { text-transform: uppercase; }
24+
25+
/* combinators */
26+
.foo:hover .bar { background: blue; }
27+
ul > li.active { color: green; }
28+
a + b ~ c { color: orange; }
29+
30+
/* ids + attribute selectors */
31+
#wow { color: yellow; }
32+
[data-world] .d { padding: 10px 20px; }
33+
34+
/* :root and chained tags */
35+
:root { --bs-blue: #0d6efd; }
36+
:root .a { --bs-green: #bada55; }
37+
html { margin: 0; }
38+
body { padding: 0; }
39+
html body div { color: blue; }
40+
41+
/* grouping with commas */
42+
.a, .b { color: red; }
43+
44+
/* multiple repeated groups to ensure stability */
45+
.a, .b { color: coral; }
46+
.a { animation: glow 1s linear infinite alternate; }
47+
48+
/* nested blocks */
49+
.foo {
50+
svg { display: none; }
51+
.bar { display: inline; }
752
}
853
9-
describe('node/postcss/isolateStyles', () => {
10-
test('splitSelectorPseudo skips escaped colon', () => {
11-
expect(apply('.foo\\:bar')).toBe(
12-
'.foo\\:bar:not(:where(.vp-raw, .vp-raw *))'
13-
)
14-
})
54+
/* standalone pseudos */
55+
:first-child { color: pink; }
56+
:hover { color: blue; }
57+
:active { color: red; }
1558
16-
test('splitSelectorPseudo splits on pseudo selectors', () => {
17-
expect(apply('.button:hover')).toBe(
18-
'.button:not(:where(.vp-raw, .vp-raw *)):hover'
19-
)
59+
/* keyframes (should be ignored) */
60+
@keyframes fade {
61+
from { opacity: 0; }
62+
to { opacity: 1; }
63+
}
64+
@-webkit-keyframes glow {
65+
from { color: coral; }
66+
to { color: red; }
67+
}
68+
@-moz-keyframes glow {
69+
from { color: coral; }
70+
to { color: red; }
71+
}
72+
@-o-keyframes glow {
73+
from { color: coral; }
74+
to { color: red; }
75+
}
76+
`
77+
78+
describe('node/postcss/isolateStyles', () => {
79+
test('transforms selectors and skips keyframes', () => {
80+
const out = run(INPUT_CSS)
81+
expect(out.css).toMatchSnapshot()
2082
})
2183

22-
test('postcssIsolateStyles inserts :not(...) in the right place', () => {
23-
expect(apply('.disabled\\:opacity-50:disabled')).toBe(
24-
'.disabled\\:opacity-50:not(:where(.vp-raw, .vp-raw *)):disabled'
25-
)
84+
test('idempotent (running twice produces identical CSS)', () => {
85+
const first = run(INPUT_CSS).css
86+
const second = run(first).css
87+
expect(second).toBe(first)
2688
})
2789
})
90+
91+
function run(css: string, from = 'src/styles/vp-doc.css') {
92+
return postcss([postcssIsolateStyles()]).process(css, { from })
93+
}

0 commit comments

Comments
 (0)