fixing parsing for CSS variables in style parsing (#125)

* fixing parsing for CSS variables in style parsing * adding a changeset Co-authored-by: Tony Sullivan <[email protected]>
withastro · Oct 31, 2021 · f052465 · f052465
1 parent 5e0b559
commit f052465
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/chilled-socks-buy.md b/.changeset/chilled-socks-buy.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fix CSS variable parsing in the scoped CSS transform
diff --git a/internal/transform/scope-css.go b/internal/transform/scope-css.go
@@ -205,9 +205,14 @@ outer:
 					out += ","
 				}
 			default:
-				out += string(data)
+				strData := string(data)
+				out += strData
 				for _, val := range p.Values() {
 					strVal := string(val.Data)
+					// handle CSS variables
+					if strings.HasPrefix(strData, "--") {
+						out += ":"
+					}
 					out += strVal
 				}
 				out += ";"

diff --git a/internal/transform/scope-css_test.go b/internal/transform/scope-css_test.go
@@ -173,6 +173,11 @@ func TestScopeStyle(t *testing.T) {
 			source: "body{background-image:url('/assets/bg.jpg');clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);}",
 			want:   "body{background-image:url('/assets/bg.jpg');clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);}",
 		},
+		{
+			name:   "variables",
+			source: "body{--bg:red;background:var(--bg);color:black;}",
+			want:   "body{--bg:red;background:var(--bg);color:black;}",
+		},
 		{
 			name:   "keyframes",
 			source: "@keyframes shuffle{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}",