Skip to content

better handling for rerenders that teardown #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
habdelra wants to merge 7 commits into from
Closed

better handling for rerenders that teardown #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58898a0
better handling for rerenders that teardown
habdelra Oct 21, 2025
86b7ad6
Merge remote-tracking branch 'origin/main' into cs-6830-capture-card-…
habdelra Oct 21, 2025
2d5b2f9
Reworked the scoped styles acceptance test to stop comparing the enti…
habdelra Oct 21, 2025
f4aefe3
auto build on pnpm start and test
habdelra Oct 21, 2025
fb0d386
Merge remote-tracking branch 'origin/main' into cs-6830-capture-card-…
habdelra Oct 21, 2025
9d04d1d
fix lint
habdelra Oct 21, 2025
5f6ec9b
prettier
habdelra Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion glimmer-scoped-css/src/ast-transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,19 @@ export function generateScopedCSSPlugin(
`./${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;
Expand Down
2 changes: 2 additions & 0 deletions test-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
42 changes: 34 additions & 8 deletions test-app/tests/acceptance/scoped-css-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);

Expand Down Expand Up @@ -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)',
});
const underlineComponent = find('[data-scoped-underline-addon-component]');
if (!underlineComponent) {
throw new Error(
'[data-scoped-underline-addon-component] element not found'
);
}
const 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)',
});
const 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'
);
}
const 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) {
Expand Down
Loading