From 12830bded630e065abad50d2e1ebf4ed2f733284 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 7 May 2021 14:31:12 -0700 Subject: [PATCH 01/11] [css-nesting-1] basic test --- css/selectors/nesting-basic-ref.html | 18 ++++++++++++++++++ css/selectors/nesting-basic.html | 20 ++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 css/selectors/nesting-basic-ref.html create mode 100644 css/selectors/nesting-basic.html diff --git a/css/selectors/nesting-basic-ref.html b/css/selectors/nesting-basic-ref.html new file mode 100644 index 00000000000000..a239e5554188f2 --- /dev/null +++ b/css/selectors/nesting-basic-ref.html @@ -0,0 +1,18 @@ + +@nest | basic + + + + +

Test passes if the block is green

+
+

test

+
+ \ No newline at end of file diff --git a/css/selectors/nesting-basic.html b/css/selectors/nesting-basic.html new file mode 100644 index 00000000000000..6b7e8e4b16530d --- /dev/null +++ b/css/selectors/nesting-basic.html @@ -0,0 +1,20 @@ + +@nest | basic + + + + + +

Test passes if the block is green

+
+

test

+
+ \ No newline at end of file From 11ac196670e183e6a09178e58d4016f125166861 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 7 May 2021 14:36:40 -0700 Subject: [PATCH 02/11] update file names --- css/selectors/{nesting-basic-ref.html => nesting-001-ref.html} | 0 css/selectors/{nesting-basic.html => nesting-001.html} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename css/selectors/{nesting-basic-ref.html => nesting-001-ref.html} (100%) rename css/selectors/{nesting-basic.html => nesting-001.html} (100%) diff --git a/css/selectors/nesting-basic-ref.html b/css/selectors/nesting-001-ref.html similarity index 100% rename from css/selectors/nesting-basic-ref.html rename to css/selectors/nesting-001-ref.html diff --git a/css/selectors/nesting-basic.html b/css/selectors/nesting-001.html similarity index 100% rename from css/selectors/nesting-basic.html rename to css/selectors/nesting-001.html From ffb8ad6381954e854c5bbef9ce3f455443341acc Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 7 May 2021 14:36:54 -0700 Subject: [PATCH 03/11] adds @nest test --- css/selectors/nesting-002-ref.html | 18 ++++++++++++++++++ css/selectors/nesting-002.html | 20 ++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 css/selectors/nesting-002-ref.html create mode 100644 css/selectors/nesting-002.html diff --git a/css/selectors/nesting-002-ref.html b/css/selectors/nesting-002-ref.html new file mode 100644 index 00000000000000..a239e5554188f2 --- /dev/null +++ b/css/selectors/nesting-002-ref.html @@ -0,0 +1,18 @@ + +@nest | basic + + + + +

Test passes if the block is green

+
+

test

+
+ \ No newline at end of file diff --git a/css/selectors/nesting-002.html b/css/selectors/nesting-002.html new file mode 100644 index 00000000000000..db048a7eae013f --- /dev/null +++ b/css/selectors/nesting-002.html @@ -0,0 +1,20 @@ + +@nest | basic + + + + + +

Test passes if the block is green

+
+

test

+
+ \ No newline at end of file From 9c1a81581a38acdbacb53abd8c895f58568bea69 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 7 May 2021 15:04:40 -0700 Subject: [PATCH 04/11] fixes ref --- css/selectors/nesting-001.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/selectors/nesting-001.html b/css/selectors/nesting-001.html index 6b7e8e4b16530d..6ed5b2c75d0172 100644 --- a/css/selectors/nesting-001.html +++ b/css/selectors/nesting-001.html @@ -2,7 +2,7 @@ @nest | basic - + - -

Test passes if the block is green

-
-

test

-
- \ No newline at end of file diff --git a/css/selectors/nesting-001.html b/css/selectors/nesting-001.html deleted file mode 100644 index 6ed5b2c75d0172..00000000000000 --- a/css/selectors/nesting-001.html +++ /dev/null @@ -1,20 +0,0 @@ - -@nest | basic - - - - - -

Test passes if the block is green

-
-

test

-
- \ No newline at end of file diff --git a/css/selectors/nesting-002-ref.html b/css/selectors/nesting-002-ref.html deleted file mode 100644 index a239e5554188f2..00000000000000 --- a/css/selectors/nesting-002-ref.html +++ /dev/null @@ -1,18 +0,0 @@ - -@nest | basic - - - - -

Test passes if the block is green

-
-

test

-
- \ No newline at end of file diff --git a/css/selectors/nesting-002.html b/css/selectors/nesting-002.html deleted file mode 100644 index db048a7eae013f..00000000000000 --- a/css/selectors/nesting-002.html +++ /dev/null @@ -1,20 +0,0 @@ - -@nest | basic - - - - - -

Test passes if the block is green

-
-

test

-
- \ No newline at end of file diff --git a/css/selectors/nesting-ref.html b/css/selectors/nesting-ref.html new file mode 100644 index 00000000000000..aa8ec2d9cf8af5 --- /dev/null +++ b/css/selectors/nesting-ref.html @@ -0,0 +1,46 @@ + +@nest | basic + + + + +

Tests pass if block is green

+
+
+
+
+
+ +
+
+ \ No newline at end of file diff --git a/css/selectors/nesting.html b/css/selectors/nesting.html new file mode 100644 index 00000000000000..14c230afea241a --- /dev/null +++ b/css/selectors/nesting.html @@ -0,0 +1,55 @@ + +@nest | basic + + + + + +

Tests pass if block is green

+
+
+
+
+
+ +
+
+ \ No newline at end of file From d8d4071f285a7ebceaefbda7ec1ff6c4dbff9c6a Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 12 May 2021 17:17:37 -0700 Subject: [PATCH 06/11] setup for scripted nesting tests --- css/selectors/nesting-parsing.html | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 css/selectors/nesting-parsing.html diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html new file mode 100644 index 00000000000000..a652f13a9409db --- /dev/null +++ b/css/selectors/nesting-parsing.html @@ -0,0 +1,36 @@ + +CSS Selectors @nest parsing + + + + + + + From 83393b90729100b1bbeba616bcc68c7aff1747a3 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 24 Jun 2021 14:29:37 -0700 Subject: [PATCH 07/11] adds more tests, adds spec examples --- css/selectors/nesting-parsing.html | 17 ++++++++--- css/selectors/nesting-ref.html | 35 +++++++++++++++++++++++ css/selectors/nesting.html | 46 ++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 4 deletions(-) diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html index a652f13a9409db..95b27aaefb9828 100644 --- a/css/selectors/nesting-parsing.html +++ b/css/selectors/nesting-parsing.html @@ -15,10 +15,19 @@ } const testRules = [ - `html { color: red; }`, - `foo { - & bar {} - }`, + `.foo .bar { color: green; }`, + `.foo { & { color: green; } }`, // 🐰 + `.foo { &.bar { color: green; } }`, + `.foo { & .bar { color: green; } }`, + `.foo { & > .bar { color: green; } }`, + `.foo { &:is(.bar, &.baz) { color: green; } }`, + `.foo { @nest .bar& { color: green; } }`, + `.foo { @nest .bar & { color: green; } }`, + `.foo { @nest .bar > & { color: green; } }`, + `.foo, .bar { & + .baz, &.qux { color: green; } }`, + `.foo { & .bar & .baz & .qux { color: green; } }`, + `.foo { @media (min-width: 50px) { & { color: green; } } }`, + `main { & > section, & > article { & > header { color: green; } } }`, ] testRules.forEach(testRule => { diff --git a/css/selectors/nesting-ref.html b/css/selectors/nesting-ref.html index aa8ec2d9cf8af5..515bc11c3dcb53 100644 --- a/css/selectors/nesting-ref.html +++ b/css/selectors/nesting-ref.html @@ -29,6 +29,35 @@ height: 100%; } + @media (min-width: 50px) { + .test-5 > div { + background-color: green; + } + } + + .test-6.test { + background-color: green; + } + + :is(.test-7, .t7-) + .test-7-child, + :is(.test-7, .t7-).t7-- { + background-color: green; + } + + .test-8 { + background-color: green; + } + + .test-9:is(.t9-, .test-9.t9--) { + background-color: green; + } + + @supports (display: grid) { + .test-10 { + background-color: green; + } + } + body * + * { margin-top: 8px; } @@ -43,4 +72,10 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/css/selectors/nesting.html b/css/selectors/nesting.html index 14c230afea241a..6cc674bcd1f73f 100644 --- a/css/selectors/nesting.html +++ b/css/selectors/nesting.html @@ -38,6 +38,46 @@ } } + .test-5 { + @media (min-width: 50px) { + & { + background-color: green; + } + } + } + + .test-6 { + &.test { + background-color: green; + } + } + + .test-7, .t7- { + & + .test-7-child, &.t7-- { + background-color: green; + } + } + + .test-8 { + & { + background-color: green; + } + } + + .test-9 { + &:is(.t9-, &.t9--) { + background-color: green; + } + } + + .test-10 { + @supports (display: grid) { + & { + background-color: green; + } + } + } + body * + * { margin-top: 8px; } @@ -52,4 +92,10 @@ +
+
+
+
+
+
\ No newline at end of file From 40c5124a39b3562908e50e9c1e02163b204587b7 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 24 Jun 2021 14:29:57 -0700 Subject: [PATCH 08/11] makes note about comparing strings vs crawling objects --- css/selectors/nesting-parsing.html | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html index 95b27aaefb9828..f53722addf2011 100644 --- a/css/selectors/nesting-parsing.html +++ b/css/selectors/nesting-parsing.html @@ -33,13 +33,11 @@ testRules.forEach(testRule => { test(function() { beforeEach() - ss.insertRule(testRule) - - assert_equals( - ss.rules[0].cssText, - testRule - ) - }, `${testRule}`) + // todo? + // when parsing is being ready/prototyped, + // switch to crawling nested rules instead of comparing text + assert_equals(ss.rules[0].cssText, testRule) + }, testRule) }) From b75986f748e6b31f64b0399dbc6d135c8ed4c7a6 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 28 Jul 2021 15:39:30 -0700 Subject: [PATCH 09/11] syntax updates per https://github.com/w3c/csswg-drafts/pull/6483 --- css/selectors/nesting-parsing.html | 2 +- css/selectors/nesting.html | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html index f53722addf2011..11ee386ccdcf79 100644 --- a/css/selectors/nesting-parsing.html +++ b/css/selectors/nesting-parsing.html @@ -26,7 +26,7 @@ `.foo { @nest .bar > & { color: green; } }`, `.foo, .bar { & + .baz, &.qux { color: green; } }`, `.foo { & .bar & .baz & .qux { color: green; } }`, - `.foo { @media (min-width: 50px) { & { color: green; } } }`, + `.foo { @media (min-width: 50px) { color: green; } }`, `main { & > section, & > article { & > header { color: green; } } }`, ] diff --git a/css/selectors/nesting.html b/css/selectors/nesting.html index 6cc674bcd1f73f..60103c7cd21725 100644 --- a/css/selectors/nesting.html +++ b/css/selectors/nesting.html @@ -40,9 +40,7 @@ .test-5 { @media (min-width: 50px) { - & { - background-color: green; - } + background-color: green; } } @@ -72,9 +70,7 @@ .test-10 { @supports (display: grid) { - & { - background-color: green; - } + background-color: green; } } From eeef4991f7f47535eb8944c290d537906daa0fc0 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 28 Jul 2021 16:07:41 -0700 Subject: [PATCH 10/11] remove control test --- css/selectors/nesting-parsing.html | 1 - 1 file changed, 1 deletion(-) diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html index 11ee386ccdcf79..9f57350ebf06c3 100644 --- a/css/selectors/nesting-parsing.html +++ b/css/selectors/nesting-parsing.html @@ -15,7 +15,6 @@ } const testRules = [ - `.foo .bar { color: green; }`, `.foo { & { color: green; } }`, // 🐰 `.foo { &.bar { color: green; } }`, `.foo { & .bar { color: green; } }`, From 8c360378535e328436db073d171cc97af9c3ecba Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 28 Jul 2021 16:07:51 -0700 Subject: [PATCH 11/11] pacify linter --- css/selectors/nesting-parsing.html | 2 +- css/selectors/nesting-ref.html | 6 +++--- css/selectors/nesting.html | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html index 9f57350ebf06c3..f751a7bb68646e 100644 --- a/css/selectors/nesting-parsing.html +++ b/css/selectors/nesting-parsing.html @@ -34,7 +34,7 @@ beforeEach() ss.insertRule(testRule) // todo? - // when parsing is being ready/prototyped, + // when parsing is being ready/prototyped, // switch to crawling nested rules instead of comparing text assert_equals(ss.rules[0].cssText, testRule) }, testRule) diff --git a/css/selectors/nesting-ref.html b/css/selectors/nesting-ref.html index 515bc11c3dcb53..98e9d4ec281975 100644 --- a/css/selectors/nesting-ref.html +++ b/css/selectors/nesting-ref.html @@ -40,7 +40,7 @@ } :is(.test-7, .t7-) + .test-7-child, - :is(.test-7, .t7-).t7-- { + :is(.test-7, .t7-).t7-- { background-color: green; } @@ -48,8 +48,8 @@ background-color: green; } - .test-9:is(.t9-, .test-9.t9--) { - background-color: green; + .test-9:is(.t9-, .test-9.t9--) { + background-color: green; } @supports (display: grid) { diff --git a/css/selectors/nesting.html b/css/selectors/nesting.html index 60103c7cd21725..7160b9a1c2263c 100644 --- a/css/selectors/nesting.html +++ b/css/selectors/nesting.html @@ -63,7 +63,7 @@ } .test-9 { - &:is(.t9-, &.t9--) { + &:is(.t9-, &.t9--) { background-color: green; } }