Skip to content

Commit

Permalink
chore: update tests for zero-specificity CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
Nate Moore committed May 16, 2022
1 parent 67ecaee commit d3e71c1
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 41 deletions.
2 changes: 1 addition & 1 deletion internal/printer/printer_css_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ func TestPrinterCSS(t *testing.T) {
<h1 class="title">Page Title</h1>
<p class="body">I’m a page</p>`,
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}"},
},
},
}
Expand Down
24 changes: 12 additions & 12 deletions internal/printer/printer_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -678,9 +678,9 @@ const name = "world";
<h1 class="title">Page Title</h1>
<p class="body">I’m a page</p>`,
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" + `<h1 class="title astro-DPOHFLYM">Page Title</h1>
<p class="body astro-DPOHFLYM">I’m a page</p>`,
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" + `<h1 class="title" data-astro-scope="DPOHFLYM">Page Title</h1>
<p class="body" data-astro-scope="DPOHFLYM">I’m a page</p>`,
},
},
{
Expand Down Expand Up @@ -808,16 +808,16 @@ import Counter from '../components/Counter.jsx'`,
hydratedComponents: []string{`Counter`},
hydrationDirectives: []string{"visible"},
},
code: `<html lang="en" class="astro-HMNNHVCQ">
code: `<html lang="en" data-astro-scope="HMNNHVCQ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
` + RENDER_HEAD_RESULT + `</head>
<body>
<main class="astro-HMNNHVCQ">
${$$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` + "`" + `<h1 class="astro-HMNNHVCQ">Hello React!</h1>` + "`" + `,})}
<main data-astro-scope="HMNNHVCQ">
${$$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` + "`" + `<h1 data-astro-scope="HMNNHVCQ">Hello React!</h1>` + "`" + `,})}
</main>
</body></html>
`,
Expand Down Expand Up @@ -1293,8 +1293,8 @@ import { Container, Col, Row } from 'react-bootstrap';
<div />`,
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: "<head>\n\n\n\n\n\n\n" + RENDER_HEAD_RESULT + "</head>\n<div class=\"astro-LASNTLJA\"></div>",
Expand Down Expand Up @@ -1652,8 +1652,8 @@ const items = ["Dog", "Cat", "Platipus"];
</style><div class="container">My Text</div>`,

want: want{
styles: []string{fmt.Sprintf(`{props:{"data-astro-id":"SJ3WYE6H"},children:%s.container.astro-SJ3WYE6H{padding:2rem}%s}`, BACKTICK, BACKTICK)},
code: `<div class="container astro-SJ3WYE6H">My Text</div>`,
styles: []string{fmt.Sprintf(`{props:{"data-astro-id":"SJ3WYE6H"},children:%s.container:where([data-astro-scope="SJ3WYE6H"]){padding:2rem}%s}`, BACKTICK, BACKTICK)},
code: `<div class="container" data-astro-scope="SJ3WYE6H">My Text</div>`,
},
},
{
Expand Down Expand Up @@ -1814,9 +1814,9 @@ const items = ["Dog", "Cat", "Platipus"];
source: "<style>h1{color:green;}</style><style define:vars={{color:'green'}}>h1{color:var(--color)}</style><h1>testing</h1>",
staticExtraction: true,
want: want{
code: `<h1 class="astro-VFS5OEMV">testing</h1>`,
code: `<h1 data-astro-scope="VFS5OEMV">testing</h1>`,
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)}`}",
},
},
},
Expand Down
54 changes: 27 additions & 27 deletions internal/transform/scope-css_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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
{
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion lib/esbuild/css_printer/astro_features.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down

0 comments on commit d3e71c1

Please sign in to comment.