@stencil/core 5.0.0-beta.11 → 5.0.0-beta.13

package/dist/compiler/browser.js

@@ -1693,6 +1693,18 @@ const createJsVarName = (fileName) => {
 	}
 	return fileName;
 };
+/**
+* Create a function that lowercases the first string parameter before passing it to the provided function
+* @param fn the function to pass the lowercased path to
+* @returns the result of the provided function
+*/
+const lowerPathParam = (fn) => (p) => fn(p.toLowerCase());
+/**
+* Determine if a stringified file path is a TypeScript declaration file based on the extension at the end of the path.
+* @param p the path to evaluate
+* @returns `true` if the path ends in `.d.ts` (case-sensitive), `false` otherwise.
+*/
+const isDtsFile = lowerPathParam((p) => p.endsWith(".d.ts") || p.endsWith(".d.mts") || p.endsWith(".d.cts"));
 function getTextDocs(docs) {
 	if (docs == null) return "";
 	return [escapeWithPattern(docs.text.replace(LINE_BREAK_REGEX, " "), /\*\//, "*\\/", true), ...docs.tags.filter((tag) => tag.name !== "internal").map((tag) => {
@@ -1832,7 +1844,7 @@ const validateComponentTag = (tag) => {
 };
 //#endregion
 //#region src/version.ts
-const version = "5.0.0-beta.11";
+const version = "5.0.0-beta.13";
 //#endregion
 //#region src/compiler/events.ts
 const buildEvents = () => {
@@ -1895,6 +1907,7 @@ const resolve = (id, _opts, cb) => {
 };
 //#endregion
 //#region src/compiler/sys/resolve/resolve-utils.ts
+const isLocalModule = (p) => p.startsWith(".") || p.startsWith("/");
 const isNodeModulePath = (p) => normalizePath(p).split("/").includes("node_modules");
 const getModuleId = (orgImport) => {
 	if (orgImport.startsWith("~")) orgImport = orgImport.substring(1);
@@ -2633,7 +2646,8 @@ const getTranspileCssConfig = (compileOpts, importData, results) => {
 		minify: false,
 		autoprefixer: false,
 		module: compileOpts.module,
-		styleImportData: compileOpts.styleImportData
+		styleImportData: compileOpts.styleImportData,
+		docs: compileOpts.docs === true
 	};
 };
 const getTranspileConfigOpt = (value, validValues, defaultValue) => {
@@ -3814,6 +3828,7 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 		devMode,
 		compat: config.compat || {},
 		generateExportMaps: isBoolean$1(config.generateExportMaps) ? config.generateExportMaps : !isString$1(config.configPath),
+		enableCssOnlyComponents: config.enableCssOnlyComponents ?? true,
 		hydratedFlag: validateHydrated(config),
 		logLevel,
 		logger,
@@ -3871,29 +3886,137 @@ const validateConfig = (userConfig = {}, bootstrapConfig) => {
 	};
 };
 //#endregion
+//#region src/compiler/docs/css-doc-comments.ts
+/**
+* A JSDoc-style comment is `/** ... *\/` or `/*! ... *\/` - postcss's `Comment.text` already
+* strips the `/*`/`*\/` delimiters, so this checks the leading `*` or `!` that remains.
+* @param commentText a postcss `Comment` node's `.text`
+* @returns `true` if the comment is JSDoc-style
+*/
+const isJsDocComment = (commentText) => commentText.startsWith("*") || commentText.startsWith("!");
+/**
+* Strip the leading `*`/`!` marker and per-line `*` prefixes, returning trimmed lines.
+* @param commentText a postcss `Comment` node's `.text`
+* @returns the comment's lines, delimiters and leading `*`s stripped
+*/
+const normalizeJsDocLines = (commentText) => {
+	return commentText.replace(/^[*!]/, "").split(/\r?\n/).map((line) => line.trim().replace(/^\*/, "").trim()).filter((line, i, arr) => !(line === "" && (i === 0 || i === arr.length - 1)));
+};
+/**
+* @param commentText a postcss `Comment` node's `.text`
+* @returns the comment's lines joined into a single trimmed line of text
+*/
+const normalizeJsDocText = (commentText) => normalizeJsDocLines(commentText).filter(Boolean).join(" ").trim();
+/**
+* @param value a CSS descriptor value, possibly quoted (e.g. a `syntax` descriptor's `"<length>"`)
+* @returns the value with any surrounding quotes removed
+*/
+const stripQuotes = (value) => value.replace(/^['"]|['"]$/g, "");
+/**
+* Extract the `syntax`/`initial-value` descriptors from a native `@property` at-rule's body.
+* @param node a postcss `AtRule` node whose `name` is `property`
+* @returns the extracted descriptors, if present
+*/
+const parsePropertyAtRuleDescriptors = (node) => {
+	let syntax;
+	let initialValue;
+	node.each((child) => {
+		if (child.type !== "decl") return;
+		if (child.prop === "syntax") syntax = stripQuotes(child.value);
+		else if (child.prop === "initial-value") initialValue = child.value;
+	});
+	return {
+		syntax,
+		initialValue
+	};
+};
+//#endregion
 //#region src/compiler/docs/style-docs.ts
 /**
 * Parse CSS docstrings that Stencil supports, as documented here:
 * https://stenciljs.com/docs/docs-json#css-variables
 *
-* Docstrings found in the supplied style text will be added to the
-* `styleDocs` param
+* Docstrings found in the supplied style text will be added to the `styleDocs` param, via three
+* mechanisms, in order of precedence (an earlier mechanism always wins over a later one for the
+* same custom property name):
+* 1. An explicit `@prop`/`@cssprop`/`@cssproperty` annotation in a block comment, anywhere in the file.
+* 2. A doc-commented `--foo: value;` declaration inside the component's "root" rule - `:host`
+*    for `shadow`/`scoped` encapsulation, or the component's own tag selector for `none`.
+* 3. A native `@property --foo { ... }` at-rule, with the `syntax`/`initial-value` descriptors
+*    surfaced as `syntax`/`default`. Not scoped - `@property` is a global registration.
 *
 * @param styleDocs the array to hold formatted CSS docstrings
 * @param styleText the CSS text we're working with
 * @param mode a mode associated with the parsed style, if applicable (e.g. this is not applicable for global styles)
+* @param tag the component's tag name, used to scope auto-detection for `none` encapsulation
+* @param encapsulation the component's encapsulation, used to pick the "root" scope for auto-detection
 */
-function parseStyleDocs(styleDocs, styleText, mode) {
+function parseStyleDocs(styleDocs, styleText, mode, tag, encapsulation) {
 	if (typeof styleText !== "string") return;
-	let match = styleText.match(CSS_DOC_START);
+	let remainingText = styleText;
+	let match = remainingText.match(CSS_DOC_START);
 	while (match !== null) {
-		styleText = styleText.substring(match.index + match[0].length);
-		const endIndex = styleText.indexOf(CSS_DOC_END);
+		remainingText = remainingText.substring(match.index + match[0].length);
+		const endIndex = remainingText.indexOf(CSS_DOC_END);
 		if (endIndex === -1) break;
-		parseCssComment(styleDocs, styleText.substring(0, endIndex), mode);
-		styleText = styleText.substring(endIndex + CSS_DOC_END.length);
-		match = styleText.match(CSS_DOC_START);
+		parseCssComment(styleDocs, remainingText.substring(0, endIndex), mode);
+		remainingText = remainingText.substring(endIndex + CSS_DOC_END.length);
+		match = remainingText.match(CSS_DOC_START);
+	}
+	if (styleText.includes("--")) parseScopedAndNativeStyleDocs(styleDocs, styleText, mode, tag, encapsulation);
+}
+/**
+* Auto-detect doc-commented custom-property declarations within the component's "root" rule,
+* and native `@property` at-rule registrations, merging them into `styleDocs`. Mirrors the
+* equivalent detection for CSS-only components in `css-components/parse-css-component.ts`.
+*
+* @param styleDocs the array to hold formatted CSS docstrings - also consulted so an explicit
+* `@prop`/`@cssprop` annotation always wins over an auto-detected entry for the same name
+* @param styleText the CSS text we're working with
+* @param mode a mode associated with the parsed style, if applicable
+* @param tag the component's tag name
+* @param encapsulation the component's encapsulation
+*/
+function parseScopedAndNativeStyleDocs(styleDocs, styleText, mode, tag, encapsulation) {
+	let root;
+	try {
+		root = postcss().process(styleText, { from: void 0 }).root;
+	} catch {
+		return;
 	}
+	const hasName = (name) => styleDocs.some((styleDoc) => styleDoc.name === name);
+	const rootSelector = encapsulation === "shadow" || encapsulation === "scoped" ? ":host" : tag;
+	if (rootSelector) root.walkRules((rule) => {
+		if (!rule.selectors.some((selector) => selector.trim() === rootSelector)) return;
+		const children = rule.nodes;
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			if (child.type !== "decl" || !child.prop.startsWith("--") || hasName(child.prop)) continue;
+			const prev = children[i - 1];
+			if (!prev || prev.type !== "comment" || !isJsDocComment(prev.text)) continue;
+			styleDocs.push({
+				name: child.prop,
+				docs: normalizeJsDocText(prev.text),
+				annotation: "prop",
+				mode
+			});
+		}
+	});
+	root.walkAtRules("property", (node) => {
+		const propName = node.params.trim();
+		if (!propName.startsWith("--") || hasName(propName)) return;
+		const { syntax, initialValue } = parsePropertyAtRuleDescriptors(node);
+		const prev = node.prev();
+		const docs = prev && prev.type === "comment" && isJsDocComment(prev.text) ? normalizeJsDocText(prev.text) : "";
+		styleDocs.push({
+			name: propName,
+			docs,
+			annotation: "prop",
+			mode,
+			...syntax && { syntax },
+			...initialValue && { default: initialValue }
+		});
+	});
 }
 /**
 * Parse a CSS comment string and insert it into the provided array of
@@ -3910,7 +4033,7 @@ function parseCssComment(styleDocs, comment, mode) {
 		return line;
 	}).join(" ").replace(/\t/g, " ").trim();
 	while (comment.includes("  ")) comment = comment.replace("  ", " ");
-	comment.split(CSS_PROP_ANNOTATION).forEach((d) => {
+	comment.split(CSS_PROP_ANNOTATION_RE).forEach((d) => {
 		const cssDocument = d.trim();
 		if (!cssDocument.startsWith(`--`)) return;
 		const splt = cssDocument.split(`:`);
@@ -3933,9 +4056,11 @@ const CSS_DOC_START = /\/\*(\*|!)/;
 */
 const CSS_DOC_END = "*/";
 /**
-* The `@prop` annotation we support within CSS docstrings
+* The `@prop` annotation we support within CSS docstrings. `@cssprop`/`@cssproperty` are also
+* recognized as synonyms (the more common names in other web-component-analyzer/docgen
+* ecosystems).
 */
-const CSS_PROP_ANNOTATION = "@prop";
+const CSS_PROP_ANNOTATION_RE = /@(?:cssproperty|cssprop|prop)\b/;
 //#endregion
 //#region src/compiler/sys/browser-stubs/browserslist.ts
 const browserslist = (_query) => [];
@@ -4047,6 +4172,39 @@ const DEFAULT_BROWSER_TARGETS = [
 //#endregion
 //#region src/compiler/style/css-parser/parse-css.ts
 /**
+* Splits a selector list on top-level commas in a single pass: a comma only
+* splits when it's outside a quoted string and at paren depth 0, so commas in
+* `:is(:a,:has(:b))` or `[title="a,b"]` aren't treated as separators.
+* Backslash escapes (inside or outside a string) are skipped so they can't shift state,
+* so e.g. `[title="a\,b"]` is treated as a single selector.
+* @param selectors The selector list to split
+* @returns An array of selectors, with whitespace trimmed from each selector
+*/
+const splitSelectorList = (selectors) => {
+	const parts = [];
+	let depth = 0;
+	let quote = null;
+	let start = 0;
+	for (let i = 0; i < selectors.length; i++) {
+		const ch = selectors[i];
+		if (quote) {
+			if (ch === "\\") i++;
+			else if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") quote = ch;
+		else if (ch === "\\") i++;
+		else if (ch === "(") depth++;
+		else if (ch === ")") depth = Math.max(0, depth - 1);
+		else if (ch === "," && depth === 0) {
+			parts.push(selectors.slice(start, i));
+			start = i + 1;
+		}
+	}
+	parts.push(selectors.slice(start));
+	return parts.map((s) => s.trim());
+};
+/**
 * Parses CSS string input into an AST representation.
 * Used for minification, finding & resolving URLs and during SSR / prerendering, removing unused selectors.
 *
@@ -4171,11 +4329,8 @@ const parseCss = (css, filePath) => {
 	const selector = () => {
 		const m = match(/^([^{]+)/);
 		if (!m) return null;
-		return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, "").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function(str) {
-			return str.replace(/,/g, "‌");
-		}).split(/\s*(?![^(]*\)),\s*/).map(function(s) {
-			return s.replace(/\u200C/g, ",");
-		});
+		const cleaned = trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, "");
+		return splitSelectorList(cleaned);
 	};
 	const declaration = () => {
 		const pos = position();
@@ -9187,9 +9342,9 @@ const serializeSymbol = (checker, symbol) => {
 	};
 };
 /**
-* Maps a TypeScript 4.3+ JSDocTagInfo to a flattened Stencil CompilerJsDocTagInfo.
+* Maps a TypeScript 4.3+ JSDocTagInfo to a flattened Stencil JsonDocsTag.
 * @param tags A readonly array of JSDocTagInfo objects.
-* @returns An array of CompilerJsDocTagInfo objects.
+* @returns An array of JsonDocsTag objects.
 */
 const mapJSDocTagInfo = (tags) => {
 	return tags.map((tag) => ({
@@ -9600,7 +9755,7 @@ const transformCssToEsmModule = (input) => {
 		defaultVarName: createCssVarName(input.file, input.mode),
 		styleDocs: []
 	};
-	if (input.docs) parseStyleDocs(results.styleDocs, input.input, input.mode);
+	if (input.docs) parseStyleDocs(results.styleDocs, input.input, input.mode, input.tag, input.encapsulation);
 	try {
 		const varNames = /* @__PURE__ */ new Set([results.defaultVarName]);
 		if (isString$1(input.tag) && input.encapsulation === "scoped") {
@@ -9697,7 +9852,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 (cssImportData.url === "stencil-component-globals" || cssImportData.url === "stencil-hydrate" || cssImportData.url === "stencil-css-components") continue;
 		else if (isCssNodeModule(cssImportData.url)) {
 			cssImportData.filePath = cssImportData.url.substring(1);
 			cssImportData.isNodeModule = true;
@@ -9912,6 +10067,7 @@ var BuildContext = class {
 	completedTasks = [];
 	compilerCtx;
 	components = [];
+	cssOnlyComponents = [];
 	componentGraph = /* @__PURE__ */ new Map();
 	config;
 	data = {};
@@ -9953,6 +10109,7 @@ var BuildContext = class {
 	styleBuildCount = 0;
 	stylesPromise = null;
 	stylesUpdated = [];
+	globalStylesUpdated = [];
 	timeSpan = null;
 	timestamp;
 	transpileBuildCount = 0;
@@ -10133,12 +10290,18 @@ var CompilerContext = class {
 	*/
 	prevStylesMap = /* @__PURE__ */ new Map();
 	globalStyleCache = /* @__PURE__ */ new Map();
+	cssOnlyComponentsCache = /* @__PURE__ */ new Map();
+	stencilCss;
+	globalStyleVirtualImports = /* @__PURE__ */ new Map();
 	styleModeNames = /* @__PURE__ */ new Set();
 	worker = null;
 	reset() {
 		this.cache.clear();
 		this.cssModuleImports.clear();
 		this.globalStyleCache.clear();
+		this.cssOnlyComponentsCache.clear();
+		this.stencilCss = void 0;
+		this.globalStyleVirtualImports.clear();
 		this.collections.length = 0;
 		this.compilerOptions = null;
 		this.hasSuccessfulBuild = false;
@@ -13956,23 +14119,159 @@ function matchesNamedDeclaration(name) {
 	};
 }
 /**
-* Finds a re-export of `className` in `sourceFile` - `export { X } from './y'` or
-* `export { X as Y } from './y'` - as used by barrel entry points (e.g. `@stencil/core`'s own
-* public `index.d.mts`, which re-exports its runtime API from `./declarations/stencil-public-runtime`
-* rather than declaring it directly).
+* Finds a re-export of `className` in `sourceFile`: `export { X } from './y'`, or the
+* bundler-split shape `import { X as name } from './y'; export { name };` (no `from` clause).
 * @param sourceFile the (barrel) source file to scan
 * @param className the exported name to look for
-* @returns the module specifier and the name to look for in that module (the local name, before
-* any `as` aliasing), or `undefined` if no matching re-export is found
+* @returns the module specifier and name to look for there (before any `as` aliasing), or
+* `undefined` if not found
 */
 function findReExport(sourceFile, className) {
 	for (const stmt of sourceFile.statements) {
-		if (!ts$1.isExportDeclaration(stmt) || !stmt.moduleSpecifier || !ts$1.isStringLiteral(stmt.moduleSpecifier) || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
-		for (const element of stmt.exportClause.elements) if (element.name.text === className) return {
+		if (!ts$1.isExportDeclaration(stmt) || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
+		const element = stmt.exportClause.elements.find((el) => el.name.text === className);
+		if (!element) continue;
+		if (stmt.moduleSpecifier && ts$1.isStringLiteral(stmt.moduleSpecifier)) return {
 			moduleSpecifier: stmt.moduleSpecifier.text,
 			localName: element.propertyName?.text ?? element.name.text
 		};
+		const importOrigin = findImportOrigin(sourceFile, element.propertyName?.text ?? element.name.text);
+		if (importOrigin) return importOrigin;
+	}
+}
+/**
+* Finds `name`'s import in `sourceFile` and returns its module and origin name (before any `as`
+* aliasing; `'default'` for a default import).
+* @param sourceFile the source file to scan for a matching import
+* @param name the local (post-aliasing) name an import bound
+* @returns the import's module specifier and origin name, or `undefined` if `name` isn't imported
+*/
+function findImportOrigin(sourceFile, name) {
+	for (const stmt of sourceFile.statements) {
+		if (!ts$1.isImportDeclaration(stmt) || !stmt.importClause || !ts$1.isStringLiteral(stmt.moduleSpecifier)) continue;
+		const moduleSpecifier = stmt.moduleSpecifier.text;
+		if (stmt.importClause.name?.text === name) return {
+			moduleSpecifier,
+			localName: "default"
+		};
+		const bindings = stmt.importClause.namedBindings;
+		if (!bindings || !ts$1.isNamedImports(bindings)) continue;
+		const element = bindings.elements.find((el) => el.name.text === name);
+		if (element) return {
+			moduleSpecifier,
+			localName: element.propertyName?.text ?? element.name.text
+		};
+	}
+}
+/**
+* Finds `name` as a top-level declaration in `sf` (see `matchesNamedDeclaration`), following a
+* same-file export alias if `name` is only ever the public side of a local rename
+* (`export { RealName as name }`, no `from` clause).
+* @param sf the source file to search
+* @param name the declaration name to look for, which may only exist as an export alias
+* @returns the matched statement, or `undefined`
+*/
+function findStatementByName(sf, name) {
+	const direct = sf.statements.find(matchesNamedDeclaration(name));
+	if (direct) return direct;
+	for (const stmt of sf.statements) {
+		if (!ts$1.isExportDeclaration(stmt) || stmt.moduleSpecifier || !stmt.exportClause || !ts$1.isNamedExports(stmt.exportClause)) continue;
+		const aliasedName = stmt.exportClause.elements.find((el) => el.name.text === name)?.propertyName?.text;
+		if (aliasedName && aliasedName !== name) return sf.statements.find(matchesNamedDeclaration(aliasedName));
+	}
+}
+/**
+* Picks the runtime target out of a `package.json` `exports` condition entry - prefers `import`
+* over `require`/`node`/`default`, recursing into nested condition objects.
+* @param entry an `exports` map value: a path string, or nested conditions
+* @returns the resolved relative path, or `undefined` if no usable condition was found
+*/
+function pickJsCondition(entry) {
+	if (typeof entry === "string") return entry;
+	if (typeof entry !== "object" || entry === null) return;
+	const conditions = entry;
+	for (const key of [
+		"import",
+		"require",
+		"node",
+		"default"
+	]) if (key in conditions) {
+		const picked = pickJsCondition(conditions[key]);
+		if (picked) return picked;
+	}
+}
+/**
+* Reads and parses `filePath` as JS, with parent nodes set - unlike `tsGetSourceFile`, which
+* never triggers binding, so `.parent` stays unset and `node.getSourceFile()` returns `undefined`.
+* @param config the current Stencil validated config
+* @param filePath the absolute path of the JS file to read and parse
+* @returns the parsed source file, or `undefined` if it couldn't be read
+*/
+function readJsSourceFile(config, filePath) {
+	try {
+		const text = config.sys.readFileSync(filePath);
+		if (typeof text !== "string") return;
+		return ts$1.createSourceFile(filePath, text, ts$1.ScriptTarget.ESNext, true, ts$1.ScriptKind.JS);
+	} catch {
+		return;
+	}
+}
+/**
+* Resolves the runtime JS entry for a bare (non-relative) module specifier by reading its
+* package's own `package.json` `exports` map, instead of `tsResolveModuleName` - which always
+* resolves to the package's `types` entry, an ambient signature with no body a mixin factory's
+* class can never be found inside.
+* @param config the current Stencil validated config
+* @param compilerCtx the current compiler context
+* @param moduleSpecifier the bare package specifier to resolve
+* @param containingFile the file the specifier was imported from
+* @returns the resolved JS source file, or `undefined` if it couldn't be resolved this way
+*/
+function resolveModuleJsEntry(config, compilerCtx, moduleSpecifier, containingFile) {
+	if (isLocalModule(moduleSpecifier)) return;
+	const pkgJsonPath = tsResolveModuleNamePackageJsonPath(config, compilerCtx, moduleSpecifier, containingFile);
+	if (!pkgJsonPath) return;
+	let pkgJson;
+	try {
+		pkgJson = JSON.parse(config.sys.readFileSync(pkgJsonPath));
+	} catch {
+		return;
+	}
+	const pkgName = pkgJson.name;
+	if (!pkgName || !moduleSpecifier.startsWith(pkgName) || !pkgJson.exports) return;
+	const subpath = moduleSpecifier === pkgName ? "." : `.${moduleSpecifier.slice(pkgName.length)}`;
+	const exportsMap = pkgJson.exports;
+	const conditionEntry = typeof exportsMap === "string" ? subpath === "." ? exportsMap : void 0 : exportsMap[subpath] ?? (subpath === "." ? exportsMap : void 0);
+	const target = conditionEntry && pickJsCondition(conditionEntry);
+	if (!target) return;
+	return readJsSourceFile(config, normalizePath(join$1(dirname(pkgJsonPath), target)));
+}
+/**
+* Finds `className`'s class inside a resolved JS entry (see `resolveModuleJsEntry`), following
+* re-export hops the same way `resolveAndProcessExtendedClass` walks a `.d.ts`/`.ts` source.
+* @param config the current Stencil validated config
+* @param compilerCtx the current compiler context
+* @param source the JS source file to search
+* @param className the class (or mixin factory) name to look for
+* @param hopsRemaining re-export hops still allowed before giving up
+* @returns the found class and the source file it's declared in, or `undefined`
+*/
+function findClassInJsModule(config, compilerCtx, source, className, hopsRemaining = 3) {
+	const matchedStatement = findStatementByName(source, className);
+	if (matchedStatement) {
+		const classNode = ts$1.isClassDeclaration(matchedStatement) ? matchedStatement : findClassWalk(matchedStatement);
+		return classNode && {
+			classNode,
+			sourceFile: source
+		};
 	}
+	if (hopsRemaining <= 0) return;
+	const reExport = findReExport(source, className);
+	if (!reExport) return;
+	const resolvedFileName = tsResolveModuleName(config, compilerCtx, reExport.moduleSpecifier, source.fileName)?.resolvedModule?.resolvedFileName;
+	const nextSource = resolvedFileName && readJsSourceFile(config, resolvedFileName);
+	if (!nextSource) return;
+	return findClassInJsModule(config, compilerCtx, nextSource, reExport.localName, hopsRemaining - 1);
 }
 /**
 * Filters `dedupeMembers` down to entries not already present in `staticMembers`
@@ -14080,9 +14379,11 @@ function convertDiskSourceFileDecorators(sourceFile, config, target = ts$1.Scrip
 * @param ogModule the original module file of the class declaration
 * @param targetScriptTarget the script target to convert decorators with, if needed
 * @param barrelHopsRemaining re-export hops still allowed before giving up
+* @param originalModuleSpecifier the specifier this lookup started from, before any barrel hops
+* @param originalContainingFile the file `originalModuleSpecifier` was imported from
 * @returns the found class declaration, or `undefined`
 */
-function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, currentSource, moduleSpecifier, className, dependentClasses, typeChecker, ogModule, targetScriptTarget = ts$1.ScriptTarget.ESNext, barrelHopsRemaining = 1) {
+function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, currentSource, moduleSpecifier, className, dependentClasses, typeChecker, ogModule, targetScriptTarget = ts$1.ScriptTarget.ESNext, barrelHopsRemaining = 1, originalModuleSpecifier = moduleSpecifier, originalContainingFile = currentSource.fileName) {
 	let keepLooking = true;
 	const foundFile = tsResolveModuleName(buildCtx.config, compilerCtx, moduleSpecifier, currentSource.fileName);
 	if (!foundFile?.resolvedModule || !className) return;
@@ -14098,10 +14399,10 @@ function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration,
 		}
 		foundSource = convertDiskSourceFileDecorators(foundSource, buildCtx.config, targetScriptTarget);
 	}
-	const matchedStatement = foundSource.statements.find(matchesNamedDeclaration(className));
+	const matchedStatement = findStatementByName(foundSource, className);
 	if (!matchedStatement) {
 		const reExport = barrelHopsRemaining > 0 ? findReExport(foundSource, className) : void 0;
-		if (reExport) return resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, foundSource, reExport.moduleSpecifier, reExport.localName, dependentClasses, typeChecker, ogModule, targetScriptTarget, barrelHopsRemaining - 1);
+		if (reExport) return resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration, foundSource, reExport.moduleSpecifier, reExport.localName, dependentClasses, typeChecker, ogModule, targetScriptTarget, barrelHopsRemaining - 1, originalModuleSpecifier, originalContainingFile);
 		const err = buildWarn(buildCtx.diagnostics);
 		err.messageText = `Unable to find "${className}" in the imported module "${moduleSpecifier}".
                   Please import class / mixin-factory declarations directly and not via barrel files.`;
@@ -14109,16 +14410,25 @@ function resolveAndProcessExtendedClass(compilerCtx, buildCtx, classDeclaration,
 		return;
 	}
 	let foundClassDeclaration = matchedStatement ? ts$1.isClassDeclaration(matchedStatement) ? matchedStatement : void 0 : void 0;
+	let foundClassSource = foundSource;
 	if (!foundClassDeclaration && matchedStatement) {
 		foundClassDeclaration = findClassWalk(matchedStatement);
 		keepLooking = false;
+		if (!foundClassDeclaration && isDtsFile(foundSource.fileName) && !isLocalModule(originalModuleSpecifier)) {
+			const jsSource = resolveModuleJsEntry(buildCtx.config, compilerCtx, originalModuleSpecifier, originalContainingFile);
+			const foundInJs = jsSource && findClassInJsModule(buildCtx.config, compilerCtx, jsSource, className);
+			if (foundInJs) {
+				foundClassDeclaration = foundInJs.classNode;
+				foundClassSource = foundInJs.sourceFile;
+			}
+		}
 		if (!foundClassDeclaration) warnMixinFactoryClassNotFound(buildCtx, className, classDeclaration);
 	}
 	if (foundClassDeclaration && !dependentClasses.some((dc) => dc.classNode === foundClassDeclaration)) {
 		dependentClasses.push({
 			classNode: foundClassDeclaration,
-			sourceFile: foundSource,
-			fileName: foundFile.resolvedModule.resolvedFileName
+			sourceFile: foundClassSource,
+			fileName: foundClassSource.fileName
 		});
 		if (keepLooking) buildExtendsTree(compilerCtx, foundClassDeclaration, dependentClasses, typeChecker, buildCtx, ogModule);
 	}
@@ -14525,19 +14835,6 @@ function getExtendsClassNames(node) {
 	if (ts$1.isCallExpression(expr) && expr.expression.getText() === "Mixin") return expr.arguments.filter(ts$1.isIdentifier).map((id) => id.text);
 	return [];
 }
-function findImportSpecifier(sf, localName) {
-	for (const stmt of sf.statements) {
-		if (!ts$1.isImportDeclaration(stmt) || !ts$1.isStringLiteral(stmt.moduleSpecifier)) continue;
-		const clause = stmt.importClause;
-		if (!clause) continue;
-		if (clause.name?.text === localName) return stmt.moduleSpecifier.text;
-		const bindings = clause.namedBindings;
-		if (bindings && ts$1.isNamedImports(bindings)) {
-			for (const el of bindings.elements) if (el.name.text === localName) return stmt.moduleSpecifier.text;
-		}
-	}
-	return null;
-}
 /**
 * A single-file mini-program (see `convertInMemorySourceDecorators`) can
 * never load an imported module's own `SourceFile`, so a type that's
@@ -14561,7 +14858,7 @@ function reclassifyGlobalTypeReferences(members, declaringSf, declaringPath, res
 		if (!references) return;
 		Object.entries(references).forEach(([typeName, reference]) => {
 			if (reference.location !== "global") return;
-			const specifier = findImportSpecifier(declaringSf, typeName);
+			const specifier = findImportOrigin(declaringSf, typeName)?.moduleSpecifier;
 			if (!specifier) return;
 			const resolved = resolveImport(specifier, declaringPath);
 			reference.location = "import";
@@ -14584,7 +14881,7 @@ function reclassifyGlobalTypeReferences(members, declaringSf, declaringPath, res
 * differ from `sf`/`path` if resolved through a re-export), or `undefined`
 */
 function findDeclarationOrReExport(sf, path, name, resolveImport) {
-	const direct = sf.statements.find(matchesNamedDeclaration(name));
+	const direct = findStatementByName(sf, name);
 	if (direct) return {
 		statement: direct,
 		sourceFile: sf,
@@ -14597,7 +14894,7 @@ function findDeclarationOrReExport(sf, path, name, resolveImport) {
 	const { code, path: resolvedPath } = resolved;
 	const isTs = resolvedPath.endsWith(".tsx") || resolvedPath.endsWith(".ts");
 	const reExportSf = ts$1.createSourceFile(resolvedPath, code, ts$1.ScriptTarget.ESNext, true, isTs ? ts$1.ScriptKind.TSX : ts$1.ScriptKind.JS);
-	const statement = reExportSf.statements.find(matchesNamedDeclaration(reExport.localName));
+	const statement = findStatementByName(reExportSf, reExport.localName);
 	if (!statement) return void 0;
 	return {
 		statement,
@@ -14634,7 +14931,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 		let foundSf = sf;
 		let foundPath = path;
 		let keepLooking = true;
-		const sameFileStatement = sf.statements.find(matchesNamedDeclaration(parentName));
+		const sameFileStatement = findStatementByName(sf, parentName);
 		if (sameFileStatement) {
 			if (ts$1.isClassDeclaration(sameFileStatement)) foundClass = sameFileStatement;
 			else {
@@ -14643,7 +14940,7 @@ function resolveAncestors(classNode, sf, path, resolveImport, visited, ancestors
 				if (!foundClass) warnMixinFactoryClassNotFound(buildCtx, parentName, rootClassDeclaration);
 			}
 		} else {
-			const specifier = findImportSpecifier(sf, parentName);
+			const specifier = findImportOrigin(sf, parentName)?.moduleSpecifier;
 			if (!specifier) continue;
 			const resolved = resolveImport(specifier, path);
 			if (!resolved) continue;
@@ -15875,6 +16172,7 @@ const transpileCss = async (transformInput, results) => {
 	results.map = cssResults.map;
 	results.imports = cssResults.imports.map((p) => ({ path: p.importPath }));
 	results.diagnostics.push(...cssResults.diagnostics);
+	if (transformInput.docs) results.styleDocs = cssResults.styleDocs;
 };
 const transpileCssSync = (transformInput, results) => {
 	const cssResults = transformCssToEsmSync(transformInput);
@@ -15882,6 +16180,7 @@ const transpileCssSync = (transformInput, results) => {
 	results.map = cssResults.map;
 	results.imports = cssResults.imports.map((p) => ({ path: p.importPath }));
 	results.diagnostics.push(...cssResults.diagnostics);
+	if (transformInput.docs) results.styleDocs = cssResults.styleDocs;
 };
 const transpileJson = (results) => {
 	results.code = dataToEsm(JSON.parse(results.code), {