fix(unhead): style side effect not clearing

Fixes #357
unjs · Jun 20, 2024 · baf8bc9 · baf8bc9
1 parent c0ca0c1
commit baf8bc9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/packages/dom/src/renderDOMHead.ts b/packages/dom/src/renderDOMHead.ts
@@ -112,7 +112,7 @@ export async function renderDOMHead<T extends Unhead<any>>(head: T, options: Ren
  // style attributes have their own side effects to allow for merging
  for (const c of (value || '').split(';').filter(Boolean)) {
  const [k, ...v] = c.split(':').map(s => s.trim())
- track(id, `${ck}:${c}:${k}`, () => {
+ track(id, `${ck}:${k}`, () => {
  ($el as any as ElementCSSInlineStyle).style.removeProperty(k)
  })
  ;($el as any as ElementCSSInlineStyle).style.setProperty(k, v.join(':'))

diff --git a/test/unhead/dom/styles.test.ts b/test/unhead/dom/styles.test.ts
@@ -49,6 +49,55 @@ describe('styles', () => {
 
 
 
+ </body></html>"
+ `)
+ })
+ it('overrides', async () => {
+ useDOMHead()
+
+ useHead({
+ bodyAttrs: {
+ style: '--c-bg: #03D57E;--c-text: #000;',
+ },
+ })
+
+ const el = useHead({
+ bodyAttrs: {
+ style: '--c-bg: #000;--c-text: white;',
+ },
+ })
+
+ activeDom?.window.document.documentElement.style.setProperty('--header-height', '50px')
+
+ expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
+ "<!DOCTYPE html><html style="--header-height: 50px;"><head>
+
+ </head>
+ <body style="--c-bg: #000; --c-text: white;">
+
+ <div>
+ <h1>hello world</h1>
+ </div>
+
+
+
+ </body></html>"
+ `)
+
+ el.dispose()
+
+ expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
+ "<!DOCTYPE html><html style="--header-height: 50px;"><head>
+
+ </head>
+ <body style="--c-bg: #03D57E; --c-text: #000;">
+
+ <div>
+ <h1>hello world</h1>
+ </div>
+
+
+
  </body></html>"
  `)
  })