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 }) => {