diff --git a/.changeset/fifty-monkeys-shop.md b/.changeset/fifty-monkeys-shop.md new file mode 100644 index 0000000000..fa0aa14203 --- /dev/null +++ b/.changeset/fifty-monkeys-shop.md @@ -0,0 +1,6 @@ +--- +'@lit/reactive-element': patch +'lit': patch +--- + +Fix `CSSStyleSheet is not defined` error that would occur when importing a Lit component in Node when both static `styles` and the `@property` decorator were used. diff --git a/packages/reactive-element/src/css-tag.ts b/packages/reactive-element/src/css-tag.ts index bbd00674a4..640d66f59b 100644 --- a/packages/reactive-element/src/css-tag.ts +++ b/packages/reactive-element/src/css-tag.ts @@ -195,7 +195,9 @@ const cssResultFromStyleSheet = (sheet: CSSStyleSheet) => { return unsafeCSS(cssText); }; -export const getCompatibleStyle = supportsAdoptingStyleSheets - ? (s: CSSResultOrNative) => s - : (s: CSSResultOrNative) => - s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s; +export const getCompatibleStyle = + supportsAdoptingStyleSheets || + (NODE_MODE && global.CSSStyleSheet === undefined) + ? (s: CSSResultOrNative) => s + : (s: CSSResultOrNative) => + s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s; diff --git a/packages/reactive-element/src/test/node-imports.ts b/packages/reactive-element/src/test/node-imports.ts index 9d91df2af2..39a58f7760 100644 --- a/packages/reactive-element/src/test/node-imports.ts +++ b/packages/reactive-element/src/test/node-imports.ts @@ -22,11 +22,24 @@ import '@lit/reactive-element/decorators/query-assigned-elements.js'; import '@lit/reactive-element/decorators/query-assigned-nodes.js'; import '@lit/reactive-element/decorators/query-async.js'; -import {customElement} from '@lit/reactive-element/decorators.js'; -import {ReactiveElement} from '@lit/reactive-element'; +import {customElement, property} from '@lit/reactive-element/decorators.js'; +import {ReactiveElement, css} from '@lit/reactive-element'; @customElement('my-element') -export class MyElement extends ReactiveElement {} +export class MyElement extends ReactiveElement { + // Include both static styles and a @property decorator in the test. The + // @property decorator trigggers class initialization, and if there are also + // static styles, it will trigger an instanceof check for CSSStyleSheet, which + // could explode if not handled with care in the node build. + static override styles = css` + p { + color: purple; + } + `; + + @property() + name = 'World'; +} export class MyOtherElement extends ReactiveElement {} customElements.define('my-other-element', MyOtherElement);