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

package/dist/{compiler-NrvbUOX1.mjs → compiler-CJG6qvQt.mjs}

@@ -17,6 +17,7 @@ import postcssSelectorParser from "postcss-selector-parser";
 import MagicString from "magic-string";
 import { rolldown } from "rolldown";
 import resolve$1 from "resolve";
+import { minifySync } from "rolldown/utils";
 import { minify } from "terser";
 import { SelectorType, parse, stringify } from "css-what";
 import { execFile } from "node:child_process";
@@ -72,12 +73,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];
@@ -460,9 +462,9 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 };
 //#endregion
 //#region src/version.ts
-const version = "5.0.0-beta.0";
-const buildId = "1787699045";
-const vermoji = "🐥";
+const version = "5.0.0-beta.1";
+const buildId = "1788442714";
+const vermoji = "🚓";
 /**
 * Get the installed version of a tool/dependency.
 * Handles packages with exports maps that point to subdirectories.
@@ -1020,6 +1022,7 @@ const REGISTER_HOST = "__stencil_registerHost";
 const H = "__stencil_h";
 const TRANSFORM_TAG = "__stencil_transformTag";
 const GET_REGISTRY = "__stencil_getRegistry";
+const INJECT_SIDE_EFFECT_STYLE = "__stencil_injectSideEffectStyle";
 const RUNTIME_APIS = {
 	createEvent: `createEvent as ${CREATE_EVENT}`,
 	defineCustomElement: `defineCustomElement as ${DEFINE_CUSTOM_ELEMENT}`,
@@ -2421,7 +2424,7 @@ function addTagTransformToCssString(cssCode, tagNames) {
 			rule.selectors = rule.selectors.map((sel) => {
 				const parsedSelector = postcssSelectorParser().astSync(sel);
 				parsedSelector.walkTags((tag) => {
-					if (tagNames.includes(tag.value)) tag.value = "${__stencil_transformTag(\"" + tag.value + "\")}";
+					if (tagNames.includes(tag.value)) tag.value = "${" + TRANSFORM_TAG + "(\"" + tag.value + "\")}";
 				});
 				return parsedSelector.toString();
 			});
@@ -3354,9 +3357,9 @@ const runPluginTransformsEsmImports = async (config, compilerCtx, buildCtx, code
 	return transformResults;
 };
 //#endregion
-//#region src/compiler/style/optimize-css.ts
+//#region src/compiler/style/optimize-style-css.ts
 const getCssToolVersions = () => `autoprefixer@${getToolVersion("autoprefixer")}_postcss@${getToolVersion("postcss")}`;
-const optimizeCss$1 = async (config, compilerCtx, diagnostics, styleText, filePath) => {
+const optimizeStyleCss = async (config, compilerCtx, diagnostics, styleText, filePath) => {
 	if (typeof styleText !== "string" || !styleText.length) return styleText;
 	if ((config.autoprefixCss === false || config.autoprefixCss === null) && !config.minifyCss) return styleText;
 	if (typeof filePath === "string") filePath = normalizePath(filePath);
@@ -3441,7 +3444,7 @@ const collectAndBuildComponentGlobalStyles = async (config, compilerCtx, buildCt
 			if (!result) continue;
 			const cssCode = typeof result === "string" ? result : result.code;
 			if (!cssCode) continue;
-			const optimized = await optimizeCss$1(config, compilerCtx, buildCtx.diagnostics, cssCode, path);
+			const optimized = await optimizeStyleCss(config, compilerCtx, buildCtx.diagnostics, cssCode, path);
 			compilerCtx.globalStyleCache.set(path, optimized);
 			parts.push(optimized);
 		}
@@ -3523,7 +3526,7 @@ const buildGlobalStyleFromInput = async (config, compilerCtx, buildCtx, inputPat
 			}
 			if (hasStencilGlobalsImport(cssCode)) cssCode = await resolveStencilGlobalsImport(cssCode, config, compilerCtx, buildCtx, normalizedPath);
 			if (hasStencilHydrateImport(cssCode)) cssCode = resolveStencilHydrateImport(cssCode, config, buildCtx);
-			const optimizedCss = await optimizeCss$1(config, compilerCtx, buildCtx.diagnostics, cssCode, normalizedPath);
+			const optimizedCss = await optimizeStyleCss(config, compilerCtx, buildCtx.diagnostics, cssCode, normalizedPath);
 			compilerCtx.globalStyleCache.set(normalizedPath, optimizedCss);
 			if (Array.isArray(dependencies)) {
 				const cssModuleImports = compilerCtx.cssModuleImports.get(normalizedPath) || [];
@@ -3795,9 +3798,22 @@ const appendGlobalStyles = async (config, compilerCtx, buildCtx, s, platform) =>
 * @param s a `MagicString` to append the generated constant onto
 */
 const appendBuildConditionals = (config, buildConditionals, s) => {
-	const buildData = Object.keys(buildConditionals).sort().map((key) => key + ": " + JSON.stringify(buildConditionals[key])).join(", ");
+	const buildData = getSortedBuildConditionalEntries(buildConditionals).map(([key, value]) => key + ": " + JSON.stringify(value)).join(", ");
 	s.append(`export const BUILD = /* ${config.fsNamespace} */ { ${buildData} };\n`);
 };
+/**
+* Builds a `<flag> -> literal-value-as-source-text` map for every build conditional, for use by
+* {@link buildConditionalsPlugin} to replace `BUILD.<flag>` reads with their literal values.
+*
+* @param buildConditionals the build conditionals for this build
+* @returns a flag name > literal source text map
+*/
+const getBuildConditionalsLiterals = (buildConditionals) => {
+	const literals = /* @__PURE__ */ new Map();
+	for (const [key, value] of getSortedBuildConditionalEntries(buildConditionals)) literals.set(key, JSON.stringify(value));
+	return literals;
+};
+const getSortedBuildConditionalEntries = (buildConditionals) => Object.keys(buildConditionals).sort().map((key) => [key, buildConditionals[key]]);
 const appendEnv = (config, s) => {
 	s.append(`export const Env = /* ${config.fsNamespace} */ ${JSON.stringify(config.env)};\n`);
 };
@@ -3912,7 +3928,6 @@ const coreResolvePlugin = (config, compilerCtx, platform, externalRuntime, lazyL
 	const hydratedFlag = config.hydratedFlag;
 	const hydratedFlagHead = hydratedFlag ? getHydratedFlagHead(hydratedFlag) : null;
 	const hydratedReplacements = hydratedFlag && hydratedFlagHead !== "{visibility:hidden}.hydrated{visibility:inherit}" ? buildHydratedReplacements(hydratedFlag, hydratedFlagHead) : null;
-	const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 	return {
 		name: "coreResolvePlugin",
 		resolveId: {
@@ -3952,7 +3967,7 @@ const coreResolvePlugin = (config, compilerCtx, platform, externalRuntime, lazyL
 			}
 		},
 		load: {
-			filter: { id: new RegExp(`^(${escapeRegex(internalClient)}|${escapeRegex(internalSsr)})(\\?.*)?$`) },
+			filter: { id: getStencilInternalModuleFilter(internalClient, internalSsr) },
 			async handler(filePath) {
 				if (filePath && !filePath.startsWith("\0")) {
 					filePath = normalizeFsPath(filePath);
@@ -3984,6 +3999,19 @@ export const Build = {
 		}
 	};
 };
+/**
+* Builds a filter regex matching only Stencil's own resolved internal runtime module(s),
+* tolerant of query-string suffixes (e.g. `?app-data=conditional` for lazy builds). Shared by
+* any plugin that needs to scope its work to Stencil's own runtime code, rather than the rest
+* of a downstream app's bundle.
+*
+* @param moduleIds absolute paths to Stencil's resolved internal runtime module(s)
+* @returns a regex suitable for a rolldown hook's `id` filter
+*/
+const getStencilInternalModuleFilter = (...moduleIds) => {
+	const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return new RegExp(`^(${moduleIds.map(escapeRegex).join("|")})(\\?.*)?$`);
+};
 const getStencilInternalModule = (config, compilerExe, internalModule) => {
 	if (isRemoteUrl(compilerExe)) return normalizePath(config.sys.getLocalModulePath({
 		rootDir: config.rootDir,
@@ -4016,6 +4044,53 @@ const buildHydratedReplacements = (hydratedFlag, hydratedFlagHead) => {
 	return replacements;
 };
 //#endregion
+//#region src/compiler/bundle/build-conditionals-plugin.ts
+const BUILD_FLAG_RE = /\bBUILD(?:\$\d+)?\.([A-Za-z_$][\w$]*)\b/g;
+/**
+* Scoped by `id` to Stencil's own resolved internal runtime module(s) only
+* and only when the `jsMinifier` = `oxc`.
+*
+* Replaces `BUILD.<flag>` reads with their literal values, so a minifier's basic literal-boolean
+* folding (e.g. `false && x` -> nothing) can eliminate the resulting dead branches.
+* Oxc cannot dead-code-eliminate using `BUILD.<flag>` reads directly.
+*
+* @param config the Stencil configuration for the project
+* @param buildConditionals the build conditionals for this build
+* @returns a rolldown plugin, or null if this build doesn't need it
+*/
+const buildConditionalsPlugin = (config, buildConditionals) => {
+	if (config.jsMinifier !== "oxc" || !buildConditionals) return null;
+	const literals = getBuildConditionalsLiterals(buildConditionals);
+	if (literals.size === 0) return null;
+	const compilerExe = config.sys.getCompilerExecutingPath();
+	const internalClient = getStencilInternalModule(config, compilerExe, "client/runtime.js");
+	const internalSsr = getStencilInternalModule(config, compilerExe, "server/index.mjs");
+	return {
+		name: "stencil-build-conditionals",
+		transform: {
+			filter: {
+				id: getStencilInternalModuleFilter(internalClient, internalSsr),
+				code: /\bBUILD(?:\$\d+)?\.\w/
+			},
+			handler(code) {
+				const s = new MagicString(code);
+				let didReplace = false;
+				for (const match of code.matchAll(BUILD_FLAG_RE)) {
+					const literal = literals.get(match[1]);
+					if (literal === void 0) continue;
+					s.overwrite(match.index, match.index + match[0].length, literal);
+					didReplace = true;
+				}
+				if (!didReplace) return null;
+				return {
+					code: s.toString(),
+					map: s.generateMap({ hires: true })
+				};
+			}
+		}
+	};
+};
+//#endregion
 //#region src/compiler/bundle/constants.ts
 const DEV_MODULE_DIR = `~dev-module`;
 //#endregion
@@ -4250,9 +4325,10 @@ const extTransformsPlugin = (config, compilerCtx, buildCtx) => {
 					if (typeof code !== "string") compilerCtx.cssTransformCache.set(id, null);
 					else {
 						const pluginTransforms = await runPluginTransformsEsmImports(config, compilerCtx, buildCtx, code, filePath);
+						const cssInput = data.tag ? pluginTransforms.code : inlineRelativeCssUrlAssets(pluginTransforms.code, filePath);
 						const cssTransformResults = await compilerCtx.worker.transformCssToEsm({
 							file: pluginTransforms.id,
-							input: pluginTransforms.code,
+							input: cssInput,
 							tag: data.tag,
 							tags: buildCtx.components.map((c) => c.tagName),
 							addTagTransformers: !!buildCtx.config.compat.additionalTagTransformers,
@@ -4340,13 +4416,46 @@ const extTransformsPlugin = (config, compilerCtx, buildCtx) => {
 				return {
 					code: cacheEntry.cssTransformOutput.output,
 					map: cacheEntry.cssTransformOutput.map,
-					moduleSideEffects: false
+					moduleSideEffects: cacheEntry.cssTransformOutput.moduleSideEffects ?? false
 				};
 			}
 			return null;
 		}
 	};
 };
+/**
+* 3rd-party stylesheets with relative `url(./font.ttf)` (font-face `src`, a background-image, ...)
+* have nowhere to resolve that path once this CSS is self-injected as a CSSStyleSheet:
+* there's no bundler output location for it to be relative *to*.
+* Inlining the referenced file as a `data:` URI sidesteps needing one - no separate asset
+* to serve, works the same regardless of how/where the final bundle is deployed.
+*/
+const CSS_URL_RE = /url\(\s*(['"]?)([^'"()]+)\1\s*\)/g;
+const CSS_URL_ASSET_MIME_TYPES = {
+	ttf: "font/ttf",
+	otf: "font/otf",
+	woff: "font/woff",
+	woff2: "font/woff2",
+	eot: "application/vnd.ms-fontobject",
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	svg: "image/svg+xml"
+};
+const inlineRelativeCssUrlAssets = (cssText, cssFilePath) => cssText.replace(CSS_URL_RE, (original, _quote, url) => {
+	if (/^(data:|[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(url)) return original;
+	const cleanUrl = url.split(/[?#]/)[0];
+	const ext = cleanUrl.split(".").pop()?.toLowerCase();
+	const mimeType = ext && CSS_URL_ASSET_MIME_TYPES[ext];
+	if (!mimeType) return original;
+	try {
+		const assetPath = resolve(dirname(cssFilePath), cleanUrl);
+		return `url("data:${mimeType};base64,${readFileSync(assetPath).toString("base64")}")`;
+	} catch {
+		return original;
+	}
+});
 //#endregion
 //#region src/compiler/bundle/file-load-plugin.ts
 const RESOLVE_EXTENSIONS = [
@@ -4482,11 +4591,13 @@ const pluginHelper = (config, builtCtx, platform) => {
 			handler(importee, importer) {
 				if (importee.endsWith("/")) importee = importee.slice(0, -1);
 				if (builtIns.has(importee)) {
+					const alias = config.nodeResolve?.alias;
+					if (alias?.[importee] ?? alias?.[`${importee}$`]) return null;
 					let fromMsg = "";
 					if (importer) fromMsg = ` from ${relative$1(config.rootDir, importer)}`;
 					const diagnostic = buildError(builtCtx.diagnostics);
 					diagnostic.header = `Node Polyfills Required`;
-					diagnostic.messageText = `For the import "${importee}" to be bundled${fromMsg}, ensure the "rolldown-plugin-node-polyfills" plugin is installed and added to the stencil config plugins (${platform}). Please see the bundling docs for more information.
+					diagnostic.messageText = `For the import "${importee}" to be bundled${fromMsg}, ensure the "@rolldown/plugin-node-polyfills" plugin is installed and added to the stencil config plugins (${platform}). Please see the bundling docs for more information.
         Further information: https://stenciljs.com/docs/module-bundling`;
 				}
 				return null;
@@ -4713,7 +4824,59 @@ const userIndexPlugin = (config, compilerCtx) => {
 	};
 };
 //#endregion
-//#region src/compiler/optimize/minify-js.ts
+//#region src/compiler/optimize/minify-js-oxc.ts
+/**
+* Performs the minification of JavaScript source using oxc
+* @param input the JavaScript source to minify
+* @param opts the options used by the minifier
+* @returns the resulting minified JavaScript
+*/
+const minifyJsOxc = async (input, opts) => {
+	const results = {
+		output: input,
+		sourceMap: null,
+		diagnostics: []
+	};
+	try {
+		const minifyResult = minifySync("module.js", input, opts);
+		if (minifyResult.errors.length > 0) {
+			loadMinifyJsOxcDiagnostics(results.diagnostics, minifyResult.errors);
+			return results;
+		}
+		results.output = minifyResult.code;
+		results.sourceMap = minifyResult.map ? {
+			file: minifyResult.map.file ?? "module.js",
+			mappings: minifyResult.map.mappings,
+			names: minifyResult.map.names,
+			sourceRoot: minifyResult.map.sourceRoot,
+			sources: minifyResult.map.sources,
+			sourcesContent: minifyResult.map.sourcesContent,
+			version: minifyResult.map.version
+		} : null;
+	} catch (e) {
+		if (e instanceof Error) console.log(e.stack);
+		loadMinifyJsOxcDiagnostics(results.diagnostics, [{
+			message: String(e),
+			codeframe: null
+		}]);
+	}
+	return results;
+};
+const loadMinifyJsOxcDiagnostics = (diagnostics, errors) => {
+	for (const error of errors) diagnostics.push({
+		level: "error",
+		type: "build",
+		language: "javascript",
+		header: "Minify JS (oxc)",
+		code: "",
+		messageText: error.codeframe ?? error.message,
+		absFilePath: void 0,
+		relFilePath: void 0,
+		lines: []
+	});
+};
+//#endregion
+//#region src/compiler/optimize/minify-js-terser.ts
 /**
 * Performs the minification of JavaScript source
 * @param input the JavaScript source to minify
@@ -4732,14 +4895,6 @@ const minifyJs = async (input, opts) => {
 			const mangleProperties = mangle.properties;
 			if (mangleProperties && mangleProperties.regex) mangleProperties.regex = new RegExp(mangleProperties.regex);
 		}
-		if (opts.sourceMap)
- /**
-		* sourceMap, when used in conjunction with compress, can lead to sourcemaps that don't in every browser. despite
-		* there being a sourcemap spec, each browser has it's own tricks for trying to get sourcemaps to properly map
-		* minified JS back to its original form. for the most consistent results across all browsers, explicitly disable
-		* compress.
-		*/
-		opts.compress = void 0;
 	}
 	try {
 		const minifyResults = await minify(input, opts);
@@ -4845,7 +5000,8 @@ const optimizeModule = async (config, compilerCtx, opts) => {
 		sourceMap: opts.sourceMap
 	};
 	const isDebug = config.logLevel === "debug";
-	const cacheKey = await compilerCtx.cache.createKey("optimizeModule", getToolVersion("terser"), opts, isDebug);
+	const jsMinifier = config.jsMinifier;
+	const cacheKey = await compilerCtx.cache.createKey("optimizeModule", jsMinifier, getToolVersion(jsMinifier === "oxc" ? "rolldown" : "terser"), opts, isDebug);
 	const cachedContent = await compilerCtx.cache.get(cacheKey);
 	if (cachedContent != null) {
 		const cachedMap = await compilerCtx.cache.get(cacheKey + "Map");
@@ -4855,8 +5011,26 @@ const optimizeModule = async (config, compilerCtx, opts) => {
 			sourceMap: cachedMap ? JSON.parse(cachedMap) : null
 		};
 	}
-	const minifyOpts = getTerserOptions(config, opts.sourceTarget, isDebug);
 	const code = opts.input;
+	const results = jsMinifier === "oxc" ? await minifyJsOxc(code, getOxcMinifyOptions(config, opts, isDebug)) : await compilerCtx.worker.prepareModule(code, getTerserMinifyOptions(config, opts, isDebug));
+	if (results != null && typeof results.output === "string" && results.diagnostics.length === 0 && compilerCtx != null) {
+		if (opts.isCore) results.output = results.output.replace(/disconnectedCallback\(\)\{\},/g, "");
+		await compilerCtx.cache.put(cacheKey, results.output);
+		if (results.sourceMap) await compilerCtx.cache.put(cacheKey + "Map", JSON.stringify(results.sourceMap));
+	}
+	return results;
+};
+/**
+* Builds the terser options for a specific module being optimized, layering the module's
+* `isCore`/source map needs on top of the baseline options from {@link getTerserOptions}.
+*
+* @param config the Stencil configuration file that was provided as a part of the build step
+* @param opts the options for the module being optimized
+* @param isDebug if true, set the necessary flags to produce readable, debuggable output
+* @returns the minification options to hand to terser
+*/
+const getTerserMinifyOptions = (config, opts, isDebug) => {
+	const minifyOpts = getTerserOptions(config, opts.sourceTarget, isDebug);
 	if (config.sourceMap) minifyOpts.sourceMap = { content: opts.sourceMap != null ? {
 		...opts.sourceMap,
 		version: 3
@@ -4878,13 +5052,7 @@ const optimizeModule = async (config, compilerCtx, opts) => {
 		compressOpts.unsafe = true;
 		compressOpts.unsafe_undefined = true;
 	}
-	const results = await compilerCtx.worker.prepareModule(code, minifyOpts);
-	if (results != null && typeof results.output === "string" && results.diagnostics.length === 0 && compilerCtx != null) {
-		if (opts.isCore) results.output = results.output.replace(/disconnectedCallback\(\)\{\},/g, "");
-		await compilerCtx.cache.put(cacheKey, results.output);
-		if (results.sourceMap) await compilerCtx.cache.put(cacheKey + "Map", JSON.stringify(results.sourceMap));
-	}
-	return results;
+	return minifyOpts;
 };
 /**
 * Builds a configuration object to be used by Terser for the purposes of minifying a user's JavaScript
@@ -4941,6 +5109,81 @@ function getTerserManglePropertiesConfig() {
 	};
 }
 /**
+* Builds the oxc (rolldown minifier) options for a specific module being optimized.
+*
+* A few terser knobs have no oxc equivalent and so are dropped:
+* - `global_defs` (used to fold `supportsListenerOptions` to `true` in the core runtime bundle)
+* - `unsafe`/`unsafe_undefined`/`inline` compress passes
+* - `passes` (oxc's compressor iterates to a fix point automatically)
+*
+* @param config the Stencil configuration file that was provided as a part of the build step
+* @param opts the options for the module being optimized
+* @param isDebug if true, set the necessary flags to produce readable, debuggable output
+* @returns the minification options to hand to oxc
+*/
+const getOxcMinifyOptions = (config, opts, isDebug) => {
+	const minifyOpts = {
+		module: true,
+		sourcemap: !!config.sourceMap,
+		inputMap: config.sourceMap ? opts.sourceMap ?? void 0 : void 0,
+		mangleProps: getOxcManglePropertiesConfig(isDebug)
+	};
+	if (isDebug) {
+		minifyOpts.mangle = false;
+		minifyOpts.compress = {
+			dropConsole: false,
+			dropDebugger: false
+		};
+		minifyOpts.codegen = {
+			removeWhitespace: false,
+			legalComments: "inline"
+		};
+	} else {
+		minifyOpts.mangle = { toplevel: true };
+		minifyOpts.compress = { treeshake: {
+			propertyReadSideEffects: false,
+			manualPureFunctions: opts.isCore ? ["getHostRef"] : []
+		} };
+	}
+	return minifyOpts;
+};
+/**
+* `ComponentRuntimeMeta` (the shape of a component class's static `cmpMeta` getter) is
+* produced by one compiled unit and read by another (e.g. a component's own chunk vs the
+* SSR/hydrate runtime, or a lazy component's entry chunk vs the core runtime chunk).
+*
+* Oxc's mangleProps` has been observed to mangle a property at its read site but leave the same
+* property's key unmangled silently breaking that read (e.g. `cmpMeta.$tagName$` reads as `undefined`).
+* Reserving these names avoids the mismatch entirely.
+*
+* Assess in time with rolldown / oxc updates via `cd test/build/output && pnpm test`
+*/
+const RESERVED_CMP_META_PROPS = [
+	"$flags$",
+	"$tagName$",
+	"$members$",
+	"$listeners$",
+	"$attrsToReflect$",
+	"$watchers$",
+	"$lazyBundleId$",
+	"$serializers$",
+	"$deserializers$"
+];
+/**
+* Get baseline configuration for oxc's `mangleProps` option, mirroring
+* {@link getTerserManglePropertiesConfig}.
+*
+* @param isDebug if true, produce readable `_$name$_`-style output names instead of minified ones
+* @returns an object with our baseline property mangling configuration
+*/
+function getOxcManglePropertiesConfig(isDebug) {
+	return {
+		include: /^\$.+\$$/,
+		reserved: ["$hostElement$", ...RESERVED_CMP_META_PROPS],
+		debug: isDebug
+	};
+}
+/**
 * This method is likely to be called by a worker on the compiler context, rather than directly.
 * @param input the source code to minify
 * @param minifyOpts options to be used by the minifier
@@ -5089,7 +5332,7 @@ const buildWorker = async (config, compilerCtx, buildCtx, ctx, workerEntryPath)
 		let code = entryPoint.code;
 		const results = await optimizeModule(config, compilerCtx, {
 			input: code,
-			sourceTarget: "es2017",
+			sourceTarget: "es2022",
 			isCore: false,
 			minify: config.minifyJs,
 			inlineHelpers: true
@@ -5393,6 +5636,7 @@ const getRolldownOptions = (config, compilerCtx, buildCtx, bundleOpts) => {
 			},
 			coreResolvePlugin(config, compilerCtx, bundleOpts.platform, !!bundleOpts.externalRuntime, bundleOpts.conditionals?.lazyLoad ?? false),
 			appDataPlugin(config, compilerCtx, buildCtx, bundleOpts.conditionals, bundleOpts.platform),
+			buildConditionalsPlugin(config, bundleOpts.conditionals),
 			lazyComponentPlugin(buildCtx),
 			loaderPlugin(bundleOpts.loader),
 			userIndexPlugin(config, compilerCtx),
@@ -6569,10 +6813,6 @@ const addStaticImports = (rolldownChunkResults, bundleModules) => {
 		const generateCjs = isCjsFormat(index) ? generateCaseClauseCjs : generateCaseClause;
 		index.code = index.code.replace("/*!__STENCIL_STATIC_IMPORT_SWITCH__*/", `
         if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-          const processMod = importedModule => {
-              cmpModules.set(bundleId, importedModule);
-              return importedModule[exportName];
-          }
           switch(bundleId) {
               ${bundleModules.map((mod) => generateCjs(mod.output.bundleId)).join("")}
           }
@@ -6606,7 +6846,7 @@ const generateCaseClause = (bundleId) => {
                 case '${bundleId}':
                     return import(
                       /* webpackMode: "lazy" */
-                      './${bundleId}.entry.js').then(processMod, consoleError);`;
+                      './${bundleId}.entry.js').then(onLoad, onError);`;
 };
 /**
 * Generate a 'case' clause to be used within a `switch` statement. The case clause generated will key-off the provided
@@ -6619,7 +6859,7 @@ const generateCaseClauseCjs = (bundleId) => {
                 case '${bundleId}':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './${bundleId}.entry.js')); }).then(processMod, consoleError);`;
+                        './${bundleId}.entry.js')); }).then(onLoad, onError);`;
 };
 const generateLazyEntryModule = async (config, compilerCtx, buildCtx, rolldownResult, outputTargetType, destinations, sourceTarget, shouldMinify, isBrowserBuild) => {
 	const entryModule = buildCtx.entryModules.find((em) => em.entryKey === rolldownResult.entryKey);
@@ -6847,7 +7087,7 @@ const generateCjs = async (config, compilerCtx, buildCtx, rolldownBuild, outputT
 		const results = await generateRolldownOutput(rolldownBuild, esmOpts, config, buildCtx.entryModules);
 		if (results != null) {
 			const destinations = cjsOutputs.map((o) => o.cjsDir).filter((cjsDir) => typeof cjsDir === "string");
-			buildCtx.commonJsComponentBundle = await generateLazyModules(config, compilerCtx, buildCtx, outputTargetType, destinations, results, "es2017", false);
+			buildCtx.commonJsComponentBundle = await generateLazyModules(config, compilerCtx, buildCtx, outputTargetType, destinations, results, "es2022", false);
 			await generateShortcuts$1(compilerCtx, results, cjsOutputs);
 		}
 	}
@@ -12688,6 +12928,7 @@ const IS_CASE_SENSITIVE_FILE_NAMES = !(process.platform === "win32");
 //#endregion
 //#region src/compiler/sys/typescript/typescript-sys.ts
 const patchTsSystemFileSystem = (config, compilerSys, inMemoryFs, tsSys) => {
+	if (!tsSys) return;
 	const realpath = (path) => {
 		const rp = compilerSys.realpathSync(path);
 		if (isString$1(rp)) return rp;
@@ -12765,6 +13006,7 @@ const patchTsSystemFileSystem = (config, compilerSys, inMemoryFs, tsSys) => {
 	return tsSys;
 };
 const patchTsSystemWatch = (compilerSystem, tsSys) => {
+	if (!tsSys) return;
 	tsSys.watchDirectory = (p, cb, recursive) => {
 		const watcher = compilerSystem.watchDirectory(p, (filePath) => {
 			cb(filePath);
@@ -12788,26 +13030,6 @@ const patchTypescript = (config, inMemoryFs) => {
 	patchTsSystemFileSystem(config, config.sys, inMemoryFs, ts.sys);
 	patchTsSystemWatch(config.sys, ts.sys);
 };
-const patchTypeScriptSysMinimum = () => {
-	if (!ts.sys) ts.sys = {
-		args: [],
-		createDirectory: noop,
-		directoryExists: () => false,
-		exit: noop,
-		fileExists: () => false,
-		getCurrentDirectory: process.cwd,
-		getDirectories: () => [],
-		getExecutingFilePath: () => "./",
-		readDirectory: () => [],
-		readFile: noop,
-		newLine: "\n",
-		resolvePath: resolve$2,
-		useCaseSensitiveFileNames: false,
-		write: noop,
-		writeFile: noop
-	};
-};
-patchTypeScriptSysMinimum();
 const getTypescriptPathFromUrl = (config, tsExecutingUrl, url) => {
 	const tsBaseUrl = new URL("..", tsExecutingUrl).href;
 	if (url.startsWith(tsBaseUrl)) {
@@ -15251,6 +15473,22 @@ const parseStaticWatchers = (staticMembers) => {
 //#endregion
 //#region src/compiler/transformers/static-to-meta/class-extension/shared.ts
 /**
+* Warns when an `extends`/`Mixin(...)` target resolved to *something* but no class declaration
+* could be found inside it - e.g. a mixin factory whose class isn't a named declaration
+* (`(Base) => class extends Base {}` rather than `(Base) => { class Foo extends Base {} return
+* Foo; }`). Without this, the target is silently dropped: any `@Prop`/`@State` etc. it declares
+* just never appears on the extending component, with no diagnostic explaining why.
+* @param buildCtx used to surface the warning - omit to warn silently (e.g. from tests)
+* @param targetName the identifier the target was reached through
+* @param anchor the node to attach the warning to
+*/
+function warnMixinFactoryClassNotFound(buildCtx, targetName, anchor) {
+	if (!buildCtx) return;
+	const err = buildWarn(buildCtx.diagnostics);
+	err.messageText = `Found "${targetName}", but couldn't find a class declaration inside it. If it's meant to be a mixin factory, make sure it declares and returns a named class, e.g. \`(Base) => { class ${targetName}Class extends Base {} return ${targetName}Class; }\` - a factory that returns a class expression directly (\`(Base) => class extends Base {}\`) isn't recognized, and any \`@Prop\`/\`@State\`/etc. it declares won't be applied.`;
+	if (!buildCtx.config._isTesting) augmentDiagnosticWithNode(err, anchor);
+}
+/**
 * Walks the AST looking for a class declaration, optionally by name - descends
 * into a mixin factory's wrapping function (arrow function or `function`
 * declaration) body too, since a mixin factory's class is always nested one
@@ -15453,6 +15691,7 @@ function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration,
 	if (!foundClassDeclaration && matchedStatement) {
 		foundClassDeclaration = findClassWalk(matchedStatement);
 		keepLooking = false;
+		if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, className, classDeclaration);
 	}
 	if (foundClassDeclaration && !dependentClasses.some((dc) => dc.classNode === foundClassDeclaration)) {
 		dependentClasses.push({
@@ -15508,6 +15747,7 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 				foundClassDeclaration = findClassWalk(node);
 				if (!node) throw "revert to sad path";
 				keepLooking = false;
+				if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, extendee.getText(), classDeclaration);
 			}
 			if (foundClassDeclaration && !dependentClasses.some((dc) => dc.classNode === foundClassDeclaration)) {
 				const foundModule = compilerCtx.moduleMap.get(foundClassDeclaration.getSourceFile().fileName);
@@ -15538,6 +15778,7 @@ function buildExtendsTree(compilerCtx, classDeclaration, dependentClasses, typeC
 			else if (matchedStatement) {
 				foundClassDeclaration = findClassWalk(matchedStatement);
 				keepLooking = false;
+				if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, extendee.getText(), classDeclaration);
 			} else {
 				foundClassDeclaration = findClassWalk(currentSource, extendee.getText());
 				keepLooking = false;
@@ -15971,6 +16212,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 			else {
 				foundClass = findClassWalk(sameFileStatement);
 				keepLooking = false;
+				if (!foundClass) warnMixinFactoryClassNotFound(buildCtx, parentName, rootClassDeclaration);
 			}
 		} else {
 			const specifier = findImportSpecifier(sf, parentName);
@@ -15998,6 +16240,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 			else {
 				foundClass = findClassWalk(found.statement);
 				keepLooking = false;
+				if (!foundClass) warnMixinFactoryClassNotFound(buildCtx, parentName, rootClassDeclaration);
 			}
 		}
 		if (!foundClass || ancestors.some((a) => a.classNode === foundClass)) continue;
@@ -16727,7 +16970,7 @@ const parseCollectionComponents = (config, compilerCtx, buildCtx, collectionDir,
 };
 const transpileCollectionModule = (config, compilerCtx, buildCtx, collection, inputFileName) => {
 	const sourceText = compilerCtx.fs.readFileSync(inputFileName);
-	const sourceFile = ts.createSourceFile(inputFileName, sourceText, ts.ScriptTarget.ES2017, true, ts.ScriptKind.JS);
+	const sourceFile = ts.createSourceFile(inputFileName, sourceText, ts.ScriptTarget.ES2022, true, ts.ScriptKind.JS);
 	return updateModule(config, compilerCtx, buildCtx, sourceFile, sourceText, inputFileName, void 0, collection);
 };
 //#endregion
@@ -20389,6 +20632,7 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 		logger,
 		minifyCss: config.minifyCss ?? !devMode,
 		minifyJs: config.minifyJs ?? !devMode,
+		jsMinifier: config.jsMinifier ?? "oxc",
 		outputTargets: config.outputTargets ?? [],
 		rolldownConfig: validateRolldownConfig(config),
 		sourceMap: config.sourceMap === true || devMode && (config.sourceMap === "dev" || typeof config.sourceMap === "undefined"),
@@ -22897,29 +23141,36 @@ const generateTransformCssToEsm = (input, results) => {
 	results.styleText = results.styleText.replace(/\\/g, "\\\\").replace(/\n/g, " ").replace(/\r/g, " ").replace(/\t/g, " ").replace(/\u000c/g, "\\\\f").replace(/\u0008/g, "\\\\b").replace(/\u000b/g, "\\\\v").replace(/\0/g, "\\\\0").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
 	if (input.addTagTransformers) results.styleText = addTagTransformToCssString(results.styleText, input.tags);
 	results.styleText = stripCssComments(results.styleText);
+	const isComponentStyle = isString$1(input.tag);
+	const defaultAssignment = `const ${results.defaultVarName} = ${isComponentStyle ? "() => " : ""}`;
 	if (input.module === "cjs") {
 		if (input.addTagTransformers) s.append(`const ${TRANSFORM_TAG} = require('${STENCIL_CORE_ID}').transformTag;\n`);
+		if (!isComponentStyle) s.append(`const ${INJECT_SIDE_EFFECT_STYLE} = require('${STENCIL_CORE_ID}').injectSideEffectStyle;\n`);
 		results.imports.forEach((cssImport) => {
 			s.append(`const ${cssImport.varName} = require('${cssImport.importPath}');\n`);
 		});
-		s.append(`const ${results.defaultVarName} = () => `);
+		s.append(defaultAssignment);
 		results.imports.forEach((cssImport) => {
 			s.append(`${cssImport.varName} + `);
 		});
 		s.append(`\`${results.styleText}\`;\n`);
+		if (!isComponentStyle) s.append(`${INJECT_SIDE_EFFECT_STYLE}(${results.defaultVarName});\n`);
 		s.append(`module.exports = ${results.defaultVarName};`);
 	} else {
 		if (input.addTagTransformers) s.append(`import { transformTag as ${TRANSFORM_TAG}  } from '${STENCIL_CORE_ID}';\n`);
+		if (!isComponentStyle) s.append(`import { injectSideEffectStyle as ${INJECT_SIDE_EFFECT_STYLE} } from '${STENCIL_CORE_ID}';\n`);
 		results.imports.forEach((cssImport) => {
 			s.append(`import ${cssImport.varName} from '${cssImport.importPath}';\n`);
 		});
-		s.append(`const ${results.defaultVarName} = () => `);
+		s.append(defaultAssignment);
 		results.imports.forEach((cssImport) => {
 			s.append(`${cssImport.varName} + `);
 		});
 		s.append(`\`${results.styleText}\`;\n`);
+		if (!isComponentStyle) s.append(`${INJECT_SIDE_EFFECT_STYLE}(${results.defaultVarName});\n`);
 		s.append(`export default ${results.defaultVarName};`);
 	}
+	results.moduleSideEffects = !isComponentStyle;
 	results.output = s.toString();
 	return results;
 };
@@ -22947,6 +23198,7 @@ const getCssToEsmImports = (varNames, cssText, filePath, modeName) => {
 			isNodeModule: false
 		};
 		if (!isLocalCssImport(cssImportData.srcImportText)) continue;
+		else if (cssImportData.url === "stencil-globals" || cssImportData.url === "stencil-hydrate") continue;
 		else if (isCssNodeModule(cssImportData.url)) {
 			cssImportData.filePath = cssImportData.url.substring(1);
 			cssImportData.isNodeModule = true;
@@ -24458,8 +24710,8 @@ const transpileModule = (config, input, transformOpts) => {
 		getDefaultLibFileName: () => `lib.d.ts`,
 		useCaseSensitiveFileNames: () => false,
 		getCanonicalFileName: (fileName) => fileName,
-		getCurrentDirectory: () => transformOpts.currentDirectory || process.cwd(),
-		getNewLine: () => ts.sys.newLine || "\n",
+		getCurrentDirectory: () => transformOpts.currentDirectory || (typeof process !== "undefined" ? process.cwd() : "/"),
+		getNewLine: () => ts.sys && ts.sys.newLine || "\n",
 		fileExists: (fileName) => normalizePath(fileName) === normalizePath(sourceFilePath),
 		readFile: () => "",
 		directoryExists: () => true,