From 58898a0188d2a03640e00e20ace58a3c9f9d5ffb Mon Sep 17 00:00:00 2001
From: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>
Date: Mon, 20 Oct 2025 20:34:55 -0400
Subject: [PATCH 1/5] better handling for rerenders that teardown

---
 glimmer-scoped-css/src/ast-transform.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/glimmer-scoped-css/src/ast-transform.ts b/glimmer-scoped-css/src/ast-transform.ts
index 4989f15..34e3676 100644
--- a/glimmer-scoped-css/src/ast-transform.ts
+++ b/glimmer-scoped-css/src/ast-transform.ts
@@ -72,8 +72,19 @@ const scopedCSSTransform: ASTPluginBuilder<Env> = (env) => {
           jsutils.importForSideEffect(
             `./${basename(env.filename)}.${encodedCss}.glimmer-scoped.css`
           );
-
-          return null;
+          // Return an empty <style> stub so Glimmer still has something to remove during teardown.
+          // Without this stub, the runtime-inserted <style> lives in <head> and Ember will throw
+          // when it later tries to remove the original node. The stub also carries the unique
+          // scoped attribute value so the runtime script can detect which stylesheet to update.
+          node.attributes = [
+            builders.attr(
+              'data-boxel-scoped-css-stub',
+              builders.text(dataAttribute)
+            ),
+          ];
+          node.children = [];
+
+          return node;
         } else {
           if (node.tag.startsWith(':')) {
             return node;

From 2d5b2f9a7a80c2ef66f59520a8b055b1631a0576 Mon Sep 17 00:00:00 2001
From: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>
Date: Mon, 20 Oct 2025 21:32:09 -0400
Subject: [PATCH 2/5] =?UTF-8?q?Reworked=20the=20scoped=20styles=20acceptan?=
 =?UTF-8?q?ce=20test=20to=20stop=20comparing=20the=20entire=20text-decorat?=
 =?UTF-8?q?ion=20shorthand=20(which=20can=20vary=20across=20browsers)=20an?=
 =?UTF-8?q?d=20instead=20assert=20the=20specific=20textDecorationLine=20an?=
 =?UTF-8?q?d=20textDecorationColor=20values=20using=20getComputedStyle.=20?=
 =?UTF-8?q?Added=20explicit=20existence=20checks=20before=20reading=20comp?=
 =?UTF-8?q?uted=20styles=20so=20the=20test=20fails=20loudly=20if=20expecte?=
 =?UTF-8?q?d=20elements=20go=20missing.=20Adjusted=20the=20negative=20expe?=
 =?UTF-8?q?ctation=20to=20ensure=20the=20non-addon=20component=20isn?=
 =?UTF-8?q?=E2=80=99t=20styled=20with=20underline=20rgb(0,=200,=200).=20Wi?=
 =?UTF-8?q?th=20these=20changes=20the=20test=20now=20captures=20the=20inte?=
 =?UTF-8?q?nt=20(=E2=80=9Cunderline=20in=20black=E2=80=9D)=20while=20avoid?=
 =?UTF-8?q?ing=20brittle=20string=20comparisons.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test-app/tests/acceptance/scoped-css-test.ts | 40 ++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/test-app/tests/acceptance/scoped-css-test.ts b/test-app/tests/acceptance/scoped-css-test.ts
index 3cf041f..a058376 100644
--- a/test-app/tests/acceptance/scoped-css-test.ts
+++ b/test-app/tests/acceptance/scoped-css-test.ts
@@ -130,19 +130,45 @@ module('Acceptance | scoped css', function (hooks) {
   test('an addon can use scoped styles', async function (assert) {
     await visit('/');
 
-    assert.dom('[data-scoped-underline-addon-component]').hasStyle({
-      textDecoration: 'underline solid rgb(0, 0, 0)',
-    });
+    let underlineComponent = find('[data-scoped-underline-addon-component]');
+    if (!underlineComponent) {
+      throw new Error(
+        '[data-scoped-underline-addon-component] element not found'
+      );
+    }
+    let underlineComponentStyles = getComputedStyle(underlineComponent);
+    assert.strictEqual(
+      underlineComponentStyles.textDecorationLine,
+      'underline'
+    );
+    assert.strictEqual(
+      underlineComponentStyles.textDecorationColor,
+      'rgb(0, 0, 0)'
+    );
 
     assert
       .dom('[data-test-underline-component-outside-addon]')
       .doesNotHaveStyle({
-        textDecoration: 'underline solid rgb(0, 0, 0)',
+        textDecoration: 'underline rgb(0, 0, 0)',
       });
 
-    assert.dom('[data-test-paragraph-with-class-styled-by-addon]').hasStyle({
-      textDecoration: 'underline solid rgb(0, 0, 0)',
-    });
+    let classStyledParagraph = find(
+      '[data-test-paragraph-with-class-styled-by-addon]'
+    );
+    if (!classStyledParagraph) {
+      throw new Error(
+        '[data-test-paragraph-with-class-styled-by-addon] element not found'
+      );
+    }
+    let classStyledParagraphStyles = getComputedStyle(classStyledParagraph);
+    assert.strictEqual(
+      classStyledParagraphStyles.textDecorationLine,
+      'underline'
+    );
+    assert.strictEqual(
+      classStyledParagraphStyles.textDecorationColor,
+      'rgb(0, 0, 0)'
+    );
   });
 
   test('unscoped styles can use interpolation', async function (assert) {

From f4aefe309a1d76e2793e1e0a92f388b1fde07848 Mon Sep 17 00:00:00 2001
From: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>
Date: Mon, 20 Oct 2025 21:32:28 -0400
Subject: [PATCH 3/5] auto build on pnpm start and test

---
 test-app/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test-app/package.json b/test-app/package.json
index f8198ee..16181db 100644
--- a/test-app/package.json
+++ b/test-app/package.json
@@ -17,7 +17,9 @@
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "tsc --noEmit",
+    "prestart": "pnpm --dir ../test-addon-to-import build",
     "start": "ember serve",
+    "pretest": "pnpm --dir ../test-addon-to-import build",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test"
   },

From 9d04d1d0c261dcf0a9531fcd27c7830d0aedb991 Mon Sep 17 00:00:00 2001
From: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>
Date: Mon, 20 Oct 2025 21:38:00 -0400
Subject: [PATCH 4/5] fix lint

---
 test-app/tests/acceptance/scoped-css-test.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/test-app/tests/acceptance/scoped-css-test.ts b/test-app/tests/acceptance/scoped-css-test.ts
index a058376..afc2891 100644
--- a/test-app/tests/acceptance/scoped-css-test.ts
+++ b/test-app/tests/acceptance/scoped-css-test.ts
@@ -88,7 +88,7 @@ module('Acceptance | scoped css', function (hooks) {
 
     const multipleInnerElement = find('[data-test-multiple-inner]');
     const multipleInnerElementBeforeStyle = getComputedStyle(
-      multipleInnerElement!,
+      multipleInnerElement as Element,
       ':before'
     );
 
@@ -130,13 +130,15 @@ module('Acceptance | scoped css', function (hooks) {
   test('an addon can use scoped styles', async function (assert) {
     await visit('/');
 
-    let underlineComponent = find('[data-scoped-underline-addon-component]');
+    const underlineComponent = find(
+      '[data-scoped-underline-addon-component]'
+    );
     if (!underlineComponent) {
       throw new Error(
         '[data-scoped-underline-addon-component] element not found'
       );
     }
-    let underlineComponentStyles = getComputedStyle(underlineComponent);
+    const underlineComponentStyles = getComputedStyle(underlineComponent);
     assert.strictEqual(
       underlineComponentStyles.textDecorationLine,
       'underline'
@@ -152,7 +154,7 @@ module('Acceptance | scoped css', function (hooks) {
         textDecoration: 'underline rgb(0, 0, 0)',
       });
 
-    let classStyledParagraph = find(
+    const classStyledParagraph = find(
       '[data-test-paragraph-with-class-styled-by-addon]'
     );
     if (!classStyledParagraph) {
@@ -160,7 +162,7 @@ module('Acceptance | scoped css', function (hooks) {
         '[data-test-paragraph-with-class-styled-by-addon] element not found'
       );
     }
-    let classStyledParagraphStyles = getComputedStyle(classStyledParagraph);
+    const classStyledParagraphStyles = getComputedStyle(classStyledParagraph);
     assert.strictEqual(
       classStyledParagraphStyles.textDecorationLine,
       'underline'

From 5f6ec9b881a5c446a8def4e2d2db29acba6017d6 Mon Sep 17 00:00:00 2001
From: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>
Date: Mon, 20 Oct 2025 21:39:40 -0400
Subject: [PATCH 5/5] prettier

---
 test-app/tests/acceptance/scoped-css-test.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test-app/tests/acceptance/scoped-css-test.ts b/test-app/tests/acceptance/scoped-css-test.ts
index afc2891..7d0d12f 100644
--- a/test-app/tests/acceptance/scoped-css-test.ts
+++ b/test-app/tests/acceptance/scoped-css-test.ts
@@ -130,9 +130,7 @@ module('Acceptance | scoped css', function (hooks) {
   test('an addon can use scoped styles', async function (assert) {
     await visit('/');
 
-    const underlineComponent = find(
-      '[data-scoped-underline-addon-component]'
-    );
+    const underlineComponent = find('[data-scoped-underline-addon-component]');
     if (!underlineComponent) {
       throw new Error(
         '[data-scoped-underline-addon-component] element not found'
