Use `esbuild`'s CSS parser #329

natemoo-re · 2022-03-14T01:56:17Z

Changes

Switches CSS parsing/scoping from github.com/tdewolff/parse/css to a vendor'd version of esbuild.
Why vendor/fork esbuild? As far as I can tell, it is the only up-to-date CSS parser in the Go ecosystem (meaning it supports nesting and other modern CSS features). With a proper public plugin system, we wouldn't have to pull this code into our codebase, but esbuild's public API is intentionally limited.
Closes 🐛 BUG: Nesting At-Rules break all proceeding CSS #210, closes [WIP] Allow external scoping #294
Note while this PR allows us to parse modern syntax like nesting, @container, and @layer, we aren't down-leveling any of these features automatically.

Testing

Tests have been updated to reflect esbuild's CSS output, which is slightly more terse.
New tests have been added to ensure we support modern syntax like nesting, @container, and @layer.

Docs

Internal change only

changeset-bot · 2022-03-14T01:56:19Z

🦋 Changeset detected

Latest commit: 62ecc5e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/compiler	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

natemoo-re · 2022-03-14T01:56:57Z

internal/printer/printer_css_test.go

-				styles: []string{".title.astro-DPOHFLYM{font-family:fantasy;font-size:28px;}.body.astro-DPOHFLYM{font-size:1em;}"},
+				styles: []string{".title.astro-DPOHFLYM{font-family:fantasy;font-size:28px}.body.astro-DPOHFLYM{font-size:1em}"},


Lots of small test changes like this. esbuild doesn't emit trailing ;

natemoo-re · 2022-03-14T01:58:47Z

internal/transform/scope-css.go

-		p := css.NewParser(bytes.NewBufferString(n.FirstChild.Data), false)
-		out := ""


All of our custom handling based on tokenization is gone. This should significantly reduce the maintenance cost of CSS scoping.

esbuild's CSS AST is battle-tested and supports a lot more than the previous package.

natemoo-re · 2022-03-14T02:01:09Z

internal/transform/scope-css.go

+		// Use vendored version of esbuild internals to parse AST
+		tree := css_parser.Parse(logger.Log{AddMsg: func(msg logger.Msg) {}}, logger.Source{Contents: n.FirstChild.Data}, css_parser.Options{MinifySyntax: false, MinifyWhitespace: true})
+		// esbuild's internal `css_printer` has been modified to emit Astro scoped styles
+		result := css_printer.Print(tree, css_printer.Options{MinifyWhitespace: true, Scope: opts.Scope})


This is pretty much it. Rather than modify the tree AST (too complex), we modified the css_printer to handle our scoping when printing selector nodes.

natemoo-re · 2022-03-14T02:02:06Z

internal/transform/scope-css_test.go

+		{
+			name:   "nesting media",
+			source: ":global(html) { @media (min-width: 640px) { color: blue } }html { background-color: lime }",
+			want:   "html{@media (min-width: 640px){color:blue}}html{background-color:lime}",
+		},
+		{
+			name:   "nesting combinator",
+			source: "div { & span { color: blue } }",
+			want:   "div.astro-XXXXXX{& span.astro-XXXXXX{color:blue}}",
+		},
+		{
+			name:   "nesting modifier",
+			source: ".header { background-color: white; &.dark { background-color: blue; }}",
+			want:   ".header.astro-XXXXXX{background-color:white;&.dark{background-color:blue}}",
+		},
+		{
+			name: "@container",
+			source: `@container (min-width: 200px) and (min-height: 200px) {
+        h1 {
+          font-size: 30px;
+        }
+      }`,
+			want: "@container (min-width: 200px) and (min-height: 200px){h1.astro-XXXXXX{font-size:30px}}",
+		},
+		{
+			name:   "@layer",
+			source: "@layer theme, layout, utilities; @layer special { .item { color: rebeccapurple; }}",
+			want:   "@layer theme,layout,utilities;@layer special{.item.astro-XXXXXX{color:rebeccapurple}}",


New tests for modern CSS draft features. There's no toggle or user setting, we just know how to parse it now.

natemoo-re · 2022-03-14T02:03:03Z

lib/esbuild/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Evan Wallace


Everything below here is vendor'd from esbuild's internals, with the exception of some modifications to css_printer.

natemoo-re · 2022-03-14T02:10:31Z

lib/esbuild/css_printer/css_printer.go

+			// class selector
+			whitespace = canDiscardWhitespaceAfter
+		}
+		if sel.TypeSelector.Name.Text == "*" {
+			p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+			scoped = true
+		} else {
+			p.printNamespacedName(*sel.TypeSelector, whitespace)
+		}
+		switch sel.TypeSelector.Name.Text {
+		case "body", "html":
+			scoped = true
+		default:
+			if !scoped {
+				p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+				scoped = true
+			}
+		}
+	}
+
+	for i, sub := range sel.SubclassSelectors {
+		whitespace := mayNeedWhitespaceAfter
+
+		// There is no chance of whitespace between subclass selectors
+		if i+1 < len(sel.SubclassSelectors) {
+			whitespace = canDiscardWhitespaceAfter
+		}
+
+		switch s := sub.(type) {
+		case *css_ast.SSHash:
+			p.print("#")
+
+			// This deliberately does not use identHash. From the specification:
+			// "In <id-selector>, the <hash-token>'s value must be an identifier."
+			p.printIdent(s.Name, identNormal, whitespace)
+			if !scoped {
+				p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+				scoped = true
+			}
+
+		case *css_ast.SSClass:
+			p.print(".")
+			p.printIdent(s.Name, identNormal, whitespace)
+			if !scoped {
+				p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+				scoped = true
+			}
+
+		case *css_ast.SSAttribute:
+			if !scoped {
+				p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+				scoped = true
+			}
+			p.print("[")
+			p.printNamespacedName(s.NamespacedName, canDiscardWhitespaceAfter)
+			if s.MatcherOp != "" {
+				p.print(s.MatcherOp)
+				printAsIdent := false
+
+				// Print the value as an identifier if it's possible
+				if css_lexer.WouldStartIdentifierWithoutEscapes(s.MatcherValue) {
+					printAsIdent = true
+					for _, c := range s.MatcherValue {
+						if !css_lexer.IsNameContinue(c) {
+							printAsIdent = false
+							break
+						}
+					}
+				}
+
+				if printAsIdent {
+					p.printIdent(s.MatcherValue, identNormal, canDiscardWhitespaceAfter)
+				} else {
+					p.printQuoted(s.MatcherValue)
+				}
+			}
+			if s.MatcherModifier != 0 {
+				p.print(" ")
+				p.print(string(rune(s.MatcherModifier)))
+			}
+			p.print("]")
+
+		case *css_ast.SSPseudoClass:
+			p.printPseudoClassSelector(*s, whitespace)
+			if s.Name == "global" || s.Name == "root" {
+				scoped = true
+			}
+		}
+	}
+
+	if !scoped {
+		p.print(fmt.Sprintf(".astro-%s", p.options.Scope))
+	}
+
+	// It doesn't matter where the "&" goes since all non-prefix cases are
+	// treated the same. This just always puts it as a suffix for simplicity.
+	if sel.NestingSelector == css_ast.NestingSelectorPresentButNotPrefix {
+		p.print("&")
+	}
+}


This function has been modified to print our scoped selectors

matthewp · 2022-03-16T19:06:42Z

lgtm

natemoo-re commented Mar 14, 2022

View reviewed changes

natemoo-re mentioned this pull request Mar 14, 2022

[WIP] Allow external scoping #294

Closed

natemoo-re self-assigned this Mar 14, 2022

natemoo-re force-pushed the feat/new-css branch 2 times, most recently from 40e7612 to 10b2eac Compare March 14, 2022 17:28

Nate Moore added 11 commits March 18, 2022 17:46

wip: use esbuild css parser

34325b1

chore(css): update tests

bed4144

feat(css): support modern CSS features like nesting, @container

1a95190

chore: add esbuild license

7fcae93

chore: tidy modules

b2aefb3

chore: update workspace

c656df7

chore: remove README link

07f59b1

chore: update README symlink

5160ab9

chore: update Makefile

0d6215f

feat: update deno WASM

17478b9

chore: add changeset

62ecc5e

natemoo-re force-pushed the feat/new-css branch from 10b2eac to 62ecc5e Compare March 18, 2022 22:47

natemoo-re merged commit ce3f1a5 into main Mar 18, 2022

natemoo-re deleted the feat/new-css branch March 18, 2022 22:48

natemoo-re mentioned this pull request Mar 18, 2022

Update Compiler with new CSS Parser withastro/astro#2833

Merged

This was referenced Mar 18, 2022

[ci] release (next) withastro/astro#2812

Merged

[ci] release withastro/astro#2884

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `esbuild`'s CSS parser #329

Use `esbuild`'s CSS parser #329

natemoo-re commented Mar 14, 2022

changeset-bot bot commented Mar 14, 2022 •

edited

Loading

natemoo-re Mar 14, 2022

natemoo-re Mar 14, 2022

natemoo-re Mar 14, 2022

natemoo-re Mar 14, 2022

natemoo-re Mar 14, 2022

natemoo-re Mar 14, 2022

matthewp commented Mar 16, 2022

		styles: []string{".title.astro-DPOHFLYM{font-family:fantasy;font-size:28px;}.body.astro-DPOHFLYM{font-size:1em;}"},
		styles: []string{".title.astro-DPOHFLYM{font-family:fantasy;font-size:28px}.body.astro-DPOHFLYM{font-size:1em}"},

		p := css.NewParser(bytes.NewBufferString(n.FirstChild.Data), false)
		out := ""

Use esbuild's CSS parser #329

Use esbuild's CSS parser #329

Conversation

natemoo-re commented Mar 14, 2022

Changes

Testing

Docs

changeset-bot bot commented Mar 14, 2022 • edited Loading

🦋 Changeset detected

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

natemoo-re Mar 14, 2022

Choose a reason for hiding this comment

matthewp commented Mar 16, 2022

Use `esbuild`'s CSS parser #329

Use `esbuild`'s CSS parser #329

changeset-bot bot commented Mar 14, 2022 •

edited

Loading