@stencil/core 5.0.0-beta.12 → 5.0.0-beta.14

package/dist/testing/index.mjs

@@ -5,12 +5,13 @@ import fs from "node:fs";
 import "picomatch";
 import * as SignalsCore from "@preact/signals-core";
 import path, { basename, dirname } from "path";
+import resolve from "resolve";
 import "postcss";
-import "postcss-safe-parser";
+import "postcss-nesting";
 import "postcss-selector-parser";
+import "postcss-safe-parser";
 import "magic-string";
 import "rolldown";
-import resolve from "resolve";
 import "rolldown/utils";
 import "terser";
 import "css-what";
@@ -32,7 +33,7 @@ import "@rollup/pluginutils";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
 //#region src/version.ts
-const version = "5.0.0-beta.12";
+const version = "5.0.0-beta.14";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -640,7 +641,7 @@ const Env = {};
 //#endregion
 //#region src/testing/platform/testing-constants.ts
 const styles = /* @__PURE__ */ new Map();
-const modeResolutionChain = [];
+const modeResolver = [];
 /**
 * A mapping of custom element tags (e.g. `my-component`) to their constructor
 */
@@ -2241,10 +2242,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		const isComplex = isComplexType(newValue);
 		if (!BUILD.lazyLoad) {
 			const isStandardAttr = ln.startsWith("aria-") || ln.startsWith("data-");
-			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && typeof customElements !== "undefined" && !customElements.get(elm.tagName.toLowerCase())) {
+			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && !customElements.get(elm.tagName.toLowerCase())) {
 				if (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
 				elm["s-pp"].set(memberName, newValue);
-				return;
+				if (isComplex || /[A-Z]/.test(memberName)) return;
 			}
 		}
 		if ((isProp || isComplex && newValue !== null) && !isSvg) try {
@@ -4392,7 +4393,7 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
-const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer") || selector.startsWith("@container");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
@@ -4511,7 +4512,7 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 };
 //#endregion
 //#region src/runtime/mode.ts
-const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
+const computeMode = (elm) => modeResolver.map((h) => h(elm)).find((m) => !!m);
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
 //#region src/runtime/normalize-watchers.ts
@@ -4576,23 +4577,14 @@ const normalizeWatchers = (raw) => {
 *
 * @param propValue the new value to coerce to some type
 * @param propType the type of the prop, expressed as a binary number
-* @param isFormAssociated whether the component is form-associated (optional)
 * @returns the parsed/coerced value
 */
-const parsePropertyValue = (propValue, propType, isFormAssociated) => {
+const parsePropertyValue = (propValue, propType) => {
 	if (propValue != null && !isComplexType(propValue)) {
 		/**
 		* ensure this value is of the correct prop type
 		*/
-		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) {
-			/**
-			* For form-associated components, according to HTML spec, the presence of any boolean attribute
-			* (regardless of its value, even "false") should make the property true.
-			* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
-			*/
-			if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
-			else return propValue === "false" ? false : propValue === "" || !!propValue;
-		}
+		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) return propValue === "" || !!propValue;
 		/**
 		* force it to be a number
 		*/
@@ -4634,7 +4626,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	if (BUILD.signalBacking) {
 		const sig = hostRef?.$signalValues$?.get(propName);
 		if (sig !== void 0) {
-			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 			if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$ && cmpMeta.$serializers$?.[propName]) {
 				const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
 				applySerializers(hostRef, cmpMeta, propName, parsed, BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm);
@@ -4652,7 +4644,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	const oldVal = hostRef.$instanceValues$.get(propName);
 	const flags = hostRef.$flags$;
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
-	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 	const didValueChange = newVal !== oldVal && !(Number.isNaN(oldVal) && Number.isNaN(newVal));
 	if ((!BUILD.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
 		hostRef.$instanceValues$.set(propName, newVal);
@@ -4701,6 +4693,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 */
 const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
 /**
+* Hand values written to a lazy component's element before its instance existed to the
+* instance's own `@Prop` setters. Must run as soon as the instance is constructed, so that
+* whenever `$lazyInstance$` is set, reads through it agree with the element's last write.
+*
+* @param hostRef the runtime bookkeeping object of a freshly constructed lazy instance
+* @param cmpMeta runtime metadata for the component (with any run-time only setters flagged)
+*/
+const replayPendingSetterValues = (hostRef, cmpMeta) => {
+	const instance = hostRef.$lazyInstance$;
+	if (!instance) return;
+	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) if (memberFlags & MEMBER_FLAGS.Setter && hostRef.$instanceValues$.has(memberName)) {
+		const pendingValue = hostRef.$instanceValues$.get(memberName);
+		if (instance[memberName] !== pendingValue) instance[memberName] = pendingValue;
+	}
+};
+/**
 * 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.
@@ -4757,9 +4765,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						if (BUILD.lazyLoad) {
 							if ((cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Getter) === 0) return getValue(this, memberName);
 							const ref = getHostRef(this);
-							const instance = ref ? ref.$lazyInstance$ : prototype;
-							if (!instance) return;
-							return instance[memberName];
+							if (!ref) return prototype[memberName];
+							return ref.$lazyInstance$ ? ref.$lazyInstance$[memberName] : getValue(this, memberName);
 						}
 						if (!BUILD.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
 					},
@@ -4774,7 +4781,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					}
 					if (origSetter) {
 						if (typeof (memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName]) === "undefined" && ref.$instanceValues$.get(memberName)) newValue = ref.$instanceValues$.get(memberName);
-						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated))]);
+						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
 						newValue = memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName];
 						setValue(this, memberName, newValue, cmpMeta);
 						return;
@@ -4786,26 +4793,15 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD.lazyLoad) {
 						if ((flags & PROXY_FLAGS.isElementConstructor) === 0 || (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0) {
 							setValue(this, memberName, newValue, cmpMeta);
-							if (flags & PROXY_FLAGS.isElementConstructor && !ref.$lazyInstance$) ref.$fetchedCbList$.push(() => {
-								if (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) ref.$lazyInstance$[memberName] = newValue;
-							});
 							return;
 						}
-						const parsedValue = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
-						const setterSetVal = (val) => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags);
+						if (ref.$lazyInstance$) {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = val;
+							ref.$lazyInstance$[memberName] = parsedValue;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-						};
-						if (ref.$lazyInstance$) setterSetVal(parsedValue);
-						else {
-							ref.$instanceValues$.set(memberName, parsedValue);
-							ref.$fetchedCbList$.push(() => {
-								const pendingValue = ref.$instanceValues$.get(memberName);
-								if (ref.$lazyInstance$[memberName] !== pendingValue) setterSetVal(pendingValue);
-							});
-						}
+						} else ref.$instanceValues$.set(memberName, parsedValue);
 					}
 				} });
 			} else if (BUILD.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4857,10 +4853,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					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 currentValue = BUILD.lazyLoad && propMemberFlags & MEMBER_FLAGS.Setter ? hostRef.$instanceValues$.get(propName) : this[propName];
+					if (isBooleanTarget) {
+						if (BUILD.isDev && newValue === "false") consoleDevWarn(`<${cmpMeta.$tagName$} ${attrName}="false">: boolean attributes are true when present, regardless of value. Remove the attribute or set the "${propName}" property to false instead.`);
+						newValue = newValue !== null;
+					}
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-					if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
 			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
@@ -4921,7 +4919,10 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				} catch (e) {
 					consoleError(e, elm);
 				}
-				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+				if (BUILD.member) {
+					hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+					replayPendingSetterValues(hostRef, cmpMeta);
+				}
 				endNewInstance();
 				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
 				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
@@ -5023,9 +5024,16 @@ const connectedCallback = (elm) => {
 			}
 			if (BUILD.asyncLoading) {
 				let ancestorComponent = elm;
-				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) if (BUILD.hydrateClientSide && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
-					attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
-					break;
+				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
+					if (BUILD.hydrateClientSide && !ancestorComponent["s-p"] && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id")) {
+						ancestorComponent["s-p"] = [];
+						ancestorComponent["s-rc"] = [];
+						ancestorComponent["s-pc"] = [];
+					}
+					if (ancestorComponent["s-p"]) {
+						attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
+						break;
+					}
 				}
 			}
 			if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
@@ -5141,48 +5149,45 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 			`${modulePath}?s-hmr=${hmrVersionId}`
 );
 		const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
-		if (!NewClass) return;
-		const ctor = customElements.get(cmpMeta.$tagName$);
-		if (ctor) {
-			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
-				if (key === "constructor") continue;
-				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
-			}
-			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
-			if (styleDesc) {
-				Object.defineProperty(ctor, "style", styleDesc);
-				const newStyle = NewClass.style;
-				if (newStyle) {
-					const scopeId = getScopeId(cmpMeta);
-					const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
-					console.log("[stencil-hmr] registerStyle", {
-						tag: cmpMeta.$tagName$,
-						scopeId,
-						isShadow,
-						cssLen: newStyle.length
-					});
-					registerStyle(scopeId, newStyle, isShadow);
-				}
-			}
-		}
-		const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
-		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
-			const hostRef = getHostRef(el);
-			if (BUILD.hostListener && hostRef?.$rmListeners$) {
-				hostRef.$rmListeners$.map((rmListener) => rmListener());
-				hostRef.$rmListeners$ = void 0;
-				addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
-			}
-			if (!isShadow && hostRef) {
-				console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
-				attachStyles(hostRef);
-			}
-			forceUpdate(el);
-		});
+		if (NewClass) hmrApplyClass(cmpMeta, NewClass);
 	} catch (e) {
 		console.error(`[Stencil HMR] Failed to reload <${cmpMeta.$tagName$}>`, e);
 	}
 };
+/**
+* Patch a re-executed component class onto the registered one and re-render every live instance.
+* Shared by the standalone re-import above and bundlers that re-execute the module themselves
+* (webpack/rspack `module.hot`), which reach it via the constructor's `s-hmr-apply` hook.
+*
+* @param cmpMeta runtime metadata for the component
+* @param NewClass the component's newly executed class
+*/
+const hmrApplyClass = (cmpMeta, NewClass) => {
+	const ctor = customElements.get(cmpMeta.$tagName$);
+	const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
+	if (ctor && ctor !== NewClass) {
+		for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+			if (key === "constructor") continue;
+			Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+		}
+		const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+		if (styleDesc) {
+			Object.defineProperty(ctor, "style", styleDesc);
+			const newStyle = NewClass.style;
+			if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, isShadow);
+		}
+	}
+	document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
+		const hostRef = getHostRef(el);
+		if (BUILD.hostListener && hostRef?.$rmListeners$) {
+			hostRef.$rmListeners$.map((rmListener) => rmListener());
+			hostRef.$rmListeners$ = void 0;
+			addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
+		}
+		if (!isShadow && hostRef) attachStyles(hostRef);
+		forceUpdate(el);
+	});
+};
 //#endregion
 //#region src/runtime/bootstrap-loader.ts
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -5600,8 +5605,8 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 //#endregion
 //#region src/testing/platform/index.ts
 const setMode = (handler) => {
-	modeResolutionChain.length = 0;
-	modeResolutionChain.push(handler);
+	modeResolver.length = 0;
+	modeResolver.push(handler);
 };
 const needsScopedSSR = () => scopedSSR;
 let scopedSSR = false;
@@ -5680,79 +5685,6 @@ const buildEvents = () => {
 	};
 };
 //#endregion
-//#region src/compiler/app-core/app-data.ts
-/**
-* Generate a {@link BuildFeatures} entity, based on the provided component metadata
-* @param cmps a collection of component compiler metadata, used to set values on the generated build features object
-* @returns the generated build features entity
-*/
-const getBuildFeatures = (cmps) => {
-	const slot = cmps.some((c) => c.htmlTagNames.includes("slot"));
-	const shadowDom = cmps.some((c) => c.encapsulation === "shadow");
-	const slotRelocation = cmps.some((c) => c.encapsulation !== "shadow" && c.htmlTagNames.includes("slot"));
-	const f = {
-		allRenderFn: cmps.every((c) => c.hasRenderFn),
-		formAssociated: cmps.some((c) => c.formAssociated),
-		deserializer: cmps.some((c) => c.hasDeserializer),
-		element: cmps.some((c) => c.hasElement),
-		event: cmps.some((c) => c.hasEvent),
-		hasRenderFn: cmps.some((c) => c.hasRenderFn),
-		lifecycle: cmps.some((c) => c.hasLifecycle),
-		asyncLoading: true,
-		hostListener: cmps.some((c) => c.hasListener),
-		hostListenerTargetWindow: cmps.some((c) => c.hasListenerTargetWindow),
-		hostListenerTargetDocument: cmps.some((c) => c.hasListenerTargetDocument),
-		hostListenerTargetBody: cmps.some((c) => c.hasListenerTargetBody),
-		hostListenerTarget: cmps.some((c) => c.hasListenerTarget),
-		member: cmps.some((c) => c.hasMember),
-		method: cmps.some((c) => c.hasMethod),
-		mode: cmps.some((c) => c.hasMode),
-		observeAttribute: cmps.some((c) => c.hasAttribute || c.hasWatchCallback || c.hasDeserializer),
-		prop: cmps.some((c) => c.hasProp),
-		propBoolean: cmps.some((c) => c.hasPropBoolean),
-		propChangeCallback: cmps.some((c) => c.hasWatchCallback || c.hasDeserializer || c.hasSerializer),
-		propNumber: cmps.some((c) => c.hasPropNumber),
-		propString: cmps.some((c) => c.hasPropString),
-		propMutable: cmps.some((c) => c.hasPropMutable),
-		reflect: cmps.some((c) => c.hasReflect || c.hasSerializer),
-		scoped: cmps.some((c) => c.encapsulation === "scoped"),
-		serializer: cmps.some((c) => c.hasSerializer),
-		shadowDom,
-		shadowDelegatesFocus: shadowDom && cmps.some((c) => c.shadowDelegatesFocus),
-		shadowModeClosed: shadowDom && cmps.some((c) => c.shadowMode === "closed"),
-		shadowSlotAssignmentManual: shadowDom && cmps.some((c) => c.slotAssignment === "manual"),
-		shadowClonable: shadowDom && cmps.some((c) => c.shadowClonable),
-		shadowSerializable: shadowDom && cmps.some((c) => c.shadowSerializable),
-		slot,
-		slotRelocation,
-		state: cmps.some((c) => c.hasState),
-		style: cmps.some((c) => c.hasStyle),
-		svg: cmps.some((c) => c.htmlTagNames.includes("svg")),
-		updatable: cmps.some((c) => c.isUpdateable),
-		vdomAttribute: cmps.some((c) => c.hasVdomAttribute),
-		vdomXlink: cmps.some((c) => c.hasVdomXlink),
-		vdomClass: cmps.some((c) => c.hasVdomClass),
-		vdomFunctional: cmps.some((c) => c.hasVdomFunctional),
-		vdomKey: cmps.some((c) => c.hasVdomKey),
-		vdomListener: cmps.some((c) => c.hasVdomListener),
-		vdomPropOrAttr: cmps.some((c) => c.hasVdomPropOrAttr),
-		vdomPropOrAttrPrefix: cmps.some((c) => c.hasVdomPropOrAttrPrefix),
-		vdomRef: cmps.some((c) => c.hasVdomRef),
-		vdomRender: cmps.some((c) => c.hasVdomRender),
-		vdomStyle: cmps.some((c) => c.hasVdomStyle),
-		vdomText: cmps.some((c) => c.hasVdomText),
-		vdomSignals: cmps.some((c) => c.hasSignalsImport),
-		taskQueue: true,
-		patchAll: cmps.some((c) => c.hasPatchAll),
-		patchChildren: cmps.some((c) => c.hasPatchChildren),
-		patchClone: cmps.some((c) => c.hasPatchClone),
-		patchInsert: cmps.some((c) => c.hasPatchInsert)
-	};
-	f.vdomAttribute = f.vdomAttribute || f.reflect;
-	f.vdomPropOrAttr = f.vdomPropOrAttr || f.reflect;
-	return f;
-};
-//#endregion
 //#region src/compiler/sys/resolve/resolve-utils.ts
 const getModuleId = (orgImport) => {
 	if (orgImport.startsWith("~")) orgImport = orgImport.substring(1);
@@ -5842,6 +5774,92 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
 		extensions: exts
 	};
 };
+//#endregion
+//#region src/compiler/app-core/app-data.ts
+/**
+* Generate a {@link BuildFeatures} entity, based on the provided component metadata
+* @param cmps a collection of component compiler metadata, used to set values on the generated build features object
+* @returns the generated build features entity
+*/
+const getBuildFeatures = (cmps) => {
+	const slot = cmps.some((c) => c.htmlTagNames.includes("slot"));
+	const shadowDom = cmps.some((c) => c.encapsulation === "shadow");
+	const slotRelocation = cmps.some((c) => c.encapsulation !== "shadow" && c.htmlTagNames.includes("slot"));
+	const f = {
+		allRenderFn: cmps.every((c) => c.hasRenderFn),
+		formAssociated: cmps.some((c) => c.formAssociated),
+		deserializer: cmps.some((c) => c.hasDeserializer),
+		element: cmps.some((c) => c.hasElement),
+		event: cmps.some((c) => c.hasEvent),
+		hasRenderFn: cmps.some((c) => c.hasRenderFn),
+		lifecycle: cmps.some((c) => c.hasLifecycle),
+		asyncLoading: true,
+		hostListener: cmps.some((c) => c.hasListener),
+		hostListenerTargetWindow: cmps.some((c) => c.hasListenerTargetWindow),
+		hostListenerTargetDocument: cmps.some((c) => c.hasListenerTargetDocument),
+		hostListenerTargetBody: cmps.some((c) => c.hasListenerTargetBody),
+		hostListenerTarget: cmps.some((c) => c.hasListenerTarget),
+		member: cmps.some((c) => c.hasMember),
+		method: cmps.some((c) => c.hasMethod),
+		mode: cmps.some((c) => c.hasMode),
+		observeAttribute: cmps.some((c) => c.hasAttribute || c.hasWatchCallback || c.hasDeserializer),
+		prop: cmps.some((c) => c.hasProp),
+		propBoolean: cmps.some((c) => c.hasPropBoolean),
+		propChangeCallback: cmps.some((c) => c.hasWatchCallback || c.hasDeserializer || c.hasSerializer),
+		propNumber: cmps.some((c) => c.hasPropNumber),
+		propString: cmps.some((c) => c.hasPropString),
+		propMutable: cmps.some((c) => c.hasPropMutable),
+		reflect: cmps.some((c) => c.hasReflect || c.hasSerializer),
+		scoped: cmps.some((c) => c.encapsulation === "scoped"),
+		serializer: cmps.some((c) => c.hasSerializer),
+		shadowDom,
+		shadowDelegatesFocus: shadowDom && cmps.some((c) => c.shadowDelegatesFocus),
+		shadowModeClosed: shadowDom && cmps.some((c) => c.shadowMode === "closed"),
+		shadowSlotAssignmentManual: shadowDom && cmps.some((c) => c.slotAssignment === "manual"),
+		shadowClonable: shadowDom && cmps.some((c) => c.shadowClonable),
+		shadowSerializable: shadowDom && cmps.some((c) => c.shadowSerializable),
+		slot,
+		slotRelocation,
+		state: cmps.some((c) => c.hasState),
+		style: cmps.some((c) => c.hasStyle),
+		svg: cmps.some((c) => c.htmlTagNames.includes("svg")),
+		updatable: cmps.some((c) => c.isUpdateable),
+		vdomAttribute: cmps.some((c) => c.hasVdomAttribute),
+		vdomXlink: cmps.some((c) => c.hasVdomXlink),
+		vdomClass: cmps.some((c) => c.hasVdomClass),
+		vdomFunctional: cmps.some((c) => c.hasVdomFunctional),
+		vdomKey: cmps.some((c) => c.hasVdomKey),
+		vdomListener: cmps.some((c) => c.hasVdomListener),
+		vdomPropOrAttr: cmps.some((c) => c.hasVdomPropOrAttr),
+		vdomPropOrAttrPrefix: cmps.some((c) => c.hasVdomPropOrAttrPrefix),
+		vdomRef: cmps.some((c) => c.hasVdomRef),
+		vdomRender: cmps.some((c) => c.hasVdomRender),
+		vdomStyle: cmps.some((c) => c.hasVdomStyle),
+		vdomText: cmps.some((c) => c.hasVdomText),
+		vdomSignals: cmps.some((c) => c.hasSignalsImport),
+		taskQueue: true,
+		patchAll: cmps.some((c) => c.hasPatchAll),
+		patchChildren: cmps.some((c) => c.hasPatchChildren),
+		patchClone: cmps.some((c) => c.hasPatchClone),
+		patchInsert: cmps.some((c) => c.hasPatchInsert)
+	};
+	f.vdomAttribute = f.vdomAttribute || f.reflect;
+	f.vdomPropOrAttr = f.vdomPropOrAttr || f.reflect;
+	return f;
+};
+//#endregion
+//#region src/compiler/style/component-global-styles.ts
+/**
+* Match `@import` of a `stencil-*` virtual import in any form CSS allows or a preprocessor emits:
+* quoted or not, bare or `url()`-wrapped, and with or without whitespace after `@import` (Sass's
+* compressed output drops it). Capture group 2 holds any trailing modifiers, e.g. `layer(name)`.
+* @param name the virtual import to match
+* @returns a global regex
+*/
+const stencilVirtualImportRe = (name) => new RegExp(`@import(?:\\s+|(?=['"]|url\\())(?:url\\(\\s*)?(['"]?)${name}(?![\\w-])\\1\\s*\\)?([^;]*);?`, "g");
+stencilVirtualImportRe("stencil-component-globals");
+stencilVirtualImportRe("stencil-hydrate");
+stencilVirtualImportRe("stencil-css-components");
 new RegExp(`^(${[.../* @__PURE__ */ new Set([
 	"child_process",
 	"cluster",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "5.0.0-beta.12",
+  "version": "5.0.0-beta.14",
   "description": "A Compiler for Web Components and Progressive Web Apps",
   "keywords": [
     "components",
@@ -117,6 +117,7 @@
     "magic-string": "^0.30.21",
     "picomatch": "^4.0.5",
     "postcss": "^8.5.26",
+    "postcss-nesting": "^14.0.1",
     "postcss-safe-parser": "^7.0.1",
     "postcss-selector-parser": "^7.1.5",
     "resolve": "^1.22.12",
@@ -125,9 +126,9 @@
     "terser": "^5.50.0",
     "tinyglobby": "^0.2.17",
     "typescript": ">5.0.0 <7.0.0",
-    "@stencil/cli": "5.0.0-beta.12",
-    "@stencil/dev-server": "5.0.0-beta.12",
-    "@stencil/mock-doc": "5.0.0-beta.12"
+    "@stencil/cli": "5.0.0-beta.14",
+    "@stencil/dev-server": "5.0.0-beta.14",
+    "@stencil/mock-doc": "5.0.0-beta.14"
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",