HTMLStyleElement.sheet returns null in v16

[matmannion]

In 16.0.0, calling the following:

const css = 'body { background: red; }'

const styleElement = document.createElement('style')
styleElement.textContent = css
document.body.appendChild(styleElement)

console.log(styleElement.sheet)

Returns null. Before v16, this was returning the same as a browser would; i.e. it allows parsing the CSS rules so they can then be iterated over with styleElement.sheet.cssRules. We use this in our application to scope CSS that comes from (trusted) upstream, and at the moment this is breaking the unit tests.

A full unit test reproducing this, which passes with vitest/happy-dom 15 but fails with happy-dom 16:

import { describe, expect, it } from 'vitest'

const StyleTagRegexp = /<style[^>]*>(?<content>.*?)<\/style>/gis

function getScopedCssRules(html: string, scope: string, dom?: DOMImplementation): string {
  const css = Array.from(html.matchAll(StyleTagRegexp))
    .map(({ groups }) => groups?.content ?? '')
    .join('\n')

  if (!css) {
    return ''
  }

  // Use the browser's CSSOM to parse CSS
  const doc = (dom ?? document.implementation).createHTMLDocument('')
  const styleElement = doc.createElement('style')
  styleElement.textContent = css
  doc.body.appendChild(styleElement)

  return Array.from(styleElement.sheet?.cssRules ?? [])
    .map(rule => {
      if (rule instanceof CSSStyleRule) {
        rule.selectorText = rule.selectorText
          .split(',')
          .map(selector => `${scope} ${selector}`)
          .join(',')
      }

      return rule.cssText
    })
    .join('\n')
}

function scopeCssSelectors(html: string, scope: string, dom?: DOMImplementation): string {
  const scopedCss = getScopedCssRules(html, scope, dom)

  return `${scopedCss ? `<style>${scopedCss}</style>` : ''}${html.replace(StyleTagRegexp, '')}`
}

describe('scopeCssSelectors()', () => {
  it('combines style into a single tag and scopes', () => {
    const html = `
      <style>
        #document h1, #document h2 {
          background: red;
        }
      </style>

      <h1>I love this</h1>

      <STYLE type="text/css">
        h3 {
          color: white;
        }
      </STYLE>
    `

    expect(scopeCssSelectors(html, '.scope'))
      .toEqual(`<style>.scope #document h1,.scope  #document h2 { background: red; }
.scope h3 { color: white; }</style>
      

      <h1>I love this</h1>

      
    `)
  })
})

The test output describes the behaviour in (e.g. 15.11.7). In 16 the <style> tag isn't output at all because it doesn't find any rules.

[capricorn86]

Thank you for reporting @matmannion! 🙂

I believe that I have fixed the issue now in v16.0.1.

[matmannion]

Amazing, can confirm fixed in 16.0.1. Thanks so much @capricorn86

[capricorn86]

Great to hear @matmannion!