@stencil/core 5.0.0-beta.0 → 5.0.0-beta.1

package/dist/runtime/client/runtime.js

@@ -457,8 +457,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	if (module) return module[exportName];
 	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
 	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD$1.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
-	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
 		if (!BUILD$1.hotModuleReplacement) {
 			failedLoadAttempts.delete(bundleId);
@@ -470,6 +468,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 		failedLoadAttempts.set(bundleId, retryCount + 1);
 		consoleError(e, hostRef.$hostElement$);
 	};
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	if (lazyLoadBasePath) return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -3713,12 +3713,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -4284,6 +4285,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4431,7 +4440,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD$1.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -5047,6 +5058,86 @@ const hostListenerOpts = (flags) => supportsListenerOptions ? {
 	capture: (flags & LISTENER_FLAGS.Capture) !== 0
 } : (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD$1.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5218,4 +5309,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
-import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-DnISpqrd.js";
+import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-BXAcVN2j.js";
 //#region src/runtime/asset-path.d.ts
 declare const getAssetPath: (path: string) => string;
 declare const setAssetPath: (path: string) => string;
@@ -47,6 +47,32 @@ declare const Fragment: FunctionalComponent;
 //#region src/runtime/host-listener.d.ts
 declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
+//#region src/runtime/inject-side-effect-style.d.ts
+/**
+ * Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+ * (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+ * paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+ * hold disconnected roots forever.
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+ * encapsulation instead of always reaching for the top-level document. Not meant to be called
+ * directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+ * (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+ *
+ * `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+ * (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+ * @param cssText the CSS text to apply
+ */
+declare function injectSideEffectStyle(cssText: string): void;
+//#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;
 declare function Mixin(...mixins: ((base: Ctor) => Ctor)[]): Ctor<{}>;
@@ -210,4 +236,4 @@ declare const jsxs: typeof jsx;
  */
 declare const jsxDEV: typeof jsx;
 //#endregion
-export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag };
+export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, registerSideEffectStyleTarget, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag, unregisterSideEffectStyleTarget };

package/dist/runtime/index.js

@@ -347,8 +347,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	if (module) return module[exportName];
 	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
 	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
-	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
 		if (!BUILD.hotModuleReplacement) {
 			failedLoadAttempts.delete(bundleId);
@@ -360,6 +358,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 		failedLoadAttempts.set(bundleId, retryCount + 1);
 		consoleError(e, hostRef.$hostElement$);
 	};
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -3585,12 +3585,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -4156,6 +4157,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4303,7 +4312,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -4919,6 +4930,86 @@ const hostListenerOpts = (flags) => supportsListenerOptions ? {
 	capture: (flags & LISTENER_FLAGS.Capture) !== 0
 } : (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5090,4 +5181,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag };
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, registerSideEffectStyleTarget, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag, unregisterSideEffectStyleTarget };

package/dist/runtime/server/index.d.mts

@@ -1069,6 +1069,32 @@ declare const Fragment: FunctionalComponent;
 //#region src/runtime/host-listener.d.ts
 declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
+//#region src/runtime/inject-side-effect-style.d.ts
+/**
+ * Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+ * (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+ * paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+ * hold disconnected roots forever.
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+ * encapsulation instead of always reaching for the top-level document. Not meant to be called
+ * directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+ * (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+ *
+ * `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+ * (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+ * @param cssText the CSS text to apply
+ */
+declare function injectSideEffectStyle(cssText: string): void;
+//#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;
 declare function Mixin(...mixins: ((base: Ctor) => Ctor)[]): Ctor<{}>;
@@ -1248,4 +1274,4 @@ declare const setAssetPath: (path: string) => string;
 declare const setScopedSsr: (opts: SsrFactoryOptions) => void;
 declare const needsScopedSSR: () => boolean;
 //#endregion
-export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

package/dist/runtime/server/index.mjs

@@ -3329,12 +3329,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -3900,6 +3901,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4047,7 +4056,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD$1.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -4660,6 +4671,86 @@ const getHostListenerTarget = (doc, elm, flags) => {
 };
 const hostListenerOpts = (flags) => (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD$1.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5363,4 +5454,4 @@ const setScopedSsr = (opts) => {
 const needsScopedSSR = () => scopedSSR;
 let scopedSSR = false;
 //#endregion
-export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

package/dist/sys/node/index.d.mts

@@ -1,4 +1,4 @@
-import { J as CompilerSystem, jt as Logger } from "../../index-RrQfiPWK.mjs";
+import { J as CompilerSystem, jt as Logger } from "../../index-BopBfjPu.mjs";
 //#region src/sys/node/logger/index.d.ts
 /**
  * Create a logger to run in a Node environment

package/dist/sys/node/worker.mjs

@@ -1,4 +1,4 @@
-import { l as createWorkerMessageHandler } from "../../compiler-NrvbUOX1.mjs";
+import { l as createWorkerMessageHandler } from "../../compiler-CJG6qvQt.mjs";
 import { t as createNodeSys } from "../../node-75gQKkFz.mjs";
 //#region src/sys/node/node-worker-thread.ts
 /**

package/dist/testing/index.d.mts

@@ -973,10 +973,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -1322,7 +1331,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4480,6 +4489,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;