Skip to content

Commit

Permalink
fix warnings about top-level css nesting
Browse files Browse the repository at this point in the history
  • Loading branch information
@evanw
evanw committed Mar 3, 2023
1 parent 38cfd53 commit 14fb414
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 64 deletions.
60 changes: 33 additions & 27 deletions internal/bundler_tests/bundler_css_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -700,30 +700,34 @@ func TestCSSExternalQueryAndHashMatchIssue1822(t *testing.T) {
func TestCSSNestingOldBrowser(t *testing.T) {
css_suite.expectBundled(t, bundled{
files: map[string]string{
"/[email protected]": `a { @layer base { color: red; } }`,
"/[email protected]": `a { @media screen { color: red; } }`,
"/nested-ampersand.css": `a { &, & { color: red; } }`,
"/nested-attribute.css": `a { [href] { color: red; } }`,
"/nested-colon.css": `a { :hover { color: red; } }`,
"/nested-dot.css": `a { .cls { color: red; } }`,
"/nested-greaterthan.css": `a { > b { color: red; } }`,
"/nested-hash.css": `a { #id { color: red; } }`,
"/nested-plus.css": `a { + b { color: red; } }`,
"/nested-tilde.css": `a { ~ b { color: red; } }`,

"/toplevel-ampersand.css": `a { &, & { color: red; } }`,
"/toplevel-attribute.css": `a { [href] { color: red; } }`,
"/toplevel-colon.css": `a { :hover { color: red; } }`,
"/toplevel-dot.css": `a { .cls { color: red; } }`,
"/toplevel-greaterthan.css": `a { > b { color: red; } }`,
"/toplevel-hash.css": `a { #id { color: red; } }`,
"/toplevel-plus.css": `a { + b { color: red; } }`,
"/toplevel-tilde.css": `a { ~ b { color: red; } }`,
"/[email protected]": `a { @layer base { color: red; } }`,
"/[email protected]": `a { @media screen { color: red; } }`,
"/nested-ampersand-twice.css": `a { &, & { color: red; } }`,
"/nested-ampersand-first.css": `a { &, b { color: red; } }`,
"/nested-attribute.css": `a { [href] { color: red; } }`,
"/nested-colon.css": `a { :hover { color: red; } }`,
"/nested-dot.css": `a { .cls { color: red; } }`,
"/nested-greaterthan.css": `a { > b { color: red; } }`,
"/nested-hash.css": `a { #id { color: red; } }`,
"/nested-plus.css": `a { + b { color: red; } }`,
"/nested-tilde.css": `a { ~ b { color: red; } }`,

"/toplevel-ampersand-twice.css": `&, & { color: red; }`,
"/toplevel-ampersand-first.css": `&, a { color: red; }`,
"/toplevel-ampersand-second.css": `a, & { color: red; }`,
"/toplevel-attribute.css": `[href] { color: red; }`,
"/toplevel-colon.css": `:hover { color: red; }`,
"/toplevel-dot.css": `.cls { color: red; }`,
"/toplevel-greaterthan.css": `> b { color: red; }`,
"/toplevel-hash.css": `#id { color: red; }`,
"/toplevel-plus.css": `+ b { color: red; }`,
"/toplevel-tilde.css": `~ b { color: red; }`,
},
entryPaths: []string{
"/[email protected]",
"/[email protected]",
"/nested-ampersand.css",
"/nested-ampersand-twice.css",
"/nested-ampersand-first.css",
"/nested-attribute.css",
"/nested-colon.css",
"/nested-dot.css",
Expand All @@ -732,7 +736,9 @@ func TestCSSNestingOldBrowser(t *testing.T) {
"/nested-plus.css",
"/nested-tilde.css",

"/toplevel-ampersand.css",
"/toplevel-ampersand-twice.css",
"/toplevel-ampersand-first.css",
"/toplevel-ampersand-second.css",
"/toplevel-attribute.css",
"/toplevel-colon.css",
"/toplevel-dot.css",
Expand All @@ -749,20 +755,20 @@ func TestCSSNestingOldBrowser(t *testing.T) {
},
expectedScanLog: `[email protected]: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
[email protected]: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-ampersand-first.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
nested-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-ampersand-first.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-ampersand-second.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-ampersand-twice.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
toplevel-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
`,
Expand Down
79 changes: 43 additions & 36 deletions internal/bundler_tests/snapshots/snapshots_css.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,15 +196,24 @@ a {
}
}

---------- /out/nested-ampersand.css ----------
/* nested-ampersand.css */
---------- /out/nested-ampersand-twice.css ----------
/* nested-ampersand-twice.css */
a {
&,
& {
color: red;
}
}

---------- /out/nested-ampersand-first.css ----------
/* nested-ampersand-first.css */
a {
&,
b {
color: red;
}
}

---------- /out/nested-attribute.css ----------
/* nested-attribute.css */
a {
Expand Down Expand Up @@ -261,69 +270,67 @@ a {
}
}

---------- /out/toplevel-ampersand.css ----------
/* toplevel-ampersand.css */
---------- /out/toplevel-ampersand-twice.css ----------
/* toplevel-ampersand-twice.css */
&,
& {
color: red;
}

---------- /out/toplevel-ampersand-first.css ----------
/* toplevel-ampersand-first.css */
&,
a {
&,
& {
color: red;
}
color: red;
}

---------- /out/toplevel-ampersand-second.css ----------
/* toplevel-ampersand-second.css */
a,
& {
color: red;
}

---------- /out/toplevel-attribute.css ----------
/* toplevel-attribute.css */
a {
[href] {
color: red;
}
[href] {
color: red;
}

---------- /out/toplevel-colon.css ----------
/* toplevel-colon.css */
a {
:hover {
color: red;
}
:hover {
color: red;
}

---------- /out/toplevel-dot.css ----------
/* toplevel-dot.css */
a {
.cls {
color: red;
}
.cls {
color: red;
}

---------- /out/toplevel-greaterthan.css ----------
/* toplevel-greaterthan.css */
a {
> b {
color: red;
}
> b {
color: red;
}

---------- /out/toplevel-hash.css ----------
/* toplevel-hash.css */
a {
#id {
color: red;
}
#id {
color: red;
}

---------- /out/toplevel-plus.css ----------
/* toplevel-plus.css */
a {
+ b {
color: red;
}
+ b {
color: red;
}

---------- /out/toplevel-tilde.css ----------
/* toplevel-tilde.css */
a {
~ b {
color: red;
}
~ b {
color: red;
}

================================================================================
Expand Down
10 changes: 9 additions & 1 deletion internal/css_parser/css_parser_selector.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,12 @@ type parseSelectorOpts struct {

func (p *parser) parseComplexSelector(opts parseSelectorOpts) (result css_ast.ComplexSelector, ok bool) {
// This is an extension: https://drafts.csswg.org/css-nesting-1/
r := p.current().Range
combinator := p.parseCombinator()
if combinator != "" {
if opts.isTopLevel {
p.maybeWarnAboutNesting(r)
}
p.eat(css_lexer.TWhitespace)
}

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

func (p *parser) parseCompoundSelector(opts parseSelectorOpts) (sel css_ast.CompoundSelector, ok bool) {
// This is an extension: https://drafts.csswg.org/css-nesting-1/
if p.eat(css_lexer.TDelimAmpersand) {
if p.peek(css_lexer.TDelimAmpersand) {
if opts.isTopLevel {
p.maybeWarnAboutNesting(p.current().Range)
}
sel.HasNestingSelector = true
p.advance()
}

// Parse the type selector
Expand Down

0 comments on commit 14fb414

Please sign in to comment.