From 3f995627eb93e6517a0a5f3143e96dd9ef5a2270 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Sun, 12 Jan 2025 15:05:37 +0530 Subject: [PATCH 1/7] Update scoped-stylesheet.unit.ts --- .../src/core/style/scoped-stylesheet.unit.ts | 165 +++++++++--------- 1 file changed, 83 insertions(+), 82 deletions(-) diff --git a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts index ca07d9ced9f..c7ca102124d 100644 --- a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts +++ b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts @@ -1,109 +1,110 @@ import { assert, test } from 'vitest'; import { scopeStylesheet } from './scoped-stylesheet'; +import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('selectors', () => { - assert.equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}'); - assert.equal(scopeStylesheet('div {}div{} div {}', '_'), 'div.⭐️_ {}div.⭐️_{} div.⭐️_ {}'); - assert.equal(scopeStylesheet('div, p {}', '_'), 'div.⭐️_, p.⭐️_ {}'); + assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); + assert.equal(scopeStylesheet('div {}div{} div {}', '_'), `div.${prefix}_ {}div.${prefix}_{} div.${prefix}_ {}`); + assert.equal(scopeStylesheet('div, p {}', '_'), `div.${prefix}_, p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div p {}', '_'), 'div.⭐️_ p.⭐️_ {}'); - assert.equal(scopeStylesheet('div > p {}', '_'), 'div.⭐️_ > p.⭐️_ {}'); - assert.equal(scopeStylesheet('div + p {}', '_'), 'div.⭐️_ + p.⭐️_ {}'); - assert.equal(scopeStylesheet('div ~ p {}', '_'), 'div.⭐️_ ~ p.⭐️_ {}'); + assert.equal(scopeStylesheet('div p {}', '_'), `div.${prefix}_ p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div > p {}', '_'), `div.${prefix}_ > p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div + p {}', '_'), `div.${prefix}_ + p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div ~ p {}', '_'), `div.${prefix}_ ~ p.${prefix}_ {}`); - assert.equal(scopeStylesheet('.red {}', '_'), '.red.⭐️_ {}'); - assert.equal(scopeStylesheet('div.red {}', '_'), 'div.red.⭐️_ {}'); + assert.equal(scopeStylesheet('.red {}', '_'), `.red.${prefix}_ {}`); + assert.equal(scopeStylesheet('div.red {}', '_'), `div.red.${prefix}_ {}`); }); test('unicode', () => { - assert.equal(scopeStylesheet('.miško{}', '_'), '.miško.⭐️_{}'); + assert.equal(scopeStylesheet('.miško{}', '_'), `.miško.${prefix}_{}`); }); test('selectors with *', () => { - assert.equal(scopeStylesheet('* {}', '_'), '.⭐️_ {}'); - assert.equal(scopeStylesheet('.red * {}', '_'), '.red.⭐️_ .⭐️_ {}'); - assert.equal(scopeStylesheet('#red * {}', '_'), '#red.⭐️_ .⭐️_ {}'); + assert.equal(scopeStylesheet('* {}', '_'), `.${prefix}_ {}`); + assert.equal(scopeStylesheet('.red * {}', '_'), `.red.${prefix}_ .${prefix}_ {}`); + assert.equal(scopeStylesheet('#red * {}', '_'), `#red.${prefix}_ .${prefix}_ {}`); }); test('selectors with chains', () => { - assert.equal(scopeStylesheet('.red.text {}', '_'), '.red.text.⭐️_ {}'); + assert.equal(scopeStylesheet('.red.text {}', '_'), `.red.text.${prefix}_ {}`); - assert.equal(scopeStylesheet('#red {}', '_'), '#red.⭐️_ {}'); - assert.equal(scopeStylesheet('div#red {}', '_'), 'div#red.⭐️_ {}'); + assert.equal(scopeStylesheet('#red {}', '_'), `#red.${prefix}_ {}`); + assert.equal(scopeStylesheet('div#red {}', '_'), `div#red.${prefix}_ {}`); - assert.equal(scopeStylesheet('div { }', '_'), 'div.⭐️_ { }'); - assert.equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}'); + assert.equal(scopeStylesheet('div { }', '_'), `div.${prefix}_ { }`); + assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); assert.equal( scopeStylesheet('div {background-color: blue; }', '_'), - 'div.⭐️_ {background-color: blue; }' + `div.${prefix}_ {background-color: blue; }` ); assert.equal( scopeStylesheet('div { color: red !important; }', '_'), - 'div.⭐️_ { color: red !important; }' + `div.${prefix}_ { color: red !important; }` ); - assert.equal(scopeStylesheet('div{color:red;}', '_'), 'div.⭐️_{color:red;}'); - assert.equal(scopeStylesheet('div { content: "}"; }', '_'), 'div.⭐️_ { content: "}"; }'); - assert.equal(scopeStylesheet("div { content: '}'; }", '_'), "div.⭐️_ { content: '}'; }"); + assert.equal(scopeStylesheet('div{color:red;}', '_'), `div.${prefix}_{color:red;}`); + assert.equal(scopeStylesheet('div { content: "}"; }', '_'), `div.${prefix}_ { content: "}"; }`); + assert.equal(scopeStylesheet("div { content: '}'; }", '_'), `div.${prefix}_ { content: '}'; }`); }); test('attribute selectors', () => { - assert.equal(scopeStylesheet('*[a]{}', '_'), '[a].⭐️_{}'); - assert.equal(scopeStylesheet('*[a] {}', '_'), '[a].⭐️_ {}'); - assert.equal(scopeStylesheet('*[target] span {}', '_'), '[target].⭐️_ span.⭐️_ {}'); - - assert.equal(scopeStylesheet('a[target] {}', '_'), 'a[target].⭐️_ {}'); - assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), 'a[target="_blank"].⭐️_ {}'); - assert.equal(scopeStylesheet('input[type="button"] {}', '_'), 'input[type="button"].⭐️_ {}'); - - assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), 'a[title~="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), 'a[class^="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), 'a[class|="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), 'a[class*="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), 'a[class$="red"].⭐️_ {}'); + assert.equal(scopeStylesheet('*[a]{}', '_'), `[a].${prefix}_{}`); + assert.equal(scopeStylesheet('*[a] {}', '_'), `[a].${prefix}_ {}`); + assert.equal(scopeStylesheet('*[target] span {}', '_'), `[target].${prefix}_ span.${prefix}_ {}`); + + assert.equal(scopeStylesheet('a[target] {}', '_'), `a[target].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), `a[target="_blank"].${prefix}_ {}`); + assert.equal(scopeStylesheet('input[type="button"] {}', '_'), `input[type="button"].${prefix}_ {}`); + + assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), `a[title~="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), `a[class^="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), `a[class|="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), `a[class*="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), `a[class$="red"].${prefix}_ {}`); }); test('pseudo classes', () => { - assert.equal(scopeStylesheet('p:lang(en) {}', '_'), 'p:lang(en).⭐️_ {}'); - assert.equal(scopeStylesheet('a:link {}', '_'), 'a:link.⭐️_ {}'); - assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), 'p:nth-child(2).⭐️_ {}'); - assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), 'p:nth-child(3n+1).⭐️_ {}'); + assert.equal(scopeStylesheet('p:lang(en) {}', '_'), `p:lang(en).${prefix}_ {}`); + assert.equal(scopeStylesheet('a:link {}', '_'), `a:link.${prefix}_ {}`); + assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), `p:nth-child(2).${prefix}_ {}`); + assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), `p:nth-child(3n+1).${prefix}_ {}`); }); test('pseudo classes without selector', () => { - assert.equal(scopeStylesheet(':root {}', '_'), ':root.⭐️_ {}'); + assert.equal(scopeStylesheet(':root {}', '_'), `:root.${prefix}_ {}`); }); test('pseudo selector with negation', () => { - assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), 'p:not(.blue.⭐️_).⭐️_ {}'); + assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), `p:not(.blue.${prefix}_).${prefix}_ {}`); }); test('pseudo selector with :nth', () => { assert.equal( scopeStylesheet('p:nth-child(3n+1):hover {}', '_'), - 'p:nth-child(3n+1):hover.⭐️_ {}' + `p:nth-child(3n+1):hover.${prefix}_ {}` ); assert.equal( scopeStylesheet('p:nth-child(3n+1) div {}', '_'), - 'p:nth-child(3n+1).⭐️_ div.⭐️_ {}' + `p:nth-child(3n+1).${prefix}_ div.${prefix}_ {}` ); }); test('pseudo elements', () => { - assert.equal(scopeStylesheet('::selection {}', '_'), '.⭐️_::selection {}'); - assert.equal(scopeStylesheet(' ::space {}', '_'), ' .⭐️_::space {}'); + assert.equal(scopeStylesheet('::selection {}', '_'), `.${prefix}_::selection {}`); + assert.equal(scopeStylesheet(' ::space {}', '_'), ` .${prefix}_::space {}`); - assert.equal(scopeStylesheet('a::before {}', '_'), 'a.⭐️_::before {}'); - assert.equal(scopeStylesheet('a::after {}', '_'), 'a.⭐️_::after {}'); + assert.equal(scopeStylesheet('a::before {}', '_'), `a.${prefix}_::before {}`); + assert.equal(scopeStylesheet('a::after {}', '_'), `a.${prefix}_::after {}`); - assert.equal(scopeStylesheet('a::first-line {}', '_'), 'a.⭐️_::first-line {}'); + assert.equal(scopeStylesheet('a::first-line {}', '_'), `a.${prefix}_::first-line {}`); - assert.equal(scopeStylesheet('a.red::before {}', '_'), 'a.red.⭐️_::before {}'); - assert.equal(scopeStylesheet('a.red span::before {}', '_'), 'a.red.⭐️_ span.⭐️_::before {}'); + assert.equal(scopeStylesheet('a.red::before {}', '_'), `a.red.${prefix}_::before {}`); + assert.equal(scopeStylesheet('a.red span::before {}', '_'), `a.red.${prefix}_ span.${prefix}_::before {}`); ['before', 'after', 'first-letter', 'first-line'].forEach((selector) => { - assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.⭐️_:${selector} {}`); - assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.⭐️_:${selector} {}`); + assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.${prefix}_:${selector} {}`); + assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.${prefix}_:${selector} {}`); }); }); test('complex properties', () => { assert.equal( scopeStylesheet('div { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }', '_'), - 'div.⭐️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }' + `div.${prefix}_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }` ); assert.equal( @@ -111,7 +112,7 @@ test('complex properties', () => { 'div { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }', '_' ), - 'div.⭐️_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }' + `div.${prefix}_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }` ); }); @@ -127,11 +128,11 @@ test('@keyframe', () => { }); test('animation-name', () => { - assert.equal(scopeStylesheet('p{animation-name: x}', '_'), 'p.⭐️_{animation-name: x}'); + assert.equal(scopeStylesheet('p{animation-name: x}', '_'), `p.${prefix}_{animation-name: x}`); }); test('animation', () => { - assert.equal(scopeStylesheet('p{animation: a b c }', '_'), 'p.⭐️_{animation: a b c }'); + assert.equal(scopeStylesheet('p{animation: a b c }', '_'), `p.${prefix}_{animation: a b c }`); }); test('@font-face', () => { @@ -147,14 +148,14 @@ test('@font-face', () => { test('@media', () => { assert.equal( scopeStylesheet('@media screen and (min-width: 900px) { div {} }', '_'), - '@media screen and (min-width: 900px) { div.⭐️_ {} }' + `@media screen and (min-width: 900px) { div.${prefix}_ {} }` ); }); test('@container', () => { assert.equal( scopeStylesheet('@container (min-width: 1px) { div {} span {} }', '_'), - '@container (min-width: 1px) { div.⭐️_ {} span.⭐️_ {} }' + `@container (min-width: 1px) { div.${prefix}_ {} span.${prefix}_ {} }` ); }); @@ -164,25 +165,25 @@ test('@supports', () => { '@supports (display: flex) { @media screen and (min-width: 900px) { div {} } }', '_' ), - '@supports (display: flex) { @media screen and (min-width: 900px) { div.⭐️_ {} } }' + `@supports (display: flex) { @media screen and (min-width: 900px) { div.${prefix}_ {} } }` ); }); test('@supports nested', () => { - assert.equal(scopeStylesheet('@media screen(a:1){}div{}', '_'), '@media screen(a:1){}div.⭐️_{}'); + assert.equal(scopeStylesheet('@media screen(a:1){}div{}', '_'), `@media screen(a:1){}div.${prefix}_{}`); assert.equal( scopeStylesheet('@supports(d:b){div{}@media screen(a:1){div{}}div{}}', '_'), - '@supports(d:b){div.⭐️_{}@media screen(a:1){div.⭐️_{}}div.⭐️_{}}' + `@supports(d:b){div.${prefix}_{}@media screen(a:1){div.${prefix}_{}}div.${prefix}_{}}` ); assert.equal( scopeStylesheet('@supports not (not (transform-origin: 2px)) { div {} }', '_'), - '@supports not (not (transform-origin: 2px)) { div.⭐️_ {} }' + `@supports not (not (transform-origin: 2px)) { div.${prefix}_ {} }` ); assert.equal( scopeStylesheet('@supports (display: grid) and (not (display: inline-grid)) { div {} }', '_'), - '@supports (display: grid) and (not (display: inline-grid)) { div.⭐️_ {} }' + `@supports (display: grid) and (not (display: inline-grid)) { div.${prefix}_ {} }` ); assert.equal( @@ -190,19 +191,19 @@ test('@supports nested', () => { '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div {} }', '_' ), - '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.⭐️_ {} }' + `@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.${prefix}_ {} }` ); }); test('comments', () => { - assert.equal(scopeStylesheet('div {} /* comment */', '_'), 'div.⭐️_ {} /* comment */'); - assert.equal(scopeStylesheet('div { /**/ }', '_'), 'div.⭐️_ { /**/ }'); - assert.equal(scopeStylesheet('div /* comment */ {}', '_'), 'div.⭐️_ /* comment */ {}'); - assert.equal(scopeStylesheet('div/* comment */ {}', '_'), 'div.⭐️_/* comment */ {}'); - assert.equal(scopeStylesheet('/* comment */div {}', '_'), '/* comment */div.⭐️_ {}'); + assert.equal(scopeStylesheet('div {} /* comment */', '_'), `div.${prefix}_ {} /* comment */`); + assert.equal(scopeStylesheet('div { /**/ }', '_'), `div.${prefix}_ { /**/ }`); + assert.equal(scopeStylesheet('div /* comment */ {}', '_'), `div.${prefix}_ /* comment */ {}`); + assert.equal(scopeStylesheet('div/* comment */ {}', '_'), `div.${prefix}_/* comment */ {}`); + assert.equal(scopeStylesheet('/* comment */div {}', '_'), `/* comment */div.${prefix}_ {}`); assert.equal( scopeStylesheet('div /* comment */ > span {}', '_'), - 'div.⭐️_ /* comment */ > span.⭐️_ {}' + `div.${prefix}_ /* comment */ > span.${prefix}_ {}` ); }); @@ -210,16 +211,16 @@ test('global selector', () => { assert.equal(scopeStylesheet(':global(*) {}', '_'), '* {}'); }); test('global selector with attribute', () => { - assert.equal(scopeStylesheet(':global([t="("]) {}', '_'), '[t="("] {}'); + assert.equal(scopeStylesheet(':global([t="("]) {}', '_'), `[t="("] {}`); assert.equal(scopeStylesheet(':global(div) {}', '_'), 'div {}'); - assert.equal(scopeStylesheet(':global(div), p {}', '_'), 'div, p.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div), p {}', '_'), `div, p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div :global(p) {}', '_'), 'div.⭐️_ p {}'); - assert.equal(scopeStylesheet(':global(div) > p {}', '_'), 'div > p.⭐️_ {}'); + assert.equal(scopeStylesheet('div :global(p) {}', '_'), `div.${prefix}_ p {}`); + assert.equal(scopeStylesheet(':global(div) > p {}', '_'), `div > p.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(.red) {}', '_'), '.red {}'); - assert.equal(scopeStylesheet(':global(div).red {}', '_'), 'div.red.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div).red {}', '_'), `div.red.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(div.red) {}', '_'), 'div.red {}'); assert.equal(scopeStylesheet(':global(#red) {}', '_'), '#red {}'); @@ -229,10 +230,10 @@ test('global selector with attribute', () => { assert.equal(scopeStylesheet(':global(div){color:red;}', '_'), 'div{color:red;}'); assert.equal(scopeStylesheet(':global(*[target]) {}', '_'), '*[target] {}'); - assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), '*[target] span.⭐️_ {}'); - assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), '[target].⭐️_ span {}'); + assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), `*[target] span.${prefix}_ {}`); + assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), `[target].${prefix}_ span {}`); - assert.equal(scopeStylesheet(':global(a):link {}', '_'), 'a:link.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(a):link {}', '_'), `a:link.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(a:link) {}', '_'), 'a:link {}'); assert.equal(scopeStylesheet(':global(p:lang(en)) {}', '_'), 'p:lang(en) {}'); assert.equal(scopeStylesheet(':global(p:nth-child(2)) {}', '_'), 'p:nth-child(2) {}'); @@ -241,7 +242,7 @@ test('global selector with attribute', () => { }); test('nested global inside not', () => { - assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), 'p:not(.red).⭐️_{}'); + assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), `p:not(.red).${prefix}_{}`); assert.equal( scopeStylesheet(':global(p:nth-child(3n+1):hover) {}', '_'), @@ -258,10 +259,10 @@ test('global with pseudo element', () => { assert.equal(scopeStylesheet(':global(a::after){}', '_'), 'a::after{}'); // assert.equal(scopeStylesheet(':global(a)::before{}', '_'), 'a::before{}'); - assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), 'a.red.⭐️_::before {}'); + assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), `a.red.${prefix}_::before {}`); assert.equal( scopeStylesheet(':global(a.red) span::before {}', '_'), - 'a.red span.⭐️_::before {}' + `a.red span.${prefix}_::before {}` ); }); From f56c2f8ea1a69a3cc0c42207b5756297e41b0ce3 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Sun, 12 Jan 2025 15:11:47 +0530 Subject: [PATCH 2/7] Update markers.ts --- packages/qwik/src/core/util/markers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/qwik/src/core/util/markers.ts b/packages/qwik/src/core/util/markers.ts index 13f44709d5b..ec323bcbf7f 100644 --- a/packages/qwik/src/core/util/markers.ts +++ b/packages/qwik/src/core/util/markers.ts @@ -5,7 +5,7 @@ export const OnRenderProp = 'q:renderFn'; export const ComponentStylesPrefixHost = '💎'; /** Component style content prefix */ -export const ComponentStylesPrefixContent = '⭐️'; +export const ComponentStylesPrefixContent = '⚡️'; /** Prefix used to identify on listeners. */ export const EventPrefix = 'on:'; From 7478d2ec1ccc99f195cc224e151389ed6c800fb8 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Sun, 12 Jan 2025 15:47:05 +0530 Subject: [PATCH 3/7] =?UTF-8?q?Updated=20markers.ts=20to=20employ=20the=20?= =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20prefix=20for=20component=20styles,=20enhan?= =?UTF-8?q?cing=20consistency=20with=20the=20Qwik=20Framework.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/slow-comics-sing.md | 5 + .../src/core/render/ssr/render-ssr.unit.tsx | 47 ++--- .../src/core/style/scoped-stylesheet.unit.ts | 177 ++++++++++-------- starters/e2e/e2e.render.spec.ts | 11 +- 4 files changed, 130 insertions(+), 110 deletions(-) create mode 100644 .changeset/slow-comics-sing.md diff --git a/.changeset/slow-comics-sing.md b/.changeset/slow-comics-sing.md new file mode 100644 index 00000000000..0f4772f4226 --- /dev/null +++ b/.changeset/slow-comics-sing.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik': patch +--- + +Updated markers.ts to employ the '⚡️' prefix for component styles, enhancing consistency with the Qwik Framework. diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx index ba2345b176c..5ce74a63131 100644 --- a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx +++ b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx @@ -18,6 +18,7 @@ import { Slot } from '../jsx/slot.public'; import type { JSXOutput } from '../jsx/types/jsx-node'; import { SSRComment, SSRRaw } from '../jsx/utils.public'; import { _renderSSR, type RenderSSROptions } from './render-ssr'; +import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('render attributes', async () => { await testSSR( @@ -1125,43 +1126,43 @@ test('component useStylesScoped()', async () => { ` <html q:container="paused" q:version="dev" q:render="ssr-dev" q:base="" q:manifest-hash="test"> <body> - <!--qv q:sstyle=⭐️1d-0|⭐️1e-1 q:id=0 q:key=sX:--> + <!--qv q:sstyle=${prefix}1d-0|${prefix}1e-1 q:id=0 q:key=sX:--> <style q:style="1d-0" hidden> - .host.⭐️1d-0 { + .host.${prefix}1d-0 { color: red; } </style> <style q:style="1e-1" hidden> - .blue.⭐️1e-1 { + .blue.${prefix}1e-1 { color: blue; } </style> - <div class="⭐️1d-0 ⭐️1e-1 host"> - <div class="⭐️1d-0 ⭐️1e-1 div"> + <div class="${prefix}1d-0 ${prefix}1e-1 host"> + <div class="${prefix}1d-0 ${prefix}1e-1 div"> Scoped1 <!--qv q:s q:sref=0 q:key=--> <div>projected</div> <!--/qv--> - <p class="⭐️1d-0 ⭐️1e-1">Que tal?</p> + <p class="${prefix}1d-0 ${prefix}1e-1">Que tal?</p> </div> - <!--qv q:sstyle=⭐️f0gmsw-0 q:id=1 q:key=sX:--> + <!--qv q:sstyle=${prefix}f0gmsw-0 q:id=1 q:key=sX:--> <style q:style="f0gmsw-0" hidden> - .host.⭐️f0gmsw-0 { + .host.${prefix}f0gmsw-0 { color: blue; } </style> - <div class="⭐️f0gmsw-0 host"> - <div class="⭐️f0gmsw-0"> + <div class="${prefix}f0gmsw-0 host"> + <div class="${prefix}f0gmsw-0"> Scoped2 - <p class="⭐️f0gmsw-0">Bien</p> + <p class="${prefix}f0gmsw-0">Bien</p> </div> </div> <!--/qv--> - <!--qv q:sstyle=⭐️f0gmsw-0 q:id=2 q:key=sX:--> - <div class="⭐️f0gmsw-0 host"> - <div class="⭐️f0gmsw-0"> + <!--qv q:sstyle=${prefix}f0gmsw-0 q:id=2 q:key=sX:--> + <div class="${prefix}f0gmsw-0 host"> + <div class="${prefix}f0gmsw-0"> Scoped2 - <p class="⭐️f0gmsw-0">Bien</p> + <p class="${prefix}f0gmsw-0">Bien</p> </div> </div> <!--/qv--> @@ -1180,21 +1181,21 @@ test('component useStylesScoped() + slot', async () => { </>, ` <html q:container="paused" q:version="dev" q:render="ssr-dev" q:base="" q:manifest-hash="test"> - <!--qv q:sstyle=⭐️lkei4s-0 q:id=0 q:key=sX:--> - <body class="⭐️lkei4s-0"> - <!--qv q:sstyle=⭐️tdblg1-0 q:id=1 q:key=sX:--> + <!--qv q:sstyle=${prefix}lkei4s-0 q:id=0 q:key=sX:--> + <body class="${prefix}lkei4s-0"> + <!--qv q:sstyle=${prefix}tdblg1-0 q:id=1 q:key=sX:--> <style q:style="tdblg1-0" hidden> - .host.⭐️tdblg1-0 { + .host.${prefix}tdblg1-0 { background: green; } </style> - <div class="⭐️tdblg1-0"> + <div class="${prefix}tdblg1-0"> <!--qv q:s q:sref=1 q:key=one--> - <div q:slot="one" class="⭐️lkei4s-0">One</div> + <div q:slot="one" class="${prefix}lkei4s-0">One</div> <!--/qv--> </div> - <q:template q:slot="two" hidden aria-hidden="true" class="⭐️lkei4s-0"> - <div q:slot="two" class="⭐️lkei4s-0">Two</div> + <q:template q:slot="two" hidden aria-hidden="true" class="${prefix}lkei4s-0"> + <div q:slot="two" class="${prefix}lkei4s-0">Two</div> </q:template> <!--/qv--> </body> diff --git a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts index ca07d9ced9f..60e1ed7be48 100644 --- a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts +++ b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts @@ -1,109 +1,119 @@ import { assert, test } from 'vitest'; import { scopeStylesheet } from './scoped-stylesheet'; +import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('selectors', () => { - assert.equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}'); - assert.equal(scopeStylesheet('div {}div{} div {}', '_'), 'div.⭐️_ {}div.⭐️_{} div.⭐️_ {}'); - assert.equal(scopeStylesheet('div, p {}', '_'), 'div.⭐️_, p.⭐️_ {}'); + assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); + assert.equal( + scopeStylesheet('div {}div{} div {}', '_'), + `div.${prefix}_ {}div.${prefix}_{} div.${prefix}_ {}` + ); + assert.equal(scopeStylesheet('div, p {}', '_'), `div.${prefix}_, p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div p {}', '_'), 'div.⭐️_ p.⭐️_ {}'); - assert.equal(scopeStylesheet('div > p {}', '_'), 'div.⭐️_ > p.⭐️_ {}'); - assert.equal(scopeStylesheet('div + p {}', '_'), 'div.⭐️_ + p.⭐️_ {}'); - assert.equal(scopeStylesheet('div ~ p {}', '_'), 'div.⭐️_ ~ p.⭐️_ {}'); + assert.equal(scopeStylesheet('div p {}', '_'), `div.${prefix}_ p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div > p {}', '_'), `div.${prefix}_ > p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div + p {}', '_'), `div.${prefix}_ + p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div ~ p {}', '_'), `div.${prefix}_ ~ p.${prefix}_ {}`); - assert.equal(scopeStylesheet('.red {}', '_'), '.red.⭐️_ {}'); - assert.equal(scopeStylesheet('div.red {}', '_'), 'div.red.⭐️_ {}'); + assert.equal(scopeStylesheet('.red {}', '_'), `.red.${prefix}_ {}`); + assert.equal(scopeStylesheet('div.red {}', '_'), `div.red.${prefix}_ {}`); }); test('unicode', () => { - assert.equal(scopeStylesheet('.miško{}', '_'), '.miško.⭐️_{}'); + assert.equal(scopeStylesheet('.miško{}', '_'), `.miško.${prefix}_{}`); }); test('selectors with *', () => { - assert.equal(scopeStylesheet('* {}', '_'), '.⭐️_ {}'); - assert.equal(scopeStylesheet('.red * {}', '_'), '.red.⭐️_ .⭐️_ {}'); - assert.equal(scopeStylesheet('#red * {}', '_'), '#red.⭐️_ .⭐️_ {}'); + assert.equal(scopeStylesheet('* {}', '_'), `.${prefix}_ {}`); + assert.equal(scopeStylesheet('.red * {}', '_'), `.red.${prefix}_ .${prefix}_ {}`); + assert.equal(scopeStylesheet('#red * {}', '_'), `#red.${prefix}_ .${prefix}_ {}`); }); test('selectors with chains', () => { - assert.equal(scopeStylesheet('.red.text {}', '_'), '.red.text.⭐️_ {}'); + assert.equal(scopeStylesheet('.red.text {}', '_'), `.red.text.${prefix}_ {}`); - assert.equal(scopeStylesheet('#red {}', '_'), '#red.⭐️_ {}'); - assert.equal(scopeStylesheet('div#red {}', '_'), 'div#red.⭐️_ {}'); + assert.equal(scopeStylesheet('#red {}', '_'), `#red.${prefix}_ {}`); + assert.equal(scopeStylesheet('div#red {}', '_'), `div#red.${prefix}_ {}`); - assert.equal(scopeStylesheet('div { }', '_'), 'div.⭐️_ { }'); - assert.equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}'); + assert.equal(scopeStylesheet('div { }', '_'), `div.${prefix}_ { }`); + assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); assert.equal( scopeStylesheet('div {background-color: blue; }', '_'), - 'div.⭐️_ {background-color: blue; }' + `div.${prefix}_ {background-color: blue; }` ); assert.equal( scopeStylesheet('div { color: red !important; }', '_'), - 'div.⭐️_ { color: red !important; }' + `div.${prefix}_ { color: red !important; }` ); - assert.equal(scopeStylesheet('div{color:red;}', '_'), 'div.⭐️_{color:red;}'); - assert.equal(scopeStylesheet('div { content: "}"; }', '_'), 'div.⭐️_ { content: "}"; }'); - assert.equal(scopeStylesheet("div { content: '}'; }", '_'), "div.⭐️_ { content: '}'; }"); + assert.equal(scopeStylesheet('div{color:red;}', '_'), `div.${prefix}_{color:red;}`); + assert.equal(scopeStylesheet('div { content: "}"; }', '_'), `div.${prefix}_ { content: "}"; }`); + assert.equal(scopeStylesheet("div { content: '}'; }", '_'), `div.${prefix}_ { content: '}'; }`); }); test('attribute selectors', () => { - assert.equal(scopeStylesheet('*[a]{}', '_'), '[a].⭐️_{}'); - assert.equal(scopeStylesheet('*[a] {}', '_'), '[a].⭐️_ {}'); - assert.equal(scopeStylesheet('*[target] span {}', '_'), '[target].⭐️_ span.⭐️_ {}'); - - assert.equal(scopeStylesheet('a[target] {}', '_'), 'a[target].⭐️_ {}'); - assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), 'a[target="_blank"].⭐️_ {}'); - assert.equal(scopeStylesheet('input[type="button"] {}', '_'), 'input[type="button"].⭐️_ {}'); - - assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), 'a[title~="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), 'a[class^="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), 'a[class|="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), 'a[class*="red"].⭐️_ {}'); - assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), 'a[class$="red"].⭐️_ {}'); + assert.equal(scopeStylesheet('*[a]{}', '_'), `[a].${prefix}_{}`); + assert.equal(scopeStylesheet('*[a] {}', '_'), `[a].${prefix}_ {}`); + assert.equal(scopeStylesheet('*[target] span {}', '_'), `[target].${prefix}_ span.${prefix}_ {}`); + + assert.equal(scopeStylesheet('a[target] {}', '_'), `a[target].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), `a[target="_blank"].${prefix}_ {}`); + assert.equal( + scopeStylesheet('input[type="button"] {}', '_'), + `input[type="button"].${prefix}_ {}` + ); + + assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), `a[title~="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), `a[class^="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), `a[class|="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), `a[class*="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), `a[class$="red"].${prefix}_ {}`); }); test('pseudo classes', () => { - assert.equal(scopeStylesheet('p:lang(en) {}', '_'), 'p:lang(en).⭐️_ {}'); - assert.equal(scopeStylesheet('a:link {}', '_'), 'a:link.⭐️_ {}'); - assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), 'p:nth-child(2).⭐️_ {}'); - assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), 'p:nth-child(3n+1).⭐️_ {}'); + assert.equal(scopeStylesheet('p:lang(en) {}', '_'), `p:lang(en).${prefix}_ {}`); + assert.equal(scopeStylesheet('a:link {}', '_'), `a:link.${prefix}_ {}`); + assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), `p:nth-child(2).${prefix}_ {}`); + assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), `p:nth-child(3n+1).${prefix}_ {}`); }); test('pseudo classes without selector', () => { - assert.equal(scopeStylesheet(':root {}', '_'), ':root.⭐️_ {}'); + assert.equal(scopeStylesheet(':root {}', '_'), `:root.${prefix}_ {}`); }); test('pseudo selector with negation', () => { - assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), 'p:not(.blue.⭐️_).⭐️_ {}'); + assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), `p:not(.blue.${prefix}_).${prefix}_ {}`); }); test('pseudo selector with :nth', () => { assert.equal( scopeStylesheet('p:nth-child(3n+1):hover {}', '_'), - 'p:nth-child(3n+1):hover.⭐️_ {}' + `p:nth-child(3n+1):hover.${prefix}_ {}` ); assert.equal( scopeStylesheet('p:nth-child(3n+1) div {}', '_'), - 'p:nth-child(3n+1).⭐️_ div.⭐️_ {}' + `p:nth-child(3n+1).${prefix}_ div.${prefix}_ {}` ); }); test('pseudo elements', () => { - assert.equal(scopeStylesheet('::selection {}', '_'), '.⭐️_::selection {}'); - assert.equal(scopeStylesheet(' ::space {}', '_'), ' .⭐️_::space {}'); + assert.equal(scopeStylesheet('::selection {}', '_'), `.${prefix}_::selection {}`); + assert.equal(scopeStylesheet(' ::space {}', '_'), ` .${prefix}_::space {}`); - assert.equal(scopeStylesheet('a::before {}', '_'), 'a.⭐️_::before {}'); - assert.equal(scopeStylesheet('a::after {}', '_'), 'a.⭐️_::after {}'); + assert.equal(scopeStylesheet('a::before {}', '_'), `a.${prefix}_::before {}`); + assert.equal(scopeStylesheet('a::after {}', '_'), `a.${prefix}_::after {}`); - assert.equal(scopeStylesheet('a::first-line {}', '_'), 'a.⭐️_::first-line {}'); + assert.equal(scopeStylesheet('a::first-line {}', '_'), `a.${prefix}_::first-line {}`); - assert.equal(scopeStylesheet('a.red::before {}', '_'), 'a.red.⭐️_::before {}'); - assert.equal(scopeStylesheet('a.red span::before {}', '_'), 'a.red.⭐️_ span.⭐️_::before {}'); + assert.equal(scopeStylesheet('a.red::before {}', '_'), `a.red.${prefix}_::before {}`); + assert.equal( + scopeStylesheet('a.red span::before {}', '_'), + `a.red.${prefix}_ span.${prefix}_::before {}` + ); ['before', 'after', 'first-letter', 'first-line'].forEach((selector) => { - assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.⭐️_:${selector} {}`); - assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.⭐️_:${selector} {}`); + assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.${prefix}_:${selector} {}`); + assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.${prefix}_:${selector} {}`); }); }); test('complex properties', () => { assert.equal( scopeStylesheet('div { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }', '_'), - 'div.⭐️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }' + `div.${prefix}_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }` ); assert.equal( @@ -111,7 +121,7 @@ test('complex properties', () => { 'div { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }', '_' ), - 'div.⭐️_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }' + `div.${prefix}_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }` ); }); @@ -127,11 +137,11 @@ test('@keyframe', () => { }); test('animation-name', () => { - assert.equal(scopeStylesheet('p{animation-name: x}', '_'), 'p.⭐️_{animation-name: x}'); + assert.equal(scopeStylesheet('p{animation-name: x}', '_'), `p.${prefix}_{animation-name: x}`); }); test('animation', () => { - assert.equal(scopeStylesheet('p{animation: a b c }', '_'), 'p.⭐️_{animation: a b c }'); + assert.equal(scopeStylesheet('p{animation: a b c }', '_'), `p.${prefix}_{animation: a b c }`); }); test('@font-face', () => { @@ -147,14 +157,14 @@ test('@font-face', () => { test('@media', () => { assert.equal( scopeStylesheet('@media screen and (min-width: 900px) { div {} }', '_'), - '@media screen and (min-width: 900px) { div.⭐️_ {} }' + `@media screen and (min-width: 900px) { div.${prefix}_ {} }` ); }); test('@container', () => { assert.equal( scopeStylesheet('@container (min-width: 1px) { div {} span {} }', '_'), - '@container (min-width: 1px) { div.⭐️_ {} span.⭐️_ {} }' + `@container (min-width: 1px) { div.${prefix}_ {} span.${prefix}_ {} }` ); }); @@ -164,25 +174,28 @@ test('@supports', () => { '@supports (display: flex) { @media screen and (min-width: 900px) { div {} } }', '_' ), - '@supports (display: flex) { @media screen and (min-width: 900px) { div.⭐️_ {} } }' + `@supports (display: flex) { @media screen and (min-width: 900px) { div.${prefix}_ {} } }` ); }); test('@supports nested', () => { - assert.equal(scopeStylesheet('@media screen(a:1){}div{}', '_'), '@media screen(a:1){}div.⭐️_{}'); + assert.equal( + scopeStylesheet('@media screen(a:1){}div{}', '_'), + `@media screen(a:1){}div.${prefix}_{}` + ); assert.equal( scopeStylesheet('@supports(d:b){div{}@media screen(a:1){div{}}div{}}', '_'), - '@supports(d:b){div.⭐️_{}@media screen(a:1){div.⭐️_{}}div.⭐️_{}}' + `@supports(d:b){div.${prefix}_{}@media screen(a:1){div.${prefix}_{}}div.${prefix}_{}}` ); assert.equal( scopeStylesheet('@supports not (not (transform-origin: 2px)) { div {} }', '_'), - '@supports not (not (transform-origin: 2px)) { div.⭐️_ {} }' + `@supports not (not (transform-origin: 2px)) { div.${prefix}_ {} }` ); assert.equal( scopeStylesheet('@supports (display: grid) and (not (display: inline-grid)) { div {} }', '_'), - '@supports (display: grid) and (not (display: inline-grid)) { div.⭐️_ {} }' + `@supports (display: grid) and (not (display: inline-grid)) { div.${prefix}_ {} }` ); assert.equal( @@ -190,19 +203,19 @@ test('@supports nested', () => { '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div {} }', '_' ), - '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.⭐️_ {} }' + `@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.${prefix}_ {} }` ); }); test('comments', () => { - assert.equal(scopeStylesheet('div {} /* comment */', '_'), 'div.⭐️_ {} /* comment */'); - assert.equal(scopeStylesheet('div { /**/ }', '_'), 'div.⭐️_ { /**/ }'); - assert.equal(scopeStylesheet('div /* comment */ {}', '_'), 'div.⭐️_ /* comment */ {}'); - assert.equal(scopeStylesheet('div/* comment */ {}', '_'), 'div.⭐️_/* comment */ {}'); - assert.equal(scopeStylesheet('/* comment */div {}', '_'), '/* comment */div.⭐️_ {}'); + assert.equal(scopeStylesheet('div {} /* comment */', '_'), `div.${prefix}_ {} /* comment */`); + assert.equal(scopeStylesheet('div { /**/ }', '_'), `div.${prefix}_ { /**/ }`); + assert.equal(scopeStylesheet('div /* comment */ {}', '_'), `div.${prefix}_ /* comment */ {}`); + assert.equal(scopeStylesheet('div/* comment */ {}', '_'), `div.${prefix}_/* comment */ {}`); + assert.equal(scopeStylesheet('/* comment */div {}', '_'), `/* comment */div.${prefix}_ {}`); assert.equal( scopeStylesheet('div /* comment */ > span {}', '_'), - 'div.⭐️_ /* comment */ > span.⭐️_ {}' + `div.${prefix}_ /* comment */ > span.${prefix}_ {}` ); }); @@ -210,16 +223,16 @@ test('global selector', () => { assert.equal(scopeStylesheet(':global(*) {}', '_'), '* {}'); }); test('global selector with attribute', () => { - assert.equal(scopeStylesheet(':global([t="("]) {}', '_'), '[t="("] {}'); + assert.equal(scopeStylesheet(':global([t="("]) {}', '_'), `[t="("] {}`); assert.equal(scopeStylesheet(':global(div) {}', '_'), 'div {}'); - assert.equal(scopeStylesheet(':global(div), p {}', '_'), 'div, p.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div), p {}', '_'), `div, p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div :global(p) {}', '_'), 'div.⭐️_ p {}'); - assert.equal(scopeStylesheet(':global(div) > p {}', '_'), 'div > p.⭐️_ {}'); + assert.equal(scopeStylesheet('div :global(p) {}', '_'), `div.${prefix}_ p {}`); + assert.equal(scopeStylesheet(':global(div) > p {}', '_'), `div > p.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(.red) {}', '_'), '.red {}'); - assert.equal(scopeStylesheet(':global(div).red {}', '_'), 'div.red.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div).red {}', '_'), `div.red.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(div.red) {}', '_'), 'div.red {}'); assert.equal(scopeStylesheet(':global(#red) {}', '_'), '#red {}'); @@ -229,10 +242,10 @@ test('global selector with attribute', () => { assert.equal(scopeStylesheet(':global(div){color:red;}', '_'), 'div{color:red;}'); assert.equal(scopeStylesheet(':global(*[target]) {}', '_'), '*[target] {}'); - assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), '*[target] span.⭐️_ {}'); - assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), '[target].⭐️_ span {}'); + assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), `*[target] span.${prefix}_ {}`); + assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), `[target].${prefix}_ span {}`); - assert.equal(scopeStylesheet(':global(a):link {}', '_'), 'a:link.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(a):link {}', '_'), `a:link.${prefix}_ {}`); assert.equal(scopeStylesheet(':global(a:link) {}', '_'), 'a:link {}'); assert.equal(scopeStylesheet(':global(p:lang(en)) {}', '_'), 'p:lang(en) {}'); assert.equal(scopeStylesheet(':global(p:nth-child(2)) {}', '_'), 'p:nth-child(2) {}'); @@ -241,7 +254,7 @@ test('global selector with attribute', () => { }); test('nested global inside not', () => { - assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), 'p:not(.red).⭐️_{}'); + assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), `p:not(.red).${prefix}_{}`); assert.equal( scopeStylesheet(':global(p:nth-child(3n+1):hover) {}', '_'), @@ -258,10 +271,10 @@ test('global with pseudo element', () => { assert.equal(scopeStylesheet(':global(a::after){}', '_'), 'a::after{}'); // assert.equal(scopeStylesheet(':global(a)::before{}', '_'), 'a::before{}'); - assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), 'a.red.⭐️_::before {}'); + assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), `a.red.${prefix}_::before {}`); assert.equal( scopeStylesheet(':global(a.red) span::before {}', '_'), - 'a.red span.⭐️_::before {}' + `a.red span.${prefix}_::before {}` ); }); diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts index a6ba27fd191..ff04900d04d 100644 --- a/starters/e2e/e2e.render.spec.ts +++ b/starters/e2e/e2e.render.spec.ts @@ -1,4 +1,5 @@ import { test, expect } from "@playwright/test"; +import { ComponentStylesPrefixContent as prefix } from "../../packages/qwik/src/core/util/markers"; test.describe("render", () => { test.beforeEach(async ({ page }) => { @@ -28,31 +29,31 @@ test.describe("render", () => { const attributes = page.locator("#attributes"); - await expect(attributes).toHaveClass("⭐️unvb18-1 even stable0"); + await expect(attributes).toHaveClass(`${prefix}unvb18-1 even stable0`); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); await increment.click(); - await expect(attributes).toHaveClass("⭐️unvb18-1 odd stable0"); + await expect(attributes).toHaveClass(`${prefix}unvb18-1 odd stable0`); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); await toggle.click(); - await expect(attributes).toHaveClass("⭐️unvb18-1"); + await expect(attributes).toHaveClass(`${prefix}unvb18-1`); await expect(attributes).not.hasAttribute("aria-hidden"); await expect(attributes).not.hasAttribute("preventdefault:click"); await increment.click(); - await expect(attributes).toHaveClass("⭐️unvb18-1"); + await expect(attributes).toHaveClass(`${prefix}unvb18-1`); await expect(attributes).not.hasAttribute("aria-hidden"); await expect(attributes).not.hasAttribute("preventdefault:click"); await toggle.click(); - await expect(attributes).toHaveClass("⭐️unvb18-1 even stable0"); + await expect(attributes).toHaveClass(`${prefix}unvb18-1 even stable0`); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); }); From e99a0fb222644bf47a29481fee246c7b1b327a0f Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Sun, 12 Jan 2025 16:08:35 +0530 Subject: [PATCH 4/7] updated dom render unit test --- .../qwik/src/core/render/dom/render.unit.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/qwik/src/core/render/dom/render.unit.tsx b/packages/qwik/src/core/render/dom/render.unit.tsx index bf89c3dd977..093d9cba439 100644 --- a/packages/qwik/src/core/render/dom/render.unit.tsx +++ b/packages/qwik/src/core/render/dom/render.unit.tsx @@ -15,6 +15,7 @@ import { assert, test, suite } from 'vitest'; import { createDOM } from '../../../testing/library'; import { renderToString } from '../../../server/render'; import { createDocument } from '../../../testing/document'; +import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('should render basic content', async () => { const fixture = new ElementFixture(); @@ -218,15 +219,15 @@ test('should render a component with scoped styles', async () => { ` <host q:version="dev" q:container="resumed" q:render="dom-dev"> <style q:style="ml52vk-0" hidden=""> - .stuff.⭐️ml52vk-0 { + .stuff.${prefix}ml52vk-0 { color: red; } </style> <!--qv --> - <div class="⭐️ml52vk-0"> - <div class="⭐️ml52vk-0 stuff" aria-hidden="true"> + <div class="${prefix}ml52vk-0"> + <div class="${prefix}ml52vk-0 stuff" aria-hidden="true"> Hello - <button class="⭐️ml52vk-0"> + <button class="${prefix}ml52vk-0"> Toggle </button> </div> @@ -241,15 +242,15 @@ test('should render a component with scoped styles', async () => { ` <host q:version="dev" q:container="resumed" q:render="dom-dev"> <style q:style="ml52vk-0" hidden=""> - .stuff.⭐️ml52vk-0 { + .stuff.${prefix}ml52vk-0 { color: red; } </style> <!--qv --> - <div class="⭐️ml52vk-0"> - <div class="⭐️ml52vk-0"> + <div class="${prefix}ml52vk-0"> + <div class="${prefix}ml52vk-0"> Hello - <button class="⭐️ml52vk-0"> + <button class="${prefix}ml52vk-0"> Toggle </button> </div> From 42f1c1278b4c6f858ccb96a738677463197a95c2 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Thu, 16 Jan 2025 12:29:29 +0530 Subject: [PATCH 5/7] removed hasAttribute from playwrite --- .changeset/slimy-cougars-double.md | 7 ++ starters/e2e/e2e.attributes.spec.ts | 98 +++++++++++++------------- starters/e2e/e2e.effect-client.spec.ts | 2 +- starters/e2e/e2e.render.spec.ts | 14 ++-- starters/e2e/global.d.ts | 9 --- starters/playwright.config.ts | 15 ---- 6 files changed, 64 insertions(+), 81 deletions(-) create mode 100644 .changeset/slimy-cougars-double.md delete mode 100644 starters/e2e/global.d.ts diff --git a/.changeset/slimy-cougars-double.md b/.changeset/slimy-cougars-double.md new file mode 100644 index 00000000000..f1bcb442d66 --- /dev/null +++ b/.changeset/slimy-cougars-double.md @@ -0,0 +1,7 @@ +--- +'eslint-plugin-qwik': patch +'@builder.io/qwik-city': patch +'@builder.io/qwik': patch +--- + +removed playwrite patching of hasAttribute with toHaveAttribute diff --git a/starters/e2e/e2e.attributes.spec.ts b/starters/e2e/e2e.attributes.spec.ts index 51e7c64d19f..ca7abc27ef0 100644 --- a/starters/e2e/e2e.attributes.spec.ts +++ b/starters/e2e/e2e.attributes.spec.ts @@ -25,12 +25,12 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-required", "false"); await expect(input).toHaveAttribute("draggable", "false"); await expect(input).toHaveAttribute("spellcheck", "false"); - await expect(input).not.hasAttribute("required"); - await expect(input).not.hasAttribute("title"); + await expect(input).not.toHaveAttribute("required"); + await expect(input).not.toHaveAttribute("title"); await expect(label).toHaveAttribute("for", "even"); await expect(label).toHaveAttribute("form", "my-form"); - await expect(label).not.hasAttribute("title"); + await expect(label).not.toHaveAttribute("title"); await expect(svg).toHaveAttribute("width", "15"); await expect(svg).toHaveAttribute("height", "15"); @@ -91,7 +91,7 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-required", "false"); await expect(input).toHaveAttribute("draggable", "false"); await expect(input).toHaveAttribute("spellcheck", "false"); - await expect(input).not.hasAttribute("required"); + await expect(input).not.toHaveAttribute("required"); await expect(renders).toHaveText("1"); }); @@ -109,8 +109,8 @@ test.describe("attributes", () => { await countBtn.click(); await expect(input).not.toHaveAttribute("title", "some title"); - await expect(input).not.hasAttribute("title"); - await expect(label).not.hasAttribute("title"); + await expect(input).not.toHaveAttribute("title"); + await expect(label).not.toHaveAttribute("title"); await expect(renders).toHaveText("1"); }); @@ -127,7 +127,7 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-required", "false"); await expect(input).toHaveAttribute("draggable", "false"); await expect(input).toHaveAttribute("spellcheck", "false"); - await expect(input).not.hasAttribute("required"); + await expect(input).not.toHaveAttribute("required"); await expect(svg).toHaveAttribute("aria-hidden", "false"); await expect(renders).toHaveText("1"); }); @@ -144,7 +144,7 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-required", "true"); await expect(input).toHaveAttribute("draggable", "true"); await expect(input).toHaveAttribute("spellcheck", "true"); - await expect(input).hasAttribute("required"); + await expect(input).toHaveAttribute("required"); await expect(renders).toHaveText("1"); }); @@ -159,13 +159,13 @@ test.describe("attributes", () => { await countBtn.click(); await expect(input).not.toHaveAttribute("aria-hidden", "true"); - await expect(input).not.hasAttribute("aria-hidden"); - await expect(input).not.hasAttribute("aria-label"); - await expect(input).not.hasAttribute("tabindex"); - await expect(input).not.hasAttribute("required"); - await expect(input).not.hasAttribute("aria-required"); - await expect(input).not.hasAttribute("draggable"); - await expect(input).not.hasAttribute("spellcheck"); + await expect(input).not.toHaveAttribute("aria-hidden"); + await expect(input).not.toHaveAttribute("aria-label"); + await expect(input).not.toHaveAttribute("tabindex"); + await expect(input).not.toHaveAttribute("required"); + await expect(input).not.toHaveAttribute("aria-required"); + await expect(input).not.toHaveAttribute("draggable"); + await expect(input).not.toHaveAttribute("spellcheck"); await expect(renders).toHaveText("2"); }); @@ -180,20 +180,20 @@ test.describe("attributes", () => { await countBtn.click(); await expect(input).not.toHaveAttribute("aria-hidden", "true"); - await expect(input).not.hasAttribute("aria-hidden"); - await expect(input).not.hasAttribute("aria-label"); - await expect(input).not.hasAttribute("tabindex"); - await expect(input).not.hasAttribute("required"); - await expect(input).not.hasAttribute("aria-required"); - await expect(input).not.hasAttribute("draggable"); - await expect(input).not.hasAttribute("spellcheck"); - await expect(label).not.hasAttribute("for"); - await expect(label).not.hasAttribute("form"); - await expect(svg).not.hasAttribute("width"); - await expect(svg).not.hasAttribute("height"); - await expect(svg).not.hasAttribute("preserveAspectRatio"); + await expect(input).not.toHaveAttribute("aria-hidden"); + await expect(input).not.toHaveAttribute("aria-label"); + await expect(input).not.toHaveAttribute("tabindex"); + await expect(input).not.toHaveAttribute("required"); + await expect(input).not.toHaveAttribute("aria-required"); + await expect(input).not.toHaveAttribute("draggable"); + await expect(input).not.toHaveAttribute("spellcheck"); + await expect(label).not.toHaveAttribute("for"); + await expect(label).not.toHaveAttribute("form"); + await expect(svg).not.toHaveAttribute("width"); + await expect(svg).not.toHaveAttribute("height"); + await expect(svg).not.toHaveAttribute("preserveAspectRatio"); await expect(svg).toHaveClass(""); - await expect(svg).not.hasAttribute("aria-hidden"); + await expect(svg).not.toHaveAttribute("aria-hidden"); await expect(renders).toHaveText("2"); @@ -202,7 +202,7 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-hidden", "true"); await expect(input).toHaveAttribute("aria-label", "even"); await expect(input).toHaveAttribute("tabindex", "-1"); - await expect(input).not.hasAttribute("required"); + await expect(input).not.toHaveAttribute("required"); await expect(input).toHaveAttribute("aria-required", "false"); await expect(input).toHaveAttribute("draggable", "false"); await expect(input).toHaveAttribute("spellcheck", "false"); @@ -222,19 +222,19 @@ test.describe("attributes", () => { await countBtn.click(); await expect(svg).not.toHaveAttribute("aria-hidden", "true"); - await expect(input).not.hasAttribute("aria-hidden"); - await expect(input).not.hasAttribute("aria-label"); - await expect(input).not.hasAttribute("tabindex"); - await expect(input).not.hasAttribute("required"); - await expect(input).not.hasAttribute("aria-required"); - await expect(input).not.hasAttribute("draggable"); - await expect(input).not.hasAttribute("spellcheck"); - await expect(label).not.hasAttribute("for"); - await expect(label).not.hasAttribute("form"); - await expect(svg).not.hasAttribute("width"); - await expect(svg).not.hasAttribute("height"); - await expect(svg).not.hasAttribute("preserveAspectRatio"); - await expect(svg).not.hasAttribute("aria-hidden"); + await expect(input).not.toHaveAttribute("aria-hidden"); + await expect(input).not.toHaveAttribute("aria-label"); + await expect(input).not.toHaveAttribute("tabindex"); + await expect(input).not.toHaveAttribute("required"); + await expect(input).not.toHaveAttribute("aria-required"); + await expect(input).not.toHaveAttribute("draggable"); + await expect(input).not.toHaveAttribute("spellcheck"); + await expect(label).not.toHaveAttribute("for"); + await expect(label).not.toHaveAttribute("form"); + await expect(svg).not.toHaveAttribute("width"); + await expect(svg).not.toHaveAttribute("height"); + await expect(svg).not.toHaveAttribute("preserveAspectRatio"); + await expect(svg).not.toHaveAttribute("aria-hidden"); await expect(svg).toHaveClass(""); await expect(renders).toHaveText("4"); @@ -243,7 +243,7 @@ test.describe("attributes", () => { await expect(input).toHaveAttribute("aria-hidden", "true"); await expect(input).toHaveAttribute("aria-label", "even"); await expect(input).toHaveAttribute("tabindex", "-1"); - await expect(input).not.hasAttribute("required"); + await expect(input).not.toHaveAttribute("required"); await expect(input).toHaveAttribute("aria-required", "false"); await expect(input).toHaveAttribute("draggable", "false"); await expect(input).toHaveAttribute("spellcheck", "false"); @@ -276,9 +276,9 @@ test.describe("attributes", () => { await button.click(); await expect(button).toHaveClass("moop"); - await expect(button).not.hasAttribute("data-works"); - await expect(button).not.hasAttribute("aria-label"); - await expect(button).not.hasAttribute("title"); + await expect(button).not.toHaveAttribute("data-works"); + await expect(button).not.toHaveAttribute("aria-label"); + await expect(button).not.toHaveAttribute("title"); }); test("issue 4718 (undefined)", async ({ page }) => { @@ -291,9 +291,9 @@ test.describe("attributes", () => { await button.click(); await expect(button).toHaveClass("moop"); - await expect(button).not.hasAttribute("data-works"); - await expect(button).not.hasAttribute("aria-label"); - await expect(button).not.hasAttribute("title"); + await expect(button).not.toHaveAttribute("data-works"); + await expect(button).not.toHaveAttribute("aria-label"); + await expect(button).not.toHaveAttribute("title"); }); } diff --git a/starters/e2e/e2e.effect-client.spec.ts b/starters/e2e/e2e.effect-client.spec.ts index 8addef302cd..0857beda016 100644 --- a/starters/e2e/e2e.effect-client.spec.ts +++ b/starters/e2e/e2e.effect-client.spec.ts @@ -20,7 +20,7 @@ test.describe("effect-client", () => { const msgClientSide2 = page.locator("#client-side-msg-2"); const msgClientSide3 = page.locator("#client-side-msg-3"); - await expect(container).not.hasAttribute("data-effect"); + await expect(container).not.toHaveAttribute("data-effect"); await expect(counter).toHaveText("0"); await expect(msg).toHaveText("empty"); await expect(msgEager).toHaveText("run"); diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts index ff04900d04d..8065a05234b 100644 --- a/starters/e2e/e2e.render.spec.ts +++ b/starters/e2e/e2e.render.spec.ts @@ -42,14 +42,14 @@ test.describe("render", () => { await toggle.click(); await expect(attributes).toHaveClass(`${prefix}unvb18-1`); - await expect(attributes).not.hasAttribute("aria-hidden"); - await expect(attributes).not.hasAttribute("preventdefault:click"); + await expect(attributes).not.toHaveAttribute("aria-hidden"); + await expect(attributes).not.toHaveAttribute("preventdefault:click"); await increment.click(); await expect(attributes).toHaveClass(`${prefix}unvb18-1`); - await expect(attributes).not.hasAttribute("aria-hidden"); - await expect(attributes).not.hasAttribute("preventdefault:click"); + await expect(attributes).not.toHaveAttribute("aria-hidden"); + await expect(attributes).not.toHaveAttribute("preventdefault:click"); await toggle.click(); @@ -255,14 +255,14 @@ test.describe("render", () => { test("issue3398", async ({ page }) => { const toggle = page.locator("#issue-3398-button"); await expect(page.locator("h1#issue-3398-tag")).toHaveText("Hello h1"); - await expect(page.locator("h1#issue-3398-tag")).not.hasAttribute( + await expect(page.locator("h1#issue-3398-tag")).not.toHaveAttribute( "children", ); await toggle.click(); await expect(page.locator("h1#issue-3398-tag")).not.toBeVisible(); await expect(page.locator("h2#issue-3398-tag")).toHaveText("Hello h2"); - await expect(page.locator("h2#issue-3398-tag")).not.hasAttribute( + await expect(page.locator("h2#issue-3398-tag")).not.toHaveAttribute( "children", ); @@ -270,7 +270,7 @@ test.describe("render", () => { await expect(page.locator("h2#issue-3398-tag")).not.toBeVisible(); await expect(page.locator("h1#issue-3398-tag")).toBeVisible(); await expect(page.locator("h1#issue-3398-tag")).toHaveText("Hello h1"); - await expect(page.locator("h1#issue-3398-tag")).not.hasAttribute( + await expect(page.locator("h1#issue-3398-tag")).not.toHaveAttribute( "children", ); }); diff --git a/starters/e2e/global.d.ts b/starters/e2e/global.d.ts deleted file mode 100644 index 6acfa9e4b60..00000000000 --- a/starters/e2e/global.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare global { - namespace PlaywrightTest { - interface Matchers<R> { - hasAttribute(a: string): Promise<R>; - } - } -} - -export {}; diff --git a/starters/playwright.config.ts b/starters/playwright.config.ts index f47920e7a1b..dbd3d3c3b9e 100644 --- a/starters/playwright.config.ts +++ b/starters/playwright.config.ts @@ -1,22 +1,7 @@ -import { expect } from "@playwright/test"; import type { Locator, PlaywrightTestConfig } from "@playwright/test"; const inGithubCI = !!process.env.GITHUB_ACTIONS; -expect.extend({ - async hasAttribute(recieved: Locator, attribute: string) { - const pass = await recieved.evaluate((node, attribute) => { - return node.getAttribute(attribute); - }, attribute); - - return { - message: () => - `expected ${recieved} to have attribute \`${attribute}\` (${pass})`, - pass: pass !== null, - }; - }, -}); - const config: PlaywrightTestConfig = { use: { viewport: { From ccd6aa342869c14474bb3134f2e7c952be1b3649 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Wed, 22 Jan 2025 11:30:02 +0530 Subject: [PATCH 6/7] fix as per review request --- .../qwik/src/core/render/dom/render.unit.tsx | 17 +- .../src/core/render/ssr/render-ssr.unit.tsx | 47 +++-- .../src/core/style/scoped-stylesheet.unit.ts | 175 ++++++++---------- starters/e2e/e2e.render.spec.ts | 10 +- 4 files changed, 117 insertions(+), 132 deletions(-) diff --git a/packages/qwik/src/core/render/dom/render.unit.tsx b/packages/qwik/src/core/render/dom/render.unit.tsx index 093d9cba439..7d7573adfcc 100644 --- a/packages/qwik/src/core/render/dom/render.unit.tsx +++ b/packages/qwik/src/core/render/dom/render.unit.tsx @@ -15,7 +15,6 @@ import { assert, test, suite } from 'vitest'; import { createDOM } from '../../../testing/library'; import { renderToString } from '../../../server/render'; import { createDocument } from '../../../testing/document'; -import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('should render basic content', async () => { const fixture = new ElementFixture(); @@ -219,15 +218,15 @@ test('should render a component with scoped styles', async () => { ` <host q:version="dev" q:container="resumed" q:render="dom-dev"> <style q:style="ml52vk-0" hidden=""> - .stuff.${prefix}ml52vk-0 { + .stuff.⚡️ml52vk-0 { color: red; } </style> <!--qv --> - <div class="${prefix}ml52vk-0"> - <div class="${prefix}ml52vk-0 stuff" aria-hidden="true"> + <div class="⚡️ml52vk-0"> + <div class="⚡️ml52vk-0 stuff" aria-hidden="true"> Hello - <button class="${prefix}ml52vk-0"> + <button class="⚡️ml52vk-0"> Toggle </button> </div> @@ -242,15 +241,15 @@ test('should render a component with scoped styles', async () => { ` <host q:version="dev" q:container="resumed" q:render="dom-dev"> <style q:style="ml52vk-0" hidden=""> - .stuff.${prefix}ml52vk-0 { + .stuff.⚡️ml52vk-0 { color: red; } </style> <!--qv --> - <div class="${prefix}ml52vk-0"> - <div class="${prefix}ml52vk-0"> + <div class="⚡️ml52vk-0"> + <div class="⚡️ml52vk-0"> Hello - <button class="${prefix}ml52vk-0"> + <button class="⚡️ml52vk-0"> Toggle </button> </div> diff --git a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx index 5ce74a63131..5c67f03702c 100644 --- a/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx +++ b/packages/qwik/src/core/render/ssr/render-ssr.unit.tsx @@ -18,7 +18,6 @@ import { Slot } from '../jsx/slot.public'; import type { JSXOutput } from '../jsx/types/jsx-node'; import { SSRComment, SSRRaw } from '../jsx/utils.public'; import { _renderSSR, type RenderSSROptions } from './render-ssr'; -import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('render attributes', async () => { await testSSR( @@ -1126,43 +1125,43 @@ test('component useStylesScoped()', async () => { ` <html q:container="paused" q:version="dev" q:render="ssr-dev" q:base="" q:manifest-hash="test"> <body> - <!--qv q:sstyle=${prefix}1d-0|${prefix}1e-1 q:id=0 q:key=sX:--> + <!--qv q:sstyle=⚡️1d-0|⚡️1e-1 q:id=0 q:key=sX:--> <style q:style="1d-0" hidden> - .host.${prefix}1d-0 { + .host.⚡️1d-0 { color: red; } </style> <style q:style="1e-1" hidden> - .blue.${prefix}1e-1 { + .blue.⚡️1e-1 { color: blue; } </style> - <div class="${prefix}1d-0 ${prefix}1e-1 host"> - <div class="${prefix}1d-0 ${prefix}1e-1 div"> + <div class="⚡️1d-0 ⚡️1e-1 host"> + <div class="⚡️1d-0 ⚡️1e-1 div"> Scoped1 <!--qv q:s q:sref=0 q:key=--> <div>projected</div> <!--/qv--> - <p class="${prefix}1d-0 ${prefix}1e-1">Que tal?</p> + <p class="⚡️1d-0 ⚡️1e-1">Que tal?</p> </div> - <!--qv q:sstyle=${prefix}f0gmsw-0 q:id=1 q:key=sX:--> + <!--qv q:sstyle=⚡️f0gmsw-0 q:id=1 q:key=sX:--> <style q:style="f0gmsw-0" hidden> - .host.${prefix}f0gmsw-0 { + .host.⚡️f0gmsw-0 { color: blue; } </style> - <div class="${prefix}f0gmsw-0 host"> - <div class="${prefix}f0gmsw-0"> + <div class="⚡️f0gmsw-0 host"> + <div class="⚡️f0gmsw-0"> Scoped2 - <p class="${prefix}f0gmsw-0">Bien</p> + <p class="⚡️f0gmsw-0">Bien</p> </div> </div> <!--/qv--> - <!--qv q:sstyle=${prefix}f0gmsw-0 q:id=2 q:key=sX:--> - <div class="${prefix}f0gmsw-0 host"> - <div class="${prefix}f0gmsw-0"> + <!--qv q:sstyle=⚡️f0gmsw-0 q:id=2 q:key=sX:--> + <div class="⚡️f0gmsw-0 host"> + <div class="⚡️f0gmsw-0"> Scoped2 - <p class="${prefix}f0gmsw-0">Bien</p> + <p class="⚡️f0gmsw-0">Bien</p> </div> </div> <!--/qv--> @@ -1181,21 +1180,21 @@ test('component useStylesScoped() + slot', async () => { </>, ` <html q:container="paused" q:version="dev" q:render="ssr-dev" q:base="" q:manifest-hash="test"> - <!--qv q:sstyle=${prefix}lkei4s-0 q:id=0 q:key=sX:--> - <body class="${prefix}lkei4s-0"> - <!--qv q:sstyle=${prefix}tdblg1-0 q:id=1 q:key=sX:--> + <!--qv q:sstyle=⚡️lkei4s-0 q:id=0 q:key=sX:--> + <body class="⚡️lkei4s-0"> + <!--qv q:sstyle=⚡️tdblg1-0 q:id=1 q:key=sX:--> <style q:style="tdblg1-0" hidden> - .host.${prefix}tdblg1-0 { + .host.⚡️tdblg1-0 { background: green; } </style> - <div class="${prefix}tdblg1-0"> + <div class="⚡️tdblg1-0"> <!--qv q:s q:sref=1 q:key=one--> - <div q:slot="one" class="${prefix}lkei4s-0">One</div> + <div q:slot="one" class="⚡️lkei4s-0">One</div> <!--/qv--> </div> - <q:template q:slot="two" hidden aria-hidden="true" class="${prefix}lkei4s-0"> - <div q:slot="two" class="${prefix}lkei4s-0">Two</div> + <q:template q:slot="two" hidden aria-hidden="true" class="⚡️lkei4s-0"> + <div q:slot="two" class="⚡️lkei4s-0">Two</div> </q:template> <!--/qv--> </body> diff --git a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts index 60e1ed7be48..a449162462b 100644 --- a/packages/qwik/src/core/style/scoped-stylesheet.unit.ts +++ b/packages/qwik/src/core/style/scoped-stylesheet.unit.ts @@ -1,119 +1,109 @@ import { assert, test } from 'vitest'; import { scopeStylesheet } from './scoped-stylesheet'; -import { ComponentStylesPrefixContent as prefix } from 'packages/qwik/src/core/util/markers'; test('selectors', () => { - assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); - assert.equal( - scopeStylesheet('div {}div{} div {}', '_'), - `div.${prefix}_ {}div.${prefix}_{} div.${prefix}_ {}` - ); - assert.equal(scopeStylesheet('div, p {}', '_'), `div.${prefix}_, p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div {}', '_'), `div.⚡️_ {}`); + assert.equal(scopeStylesheet('div {}div{} div {}', '_'), `div.⚡️_ {}div.⚡️_{} div.⚡️_ {}`); + assert.equal(scopeStylesheet('div, p {}', '_'), `div.⚡️_, p.⚡️_ {}`); - assert.equal(scopeStylesheet('div p {}', '_'), `div.${prefix}_ p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div > p {}', '_'), `div.${prefix}_ > p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div + p {}', '_'), `div.${prefix}_ + p.${prefix}_ {}`); - assert.equal(scopeStylesheet('div ~ p {}', '_'), `div.${prefix}_ ~ p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div p {}', '_'), `div.⚡️_ p.⚡️_ {}`); + assert.equal(scopeStylesheet('div > p {}', '_'), `div.⚡️_ > p.⚡️_ {}`); + assert.equal(scopeStylesheet('div + p {}', '_'), `div.⚡️_ + p.⚡️_ {}`); + assert.equal(scopeStylesheet('div ~ p {}', '_'), `div.⚡️_ ~ p.⚡️_ {}`); - assert.equal(scopeStylesheet('.red {}', '_'), `.red.${prefix}_ {}`); - assert.equal(scopeStylesheet('div.red {}', '_'), `div.red.${prefix}_ {}`); + assert.equal(scopeStylesheet('.red {}', '_'), `.red.⚡️_ {}`); + assert.equal(scopeStylesheet('div.red {}', '_'), `div.red.⚡️_ {}`); }); test('unicode', () => { - assert.equal(scopeStylesheet('.miško{}', '_'), `.miško.${prefix}_{}`); + assert.equal(scopeStylesheet('.miško{}', '_'), `.miško.⚡️_{}`); }); test('selectors with *', () => { - assert.equal(scopeStylesheet('* {}', '_'), `.${prefix}_ {}`); - assert.equal(scopeStylesheet('.red * {}', '_'), `.red.${prefix}_ .${prefix}_ {}`); - assert.equal(scopeStylesheet('#red * {}', '_'), `#red.${prefix}_ .${prefix}_ {}`); + assert.equal(scopeStylesheet('* {}', '_'), `.⚡️_ {}`); + assert.equal(scopeStylesheet('.red * {}', '_'), `.red.⚡️_ .⚡️_ {}`); + assert.equal(scopeStylesheet('#red * {}', '_'), `#red.⚡️_ .⚡️_ {}`); }); test('selectors with chains', () => { - assert.equal(scopeStylesheet('.red.text {}', '_'), `.red.text.${prefix}_ {}`); + assert.equal(scopeStylesheet('.red.text {}', '_'), `.red.text.⚡️_ {}`); - assert.equal(scopeStylesheet('#red {}', '_'), `#red.${prefix}_ {}`); - assert.equal(scopeStylesheet('div#red {}', '_'), `div#red.${prefix}_ {}`); + assert.equal(scopeStylesheet('#red {}', '_'), `#red.⚡️_ {}`); + assert.equal(scopeStylesheet('div#red {}', '_'), `div#red.⚡️_ {}`); - assert.equal(scopeStylesheet('div { }', '_'), `div.${prefix}_ { }`); - assert.equal(scopeStylesheet('div {}', '_'), `div.${prefix}_ {}`); + assert.equal(scopeStylesheet('div { }', '_'), `div.⚡️_ { }`); + assert.equal(scopeStylesheet('div {}', '_'), `div.⚡️_ {}`); assert.equal( scopeStylesheet('div {background-color: blue; }', '_'), - `div.${prefix}_ {background-color: blue; }` + `div.⚡️_ {background-color: blue; }` ); assert.equal( scopeStylesheet('div { color: red !important; }', '_'), - `div.${prefix}_ { color: red !important; }` + `div.⚡️_ { color: red !important; }` ); - assert.equal(scopeStylesheet('div{color:red;}', '_'), `div.${prefix}_{color:red;}`); - assert.equal(scopeStylesheet('div { content: "}"; }', '_'), `div.${prefix}_ { content: "}"; }`); - assert.equal(scopeStylesheet("div { content: '}'; }", '_'), `div.${prefix}_ { content: '}'; }`); + assert.equal(scopeStylesheet('div{color:red;}', '_'), `div.⚡️_{color:red;}`); + assert.equal(scopeStylesheet('div { content: "}"; }', '_'), `div.⚡️_ { content: "}"; }`); + assert.equal(scopeStylesheet("div { content: '}'; }", '_'), `div.⚡️_ { content: '}'; }`); }); test('attribute selectors', () => { - assert.equal(scopeStylesheet('*[a]{}', '_'), `[a].${prefix}_{}`); - assert.equal(scopeStylesheet('*[a] {}', '_'), `[a].${prefix}_ {}`); - assert.equal(scopeStylesheet('*[target] span {}', '_'), `[target].${prefix}_ span.${prefix}_ {}`); - - assert.equal(scopeStylesheet('a[target] {}', '_'), `a[target].${prefix}_ {}`); - assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), `a[target="_blank"].${prefix}_ {}`); - assert.equal( - scopeStylesheet('input[type="button"] {}', '_'), - `input[type="button"].${prefix}_ {}` - ); - - assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), `a[title~="red"].${prefix}_ {}`); - assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), `a[class^="red"].${prefix}_ {}`); - assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), `a[class|="red"].${prefix}_ {}`); - assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), `a[class*="red"].${prefix}_ {}`); - assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), `a[class$="red"].${prefix}_ {}`); + assert.equal(scopeStylesheet('*[a]{}', '_'), `[a].⚡️_{}`); + assert.equal(scopeStylesheet('*[a] {}', '_'), `[a].⚡️_ {}`); + assert.equal(scopeStylesheet('*[target] span {}', '_'), `[target].⚡️_ span.⚡️_ {}`); + + assert.equal(scopeStylesheet('a[target] {}', '_'), `a[target].⚡️_ {}`); + assert.equal(scopeStylesheet('a[target="_blank"] {}', '_'), `a[target="_blank"].⚡️_ {}`); + assert.equal(scopeStylesheet('input[type="button"] {}', '_'), `input[type="button"].⚡️_ {}`); + + assert.equal(scopeStylesheet('a[title~="red"] {}', '_'), `a[title~="red"].⚡️_ {}`); + assert.equal(scopeStylesheet('a[class^="red"] {}', '_'), `a[class^="red"].⚡️_ {}`); + assert.equal(scopeStylesheet('a[class|="red"] {}', '_'), `a[class|="red"].⚡️_ {}`); + assert.equal(scopeStylesheet('a[class*="red"] {}', '_'), `a[class*="red"].⚡️_ {}`); + assert.equal(scopeStylesheet('a[class$="red"] {}', '_'), `a[class$="red"].⚡️_ {}`); }); test('pseudo classes', () => { - assert.equal(scopeStylesheet('p:lang(en) {}', '_'), `p:lang(en).${prefix}_ {}`); - assert.equal(scopeStylesheet('a:link {}', '_'), `a:link.${prefix}_ {}`); - assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), `p:nth-child(2).${prefix}_ {}`); - assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), `p:nth-child(3n+1).${prefix}_ {}`); + assert.equal(scopeStylesheet('p:lang(en) {}', '_'), `p:lang(en).⚡️_ {}`); + assert.equal(scopeStylesheet('a:link {}', '_'), `a:link.⚡️_ {}`); + assert.equal(scopeStylesheet('p:nth-child(2) {}', '_'), `p:nth-child(2).⚡️_ {}`); + assert.equal(scopeStylesheet('p:nth-child(3n+1) {}', '_'), `p:nth-child(3n+1).⚡️_ {}`); }); test('pseudo classes without selector', () => { - assert.equal(scopeStylesheet(':root {}', '_'), `:root.${prefix}_ {}`); + assert.equal(scopeStylesheet(':root {}', '_'), `:root.⚡️_ {}`); }); test('pseudo selector with negation', () => { - assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), `p:not(.blue.${prefix}_).${prefix}_ {}`); + assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), `p:not(.blue.⚡️_).⚡️_ {}`); }); test('pseudo selector with :nth', () => { assert.equal( scopeStylesheet('p:nth-child(3n+1):hover {}', '_'), - `p:nth-child(3n+1):hover.${prefix}_ {}` + `p:nth-child(3n+1):hover.⚡️_ {}` ); assert.equal( scopeStylesheet('p:nth-child(3n+1) div {}', '_'), - `p:nth-child(3n+1).${prefix}_ div.${prefix}_ {}` + `p:nth-child(3n+1).⚡️_ div.⚡️_ {}` ); }); test('pseudo elements', () => { - assert.equal(scopeStylesheet('::selection {}', '_'), `.${prefix}_::selection {}`); - assert.equal(scopeStylesheet(' ::space {}', '_'), ` .${prefix}_::space {}`); + assert.equal(scopeStylesheet('::selection {}', '_'), `.⚡️_::selection {}`); + assert.equal(scopeStylesheet(' ::space {}', '_'), ` .⚡️_::space {}`); - assert.equal(scopeStylesheet('a::before {}', '_'), `a.${prefix}_::before {}`); - assert.equal(scopeStylesheet('a::after {}', '_'), `a.${prefix}_::after {}`); + assert.equal(scopeStylesheet('a::before {}', '_'), `a.⚡️_::before {}`); + assert.equal(scopeStylesheet('a::after {}', '_'), `a.⚡️_::after {}`); - assert.equal(scopeStylesheet('a::first-line {}', '_'), `a.${prefix}_::first-line {}`); + assert.equal(scopeStylesheet('a::first-line {}', '_'), `a.⚡️_::first-line {}`); - assert.equal(scopeStylesheet('a.red::before {}', '_'), `a.red.${prefix}_::before {}`); - assert.equal( - scopeStylesheet('a.red span::before {}', '_'), - `a.red.${prefix}_ span.${prefix}_::before {}` - ); + assert.equal(scopeStylesheet('a.red::before {}', '_'), `a.red.⚡️_::before {}`); + assert.equal(scopeStylesheet('a.red span::before {}', '_'), `a.red.⚡️_ span.⚡️_::before {}`); ['before', 'after', 'first-letter', 'first-line'].forEach((selector) => { - assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.${prefix}_:${selector} {}`); - assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.${prefix}_:${selector} {}`); + assert.equal(scopeStylesheet(`:${selector} {}`, '_'), `.⚡️_:${selector} {}`); + assert.equal(scopeStylesheet(`a:${selector} {}`, '_'), `a.⚡️_:${selector} {}`); }); }); test('complex properties', () => { assert.equal( scopeStylesheet('div { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }', '_'), - `div.${prefix}_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }` + `div.⚡️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }` ); assert.equal( @@ -121,7 +111,7 @@ test('complex properties', () => { 'div { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }', '_' ), - `div.${prefix}_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }` + `div.⚡️_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }` ); }); @@ -137,11 +127,11 @@ test('@keyframe', () => { }); test('animation-name', () => { - assert.equal(scopeStylesheet('p{animation-name: x}', '_'), `p.${prefix}_{animation-name: x}`); + assert.equal(scopeStylesheet('p{animation-name: x}', '_'), `p.⚡️_{animation-name: x}`); }); test('animation', () => { - assert.equal(scopeStylesheet('p{animation: a b c }', '_'), `p.${prefix}_{animation: a b c }`); + assert.equal(scopeStylesheet('p{animation: a b c }', '_'), `p.⚡️_{animation: a b c }`); }); test('@font-face', () => { @@ -157,14 +147,14 @@ test('@font-face', () => { test('@media', () => { assert.equal( scopeStylesheet('@media screen and (min-width: 900px) { div {} }', '_'), - `@media screen and (min-width: 900px) { div.${prefix}_ {} }` + `@media screen and (min-width: 900px) { div.⚡️_ {} }` ); }); test('@container', () => { assert.equal( scopeStylesheet('@container (min-width: 1px) { div {} span {} }', '_'), - `@container (min-width: 1px) { div.${prefix}_ {} span.${prefix}_ {} }` + `@container (min-width: 1px) { div.⚡️_ {} span.⚡️_ {} }` ); }); @@ -174,28 +164,25 @@ test('@supports', () => { '@supports (display: flex) { @media screen and (min-width: 900px) { div {} } }', '_' ), - `@supports (display: flex) { @media screen and (min-width: 900px) { div.${prefix}_ {} } }` + `@supports (display: flex) { @media screen and (min-width: 900px) { div.⚡️_ {} } }` ); }); test('@supports nested', () => { - assert.equal( - scopeStylesheet('@media screen(a:1){}div{}', '_'), - `@media screen(a:1){}div.${prefix}_{}` - ); + assert.equal(scopeStylesheet('@media screen(a:1){}div{}', '_'), `@media screen(a:1){}div.⚡️_{}`); assert.equal( scopeStylesheet('@supports(d:b){div{}@media screen(a:1){div{}}div{}}', '_'), - `@supports(d:b){div.${prefix}_{}@media screen(a:1){div.${prefix}_{}}div.${prefix}_{}}` + `@supports(d:b){div.⚡️_{}@media screen(a:1){div.⚡️_{}}div.⚡️_{}}` ); assert.equal( scopeStylesheet('@supports not (not (transform-origin: 2px)) { div {} }', '_'), - `@supports not (not (transform-origin: 2px)) { div.${prefix}_ {} }` + `@supports not (not (transform-origin: 2px)) { div.⚡️_ {} }` ); assert.equal( scopeStylesheet('@supports (display: grid) and (not (display: inline-grid)) { div {} }', '_'), - `@supports (display: grid) and (not (display: inline-grid)) { div.${prefix}_ {} }` + `@supports (display: grid) and (not (display: inline-grid)) { div.⚡️_ {} }` ); assert.equal( @@ -203,19 +190,19 @@ test('@supports nested', () => { '@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div {} }', '_' ), - `@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.${prefix}_ {} }` + `@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { div.⚡️_ {} }` ); }); test('comments', () => { - assert.equal(scopeStylesheet('div {} /* comment */', '_'), `div.${prefix}_ {} /* comment */`); - assert.equal(scopeStylesheet('div { /**/ }', '_'), `div.${prefix}_ { /**/ }`); - assert.equal(scopeStylesheet('div /* comment */ {}', '_'), `div.${prefix}_ /* comment */ {}`); - assert.equal(scopeStylesheet('div/* comment */ {}', '_'), `div.${prefix}_/* comment */ {}`); - assert.equal(scopeStylesheet('/* comment */div {}', '_'), `/* comment */div.${prefix}_ {}`); + assert.equal(scopeStylesheet('div {} /* comment */', '_'), `div.⚡️_ {} /* comment */`); + assert.equal(scopeStylesheet('div { /**/ }', '_'), `div.⚡️_ { /**/ }`); + assert.equal(scopeStylesheet('div /* comment */ {}', '_'), `div.⚡️_ /* comment */ {}`); + assert.equal(scopeStylesheet('div/* comment */ {}', '_'), `div.⚡️_/* comment */ {}`); + assert.equal(scopeStylesheet('/* comment */div {}', '_'), `/* comment */div.⚡️_ {}`); assert.equal( scopeStylesheet('div /* comment */ > span {}', '_'), - `div.${prefix}_ /* comment */ > span.${prefix}_ {}` + `div.⚡️_ /* comment */ > span.⚡️_ {}` ); }); @@ -226,13 +213,13 @@ test('global selector with attribute', () => { assert.equal(scopeStylesheet(':global([t="("]) {}', '_'), `[t="("] {}`); assert.equal(scopeStylesheet(':global(div) {}', '_'), 'div {}'); - assert.equal(scopeStylesheet(':global(div), p {}', '_'), `div, p.${prefix}_ {}`); + assert.equal(scopeStylesheet(':global(div), p {}', '_'), `div, p.⚡️_ {}`); - assert.equal(scopeStylesheet('div :global(p) {}', '_'), `div.${prefix}_ p {}`); - assert.equal(scopeStylesheet(':global(div) > p {}', '_'), `div > p.${prefix}_ {}`); + assert.equal(scopeStylesheet('div :global(p) {}', '_'), `div.⚡️_ p {}`); + assert.equal(scopeStylesheet(':global(div) > p {}', '_'), `div > p.⚡️_ {}`); assert.equal(scopeStylesheet(':global(.red) {}', '_'), '.red {}'); - assert.equal(scopeStylesheet(':global(div).red {}', '_'), `div.red.${prefix}_ {}`); + assert.equal(scopeStylesheet(':global(div).red {}', '_'), `div.red.⚡️_ {}`); assert.equal(scopeStylesheet(':global(div.red) {}', '_'), 'div.red {}'); assert.equal(scopeStylesheet(':global(#red) {}', '_'), '#red {}'); @@ -242,10 +229,10 @@ test('global selector with attribute', () => { assert.equal(scopeStylesheet(':global(div){color:red;}', '_'), 'div{color:red;}'); assert.equal(scopeStylesheet(':global(*[target]) {}', '_'), '*[target] {}'); - assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), `*[target] span.${prefix}_ {}`); - assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), `[target].${prefix}_ span {}`); + assert.equal(scopeStylesheet(':global(*[target]) span {}', '_'), `*[target] span.⚡️_ {}`); + assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), `[target].⚡️_ span {}`); - assert.equal(scopeStylesheet(':global(a):link {}', '_'), `a:link.${prefix}_ {}`); + assert.equal(scopeStylesheet(':global(a):link {}', '_'), `a:link.⚡️_ {}`); assert.equal(scopeStylesheet(':global(a:link) {}', '_'), 'a:link {}'); assert.equal(scopeStylesheet(':global(p:lang(en)) {}', '_'), 'p:lang(en) {}'); assert.equal(scopeStylesheet(':global(p:nth-child(2)) {}', '_'), 'p:nth-child(2) {}'); @@ -254,7 +241,7 @@ test('global selector with attribute', () => { }); test('nested global inside not', () => { - assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), `p:not(.red).${prefix}_{}`); + assert.equal(scopeStylesheet('p:not(:global(.red)){}', '_'), `p:not(.red).⚡️_{}`); assert.equal( scopeStylesheet(':global(p:nth-child(3n+1):hover) {}', '_'), @@ -271,10 +258,10 @@ test('global with pseudo element', () => { assert.equal(scopeStylesheet(':global(a::after){}', '_'), 'a::after{}'); // assert.equal(scopeStylesheet(':global(a)::before{}', '_'), 'a::before{}'); - assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), `a.red.${prefix}_::before {}`); + assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), `a.red.⚡️_::before {}`); assert.equal( scopeStylesheet(':global(a.red) span::before {}', '_'), - `a.red span.${prefix}_::before {}` + `a.red span.⚡️_::before {}` ); }); diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts index 8065a05234b..65c85eab01a 100644 --- a/starters/e2e/e2e.render.spec.ts +++ b/starters/e2e/e2e.render.spec.ts @@ -29,31 +29,31 @@ test.describe("render", () => { const attributes = page.locator("#attributes"); - await expect(attributes).toHaveClass(`${prefix}unvb18-1 even stable0`); + await expect(attributes).toHaveClass("⚡️unvb18-1 even stable0"); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); await increment.click(); - await expect(attributes).toHaveClass(`${prefix}unvb18-1 odd stable0`); + await expect(attributes).toHaveClass("⚡️unvb18-1 odd stable0"); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); await toggle.click(); - await expect(attributes).toHaveClass(`${prefix}unvb18-1`); + await expect(attributes).toHaveClass("⚡️unvb18-1"); await expect(attributes).not.toHaveAttribute("aria-hidden"); await expect(attributes).not.toHaveAttribute("preventdefault:click"); await increment.click(); - await expect(attributes).toHaveClass(`${prefix}unvb18-1`); + await expect(attributes).toHaveClass("⚡️unvb18-1"); await expect(attributes).not.toHaveAttribute("aria-hidden"); await expect(attributes).not.toHaveAttribute("preventdefault:click"); await toggle.click(); - await expect(attributes).toHaveClass(`${prefix}unvb18-1 even stable0`); + await expect(attributes).toHaveClass("⚡️unvb18-1 even stable0"); await expect(attributes).toHaveAttribute("aria-hidden", "true"); await expect(attributes).toHaveAttribute("preventdefault:click", ""); }); From 8df88a783f870c4304ab31cfcd3f3cee368709e6 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy <sreeisalso@gmail.com> Date: Thu, 23 Jan 2025 11:13:25 +0530 Subject: [PATCH 7/7] fix --- starters/e2e/e2e.render.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts index 65c85eab01a..09b9ca74a23 100644 --- a/starters/e2e/e2e.render.spec.ts +++ b/starters/e2e/e2e.render.spec.ts @@ -1,5 +1,4 @@ import { test, expect } from "@playwright/test"; -import { ComponentStylesPrefixContent as prefix } from "../../packages/qwik/src/core/util/markers"; test.describe("render", () => { test.beforeEach(async ({ page }) => {