Skip to content

Commit 90eb696

Browse files
askoufisaskoufis
authored
Add nested style composition test case to fixture (#1698)
1 parent 073dd78 commit 90eb696

14 files changed

Lines changed: 150 additions & 88 deletions

‎fixtures/features/src/features.css.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ export const styleWithComposition = style([
2424
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
2525
]);
2626

27+
export const styleWithNestedComposition = style([
28+
{ backgroundColor: 'powderblue' },
29+
[mergedStyle],
30+
{ selectors: { '&:hover': { backgroundColor: 'slategray' } } },
31+
]);
32+
2733
export const styleVariantsWithComposition = styleVariants({
2834
variant: [
2935
{ backgroundColor: 'powderblue' },

‎fixtures/features/src/html.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import testNodes from '../test-nodes.json';
44
export default `
55
<div id="${testNodes.mergedStyle}" class="${styles.mergedStyle}">Merged style</div>
66
<div id="${testNodes.styleWithComposition}" class="${styles.styleWithComposition}">Style with composition</div>
7+
<div id="${testNodes.styleWithNestedComposition}" class="${styles.styleWithNestedComposition}">Style with nested composition</div>
78
<div id="${testNodes.styleVariantsWithComposition}" class="${styles.styleVariantsWithComposition.variant}">Style variants with composition</div>
89
<div id="${testNodes.styleVariantsWithMappedComposition}" class="${styles.styleVariantsWithMappedComposition.variant}">Style variants with mapped composition</div>
910
<div id="${testNodes.compositionOnly}" class="${styles.compositionOnly}">Composition only</div>

‎fixtures/features/test-nodes.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"mergedStyle": "mergedStyle",
33
"styleWithComposition": "styleWithComposition",
4+
"styleWithNestedComposition": "styleWithNestedComposition",
45
"styleVariantsWithComposition": "styleVariantsWithComposition",
56
"styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
67
"compositionOnly": "compositionOnly",

‎tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,43 @@
1111
.features_styleWithComposition__1o6ek501:hover {
1212
background-color: slategray;
1313
}
14-
.features_styleVariantsWithComposition_variant__1o6ek502 {
14+
.features_styleWithNestedComposition__1o6ek502 {
1515
background-color: powderblue;
1616
}
17-
.features_styleVariantsWithComposition_variant__1o6ek502:hover {
17+
.features_styleWithNestedComposition__1o6ek502:hover {
1818
background-color: slategray;
1919
}
20-
.features_styleVariantsWithMappedComposition_variant__1o6ek503 {
20+
.features_styleVariantsWithComposition_variant__1o6ek503 {
2121
background-color: powderblue;
2222
}
23-
.features_styleVariantsWithMappedComposition_variant__1o6ek503:hover {
23+
.features_styleVariantsWithComposition_variant__1o6ek503:hover {
2424
background-color: slategray;
2525
}
26-
.features_styleCompositionInSelector__1o6ek505 {
27-
color: white;
26+
.features_styleVariantsWithMappedComposition_variant__1o6ek504 {
27+
background-color: powderblue;
28+
}
29+
.features_styleVariantsWithMappedComposition_variant__1o6ek504:hover {
30+
background-color: slategray;
2831
}
2932
.features_styleCompositionInSelector__1o6ek506 {
33+
color: white;
34+
}
35+
.features_styleCompositionInSelector__1o6ek507 {
3036
background-color: black;
3137
}
32-
body .features_styleCompositionInSelector__1o6ek507 {
38+
body .features_styleCompositionInSelector__1o6ek508 {
3339
font-size: 24px;
3440
}
35-
.features_styleVariantsCompositionInSelector_variant__1o6ek508 {
41+
.features_styleVariantsCompositionInSelector_variant__1o6ek509 {
3642
color: white;
3743
}
38-
.features_styleVariantsCompositionInSelector_variant__1o6ek509 {
44+
.features_styleVariantsCompositionInSelector_variant__1o6ek50a {
3945
background-color: black;
4046
}
41-
body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
47+
body .features_styleVariantsCompositionInSelector_variant__1o6ek50b {
4248
font-size: 24px;
4349
}
44-
.features_styleWithStartingStyle__1o6ek50b {
50+
.features_styleWithStartingStyle__1o6ek50c {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
5359
}
5460
}
5561
@starting-style {
56-
.features_styleWithStartingStyle__1o6ek50b {
62+
.features_styleWithStartingStyle__1o6ek50c {
5763
background-color: white;
5864
}
5965
}

‎tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,31 @@
2323
._1o6ek503:hover {
2424
background-color: slategray;
2525
}
26-
._1o6ek505 {
27-
color: white;
26+
._1o6ek504 {
27+
background-color: powderblue;
28+
}
29+
._1o6ek504:hover {
30+
background-color: slategray;
2831
}
2932
._1o6ek506 {
33+
color: white;
34+
}
35+
._1o6ek507 {
3036
background-color: black;
3137
}
32-
body ._1o6ek507 {
38+
body ._1o6ek508 {
3339
font-size: 24px;
3440
}
35-
._1o6ek508 {
41+
._1o6ek509 {
3642
color: white;
3743
}
38-
._1o6ek509 {
44+
._1o6ek50a {
3945
background-color: black;
4046
}
41-
body ._1o6ek50a {
47+
body ._1o6ek50b {
4248
font-size: 24px;
4349
}
44-
._1o6ek50b {
50+
._1o6ek50c {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body ._1o6ek50a {
5359
}
5460
}
5561
@starting-style {
56-
._1o6ek50b {
62+
._1o6ek50c {
5763
background-color: white;
5864
}
5965
}

‎tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,43 @@
1111
.features_styleWithComposition__1o6ek501:hover {
1212
background-color: slategray;
1313
}
14-
.features_styleVariantsWithComposition_variant__1o6ek502 {
14+
.features_styleWithNestedComposition__1o6ek502 {
1515
background-color: powderblue;
1616
}
17-
.features_styleVariantsWithComposition_variant__1o6ek502:hover {
17+
.features_styleWithNestedComposition__1o6ek502:hover {
1818
background-color: slategray;
1919
}
20-
.features_styleVariantsWithMappedComposition_variant__1o6ek503 {
20+
.features_styleVariantsWithComposition_variant__1o6ek503 {
2121
background-color: powderblue;
2222
}
23-
.features_styleVariantsWithMappedComposition_variant__1o6ek503:hover {
23+
.features_styleVariantsWithComposition_variant__1o6ek503:hover {
2424
background-color: slategray;
2525
}
26-
.features_styleCompositionInSelector__1o6ek505 {
27-
color: white;
26+
.features_styleVariantsWithMappedComposition_variant__1o6ek504 {
27+
background-color: powderblue;
28+
}
29+
.features_styleVariantsWithMappedComposition_variant__1o6ek504:hover {
30+
background-color: slategray;
2831
}
2932
.features_styleCompositionInSelector__1o6ek506 {
33+
color: white;
34+
}
35+
.features_styleCompositionInSelector__1o6ek507 {
3036
background-color: black;
3137
}
32-
body .features_styleCompositionInSelector__1o6ek507 {
38+
body .features_styleCompositionInSelector__1o6ek508 {
3339
font-size: 24px;
3440
}
35-
.features_styleVariantsCompositionInSelector_variant__1o6ek508 {
41+
.features_styleVariantsCompositionInSelector_variant__1o6ek509 {
3642
color: white;
3743
}
38-
.features_styleVariantsCompositionInSelector_variant__1o6ek509 {
44+
.features_styleVariantsCompositionInSelector_variant__1o6ek50a {
3945
background-color: black;
4046
}
41-
body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
47+
body .features_styleVariantsCompositionInSelector_variant__1o6ek50b {
4248
font-size: 24px;
4349
}
44-
.features_styleWithStartingStyle__1o6ek50b {
50+
.features_styleWithStartingStyle__1o6ek50c {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
5359
}
5460
}
5561
@starting-style {
56-
.features_styleWithStartingStyle__1o6ek50b {
62+
.features_styleWithStartingStyle__1o6ek50c {
5763
background-color: white;
5864
}
5965
}

‎tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,31 @@
2323
._1o6ek503:hover {
2424
background-color: slategray;
2525
}
26-
._1o6ek505 {
27-
color: white;
26+
._1o6ek504 {
27+
background-color: powderblue;
28+
}
29+
._1o6ek504:hover {
30+
background-color: slategray;
2831
}
2932
._1o6ek506 {
33+
color: white;
34+
}
35+
._1o6ek507 {
3036
background-color: black;
3137
}
32-
body ._1o6ek507 {
38+
body ._1o6ek508 {
3339
font-size: 24px;
3440
}
35-
._1o6ek508 {
41+
._1o6ek509 {
3642
color: white;
3743
}
38-
._1o6ek509 {
44+
._1o6ek50a {
3945
background-color: black;
4046
}
41-
body ._1o6ek50a {
47+
body ._1o6ek50b {
4248
font-size: 24px;
4349
}
44-
._1o6ek50b {
50+
._1o6ek50c {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body ._1o6ek50a {
5359
}
5460
}
5561
@starting-style {
56-
._1o6ek50b {
62+
._1o6ek50c {
5763
background-color: white;
5864
}
5965
}

‎tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,43 @@
1111
.features_styleWithComposition__87f2ru1:hover {
1212
background-color: slategray;
1313
}
14-
.features_styleVariantsWithComposition_variant__87f2ru2 {
14+
.features_styleWithNestedComposition__87f2ru2 {
1515
background-color: powderblue;
1616
}
17-
.features_styleVariantsWithComposition_variant__87f2ru2:hover {
17+
.features_styleWithNestedComposition__87f2ru2:hover {
1818
background-color: slategray;
1919
}
20-
.features_styleVariantsWithMappedComposition_variant__87f2ru3 {
20+
.features_styleVariantsWithComposition_variant__87f2ru3 {
2121
background-color: powderblue;
2222
}
23-
.features_styleVariantsWithMappedComposition_variant__87f2ru3:hover {
23+
.features_styleVariantsWithComposition_variant__87f2ru3:hover {
2424
background-color: slategray;
2525
}
26-
.features_styleCompositionInSelector__87f2ru5 {
27-
color: white;
26+
.features_styleVariantsWithMappedComposition_variant__87f2ru4 {
27+
background-color: powderblue;
28+
}
29+
.features_styleVariantsWithMappedComposition_variant__87f2ru4:hover {
30+
background-color: slategray;
2831
}
2932
.features_styleCompositionInSelector__87f2ru6 {
33+
color: white;
34+
}
35+
.features_styleCompositionInSelector__87f2ru7 {
3036
background-color: black;
3137
}
32-
body .features_styleCompositionInSelector__87f2ru7 {
38+
body .features_styleCompositionInSelector__87f2ru8 {
3339
font-size: 24px;
3440
}
35-
.features_styleVariantsCompositionInSelector_variant__87f2ru8 {
41+
.features_styleVariantsCompositionInSelector_variant__87f2ru9 {
3642
color: white;
3743
}
38-
.features_styleVariantsCompositionInSelector_variant__87f2ru9 {
44+
.features_styleVariantsCompositionInSelector_variant__87f2rua {
3945
background-color: black;
4046
}
41-
body .features_styleVariantsCompositionInSelector_variant__87f2rua {
47+
body .features_styleVariantsCompositionInSelector_variant__87f2rub {
4248
font-size: 24px;
4349
}
44-
.features_styleWithStartingStyle__87f2rub {
50+
.features_styleWithStartingStyle__87f2ruc {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body .features_styleVariantsCompositionInSelector_variant__87f2rua {
5359
}
5460
}
5561
@starting-style {
56-
.features_styleWithStartingStyle__87f2rub {
62+
.features_styleWithStartingStyle__87f2ruc {
5763
background-color: white;
5864
}
5965
}

‎tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,31 @@
2323
._87f2ru3:hover {
2424
background-color: slategray;
2525
}
26-
._87f2ru5 {
27-
color: white;
26+
._87f2ru4 {
27+
background-color: powderblue;
28+
}
29+
._87f2ru4:hover {
30+
background-color: slategray;
2831
}
2932
._87f2ru6 {
33+
color: white;
34+
}
35+
._87f2ru7 {
3036
background-color: black;
3137
}
32-
body ._87f2ru7 {
38+
body ._87f2ru8 {
3339
font-size: 24px;
3440
}
35-
._87f2ru8 {
41+
._87f2ru9 {
3642
color: white;
3743
}
38-
._87f2ru9 {
44+
._87f2rua {
3945
background-color: black;
4046
}
41-
body ._87f2rua {
47+
body ._87f2rub {
4248
font-size: 24px;
4349
}
44-
._87f2rub {
50+
._87f2ruc {
4551
background-color: black;
4652
}
4753
@media screen and (min-width: 700px) {
@@ -53,7 +59,7 @@ body ._87f2rua {
5359
}
5460
}
5561
@starting-style {
56-
._87f2rub {
62+
._87f2ruc {
5763
background-color: white;
5864
}
5965
}

0 commit comments

Comments
 (0)