diff --git a/internal/printer/printer_css_test.go b/internal/printer/printer_css_test.go
index 526584ec7..62029abc8 100644
--- a/internal/printer/printer_css_test.go
+++ b/internal/printer/printer_css_test.go
@@ -27,7 +27,7 @@ func TestPrinterCSS(t *testing.T) {
Page Title
I’m a page
`,
want: want{
- styles: []string{".title.astro-DPOHFLYM{font-family:fantasy;font-size:28px}.body.astro-DPOHFLYM{font-size:1em}"},
+ styles: []string{".title:where([data-astro-scope=\"DPOHFLYM\"]){font-family:fantasy;font-size:28px}.body:where([data-astro-scope=\"DPOHFLYM\"]){font-size:1em}"},
},
},
}
diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
index 3864a70e1..8fc03df2e 100644
--- a/internal/printer/printer_test.go
+++ b/internal/printer/printer_test.go
@@ -678,9 +678,9 @@ const name = "world";
Page Title
I’m a page
`,
want: want{
- styles: []string{"{props:{\"data-astro-id\":\"DPOHFLYM\"},children:`.title.astro-DPOHFLYM{font-family:fantasy;font-size:28px}.body.astro-DPOHFLYM{font-size:1em}`}"},
- code: "\n\n\t\t" + `Page Title
- I’m a page
`,
+ styles: []string{"{props:{\"data-astro-id\":\"DPOHFLYM\"},children:`.title:where([data-astro-scope=\"DPOHFLYM\"]){font-family:fantasy;font-size:28px}.body:where([data-astro-scope=\"DPOHFLYM\"]){font-size:1em}`}"},
+ code: "\n\n\t\t" + `Page Title
+ I’m a page
`,
},
},
{
@@ -808,7 +808,7 @@ import Counter from '../components/Counter.jsx'`,
hydratedComponents: []string{`Counter`},
hydrationDirectives: []string{"visible"},
},
- code: `
+ code: `
@@ -816,8 +816,8 @@ import Counter from '../components/Counter.jsx'`,
` + RENDER_HEAD_RESULT + `
-
- ${$$renderComponent($$result,'Counter',Counter,{...(someProps),"client:visible":true,"client:component-hydration":"visible","client:component-path":($$metadata.getPath(Counter)),"client:component-export":($$metadata.getExport(Counter)),"class":"astro-HMNNHVCQ"},{"default": () => $$render` + "`" + `Hello React!
` + "`" + `,})}
+
+ ${$$renderComponent($$result,'Counter',Counter,{...(someProps),"client:visible":true,"client:component-hydration":"visible","client:component-path":($$metadata.getPath(Counter)),"client:component-export":($$metadata.getExport(Counter)),"data-astro-scope":"HMNNHVCQ"},{"default": () => $$render` + "`" + `Hello React!
` + "`" + `,})}
`,
@@ -1293,8 +1293,8 @@ import { Container, Col, Row } from 'react-bootstrap';
`,
want: want{
styles: []string{
- "{props:{\"data-astro-id\":\"LASNTLJA\"},children:`div.astro-LASNTLJA{color:blue}`}",
- "{props:{\"is:scoped\":true,\"data-astro-id\":\"LASNTLJA\"},children:`div.astro-LASNTLJA{color:green}`}",
+ "{props:{\"data-astro-id\":\"LASNTLJA\"},children:`div:where(.astro-LASNTLJA){color:blue}`}",
+ "{props:{\"is:scoped\":true,\"data-astro-id\":\"LASNTLJA\"},children:`div:where(.astro-LASNTLJA){color:green}`}",
"{props:{\"is:global\":true},children:`div { color: red }`}",
},
code: "\n\n\n\n\n\n\n" + RENDER_HEAD_RESULT + "\n",
@@ -1652,8 +1652,8 @@ const items = ["Dog", "Cat", "Platipus"];
My Text
`,
want: want{
- styles: []string{fmt.Sprintf(`{props:{"data-astro-id":"SJ3WYE6H"},children:%s.container.astro-SJ3WYE6H{padding:2rem}%s}`, BACKTICK, BACKTICK)},
- code: `My Text
`,
+ styles: []string{fmt.Sprintf(`{props:{"data-astro-id":"SJ3WYE6H"},children:%s.container:where([data-astro-scope="SJ3WYE6H"]){padding:2rem}%s}`, BACKTICK, BACKTICK)},
+ code: `My Text
`,
},
},
{
@@ -1814,9 +1814,9 @@ const items = ["Dog", "Cat", "Platipus"];
source: "testing
",
staticExtraction: true,
want: want{
- code: `testing
`,
+ code: `testing
`,
styles: []string{
- "{props:{\"define:vars\":({color:'green'}),\"data-astro-id\":\"VFS5OEMV\"},children:`h1.astro-VFS5OEMV{color:var(--color)}`}",
+ "{props:{\"define:vars\":({color:'green'}),\"data-astro-id\":\"VFS5OEMV\"},children:`h1:where([data-astro-scope=\"VFS5OEMV\"]){color:var(--color)}`}",
},
},
},
diff --git a/internal/transform/scope-css_test.go b/internal/transform/scope-css_test.go
index a2e864864..48e6e644c 100644
--- a/internal/transform/scope-css_test.go
+++ b/internal/transform/scope-css_test.go
@@ -44,27 +44,27 @@ func TestScopeStyle(t *testing.T) {
{
name: "children universal",
source: ".class *{}",
- want: ".class:where([data-astro-scope=\"XXXXXX\"]) *:where([data-astro-scope=\"XXXXXX\"]){}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]) :where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "attr",
source: "a[aria-current=\"page\"]{}",
- want: "a[aria-current=page]:where([data-astro-scope=\"XXXXXX\"]){}",
+ want: "a:where([data-astro-scope=\"XXXXXX\"])[aria-current=page]{}",
},
{
name: "attr universal implied",
source: "[aria-visible],[aria-hidden]{}",
- want: "[aria-visible]:where([data-astro-scope=\"XXXXXX\"]),[aria-hidden]:where([data-astro-scope=\"XXXXXX\"]){}",
+ want: ":where([data-astro-scope=\"XXXXXX\"])[aria-visible],:where([data-astro-scope=\"XXXXXX\"])[aria-hidden]{}",
},
{
name: "universal pseudo state",
source: "*:hover{}",
- want: "*:where([data-astro-scope=\"XXXXXX\"]):hover{}",
+ want: ":where([data-astro-scope=\"XXXXXX\"]):hover{}",
},
{
name: "immediate child universal",
source: ".class>*{}",
- want: ".class:where([data-astro-scope=\"XXXXXX\"])>*:where([data-astro-scope=\"XXXXXX\"]){}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"])>:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "element + pseudo state",
@@ -84,32 +84,32 @@ func TestScopeStyle(t *testing.T) {
{
name: "element + pseudo state + pseudo element",
source: "button:focus::before{}",
- want: "button.astro-XXXXXX:focus::before{}",
+ want: "button:where([data-astro-scope=\"XXXXXX\"]):focus::before{}",
},
{
name: "global children",
source: ".class :global(ul li){}",
- want: ".class.astro-XXXXXX ul li{}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]) ul li{}",
},
{
name: "global universal",
source: ".class :global(*){}",
- want: ".class.astro-XXXXXX *{}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]) *{}",
},
{
name: "global with scoped children",
source: ":global(section) .class{}",
- want: "section .class.astro-XXXXXX{}",
+ want: "section .class:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "subsequent siblings + global",
source: ".class~:global(a){}",
- want: ".class.astro-XXXXXX~a{}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"])~a{}",
},
{
name: "global nested parens",
source: ".class :global(.nav:not(.is-active)){}",
- want: ".class.astro-XXXXXX .nav:not(.is-active){}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]) .nav:not(.is-active){}",
},
{
name: "global nested parens + chained class",
@@ -124,27 +124,27 @@ func TestScopeStyle(t *testing.T) {
{
name: "class chained global",
source: ".class:global(.bar){}",
- want: ".class.astro-XXXXXX.bar{}", // technically this may be incorrect, but would require a lookahead to fix
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]).bar{}", // technically this may be incorrect, but would require a lookahead to fix
},
{
name: "chained :not()",
source: ".class:not(.is-active):not(.is-disabled){}",
- want: ".class.astro-XXXXXX:not(.is-active):not(.is-disabled){}",
+ want: ".class:where([data-astro-scope=\"XXXXXX\"]):not(.is-active):not(.is-disabled){}",
},
{
name: "weird chaining",
source: ":hover.a:focus{}", // yes this is valid. yes I’m just upset as you are :(
- want: ":hover.a.astro-XXXXXX:focus{}",
+ want: ":hover.a:where([data-astro-scope=\"XXXXXX\"]):focus{}",
},
{
name: "more weird chaining",
source: ":not(.is-disabled).a{}",
- want: ":not(.is-disabled).a.astro-XXXXXX{}",
+ want: ":not(.is-disabled).a:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "body",
source: "body h1{}",
- want: "body h1.astro-XXXXXX{}",
+ want: "body h1:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "body class",
@@ -164,7 +164,7 @@ func TestScopeStyle(t *testing.T) {
{
name: "escaped characters",
source: ".class\\:class:focus{}",
- want: ".class\\:class.astro-XXXXXX:focus{}",
+ want: ".class\\:class:where([data-astro-scope=\"XXXXXX\"]):focus{}",
},
// the following tests assert we leave valid CSS alone
{
@@ -190,17 +190,17 @@ func TestScopeStyle(t *testing.T) {
{
name: "keyframes start",
source: "@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}} h1{} h2{}",
- want: "@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}h1.astro-XXXXXX{}h2.astro-XXXXXX{}",
+ want: "@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}h1:where([data-astro-scope=\"XXXXXX\"]){}h2:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "keyframes middle",
source: "h1{} @keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}} h2{}",
- want: "h1.astro-XXXXXX{}@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}h2.astro-XXXXXX{}",
+ want: "h1:where([data-astro-scope=\"XXXXXX\"]){}@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}h2:where([data-astro-scope=\"XXXXXX\"]){}",
},
{
name: "keyframes end",
source: "h1{} h2{} @keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}",
- want: "h1.astro-XXXXXX{}h2.astro-XXXXXX{}@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}",
+ want: "h1:where([data-astro-scope=\"XXXXXX\"]){}h2:where([data-astro-scope=\"XXXXXX\"]){}@keyframes shuffle{0%{transform:rotate(0deg);color:blue}100%{transform:rotate(360deg)}}",
},
{
name: "calc",
@@ -210,7 +210,7 @@ func TestScopeStyle(t *testing.T) {
{
name: "grid-template-columns",
source: "div{grid-template-columns: [content-start] 1fr [content-end];}",
- want: "div.astro-XXXXXX{grid-template-columns:[content-start] 1fr [content-end]}",
+ want: "div:where([data-astro-scope=\"XXXXXX\"]){grid-template-columns:[content-start] 1fr [content-end]}",
},
{
name: "charset",
@@ -233,12 +233,12 @@ func TestScopeStyle(t *testing.T) {
want: "@tailwind base;",
},
{
- name: "invalid CSS (missing semi)",
+ name: "invalid CSS (`missing semi`)",
source: `.foo {
color: blue
font-size: 18px;
}`,
- want: `.foo.astro-XXXXXX{color:blue font-size: 18px}`,
+ want: `.foo:where([data-astro-scope="XXXXXX"]){color:blue font-size: 18px}`,
},
{
name: "nesting media",
@@ -248,12 +248,12 @@ func TestScopeStyle(t *testing.T) {
{
name: "nesting combinator",
source: "div { & span { color: blue } }",
- want: "div.astro-XXXXXX{& span.astro-XXXXXX{color:blue}}",
+ want: "div:where([data-astro-scope=\"XXXXXX\"]){& span:where([data-astro-scope=\"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}}",
+ want: ".header:where([data-astro-scope=\"XXXXXX\"]){background-color:white;&.dark{background-color:blue}}",
},
{
name: "@container",
@@ -262,12 +262,12 @@ func TestScopeStyle(t *testing.T) {
font-size: 30px;
}
}`,
- want: "@container (min-width: 200px) and (min-height: 200px){h1.astro-XXXXXX{font-size:30px}}",
+ want: "@container (min-width: 200px) and (min-height: 200px){h1:where([data-astro-scope=\"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}}",
+ want: "@layer theme,layout,utilities;@layer special{.item:where([data-astro-scope=\"XXXXXX\"]){color:rebeccapurple}}",
},
}
for _, tt := range tests {
diff --git a/lib/esbuild/css_printer/astro_features.go b/lib/esbuild/css_printer/astro_features.go
index 0aa954e10..82cb96008 100644
--- a/lib/esbuild/css_printer/astro_features.go
+++ b/lib/esbuild/css_printer/astro_features.go
@@ -8,7 +8,7 @@ import (
)
func (p *printer) printScopedSelector() bool {
- p.print(fmt.Sprintf(":where([data-astro-scope~=\"%s\"])", p.options.Scope))
+ p.print(fmt.Sprintf(":where([data-astro-scope=\"%s\"])", p.options.Scope))
return true
}