From c7793d9d2671bb5565c859a67c9d43b51342ec8e Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Tue, 13 Oct 2020 16:32:41 -0700 Subject: [PATCH 1/8] [css-nesting] added a :not, :is, and && error sample --- css-nesting-1/Overview.bs | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 98a2c01bf27..4b0da38bfee 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -225,6 +225,20 @@ Direct Nesting {#direct} :is(.foo, .bar) + .baz, :is(.foo, .bar).qux { color: red; } */ + + ul, ol { + &:not(.foo,.bar) > .baz { color: red; } + } + /* equivalent to + :is(ul,ol):not(.foo,.bar) > .baz { color: red; } + */ + + .foo { + &:is(.bar, &.baz) { color: red; } + } + /* equivalent to + .foo:is(.bar, .foo:is(.baz)) { color: red; } + */ But the following are invalid: @@ -248,6 +262,12 @@ Direct Nesting {#direct} } /* Invalid because the second selector in the list doesn't contain a nesting selector. */ + + .foo { + color: red; + &&.bar { color: blue; } + } + /* Invalid because the 1st & isn't at the start of the selector */ From 4912191a5584fc6805c3bb2f4f4265817919d180 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 14 Oct 2020 15:01:57 -0700 Subject: [PATCH 2/8] [css-nesting] adds 2 3 level nest examples --- css-nesting-1/Overview.bs | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 4b0da38bfee..a70da11ed96 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -238,6 +238,33 @@ Direct Nesting {#direct} } /* equivalent to .foo:is(.bar, .foo:is(.baz)) { color: red; } + main { + display: grid; + & > section { + background: white; + & > header { + font-size: 1.25rem; + } + } + } + /* equivalent to + main { display: grid; } + main > section { background: white; } + main > section > header { font-size: 1.25rem; } + */ + + main { + & > section, + & > article { + background: white; + & > header { + font-size: 1.25rem; + } + } + } + /* equivalent to + main > :is(section, article) { background: white; } + main > :is(section, article) > header { font-size: 1.25rem; } */ From 6fdc24f2fdd7a43fab78dd92d8f85f75fb2d66cd Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 14 Oct 2020 15:02:21 -0700 Subject: [PATCH 3/8] [css-nesting] feedback updates --- css-nesting-1/Overview.bs | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index a70da11ed96..132bf49815f 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -226,18 +226,29 @@ Direct Nesting {#direct} :is(.foo, .bar).qux { color: red; } */ - ul, ol { + .foo { + color: blue; + & .bar & .baz & .qux { color: red; } + } + /* equivalent to + .foo { color: blue; } + .foo .foo .bar .foo .baz .foo .qux { color: blue; } + */ + + .error, #404 { &:not(.foo,.bar) > .baz { color: red; } } /* equivalent to - :is(ul,ol):not(.foo,.bar) > .baz { color: red; } + :is(.error, #404):not(.foo,.bar) > .baz { color: red; } */ .foo { &:is(.bar, &.baz) { color: red; } } /* equivalent to - .foo:is(.bar, .foo:is(.baz)) { color: red; } + .foo:is(.bar, .foo:is(.baz)) { color: red; } + */ + main { display: grid; & > section { @@ -294,7 +305,8 @@ Direct Nesting {#direct} color: red; &&.bar { color: blue; } } - /* Invalid because the 1st & isn't at the start of the selector */ + /* Invalid because the 1st & is no longer + at the start of a selector */ From b4771e14cd10d9b86cd2e3274a3a19009ba6a222 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 15 Oct 2020 11:31:05 -0700 Subject: [PATCH 4/8] [css-nesting] example nits and updates --- css-nesting-1/Overview.bs | 46 +++++++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 132bf49815f..552a6c553b9 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -235,6 +235,17 @@ Direct Nesting {#direct} .foo .foo .bar .foo .baz .foo .qux { color: blue; } */ + .foo { + color: blue; + & { padding: 2ch; } + } + /* equivalent to + .foo { + color: blue; + padding: 2ch; + } + */ + .error, #404 { &:not(.foo,.bar) > .baz { color: red; } } @@ -246,28 +257,31 @@ Direct Nesting {#direct} &:is(.bar, &.baz) { color: red; } } /* equivalent to - .foo:is(.bar, .foo:is(.baz)) { color: red; } + .foo:is(.bar, .foo.baz) { color: red; } */ - main { - display: grid; - & > section { - background: white; - & > header { - font-size: 1.25rem; + figure { + margin: 0; + + & > figcaption { + background: hsl(0 0% 0% / 50%); + + & > p { + font-size: .9rem; } } } /* equivalent to - main { display: grid; } - main > section { background: white; } - main > section > header { font-size: 1.25rem; } + figure { margin: 0; } + figure > figcaption { background: hsl(0 0% 0% / 50%); } + figure > figcaption > p { font-size: .9rem; } */ main { & > section, & > article { background: white; + & > header { font-size: 1.25rem; } @@ -296,17 +310,17 @@ Direct Nesting {#direct} .foo { color: red; - &.bar, .baz { color: blue; } + &&.bar { color: blue; } } - /* Invalid because the second selector in the list doesn't - contain a nesting selector. */ + /* Invalid because the 1st & is no longer + at the start of a nesting selector */ .foo { color: red; - &&.bar { color: blue; } + &.bar, .baz { color: blue; } } - /* Invalid because the 1st & is no longer - at the start of a selector */ + /* Invalid because the second selector in the list doesn't + contain a nesting selector. */ From 991b34c99c577e80554d44031142a312bf9c0e91 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 16 Oct 2020 09:19:31 -0700 Subject: [PATCH 5/8] [css-nesting] fixes extra class --- css-nesting-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 552a6c553b9..63f21bcbb76 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -232,7 +232,7 @@ Direct Nesting {#direct} } /* equivalent to .foo { color: blue; } - .foo .foo .bar .foo .baz .foo .qux { color: blue; } + .foo .bar .foo .baz .foo .qux { color: blue; } */ .foo { From b4fae7c8f237799139daf668db67e2f29ac5d737 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 16 Oct 2020 09:28:37 -0700 Subject: [PATCH 6/8] [css-nesting] clarifications --- css-nesting-1/Overview.bs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 63f21bcbb76..d7a01e58093 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -240,6 +240,11 @@ Direct Nesting {#direct} & { padding: 2ch; } } /* equivalent to + .foo { color: blue; } + .foo { padding: 2ch; } + + // and + .foo { color: blue; padding: 2ch; @@ -313,7 +318,7 @@ Direct Nesting {#direct} &&.bar { color: blue; } } /* Invalid because the 1st & is no longer - at the start of a nesting selector */ + at the start of a compound selector */ .foo { color: red; From dc3dec91bb13cc930a2e49dd1cc5563b6b4f2dc9 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 16 Oct 2020 09:31:53 -0700 Subject: [PATCH 7/8] [css-nesting] normalizing to tabs --- css-nesting-1/Overview.bs | 58 +++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index d7a01e58093..4992bd77275 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -203,8 +203,8 @@ Direct Nesting {#direct} & > .bar { color: red; } } /* equivalent to - .foo { color: blue; } - .foo > .bar { color: red; } + .foo { color: blue; } + .foo > .bar { color: red; } */ .foo { @@ -212,8 +212,8 @@ Direct Nesting {#direct} &.bar { color: red; } } /* equivalent to - .foo { color: blue; } - .foo.bar { color: red; } + .foo { color: blue; } + .foo.bar { color: red; } */ .foo, .bar { @@ -221,9 +221,9 @@ Direct Nesting {#direct} & + .baz, &.qux { color: red; } } /* equivalent to - .foo, .bar { color: blue; } - :is(.foo, .bar) + .baz, - :is(.foo, .bar).qux { color: red; } + .foo, .bar { color: blue; } + :is(.foo, .bar) + .baz, + :is(.foo, .bar).qux { color: red; } */ .foo { @@ -231,8 +231,8 @@ Direct Nesting {#direct} & .bar & .baz & .qux { color: red; } } /* equivalent to - .foo { color: blue; } - .foo .bar .foo .baz .foo .qux { color: blue; } + .foo { color: blue; } + .foo .bar .foo .baz .foo .qux { color: blue; } */ .foo { @@ -245,24 +245,24 @@ Direct Nesting {#direct} // and - .foo { - color: blue; - padding: 2ch; - } + .foo { + color: blue; + padding: 2ch; + } */ .error, #404 { &:not(.foo,.bar) > .baz { color: red; } } /* equivalent to - :is(.error, #404):not(.foo,.bar) > .baz { color: red; } + :is(.error, #404):not(.foo,.bar) > .baz { color: red; } */ .foo { &:is(.bar, &.baz) { color: red; } } /* equivalent to - .foo:is(.bar, .foo.baz) { color: red; } + .foo:is(.bar, .foo.baz) { color: red; } */ figure { @@ -277,9 +277,9 @@ Direct Nesting {#direct} } } /* equivalent to - figure { margin: 0; } - figure > figcaption { background: hsl(0 0% 0% / 50%); } - figure > figcaption > p { font-size: .9rem; } + figure { margin: 0; } + figure > figcaption { background: hsl(0 0% 0% / 50%); } + figure > figcaption > p { font-size: .9rem; } */ main { @@ -293,8 +293,8 @@ Direct Nesting {#direct} } } /* equivalent to - main > :is(section, article) { background: white; } - main > :is(section, article) > header { font-size: 1.25rem; } + main > :is(section, article) { background: white; } + main > :is(section, article) > header { font-size: 1.25rem; } */ @@ -318,14 +318,14 @@ Direct Nesting {#direct} &&.bar { color: blue; } } /* Invalid because the 1st & is no longer - at the start of a compound selector */ + at the start of a compound selector */ .foo { color: red; &.bar, .baz { color: blue; } } /* Invalid because the second selector in the list doesn't - contain a nesting selector. */ + contain a nesting selector. */ @@ -383,8 +383,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - .foo > .bar { color: blue; } + .foo { color: red; } + .foo > .bar { color: blue; } */ .foo { @@ -394,8 +394,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - .parent .foo { color: blue; } + .foo { color: red; } + .parent .foo { color: blue; } */ .foo { @@ -405,8 +405,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - :not(.foo) { color: blue; } + .foo { color: red; } + :not(.foo) { color: blue; } */ @@ -428,7 +428,7 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* Invalid because not all selectors in the list - contain a nesting selector */ + contain a nesting selector */ From bd03403330958e7f979361bc2e3c0e69fd073ab2 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 16 Oct 2020 09:59:47 -0700 Subject: [PATCH 8/8] [css-nesting] correction to invalid explainer --- css-nesting-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 4992bd77275..5b6bbec2216 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -317,7 +317,7 @@ Direct Nesting {#direct} color: red; &&.bar { color: blue; } } - /* Invalid because the 1st & is no longer + /* Invalid because the second & is no longer at the start of a compound selector */ .foo {