Merge 75ac22f into ecdb3bc

.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.

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;

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);