fix #955: support css page margin rules

evanw · Mar 12, 2021 · b51bc60 · b51bc60
1 parent 15745ac
commit b51bc60
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,10 @@
     ({x, ...y} = {x: 1, y: 2})
     ```
 
+* Basic support for CSS page margin rules ([#955](https://github.com/evanw/esbuild/issues/955))
+
+    There are 16 different special at-rules that can be nested inside the `@page` rule. They are defined in [this specification](https://www.w3.org/TR/css-page-3/#syntax-page-selector). Previously esbuild treated these as unknown rules, but with this release esbuild will now treat these as known rules. The only real difference in behavior is that esbuild will no longer warn about these rules being unknown.
+
 ## 0.9.0
 
 **This release contains backwards-incompatible changes.** Since esbuild is before version 1.0.0, these changes have been released as a new minor version to reflect this (as [recommended by npm](https://docs.npmjs.com/cli/v6/using-npm/semver/)). You should either be pinning the exact version of `esbuild` in your `package.json` file or be using a version range syntax that only accepts patch upgrades such as `^0.8.0`. See the documentation about [semver](https://docs.npmjs.com/cli/v6/using-npm/semver/) for more information.

diff --git a/internal/css_parser/css_parser.go b/internal/css_parser/css_parser.go
@@ -297,6 +297,24 @@ var specialAtRules = map[string]atRuleKind{
 	"font-face": atRuleDeclarations,
 	"page":      atRuleDeclarations,
 
+	// These go inside "@page": https://www.w3.org/TR/css-page-3/#syntax-page-selector
+	"bottom-center":       atRuleDeclarations,
+	"bottom-left-corner":  atRuleDeclarations,
+	"bottom-left":         atRuleDeclarations,
+	"bottom-right-corner": atRuleDeclarations,
+	"bottom-right":        atRuleDeclarations,
+	"left-bottom":         atRuleDeclarations,
+	"left-middle":         atRuleDeclarations,
+	"left-top":            atRuleDeclarations,
+	"right-bottom":        atRuleDeclarations,
+	"right-middle":        atRuleDeclarations,
+	"right-top":           atRuleDeclarations,
+	"top-center":          atRuleDeclarations,
+	"top-left-corner":     atRuleDeclarations,
+	"top-left":            atRuleDeclarations,
+	"top-right-corner":    atRuleDeclarations,
+	"top-right":           atRuleDeclarations,
+
 	"document": atRuleInheritContext,
 	"media":    atRuleInheritContext,
 	"scope":    atRuleInheritContext,

diff --git a/internal/css_parser/css_parser_test.go b/internal/css_parser/css_parser_test.go
@@ -677,6 +677,82 @@ func TestAtRule(t *testing.T) {
 	expectParseError(t, "@", "<stdin>: warning: Unexpected \"@\"\n")
 	expectParseError(t, "@;", "<stdin>: warning: Unexpected \"@\"\n")
 	expectParseError(t, "@{}", "<stdin>: warning: Unexpected \"@\"\n")
+
+	// https://www.w3.org/TR/css-page-3/#syntax-page-selector
+	expectPrinted(t, `
+		@page :first { margin: 0 }
+		@page {
+			@top-left-corner { content: 'tlc' }
+			@top-left { content: 'tl' }
+			@top-center { content: 'tc' }
+			@top-right { content: 'tr' }
+			@top-right-corner { content: 'trc' }
+			@bottom-left-corner { content: 'blc' }
+			@bottom-left { content: 'bl' }
+			@bottom-center { content: 'bc' }
+			@bottom-right { content: 'br' }
+			@bottom-right-corner { content: 'brc' }
+			@left-top { content: 'lt' }
+			@left-middle { content: 'lm' }
+			@left-bottom { content: 'lb' }
+			@right-top { content: 'rt' }
+			@right-middle { content: 'rm' }
+			@right-bottom { content: 'rb' }
+		}
+	`, `@page :first {
+  margin: 0;
+}
+@page {
+  @top-left-corner {
+    content: "tlc";
+  }
+  @top-left {
+    content: "tl";
+  }
+  @top-center {
+    content: "tc";
+  }
+  @top-right {
+    content: "tr";
+  }
+  @top-right-corner {
+    content: "trc";
+  }
+  @bottom-left-corner {
+    content: "blc";
+  }
+  @bottom-left {
+    content: "bl";
+  }
+  @bottom-center {
+    content: "bc";
+  }
+  @bottom-right {
+    content: "br";
+  }
+  @bottom-right-corner {
+    content: "brc";
+  }
+  @left-top {
+    content: "lt";
+  }
+  @left-middle {
+    content: "lm";
+  }
+  @left-bottom {
+    content: "lb";
+  }
+  @right-top {
+    content: "rt";
+  }
+  @right-middle {
+    content: "rm";
+  }
+  @right-bottom {
+    content: "rb";
+  }
+}
+`)
 }
 
 func TestAtCharset(t *testing.T) {