Skip to content

Commit 14fb414

Browse files
evanwevanw
committed
fix warnings about top-level css nesting
1 parent 38cfd53 commit 14fb414

File tree

3 files changed

+85
-64
lines changed

3 files changed

+85
-64
lines changed

‎internal/bundler_tests/bundler_css_test.go

+33-27
Original file line numberDiff line numberDiff line change
@@ -700,30 +700,34 @@ func TestCSSExternalQueryAndHashMatchIssue1822(t *testing.T) {
700700
func TestCSSNestingOldBrowser(t *testing.T) {
701701
css_suite.expectBundled(t, bundled{
702702
files: map[string]string{
703-
"/nested-@layer.css": `a { @layer base { color: red; } }`,
704-
"/nested-@media.css": `a { @media screen { color: red; } }`,
705-
"/nested-ampersand.css": `a { &, & { color: red; } }`,
706-
"/nested-attribute.css": `a { [href] { color: red; } }`,
707-
"/nested-colon.css": `a { :hover { color: red; } }`,
708-
"/nested-dot.css": `a { .cls { color: red; } }`,
709-
"/nested-greaterthan.css": `a { > b { color: red; } }`,
710-
"/nested-hash.css": `a { #id { color: red; } }`,
711-
"/nested-plus.css": `a { + b { color: red; } }`,
712-
"/nested-tilde.css": `a { ~ b { color: red; } }`,
713-
714-
"/toplevel-ampersand.css": `a { &, & { color: red; } }`,
715-
"/toplevel-attribute.css": `a { [href] { color: red; } }`,
716-
"/toplevel-colon.css": `a { :hover { color: red; } }`,
717-
"/toplevel-dot.css": `a { .cls { color: red; } }`,
718-
"/toplevel-greaterthan.css": `a { > b { color: red; } }`,
719-
"/toplevel-hash.css": `a { #id { color: red; } }`,
720-
"/toplevel-plus.css": `a { + b { color: red; } }`,
721-
"/toplevel-tilde.css": `a { ~ b { color: red; } }`,
703+
"/nested-@layer.css": `a { @layer base { color: red; } }`,
704+
"/nested-@media.css": `a { @media screen { color: red; } }`,
705+
"/nested-ampersand-twice.css": `a { &, & { color: red; } }`,
706+
"/nested-ampersand-first.css": `a { &, b { color: red; } }`,
707+
"/nested-attribute.css": `a { [href] { color: red; } }`,
708+
"/nested-colon.css": `a { :hover { color: red; } }`,
709+
"/nested-dot.css": `a { .cls { color: red; } }`,
710+
"/nested-greaterthan.css": `a { > b { color: red; } }`,
711+
"/nested-hash.css": `a { #id { color: red; } }`,
712+
"/nested-plus.css": `a { + b { color: red; } }`,
713+
"/nested-tilde.css": `a { ~ b { color: red; } }`,
714+
715+
"/toplevel-ampersand-twice.css": `&, & { color: red; }`,
716+
"/toplevel-ampersand-first.css": `&, a { color: red; }`,
717+
"/toplevel-ampersand-second.css": `a, & { color: red; }`,
718+
"/toplevel-attribute.css": `[href] { color: red; }`,
719+
"/toplevel-colon.css": `:hover { color: red; }`,
720+
"/toplevel-dot.css": `.cls { color: red; }`,
721+
"/toplevel-greaterthan.css": `> b { color: red; }`,
722+
"/toplevel-hash.css": `#id { color: red; }`,
723+
"/toplevel-plus.css": `+ b { color: red; }`,
724+
"/toplevel-tilde.css": `~ b { color: red; }`,
722725
},
723726
entryPaths: []string{
724727
"/nested-@layer.css",
725728
"/nested-@media.css",
726-
"/nested-ampersand.css",
729+
"/nested-ampersand-twice.css",
730+
"/nested-ampersand-first.css",
727731
"/nested-attribute.css",
728732
"/nested-colon.css",
729733
"/nested-dot.css",
@@ -732,7 +736,9 @@ func TestCSSNestingOldBrowser(t *testing.T) {
732736
"/nested-plus.css",
733737
"/nested-tilde.css",
734738

735-
"/toplevel-ampersand.css",
739+
"/toplevel-ampersand-twice.css",
740+
"/toplevel-ampersand-first.css",
741+
"/toplevel-ampersand-second.css",
736742
"/toplevel-attribute.css",
737743
"/toplevel-colon.css",
738744
"/toplevel-dot.css",
@@ -749,20 +755,20 @@ func TestCSSNestingOldBrowser(t *testing.T) {
749755
},
750756
expectedScanLog: `nested-@layer.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
751757
nested-@media.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
752-
nested-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
758+
nested-ampersand-first.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
759+
nested-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
753760
nested-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
754761
nested-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
755762
nested-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
756763
nested-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
757764
nested-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
758765
nested-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
759766
nested-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
760-
toplevel-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
761-
toplevel-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
762-
toplevel-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
763-
toplevel-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
767+
toplevel-ampersand-first.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
768+
toplevel-ampersand-second.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
769+
toplevel-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
770+
toplevel-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
764771
toplevel-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
765-
toplevel-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
766772
toplevel-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
767773
toplevel-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
768774
`,

‎internal/bundler_tests/snapshots/snapshots_css.txt

+43-36
Original file line numberDiff line numberDiff line change
@@ -196,15 +196,24 @@ a {
196196
}
197197
}
198198

199-
---------- /out/nested-ampersand.css ----------
200-
/* nested-ampersand.css */
199+
---------- /out/nested-ampersand-twice.css ----------
200+
/* nested-ampersand-twice.css */
201201
a {
202202
&,
203203
& {
204204
color: red;
205205
}
206206
}
207207

208+
---------- /out/nested-ampersand-first.css ----------
209+
/* nested-ampersand-first.css */
210+
a {
211+
&,
212+
b {
213+
color: red;
214+
}
215+
}
216+
208217
---------- /out/nested-attribute.css ----------
209218
/* nested-attribute.css */
210219
a {
@@ -261,69 +270,67 @@ a {
261270
}
262271
}
263272

264-
---------- /out/toplevel-ampersand.css ----------
265-
/* toplevel-ampersand.css */
273+
---------- /out/toplevel-ampersand-twice.css ----------
274+
/* toplevel-ampersand-twice.css */
275+
&,
276+
& {
277+
color: red;
278+
}
279+
280+
---------- /out/toplevel-ampersand-first.css ----------
281+
/* toplevel-ampersand-first.css */
282+
&,
266283
a {
267-
&,
268-
& {
269-
color: red;
270-
}
284+
color: red;
285+
}
286+
287+
---------- /out/toplevel-ampersand-second.css ----------
288+
/* toplevel-ampersand-second.css */
289+
a,
290+
& {
291+
color: red;
271292
}
272293

273294
---------- /out/toplevel-attribute.css ----------
274295
/* toplevel-attribute.css */
275-
a {
276-
[href] {
277-
color: red;
278-
}
296+
[href] {
297+
color: red;
279298
}
280299

281300
---------- /out/toplevel-colon.css ----------
282301
/* toplevel-colon.css */
283-
a {
284-
:hover {
285-
color: red;
286-
}
302+
:hover {
303+
color: red;
287304
}
288305

289306
---------- /out/toplevel-dot.css ----------
290307
/* toplevel-dot.css */
291-
a {
292-
.cls {
293-
color: red;
294-
}
308+
.cls {
309+
color: red;
295310
}
296311

297312
---------- /out/toplevel-greaterthan.css ----------
298313
/* toplevel-greaterthan.css */
299-
a {
300-
> b {
301-
color: red;
302-
}
314+
> b {
315+
color: red;
303316
}
304317

305318
---------- /out/toplevel-hash.css ----------
306319
/* toplevel-hash.css */
307-
a {
308-
#id {
309-
color: red;
310-
}
320+
#id {
321+
color: red;
311322
}
312323

313324
---------- /out/toplevel-plus.css ----------
314325
/* toplevel-plus.css */
315-
a {
316-
+ b {
317-
color: red;
318-
}
326+
+ b {
327+
color: red;
319328
}
320329

321330
---------- /out/toplevel-tilde.css ----------
322331
/* toplevel-tilde.css */
323-
a {
324-
~ b {
325-
color: red;
326-
}
332+
~ b {
333+
color: red;
327334
}
328335

329336
================================================================================

‎internal/css_parser/css_parser_selector.go

+9-1
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,12 @@ type parseSelectorOpts struct {
3838

3939
func (p *parser) parseComplexSelector(opts parseSelectorOpts) (result css_ast.ComplexSelector, ok bool) {
4040
// This is an extension: https://drafts.csswg.org/css-nesting-1/
41+
r := p.current().Range
4142
combinator := p.parseCombinator()
4243
if combinator != "" {
44+
if opts.isTopLevel {
45+
p.maybeWarnAboutNesting(r)
46+
}
4347
p.eat(css_lexer.TWhitespace)
4448
}
4549

@@ -85,8 +89,12 @@ func (p *parser) nameToken() css_ast.NameToken {
8589

8690
func (p *parser) parseCompoundSelector(opts parseSelectorOpts) (sel css_ast.CompoundSelector, ok bool) {
8791
// This is an extension: https://drafts.csswg.org/css-nesting-1/
88-
if p.eat(css_lexer.TDelimAmpersand) {
92+
if p.peek(css_lexer.TDelimAmpersand) {
93+
if opts.isTopLevel {
94+
p.maybeWarnAboutNesting(p.current().Range)
95+
}
8996
sel.HasNestingSelector = true
97+
p.advance()
9098
}
9199

92100
// Parse the type selector

0 commit comments

Comments
 (0)