From cb8013c7f756e258ade2f1a0afae391f085609a6 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy Date: Fri, 7 Feb 2025 22:20:24 +0530 Subject: [PATCH] =?UTF-8?q?Updated=20ComponentStylesPrefixContent=20from?= =?UTF-8?q?=20=E2=AD=90=20to=20=E2=9A=A1=20(#7304)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit this provides a better hint it's done by Qwik :zap: --- .changeset/swift-flowers-juggle.md | 5 + .../docs/(qwik)/components/styles/index.mdx | 2 +- .../qwik/src/core/shared/utils/markers.ts | 2 +- .../shared/utils/scoped-stylesheet.unit.ts | 162 +++++++++--------- starters/e2e/e2e.render.e2e.ts | 10 +- 5 files changed, 93 insertions(+), 88 deletions(-) create mode 100644 .changeset/swift-flowers-juggle.md diff --git a/.changeset/swift-flowers-juggle.md b/.changeset/swift-flowers-juggle.md new file mode 100644 index 00000000000..a4b8e0f1001 --- /dev/null +++ b/.changeset/swift-flowers-juggle.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/core': patch +--- + +Updated ComponentStylesPrefixContent from ⭐️ to ⚡️. diff --git a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx index 19a33e4799e..e85434b6433 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx @@ -248,7 +248,7 @@ export const List = component$(() => { }); ``` -This will render a css selector of `.list.⭐️8vzca0-0 > *:nth-child(3)`, allowing you to target child components. This could be considered the equivalent of using `::ng-deep` in Angular. +This will render a css selector of `.list.⚡️8vzca0-0 > *:nth-child(3)`, allowing you to target child components. This could be considered the equivalent of using `::ng-deep` in Angular. > Beware that this may have unintended effects that cascade down your component tree. diff --git a/packages/qwik/src/core/shared/utils/markers.ts b/packages/qwik/src/core/shared/utils/markers.ts index d36f8d4975c..750734d27db 100644 --- a/packages/qwik/src/core/shared/utils/markers.ts +++ b/packages/qwik/src/core/shared/utils/markers.ts @@ -7,7 +7,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:'; diff --git a/packages/qwik/src/core/shared/utils/scoped-stylesheet.unit.ts b/packages/qwik/src/core/shared/utils/scoped-stylesheet.unit.ts index ca07d9ced9f..4c8e37b0c84 100644 --- a/packages/qwik/src/core/shared/utils/scoped-stylesheet.unit.ts +++ b/packages/qwik/src/core/shared/utils/scoped-stylesheet.unit.ts @@ -2,108 +2,108 @@ import { assert, test } from 'vitest'; import { scopeStylesheet } from './scoped-stylesheet'; 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.⚡️_ {}'); + assert.equal(scopeStylesheet('div {}div{} div {}', '_'), 'div.⚡️_ {}div.⚡️_{} div.⚡️_ {}'); + 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.⭐️_ ~ 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.⚡️_ ~ p.⚡️_ {}'); - assert.equal(scopeStylesheet('.red {}', '_'), '.red.⭐️_ {}'); - assert.equal(scopeStylesheet('div.red {}', '_'), 'div.red.⭐️_ {}'); + assert.equal(scopeStylesheet('.red {}', '_'), '.red.⚡️_ {}'); + assert.equal(scopeStylesheet('div.red {}', '_'), 'div.red.⚡️_ {}'); }); test('unicode', () => { - assert.equal(scopeStylesheet('.miško{}', '_'), '.miško.⭐️_{}'); + assert.equal(scopeStylesheet('.miško{}', '_'), '.miško.⚡️_{}'); }); test('selectors with *', () => { - assert.equal(scopeStylesheet('* {}', '_'), '.⭐️_ {}'); - assert.equal(scopeStylesheet('.red * {}', '_'), '.red.⭐️_ .⭐️_ {}'); - assert.equal(scopeStylesheet('#red * {}', '_'), '#red.⭐️_ .⭐️_ {}'); + assert.equal(scopeStylesheet('* {}', '_'), '.⚡️_ {}'); + assert.equal(scopeStylesheet('.red * {}', '_'), '.red.⚡️_ .⚡️_ {}'); + assert.equal(scopeStylesheet('#red * {}', '_'), '#red.⚡️_ .⚡️_ {}'); }); test('selectors with chains', () => { - assert.equal(scopeStylesheet('.red.text {}', '_'), '.red.text.⭐️_ {}'); + assert.equal(scopeStylesheet('.red.text {}', '_'), '.red.text.⚡️_ {}'); - assert.equal(scopeStylesheet('#red {}', '_'), '#red.⭐️_ {}'); - assert.equal(scopeStylesheet('div#red {}', '_'), 'div#red.⭐️_ {}'); + assert.equal(scopeStylesheet('#red {}', '_'), '#red.⚡️_ {}'); + assert.equal(scopeStylesheet('div#red {}', '_'), 'div#red.⚡️_ {}'); - assert.equal(scopeStylesheet('div { }', '_'), 'div.⭐️_ { }'); - assert.equal(scopeStylesheet('div {}', '_'), 'div.⭐️_ {}'); + assert.equal(scopeStylesheet('div { }', '_'), 'div.⚡️_ { }'); + assert.equal(scopeStylesheet('div {}', '_'), 'div.⚡️_ {}'); assert.equal( scopeStylesheet('div {background-color: blue; }', '_'), - 'div.⭐️_ {background-color: blue; }' + 'div.⚡️_ {background-color: blue; }' ); assert.equal( scopeStylesheet('div { color: red !important; }', '_'), - 'div.⭐️_ { color: red !important; }' + 'div.⚡️_ { 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.⚡️_{color:red;}'); + assert.equal(scopeStylesheet('div { content: "}"; }', '_'), 'div.⚡️_ { content: "}"; }'); + assert.equal(scopeStylesheet("div { content: '}'; }", '_'), "div.⚡️_ { 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].⚡️_{}'); + 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).⭐️_ {}'); - 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).⚡️_ {}'); + 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.⭐️_ {}'); + assert.equal(scopeStylesheet(':root {}', '_'), ':root.⚡️_ {}'); }); test('pseudo selector with negation', () => { - assert.equal(scopeStylesheet('p:not(.blue) {}', '_'), 'p:not(.blue.⭐️_).⭐️_ {}'); + 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.⭐️_ {}' + 'p:nth-child(3n+1):hover.⚡️_ {}' ); assert.equal( scopeStylesheet('p:nth-child(3n+1) div {}', '_'), - 'p:nth-child(3n+1).⭐️_ div.⭐️_ {}' + 'p:nth-child(3n+1).⚡️_ div.⚡️_ {}' ); }); test('pseudo elements', () => { - assert.equal(scopeStylesheet('::selection {}', '_'), '.⭐️_::selection {}'); - assert.equal(scopeStylesheet(' ::space {}', '_'), ' .⭐️_::space {}'); + assert.equal(scopeStylesheet('::selection {}', '_'), '.⚡️_::selection {}'); + assert.equal(scopeStylesheet(' ::space {}', '_'), ' .⚡️_::space {}'); - assert.equal(scopeStylesheet('a::before {}', '_'), 'a.⭐️_::before {}'); - assert.equal(scopeStylesheet('a::after {}', '_'), 'a.⭐️_::after {}'); + assert.equal(scopeStylesheet('a::before {}', '_'), 'a.⚡️_::before {}'); + assert.equal(scopeStylesheet('a::after {}', '_'), 'a.⚡️_::after {}'); - assert.equal(scopeStylesheet('a::first-line {}', '_'), 'a.⭐️_::first-line {}'); + assert.equal(scopeStylesheet('a::first-line {}', '_'), 'a.⚡️_::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.⚡️_::before {}'); + assert.equal(scopeStylesheet('a.red span::before {}', '_'), 'a.red.⚡️_ span.⚡️_::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} {}`, '_'), `.⚡️_:${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.⭐️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }' + 'div.⚡️_ { background: #D0E4F5 url("./bg.jpg") no-repeat scroll 0 0; }' ); assert.equal( @@ -111,7 +111,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.⚡️_ { background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%); }' ); }); @@ -127,11 +127,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.⚡️_{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.⚡️_{animation: a b c }'); }); test('@font-face', () => { @@ -147,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.⭐️_ {} }' + '@media screen and (min-width: 900px) { div.⚡️_ {} }' ); }); test('@container', () => { assert.equal( scopeStylesheet('@container (min-width: 1px) { div {} span {} }', '_'), - '@container (min-width: 1px) { div.⭐️_ {} span.⭐️_ {} }' + '@container (min-width: 1px) { div.⚡️_ {} span.⚡️_ {} }' ); }); @@ -164,25 +164,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.⚡️_ {} } }' ); }); 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.⚡️_{}'); 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.⚡️_{}@media screen(a:1){div.⚡️_{}}div.⚡️_{}}' ); assert.equal( scopeStylesheet('@supports not (not (transform-origin: 2px)) { div {} }', '_'), - '@supports not (not (transform-origin: 2px)) { div.⭐️_ {} }' + '@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.⭐️_ {} }' + '@supports (display: grid) and (not (display: inline-grid)) { div.⚡️_ {} }' ); assert.equal( @@ -190,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.⭐️_ {} }' + '@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.⭐️_ {} /* 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.⚡️_ {} /* 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.⭐️_ /* comment */ > span.⭐️_ {}' + 'div.⚡️_ /* comment */ > span.⚡️_ {}' ); }); @@ -213,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.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div), p {}', '_'), 'div, p.⚡️_ {}'); - assert.equal(scopeStylesheet('div :global(p) {}', '_'), 'div.⭐️_ p {}'); - assert.equal(scopeStylesheet(':global(div) > p {}', '_'), 'div > p.⭐️_ {}'); + 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.⭐️_ {}'); + assert.equal(scopeStylesheet(':global(div).red {}', '_'), 'div.red.⚡️_ {}'); assert.equal(scopeStylesheet(':global(div.red) {}', '_'), 'div.red {}'); assert.equal(scopeStylesheet(':global(#red) {}', '_'), '#red {}'); @@ -229,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.⭐️_ {}'); - assert.equal(scopeStylesheet('*[target] :global(span) {}', '_'), '[target].⭐️_ 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.⭐️_ {}'); + 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) {}'); @@ -241,7 +241,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).⚡️_{}'); assert.equal( scopeStylesheet(':global(p:nth-child(3n+1):hover) {}', '_'), @@ -258,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.⭐️_::before {}'); + assert.equal(scopeStylesheet(':global(a).red::before {}', '_'), 'a.red.⚡️_::before {}'); assert.equal( scopeStylesheet(':global(a.red) span::before {}', '_'), - 'a.red span.⭐️_::before {}' + 'a.red span.⚡️_::before {}' ); }); diff --git a/starters/e2e/e2e.render.e2e.ts b/starters/e2e/e2e.render.e2e.ts index 9c55af47ed2..15d526ad52c 100644 --- a/starters/e2e/e2e.render.e2e.ts +++ b/starters/e2e/e2e.render.e2e.ts @@ -28,31 +28,31 @@ test.describe("render", () => { const attributes = page.locator("#attributes"); - await expect(attributes).toHaveClass("⭐️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("⭐️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("⭐️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("⭐️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("⭐️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", ""); });