@blotch/rsbuild-plugin-angular-lynx 22.2.2 → 22.2.4

package/dist/index.js

@@ -1,19 +1,18 @@
 /*! LICENSE: index.js.LICENSE.txt */
 import node_fs, { existsSync } from "node:fs";
-import node_path, { join, resolve } from "node:path";
+import node_path, { join, resolve as external_node_path_resolve } from "node:path";
 import { CSSPlugins, LynxEncodePlugin, LynxTemplatePlugin, WebEncodePlugin } from "@lynx-js/template-webpack-plugin";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import { RuntimeWrapperWebpackPlugin } from "@lynx-js/runtime-wrapper-webpack-plugin";
 import { RuntimeGlobals } from "@lynx-js/webpack-runtime-globals";
 import tiny_invariant from "tiny-invariant";
 import { createHash } from "node:crypto";
-import { fileURLToPath } from "node:url";
-import { createRequire } from "node:module";
 import { availableParallelism } from "node:os";
 import { workspaces } from "@angular-devkit/core";
 import { NodeJsSyncHost } from "@angular-devkit/core/node";
 import { access, constants } from "node:fs/promises";
-import node_http from "node:http";
-import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";
+import postcss_value_parser from "postcss-value-parser";
 import * as __rspack_external_typescript from "typescript";
 import * as __rspack_external_node_path_c5b9b54f from "node:path";
 const ANGULAR_CLI_CONTEXT = Symbol.for('@blotch/rsbuild-plugin-angular-lynx:angular-cli-context');
@@ -90,19 +89,32 @@ const LAYERS = {
 };
 const applyLayers = (api)=>{
     api.modifyBundlerChain((chain)=>{
-        chain.module.rule("typescript").oneOf(LAYERS.BACKGROUND).layer(LAYERS.BACKGROUND).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
+        for (const [layer, target, isMainThread] of [
+            [
+                LAYERS.BACKGROUND,
+                'es2015',
+                false
+            ],
+            [
+                LAYERS.MAIN_THREAD,
+                'es2019',
+                true
+            ]
+        ])chain.module.rule("typescript").oneOf(layer).issuerLayer(layer).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
             jsc: {
-                target: 'es2015',
-                parser: {
-                    syntax: "typescript"
-                }
-            }
-        }).end();
-        chain.module.rule("typescript").oneOf(LAYERS.MAIN_THREAD).layer(LAYERS.MAIN_THREAD).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
-            jsc: {
-                target: 'es2019',
+                target,
                 parser: {
                     syntax: "typescript"
+                },
+                transform: {
+                    optimizer: {
+                        simplify: false,
+                        globals: {
+                            vars: {
+                                __MAIN_THREAD__: String(isMainThread)
+                            }
+                        }
+                    }
                 }
             }
         }).end();
@@ -201,8 +213,9 @@ class AngularWebpackPlugin {
                     name: `${this.constructor.name}:threadGlobals`,
                     stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
                 }, ()=>{
-                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js'))){
-                        const isMainThread = mainThreadChunkSet.has(name);
+                    this.#markMainThreadHotUpdates(compilation, mainThreadChunkSet);
+                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js') && !compilation.getAsset(n)?.info.hotModuleReplacement)){
+                        const isMainThread = mainThreadChunkSet.has(name) || compilation.getAsset(name)?.info['lynx:main-thread'] === true;
                         const prefix = `globalThis["__MAIN_THREAD__"]=${isMainThread};`;
                         compilation.updateAsset(name, (old)=>new ConcatSource(prefix, old));
                     }
@@ -236,6 +249,16 @@ class AngularWebpackPlugin {
             });
         });
     }
+    #markMainThreadHotUpdates(compilation, mainThreadChunkSet) {
+        for (const chunk of compilation.chunks){
+            const files = [
+                ...chunk.files
+            ];
+            if (files.some((file)=>mainThreadChunkSet.has(file) || !compilation.getAsset(file)?.info.hotModuleReplacement && compilation.getAsset(file)?.info['lynx:main-thread'])) {
+                for (const file of files)if (file.endsWith('.js') && compilation.getAsset(file)?.info.hotModuleReplacement) this.#updateMainThreadInfo(compilation, file);
+            }
+        }
+    }
     #updateMainThreadInfo(compilation, name) {
         const asset = compilation.getAsset(name);
         tiny_invariant(asset, `Should have main thread asset ${name}`);
@@ -249,9 +272,17 @@ const S_LYNX_CONFIG = Symbol.for('@lynx-js/rsbuild-plugin:config');
 const PLUGIN_NAME_TEMPLATE = 'lynx:template';
 const PLUGIN_NAME_RUNTIME_WRAPPER = 'lynx:runtime-wrapper';
 const PLUGIN_NAME_ANGULAR = 'lynx:angular';
-const applyEntry = (api, options)=>{
-    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, enableA11y, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
-    api.modifyBundlerChain((chain, { environment, isDev })=>{
+const RULE_BACKGROUND_MODULES = 'lynx:background-modules';
+const PLUGIN_NAME_CSS_HOT_UPDATE = 'lynx:css-hot-update';
+const BLUR_VIEW_STYLESHEET = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './styles/blur-view.css');
+const HMR_BACKGROUND_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-background.js');
+const HMR_MAIN_THREAD_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-main-thread.js');
+const CSS_HOT_UPDATE = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/css-hot-update.cjs');
+const CSS_EXTRACT_HOT_UPDATE = /css-extract-webpack-plugin[\\/]runtime[\\/]hotModuleReplacement\.cjs$/;
+const resolveReloadApp = ()=>createRequire(createRequire(import.meta.url).resolve('@lynx-js/rsbuild-plugin')).resolve('@lynx-js/webpack-dev-transport/reloadApp');
+const applyEntry = (api, options, backgroundEntries, appEntries)=>{
+    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, defaultOverflowVisible, enableA11y, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
+    api.modifyBundlerChain((chain, { environment, isDev, rspack })=>{
         const lynxConfig = api.useExposed(S_LYNX_CONFIG);
         if (!lynxConfig) throw new Error('No Lynx config exposed. `pluginLynx` has to be applied for the Lynx build engine to be configured.');
         const isLynx = 'lynx' === environment.name;
@@ -261,9 +292,19 @@ const applyEntry = (api, options)=>{
         const enabledLiveReload = isDev && !isWeb && false !== liveReload;
         const entries = chain.entryPoints.entries() ?? {};
         chain.entryPoints.clear();
+        const preEntry = new Set(environment.config.source.preEntry);
         const mainThreadChunks = [];
         for (const [entryName, entryPoint] of Object.entries(entries)){
-            const { imports } = getChunks(entryName, entryPoint.values());
+            const { imports: entryImports } = getChunks(entryName, entryPoint.values());
+            const mainThreadImports = isLynx ? [
+                BLUR_VIEW_STYLESHEET,
+                ...entryImports
+            ] : entryImports;
+            const backgroundImports = [
+                ...entryImports.filter((entryImport)=>preEntry.has(entryImport)),
+                backgroundEntries.fileFor(environment.name, entryName)
+            ];
+            for (const entryImport of entryImports)if (entryImport.startsWith('.') || node_path.isAbsolute(entryImport)) appEntries.add(node_path.resolve(api.context.rootPath, entryImport));
             const templateFilename = lynxConfig.resolveBundleFilename({
                 entryName,
                 platform: environment.name
@@ -278,17 +319,22 @@ const applyEntry = (api, options)=>{
             mainThreadChunks.push(mainThreadName);
             chain.entry(mainThreadEntry).add({
                 layer: LAYERS.MAIN_THREAD,
-                import: imports,
+                import: mainThreadImports,
                 filename: mainThreadName
+            }).when(enabledHMR, (entry)=>{
+                entry.prepend({
+                    layer: LAYERS.MAIN_THREAD,
+                    import: HMR_MAIN_THREAD_CLIENT
+                });
             }).end();
             chain.entry(backgroundEntry).add({
                 layer: LAYERS.BACKGROUND,
-                import: imports,
+                import: backgroundImports,
                 filename: backgroundThreadName
             }).when(enabledHMR, (entry)=>{
                 entry.prepend({
                     layer: LAYERS.BACKGROUND,
-                    import: '@rspack/core/hot/dev-server'
+                    import: HMR_BACKGROUND_CLIENT
                 });
             }).when(enabledHMR || enabledLiveReload, (entry)=>{
                 entry.prepend({
@@ -315,6 +361,7 @@ const applyEntry = (api, options)=>{
                     customCSSInheritanceList,
                     debugInfoOutside,
                     defaultDisplayLinear,
+                    defaultOverflowVisible,
                     enableAccessibilityElement,
                     enableCSSInheritance,
                     enableCSSInvalidation,
@@ -327,6 +374,14 @@ const applyEntry = (api, options)=>{
                 }
             ]).end();
         }
+        chain.module.rule(RULE_BACKGROUND_MODULES).issuerLayer(LAYERS.BACKGROUND).test((file)=>backgroundEntries.isBackgroundModule(file)).sideEffects(true);
+        if (enabledHMR) {
+            chain.resolve.alias.set('@lynx-js/webpack-dev-transport/reloadApp', resolveReloadApp());
+            chain.plugin(PLUGIN_NAME_CSS_HOT_UPDATE).use(rspack.NormalModuleReplacementPlugin, [
+                CSS_EXTRACT_HOT_UPDATE,
+                CSS_HOT_UPDATE
+            ]).end();
+        }
         if (isLynx) {
             chain.plugin(PLUGIN_NAME_RUNTIME_WRAPPER).use(RuntimeWrapperWebpackPlugin, [
                 {
@@ -473,7 +528,7 @@ const checkThresholds = (thresholds, size, label)=>thresholds.flatMap(({ limit,
             }
         ];
     });
-const sum = (sizes)=>sizes.reduce((total, { size })=>total + size, 0);
+const budgets_sum = (sizes)=>sizes.reduce((total, { size })=>total + size, 0);
 const calculateSizes = (budget, assets, componentStyles)=>{
     switch(budget.type){
         case 'initial':
@@ -487,21 +542,21 @@ const calculateSizes = (budget, assets, componentStyles)=>{
         case 'bundle':
             return budget.name ? [
                 {
-                    size: sum(assets.filter((asset)=>asset.entryName === budget.name)),
+                    size: budgets_sum(assets.filter((asset)=>asset.entryName === budget.name)),
                     label: budget.name
                 }
             ] : [];
         case 'all':
             return [
                 {
-                    size: sum(assets),
+                    size: budgets_sum(assets),
                     label: 'total'
                 }
             ];
         case 'allScript':
             return [
                 {
-                    size: sum(assets),
+                    size: budgets_sum(assets),
                     label: "total scripts"
                 }
             ];
@@ -622,68 +677,111 @@ const buildLynxSchemaSourceFileCache = (tsconfig, shouldInclude = ()=>true)=>{
         fileNames
     };
 };
-const generateComponentScopeId = (className, containingFile)=>{
-    const hash = createHash('sha256').update(`${className}|${containingFile}`).digest('hex').slice(0, 10);
-    return `l${hash}`;
-};
 const componentStyleSizeKey = (containingFile, stylesheetKey)=>`${containingFile}#${stylesheetKey}`;
 const forgetComponentStyleSizes = (componentStyleSizes, containingFile)=>{
     const prefix = componentStyleSizeKey(containingFile, '');
     for (const key of componentStyleSizes.keys())if (key.startsWith(prefix)) componentStyleSizes.delete(key);
 };
 const createTransformStylesheet = (params)=>{
-    const { basePath, scopedCssCacheDir, componentStylesCache, componentScopeIds, onStylesheetWritten, componentStyleSizes } = params;
+    const { basePath, componentStyleSizes } = params;
     return async (data, containingFile, stylesheetFile, order, className)=>{
-        const resolvedClassName = className ?? 'Component';
-        const scopeId = generateComponentScopeId(resolvedClassName, containingFile);
-        let componentStyles = componentStylesCache.get(containingFile);
-        if (!componentStyles) {
-            componentStyles = {
-                imports: [],
-                inlineStyles: [],
-                scopeId,
-                processedFiles: new Map()
-            };
-            componentStylesCache.set(containingFile, componentStyles);
-        }
-        const stylesheetKey = stylesheetFile ?? `__inline_${order}`;
-        const previousPath = componentStyles.processedFiles.get(stylesheetKey);
-        if (previousPath && !className) return '';
-        componentStyleSizes?.set(componentStyleSizeKey(containingFile, stylesheetKey), {
+        const key = componentStyleSizeKey(containingFile, stylesheetFile ?? `__inline_${order}`);
+        if (componentStyleSizes && (className || !componentStyleSizes.has(key))) componentStyleSizes.set(key, {
             label: node_path.relative(basePath, stylesheetFile ?? containingFile).replace(/\\/g, '/'),
             size: Buffer.byteLength(data)
         });
-        if (className || !componentScopeIds.has(containingFile)) componentScopeIds.set(containingFile, {
-            className: resolvedClassName,
-            scopeId
-        });
-        const scopedCss = data;
-        const writeIfChanged = (filePath, content)=>{
-            try {
-                if (node_fs.readFileSync(filePath, 'utf-8') === content) return;
-            } catch  {}
-            node_fs.writeFileSync(filePath, content);
-            onStylesheetWritten?.(filePath);
-        };
-        let scopedPath;
-        if (stylesheetFile) {
-            const relName = node_path.relative(basePath, stylesheetFile);
-            scopedPath = node_path.join(scopedCssCacheDir, `${relName.replace(/[/\\]/g, '__')}.__scoped_${scopeId}.css`);
-        } else {
-            const relDir = node_path.relative(basePath, node_path.dirname(containingFile));
-            scopedPath = node_path.join(scopedCssCacheDir, `${relDir.replace(/[/\\]/g, '__')}__inline_${resolvedClassName}_${order}.__scoped_${scopeId}.css`);
+        return data;
+    };
+};
+const generateComponentScopeId = (className, containingFile)=>{
+    const hash = createHash('sha256').update(`${className}|${containingFile}`).digest('hex').slice(0, 10);
+    return `l${hash}`;
+};
+const EMULATED = 0;
+const toLynxScopedCss = (css, scopeId)=>css.replaceAll('[_ngcontent-%COMP%]', `._ngcontent-${scopeId}`).replaceAll('[_nghost-%COMP%]', `._nghost-${scopeId}`).replaceAll('%COMP%', scopeId);
+const fillCssVarNamespace = (css)=>css.replaceAll('%NS%', '');
+const propertyName = (property)=>__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) ? property.name.text : null;
+const isDefineComponentCall = (node)=>{
+    if (!__rspack_external_typescript.isCallExpression(node)) return false;
+    const callee = node.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : null;
+    return 'ɵɵdefineComponent' === name;
+};
+const extractComponentStyles = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return {
+        code,
+        components: []
+    };
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const components = [];
+    const removals = [];
+    const visit = (node)=>{
+        if (isDefineComponentCall(node)) {
+            const definition = node.arguments[0];
+            if (definition && __rspack_external_typescript.isObjectLiteralExpression(definition)) {
+                const properties = definition.properties;
+                const find = (name)=>properties.find((property)=>propertyName(property) === name);
+                const type = find('type')?.initializer;
+                const styles = find('styles');
+                const encapsulation = find('encapsulation')?.initializer;
+                if (type && __rspack_external_typescript.isIdentifier(type) && styles && __rspack_external_typescript.isArrayLiteralExpression(styles.initializer) && styles.initializer.elements.length > 0 && styles.initializer.elements.every(__rspack_external_typescript.isStringLiteralLike)) {
+                    const emulated = void 0 === encapsulation || __rspack_external_typescript.isNumericLiteral(encapsulation) && Number(encapsulation.text) === EMULATED;
+                    const scopeId = emulated ? generateComponentScopeId(type.text, fileName) : void 0;
+                    const stylesheets = styles.initializer.elements.map((element)=>{
+                        const css = fillCssVarNamespace(element.text);
+                        return scopeId ? toLynxScopedCss(css, scopeId) : css;
+                    });
+                    components.push({
+                        className: type.text,
+                        scopeId,
+                        stylesheets
+                    });
+                    const index = properties.indexOf(styles);
+                    const next = properties[index + 1];
+                    removals.push({
+                        start: styles.getStart(sourceFile),
+                        end: next ? next.getStart(sourceFile) : properties.hasTrailingComma ? properties.end : styles.end
+                    });
+                }
+            }
         }
-        writeIfChanged(scopedPath, scopedCss);
-        if (previousPath) {
-            const idx = componentStyles.imports.indexOf(previousPath);
-            if (idx >= 0) componentStyles.imports[idx] = scopedPath;
-            else componentStyles.imports.push(scopedPath);
-            if (previousPath !== scopedPath) try {
-                node_fs.unlinkSync(previousPath);
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let result = code;
+    for (const { start, end } of removals.sort((a, b)=>b.start - a.start))result = result.slice(0, start) + result.slice(end);
+    return {
+        code: result,
+        components
+    };
+};
+const writeModuleStylesheets = (params)=>{
+    const { basePath, cacheDir, fileName, components, onWritten } = params;
+    if (0 === components.length) return;
+    const prefix = node_path.relative(basePath, fileName).replace(/[/\\]/g, '__').replace(/\.[cm]?[jt]s$/, '');
+    const imports = [];
+    const scopes = [];
+    for (const { className, scopeId, stylesheets } of components){
+        stylesheets.forEach((css, index)=>{
+            const filePath = node_path.join(cacheDir, `${prefix}.${className}.${index}.css`);
+            let current;
+            try {
+                current = node_fs.readFileSync(filePath, 'utf-8');
             } catch  {}
-        } else componentStyles.imports.push(scopedPath);
-        componentStyles.processedFiles.set(stylesheetKey, scopedPath);
-        return '';
+            if (current !== css) {
+                node_fs.writeFileSync(filePath, css);
+                onWritten?.(filePath);
+            }
+            imports.push(filePath);
+        });
+        if (scopeId) scopes.push({
+            className,
+            scopeId
+        });
+    }
+    return {
+        imports,
+        scopes
     };
 };
 const isLynxUnknownElementMessage = (text)=>(text?.includes('is not a known element') || text?.includes("isn't a known property of")) ?? false;
@@ -723,12 +821,267 @@ const toAngularDiagnosticError = (message, severity)=>{
     error.hideStack = true;
     return error;
 };
+const PURE_CONSTRUCTORS = new Set([
+    'Map',
+    'Set',
+    'WeakMap',
+    'WeakSet'
+]);
+/**
+ * Wraps each top-level class with private or static members in a pure IIFE,
+ * so a bundler can drop the classes nothing uses.
+ *
+ * The background layer compiles to ES2015 (layers.ts), so SWC lowers private
+ * and static class fields. A class declaration keeps its own statement, but the
+ * class expressions that bundled libraries are written in (`var X = class
+ * {…}`) become a sequence that assigns each private field's `WeakMap` to an
+ * outer variable: `var X = (_a = new WeakMap(), class {…})`. The assignment
+ * counts as a side effect, so rspack keeps every such class, and every import
+ * it uses, even when nothing uses the class. The runtime's own classes are
+ * like that (it uses `#private` fields throughout), which kept Angular's
+ * renderer and change detection in the background bundle.
+ *
+ * Angular's build already wraps a class whose static members are Angular's
+ * own (`ɵcmp`, `ɵfac` and so on) in `/*#__PURE__*\/ (() => {…})()`; this does
+ * the same for the rest. Inside the IIFE, the lowering's assignments are local
+ * and the call is marked pure. A class whose static members could have side
+ * effects of their own (anything but literals, functions and new collections)
+ * is left alone.
+ *
+ * @param code - The module's code, before SWC lowers it (and, for a `.ts`
+ *   file, strips its types).
+ * @param filename - The module's path, for the parser.
+ * @returns The transformed code, or `code` itself when nothing applies.
+ */ const wrapPureClasses = (code, filename)=>{
+    if (!code.includes('class')) return code;
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const edits = [];
+    const wrap = (classNode)=>{
+        edits.push({
+            start: classNode.getStart(sourceFile),
+            end: classNode.getStart(sourceFile),
+            text: '/*#__PURE__*/ (() => '
+        }, {
+            start: classNode.end,
+            end: classNode.end,
+            text: ')()'
+        });
+    };
+    for (const statement of sourceFile.statements){
+        if (__rspack_external_typescript.isVariableStatement(statement)) {
+            const [declaration, ...rest] = statement.declarationList.declarations;
+            const value = declaration?.initializer;
+            if (0 === rest.length && value && __rspack_external_typescript.isClassExpression(value) && isLoweredPureClass(value)) wrap(value);
+            continue;
+        }
+        if (__rspack_external_typescript.isClassDeclaration(statement) && statement.name && isLoweredPureClass(statement)) {
+            const modifiers = __rspack_external_typescript.getModifiers(statement) ?? [];
+            const isExport = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.ExportKeyword);
+            const isDefault = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.DefaultKeyword);
+            const name = statement.name.text;
+            const start = statement.getStart(sourceFile);
+            const classStart = statement.getChildren(sourceFile).find((child)=>child.kind === __rspack_external_typescript.SyntaxKind.ClassKeyword).getStart(sourceFile);
+            // `class X {}` becomes `let X = /*#__PURE__*/ (() => class X {})();`.
+            edits.push({
+                start,
+                end: classStart,
+                text: `${isExport && !isDefault ? 'export ' : ''}let ${name} = /*#__PURE__*/ (() => `
+            }, {
+                start: statement.end,
+                end: statement.end,
+                text: `)();${isDefault ? `\nexport { ${name} as default };` : ''}`
+            });
+        }
+    }
+    if (0 === edits.length) return code;
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const isLoweredPureClass = (node)=>{
+    if (__rspack_external_typescript.getDecorators(node)?.length) return false;
+    const heritage = node.heritageClauses?.find((clause)=>clause.token === __rspack_external_typescript.SyntaxKind.ExtendsKeyword);
+    const base = heritage?.types[0]?.expression;
+    if (base && !isPureReference(base)) return false;
+    let lowered = false;
+    for (const member of node.members){
+        if (__rspack_external_typescript.isClassStaticBlockDeclaration(member)) return false;
+        const isStatic = __rspack_external_typescript.getModifiers(member)?.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.StaticKeyword);
+        const isPrivate = member.name && __rspack_external_typescript.isPrivateIdentifier(member.name);
+        if (member.name && __rspack_external_typescript.isComputedPropertyName(member.name)) return false;
+        if (isStatic || isPrivate) lowered = true;
+        if (isStatic && __rspack_external_typescript.isPropertyDeclaration(member) && member.initializer && !isPure(member.initializer)) return false;
+    }
+    return lowered;
+};
+const isPureReference = (node)=>__rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isPropertyAccessExpression(node) && isPureReference(node.expression);
+const isPure = (node)=>{
+    if (__rspack_external_typescript.isLiteralExpression(node) || __rspack_external_typescript.isNoSubstitutionTemplateLiteral(node) || __rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isArrowFunction(node) || __rspack_external_typescript.isFunctionExpression(node) || node.kind === __rspack_external_typescript.SyntaxKind.TrueKeyword || node.kind === __rspack_external_typescript.SyntaxKind.FalseKeyword || node.kind === __rspack_external_typescript.SyntaxKind.NullKeyword) return true;
+    if (__rspack_external_typescript.isVoidExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isParenthesizedExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isPrefixUnaryExpression(node)) return isPure(node.operand);
+    if (__rspack_external_typescript.isArrayLiteralExpression(node)) return node.elements.every((element)=>!__rspack_external_typescript.isSpreadElement(element) && isPure(element));
+    if (__rspack_external_typescript.isObjectLiteralExpression(node)) return node.properties.every((property)=>__rspack_external_typescript.isPropertyAssignment(property) && !__rspack_external_typescript.isComputedPropertyName(property.name) && isPure(property.initializer));
+    return __rspack_external_typescript.isNewExpression(node) && __rspack_external_typescript.isIdentifier(node.expression) && PURE_CONSTRUCTORS.has(node.expression.text) && (node.arguments ?? []).every(isPure);
+};
 const seedCompilationSourceFiles = (compilation, sourceFileCache)=>{
     const { sourceFiles } = compilation;
     if (!(sourceFiles instanceof Map)) return false;
     for (const [fileName, sourceFile] of sourceFileCache)sourceFiles.set(fileName, sourceFile);
     return true;
 };
+const IN_PLACE_FIELDS = new Set([
+    'template',
+    'templateUrl',
+    'styles',
+    'styleUrl',
+    'styleUrls'
+]);
+const hotUpdatesEnabled = (environment)=>'web' !== environment.name && 'development' === environment.config.mode && environment.config.dev?.hmr !== false;
+const hot_updates_hash = (text)=>createHash('sha1').update(text).digest('hex').slice(0, 16);
+const isComponentDecorator = (decorator)=>{
+    const call = decorator.expression;
+    if (!__rspack_external_typescript.isCallExpression(call)) return false;
+    const callee = call.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : void 0;
+    return 'Component' === name;
+};
+const hotUpdateSignature = (source, fileName)=>{
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, source, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.TS);
+    const removals = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isDecorator(node) && isComponentDecorator(node)) {
+            const metadata = node.expression.arguments[0];
+            if (metadata && __rspack_external_typescript.isObjectLiteralExpression(metadata)) {
+                for (const property of metadata.properties)if (__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) && IN_PLACE_FIELDS.has(property.name.text)) removals.push({
+                    start: property.initializer.getStart(sourceFile),
+                    end: property.initializer.end
+                });
+            }
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let rest = source;
+    for (const { start, end } of removals.reverse())rest = rest.slice(0, start) + rest.slice(end);
+    return hot_updates_hash(rest);
+};
+const componentClassNames = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const topLevelClasses = new Set(sourceFile.statements.filter(__rspack_external_typescript.isClassDeclaration).flatMap((statement)=>statement.name ? [
+            statement.name.text
+        ] : []));
+    const names = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isCallExpression(node) && (__rspack_external_typescript.isPropertyAccessExpression(node.expression) ? node.expression.name.text : __rspack_external_typescript.isIdentifier(node.expression) ? node.expression.text : void 0) === 'ɵɵdefineComponent') {
+            const definition = node.arguments[0];
+            const type = definition && __rspack_external_typescript.isObjectLiteralExpression(definition) ? definition.properties.find((property)=>__rspack_external_typescript.isPropertyAssignment(property) && __rspack_external_typescript.isIdentifier(property.name) && 'type' === property.name.text)?.initializer : void 0;
+            if (type && __rspack_external_typescript.isIdentifier(type) && topLevelClasses.has(type.text) && !names.includes(type.text)) names.push(type.text);
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return names;
+};
+const ACCEPT = 'ɵɵangularLynxHmrAccept';
+const addHotAccept = (code, { components, signature, compiled })=>{
+    const list = `[${components.join(', ')}]`;
+    return `${code}
+import { ɵhmrAccept as ${ACCEPT} } from '@blotch/angular-lynx';
+if (import.meta.webpackHot) {
+  ${list} = ${ACCEPT}(import.meta.webpackHot, ${list}, ${JSON.stringify(signature)}, ${JSON.stringify(hot_updates_hash(compiled))});
+}
+`;
+};
+const addEntryHotAccept = (code)=>`${code}
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}
+`;
+const RUNTIME_MODULE = '@blotch/angular-lynx';
+const TAGGED_CALLS = new Set([
+    'backgroundFn',
+    'createMainThreadRef'
+]);
+const TAGGED_CLASSES = new Set([
+    'MainThreadRef'
+]);
+const transformCrossThread = (code, filename, options)=>{
+    const calls = findModuleLevelCalls(code, filename);
+    if (0 === calls.length) return code;
+    const fileKey = keyForFile(filename, options.root);
+    const edits = [];
+    calls.forEach((node, index)=>{
+        const edit = tagEdit(node, JSON.stringify(`${fileKey}:${index}`), code);
+        if (edit) edits.push(edit);
+    });
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const definesCrossThreadValues = (code, filename)=>findModuleLevelCalls(code, filename).length > 0;
+const findModuleLevelCalls = (code, filename)=>{
+    if (!code.includes(RUNTIME_MODULE) || !code.includes('backgroundFn') && !code.includes('MainThreadRef')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const runtime = runtimeBindings(sourceFile);
+    const calls = [];
+    const visit = (node, topLevel)=>{
+        if (topLevel && (__rspack_external_typescript.isCallExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CALLS) || __rspack_external_typescript.isNewExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CLASSES))) calls.push(node);
+        const childTopLevel = topLevel && !__rspack_external_typescript.isFunctionLike(node) && !__rspack_external_typescript.isClassLike(node);
+        __rspack_external_typescript.forEachChild(node, (child)=>visit(child, childTopLevel));
+    };
+    visit(sourceFile, true);
+    return calls;
+};
+const tagEdit = (node, id, code)=>{
+    const args = node.arguments ?? __rspack_external_typescript.factory.createNodeArray();
+    if (args.length > 1 || args.some(__rspack_external_typescript.isSpreadElement)) return;
+    if (1 === args.length) return {
+        start: args[0].end,
+        end: args[0].end,
+        text: `, ${id}`
+    };
+    const close = node.getEnd() - 1;
+    if (')' !== code[close]) return;
+    return {
+        start: close,
+        end: close,
+        text: `undefined, ${id}`
+    };
+};
+const runtimeBindings = (sourceFile)=>{
+    const named = new Map();
+    const namespaces = new Set();
+    for (const statement of sourceFile.statements){
+        if (!__rspack_external_typescript.isImportDeclaration(statement) || !__rspack_external_typescript.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== RUNTIME_MODULE) continue;
+        const bindings = statement.importClause?.namedBindings;
+        if (bindings) {
+            if (__rspack_external_typescript.isNamespaceImport(bindings)) {
+                namespaces.add(bindings.name.text);
+                continue;
+            }
+            for (const element of bindings.elements)named.set(element.name.text, (element.propertyName ?? element.name).text);
+        }
+    }
+    return {
+        named,
+        namespaces
+    };
+};
+const isRuntimeReference = (expression, runtime, exports)=>{
+    if (__rspack_external_typescript.isIdentifier(expression)) {
+        const imported = runtime.named.get(expression.text);
+        return void 0 !== imported && exports.has(imported);
+    }
+    return __rspack_external_typescript.isPropertyAccessExpression(expression) && __rspack_external_typescript.isIdentifier(expression.expression) && runtime.namespaces.has(expression.expression.text) && exports.has(expression.name.text);
+};
+const keyForFile = (filename, root)=>{
+    const relative = node_path.relative(root, filename).split(node_path.sep).join('/');
+    return createHash('sha1').update(relative).digest('hex').slice(0, 10);
+};
 const MAIN_THREAD_DIRECTIVE = 'main thread';
 const MAIN_THREAD_DIRECTIVE_ALT = 'main-thread';
 const transformWorklets = (code, filename)=>{
@@ -775,10 +1128,10 @@ const isAlreadyWrapped = (node)=>{
     return false;
 };
 const buildTransformedCode = (params)=>{
-    const { resourcePath, componentStyles, scopeInfo } = params;
+    const { resourcePath, stylesheets, root, hot } = params;
     let code = params.code;
-    if (componentStyles) {
-        const { imports } = componentStyles;
+    if (stylesheets) {
+        const { imports } = stylesheets;
         let importsString = '';
         for(let i = 0; i < imports.length; ++i){
             let relativeImport = node_path.relative(node_path.dirname(resourcePath), imports[i]);
@@ -787,8 +1140,19 @@ const buildTransformedCode = (params)=>{
         }
         code = importsString + code;
     }
-    if (scopeInfo) code += `\n;${scopeInfo.className}.ɵcmp.id = '${scopeInfo.scopeId}';\n`;
-    return transformWorklets(code, resourcePath);
+    for (const { className, scopeId } of stylesheets?.scopes ?? [])code += `\n;${className}.ɵcmp.id = '${scopeId}';\n`;
+    const transformed = transformCrossThread(transformWorklets(code, resourcePath), resourcePath, {
+        root
+    });
+    if (!hot) return transformed;
+    if (hot.entry) return addEntryHotAccept(transformed);
+    const components = componentClassNames(params.code, resourcePath);
+    if (0 === components.length) return transformed;
+    return addHotAccept(transformed, {
+        components,
+        signature: hotUpdateSignature(hot.source(), resourcePath),
+        compiled: params.code
+    });
 };
 const applyAngularConfig = (api, buildOptions)=>{
     const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
@@ -805,9 +1169,9 @@ const applyAngularConfig = (api, buildOptions)=>{
         ];
         else config.source.preEntry ??= [];
         config.source.preEntry.push(node_path.resolve(__dirname, './polyfills'));
-        if (buildOptions.i18n.hasDefinedSourceLocale) config.source.preEntry.push('@angular/localize/init');
-        const polyfills = buildOptions.polyfills;
-        if (polyfills) config.source.preEntry.push(...polyfills);
+        const polyfills = buildOptions.polyfills ?? [];
+        if (buildOptions.i18n.hasDefinedSourceLocale && !polyfills.some((polyfill)=>polyfill.startsWith('@angular/localize'))) config.source.preEntry.push('@angular/localize/init');
+        config.source.preEntry.push(...polyfills);
         config.source.preEntry.push(...buildOptions.styles);
         config.source.tsconfigPath = buildOptions.tsconfig;
         config.source.define ??= {};
@@ -916,7 +1280,7 @@ const normalizeCacheOptions = (projectMetadata, workspaceRoot)=>{
             cacheEnabled = !isCI;
             break;
     }
-    const cacheBasePath = resolve(workspaceRoot, path);
+    const cacheBasePath = external_node_path_resolve(workspaceRoot, path);
     return {
         enabled: cacheEnabled,
         basePath: cacheBasePath,
@@ -1325,7 +1689,7 @@ const reportLynxDiagnostics = (diagnostics)=>{
         for (const w of cssWarnings)console.warn(`  ${w.message}`);
     }
 };
-const applyAngularRules = async (api, pluginOptions)=>{
+const applyAngularRules = async (api, pluginOptions, backgroundEntries, appEntries)=>{
     const cli = getAngularCliContext(api);
     const { basePath, workspace } = await getAngularWorkspace(cli?.workspaceRoot);
     if (pluginOptions.pages) {
@@ -1365,25 +1729,22 @@ const applyAngularRules = async (api, pluginOptions)=>{
     const tsconfig = buildOptions.tsconfig;
     const compilation = await createAngularCompilation(false, aot);
     const typeScriptFileCache = new Map();
-    const scopedCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
-    node_fs.mkdirSync(scopedCssCacheDir, {
+    const componentCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
+    node_fs.mkdirSync(componentCssCacheDir, {
         recursive: true
     });
-    const componentStylesCache = new Map();
-    const componentScopeIds = new Map();
+    const moduleStylesheets = new Map();
     let componentResourceDependencies = new Map();
     const writtenStylesheets = new Set();
     let knownSourceFiles = new Set();
+    const backgroundModules = new Set();
+    let angularInputs = new Set();
     let angularDiagnostics = {
         errors: [],
         warnings: []
     };
     const transformStylesheet = createTransformStylesheet({
         basePath,
-        scopedCssCacheDir,
-        componentStylesCache,
-        componentScopeIds,
-        onStylesheetWritten: (filePath)=>writtenStylesheets.add(filePath),
         componentStyleSizes
     });
     const compileAngular = async (changedFiles)=>{
@@ -1420,8 +1781,22 @@ const applyAngularRules = async (api, pluginOptions)=>{
         try {
             for (const { filename, contents } of (await compilation.emitAffectedFiles())){
                 const file = node_path.normalize(filename);
-                if (typeScriptFileCache.get(file) !== contents) changedOutputs.add(file);
-                typeScriptFileCache.set(file, contents);
+                const { code, components } = extractComponentStyles('string' == typeof contents ? contents : Buffer.from(contents).toString(), file);
+                const stylesheets = writeModuleStylesheets({
+                    basePath,
+                    cacheDir: componentCssCacheDir,
+                    fileName: file,
+                    components,
+                    onWritten: (filePath)=>writtenStylesheets.add(filePath)
+                });
+                if (stylesheets) moduleStylesheets.set(file, stylesheets);
+                else moduleStylesheets.delete(file);
+                if (typeScriptFileCache.get(file) !== code) {
+                    changedOutputs.add(file);
+                    if (definesCrossThreadValues(code, file)) backgroundModules.add(file);
+                    else backgroundModules.delete(file);
+                }
+                typeScriptFileCache.set(file, code);
             }
         } catch (error) {
             throw new Error(`Angular failed to emit compiled output for "${tsconfig}". Original error: ${error instanceof Error ? error.stack ?? error.message : String(error)}`);
@@ -1429,6 +1804,8 @@ const applyAngularRules = async (api, pluginOptions)=>{
         for (const file of writtenStylesheets)changedOutputs.add(file);
         for (const file of changedFiles ?? [])if (!node_fs.existsSync(file)) {
             typeScriptFileCache.delete(file);
+            backgroundModules.delete(file);
+            moduleStylesheets.delete(file);
             forgetComponentStyleSizes(componentStyleSizes, file);
         }
         reportLynxDiagnostics([
@@ -1438,9 +1815,16 @@ const applyAngularRules = async (api, pluginOptions)=>{
             ...scanSourcesForUnsupportedCss(fileNames)
         ]);
         angularDiagnostics = filterAngularDiagnostics(await compilation.diagnoseFiles(useTypeChecking ? DiagnosticModes.All : DiagnosticModes.All & ~DiagnosticModes.Semantic));
+        const inputFiles = result.referencedFiles.map((file)=>node_path.normalize(file));
+        angularInputs = new Set([
+            ...inputFiles,
+            ...[
+                ...componentResourceDependencies.values()
+            ].flat()
+        ]);
         return {
             changedOutputs,
-            inputFiles: result.referencedFiles.map((file)=>node_path.normalize(file))
+            inputFiles
         };
     };
     const coordinator = createAngularRebuildCoordinator({
@@ -1460,46 +1844,199 @@ const applyAngularRules = async (api, pluginOptions)=>{
     let compilationClosed = false;
     api.onBeforeEnvironmentCompile(async ({ environment, isWatch })=>{
         const compiler = compilersByEnvironment.get(environment.name);
-        const outdatedFiles = await coordinator.prepare(environment.name, [
+        const changedFiles = [
             ...compiler?.modifiedFiles ?? [],
             ...compiler?.removedFiles ?? []
-        ]);
-        if (compiler && outdatedFiles.size > 0) compiler.modifiedFiles = new Set([
+        ];
+        const outdatedFiles = await coordinator.prepare(environment.name, changedFiles);
+        const changedEntries = backgroundEntries.update(environment.name, {
+            appModules: backgroundModules,
+            watch: isWatch,
+            rebuilt: outdatedFiles.size > 0 || changedFiles.some((file)=>!angularInputs.has(node_path.normalize(file)) && !backgroundEntries.isEntryFile(file))
+        });
+        if (compiler && outdatedFiles.size + changedEntries.length > 0) compiler.modifiedFiles = new Set([
             ...compiler.modifiedFiles ?? [],
-            ...outdatedFiles
+            ...outdatedFiles,
+            ...changedEntries
         ]);
         if (!isWatch && !compilationClosed) {
             compilationClosed = true;
             await compilation.close?.();
         }
     });
-    api.transform({
-        test: /\.[cm]?[jt]sx?$/
-    }, async (context)=>{
+    const transformModule = async (context, background)=>{
+        const hot = hotUpdatesEnabled(context.environment);
         const isJs = /\.[cm]?js$/.test(context.resourcePath);
         if (isJs) {
             const contents = await javascriptTransformer.transformData(context.resourcePath, context.code, {
                 skipLinker: false,
                 sideEffects: ()=>Promise.resolve(false)
             });
+            const code = transformCrossThread(transformWorklets(Buffer.from(contents).toString(), context.resourcePath), context.resourcePath, {
+                root: api.context.rootPath
+            });
+            if (!background) return {
+                code
+            };
+            const wrapped = wrapPureClasses(code, context.resourcePath);
             return {
-                code: transformWorklets(Buffer.from(contents).toString(), context.resourcePath)
+                code: hot && backgroundEntries.isEntryFile(context.resourcePath) ? addEntryHotAccept(wrapped) : wrapped
             };
         }
         const content = typeScriptFileCache.get(context.resourcePath);
         if (!content) throw new Error(`No compiled output found for ${context.resourcePath}`);
         for (const dependency of componentResourceDependencies.get(context.resourcePath) ?? [])context.addDependency(dependency);
-        const code = 'string' == typeof content ? content : Buffer.from(content).toString();
+        const code = buildTransformedCode({
+            code: 'string' == typeof content ? content : Buffer.from(content).toString(),
+            resourcePath: context.resourcePath,
+            stylesheets: moduleStylesheets.get(context.resourcePath),
+            root: api.context.rootPath,
+            hot: hot && !background ? {
+                entry: appEntries.has(node_path.normalize(context.resourcePath)),
+                source: ()=>node_fs.readFileSync(context.resourcePath, 'utf-8')
+            } : void 0
+        });
+        if (!background) return {
+            code
+        };
         return {
-            code: buildTransformedCode({
-                code,
-                resourcePath: context.resourcePath,
-                componentStyles: componentStylesCache.get(context.resourcePath),
-                scopeInfo: componentScopeIds.get(context.resourcePath)
-            })
+            code: wrapPureClasses(Buffer.from(await javascriptTransformer.transformData(context.resourcePath, code, {
+                skipLinker: true,
+                sideEffects: ()=>Promise.resolve(false)
+            })).toString(), context.resourcePath)
         };
+    };
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.MAIN_THREAD
+    }, (context)=>transformModule(context, false));
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.BACKGROUND
+    }, (context)=>transformModule(context, true));
+};
+const background_entry_RUNTIME_MODULE = '@blotch/angular-lynx';
+const createBackgroundEntries = ({ rootPath, findLibraryModules = findLibraryBackgroundModules })=>{
+    const cacheDir = node_path.join(rootPath, 'node_modules', '.cache', 'angular-lynx', 'background-entries');
+    const files = new Map();
+    let libraryModules;
+    const getLibraryModules = ()=>libraryModules ??= findLibraryModules(rootPath);
+    let modules = new Set();
+    const rebuilds = new Map();
+    return {
+        fileFor: (environmentName, entryName)=>{
+            const file = node_path.join(cacheDir, environmentName, `${entryName}.js`);
+            let environmentFiles = files.get(environmentName);
+            if (!environmentFiles) {
+                environmentFiles = new Set();
+                files.set(environmentName, environmentFiles);
+            }
+            environmentFiles.add(file);
+            if (!node_fs.existsSync(file)) writeIfChanged(file, renderBackgroundEntry({
+                modules: []
+            }));
+            return file;
+        },
+        isBackgroundModule: (file)=>modules.has(file),
+        isEntryFile: (file)=>[
+                ...files.values()
+            ].some((environmentFiles)=>environmentFiles.has(file)),
+        update: (environmentName, { appModules, watch, rebuilt })=>{
+            modules = new Set([
+                ...getLibraryModules(),
+                ...[
+                    ...appModules
+                ].sort()
+            ]);
+            const rebuild = (rebuilds.get(environmentName) ?? 0) + (watch && rebuilt ? 1 : 0);
+            rebuilds.set(environmentName, rebuild);
+            const contents = renderBackgroundEntry({
+                modules: [
+                    ...modules
+                ],
+                rebuild: watch ? rebuild : void 0
+            });
+            return [
+                ...files.get(environmentName) ?? []
+            ].filter((file)=>writeIfChanged(file, contents));
+        }
+    };
+};
+const renderBackgroundEntry = ({ modules, rebuild })=>{
+    const lines = [
+        "// The background thread's entry, generated by",
+        '// @blotch/rsbuild-plugin-angular-lynx (see background-entry.ts there).',
+        '// Angular runs on the main thread only, so the background thread loads the',
+        '// runtime and the modules that call backgroundFn(), createMainThreadRef()',
+        '// or new MainThreadRef() at module level.',
+        `import { ɵstartBackgroundThread } from '${background_entry_RUNTIME_MODULE}';`,
+        ...modules.map((file)=>`import ${JSON.stringify(file)};`),
+        'ɵstartBackgroundThread();'
+    ];
+    if (void 0 !== rebuild) lines.push(`// Rebuild ${rebuild}`);
+    return `${lines.join('\n')}\n`;
+};
+const writeIfChanged = (file, contents)=>{
+    if (node_fs.existsSync(file) && node_fs.readFileSync(file, 'utf8') === contents) return false;
+    node_fs.mkdirSync(node_path.dirname(file), {
+        recursive: true
     });
+    node_fs.writeFileSync(file, contents);
+    return true;
+};
+const JS_FILE = /\.[cm]?js$/;
+const findLibraryBackgroundModules = (rootPath)=>{
+    const found = new Set();
+    const visited = new Set();
+    const visit = (packageDir, isApp)=>{
+        const manifest = readManifest(packageDir);
+        if (!manifest) return;
+        const names = new Set([
+            ...Object.keys(manifest.dependencies ?? {}),
+            ...Object.keys(manifest.optionalDependencies ?? {}),
+            ...Object.keys(manifest.peerDependencies ?? {}),
+            ...isApp ? Object.keys(manifest.devDependencies ?? {}) : []
+        ]);
+        names.delete(background_entry_RUNTIME_MODULE);
+        for (const name of names){
+            const dependencyDir = resolvePackageDir(name, packageDir);
+            if (!dependencyDir || visited.has(dependencyDir)) continue;
+            visited.add(dependencyDir);
+            const dependency = readManifest(dependencyDir);
+            if (dependency && dependsOnRuntime(dependency)) {
+                for (const file of listJsFiles(dependencyDir))if (definesCrossThreadValues(node_fs.readFileSync(file, 'utf8'), file)) found.add(file);
+            }
+            visit(dependencyDir, false);
+        }
+    };
+    visit(rootPath, true);
+    return [
+        ...found
+    ].sort();
 };
+const readManifest = (packageDir)=>{
+    try {
+        return JSON.parse(node_fs.readFileSync(node_path.join(packageDir, 'package.json'), 'utf8'));
+    } catch  {
+        return;
+    }
+};
+const dependsOnRuntime = (manifest)=>[
+        manifest.dependencies,
+        manifest.optionalDependencies,
+        manifest.peerDependencies
+    ].some((dependencies)=>dependencies?.[background_entry_RUNTIME_MODULE] !== void 0);
+const resolvePackageDir = (name, fromDir)=>{
+    for(let dir = fromDir;; dir = node_path.dirname(dir)){
+        const candidate = node_path.join(dir, 'node_modules', name);
+        if (node_fs.existsSync(node_path.join(candidate, 'package.json'))) return node_fs.realpathSync(candidate);
+        if (node_path.dirname(dir) === dir) return;
+    }
+};
+const listJsFiles = (packageDir)=>node_fs.readdirSync(packageDir, {
+        recursive: true,
+        encoding: 'utf8'
+    }).filter((file)=>JS_FILE.test(file) && !file.split(node_path.sep).includes('node_modules')).map((file)=>node_path.join(packageDir, file));
 const applyCSS = (api, options)=>{
     const { enableRemoveCSSScope, enableCSSSelector, enableCSSInvalidation, targetSdkVersion } = options;
     api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
@@ -1525,23 +2062,23 @@ const applyCSS = (api, options)=>{
             const mainRule = rule.oneOf(mainRuleName);
             const parentRuleEntries = rule.entries();
             removeLightningCSS(mainRule);
-            mainRule.issuerLayer(LAYERS.BACKGROUND).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
+            mainRule.issuerLayer(LAYERS.MAIN_THREAD).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
             const uses = mainRule.uses.entries() ?? {};
             const ruleEntries = mainRule.entries();
             const cssLoader = uses[CHAIN_ID.USE.CSS];
             if (!cssLoader) continue;
             const cssLoaderRule = cssLoader.entries();
-            const mainThreadLayerRule = chain.module.rule(`${ruleName}:${LAYERS.MAIN_THREAD}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.MAIN_THREAD);
-            if (void 0 !== parentRuleEntries.dependency) mainThreadLayerRule.merge({
+            const backgroundLayerRule = chain.module.rule(`${ruleName}:${LAYERS.BACKGROUND}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.BACKGROUND);
+            if (void 0 !== parentRuleEntries.dependency) backgroundLayerRule.merge({
                 dependency: parentRuleEntries.dependency
             });
-            mainThreadLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
+            backgroundLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
         }
         for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
             const inlineRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_INLINE : `${ruleName}-inline`;
             removeLightningCSS(chain.module.rule(ruleName).oneOf(inlineRuleName));
         }
-        if ('lynx' === environment.name && chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
+        if (chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
             const fontRule = chain.module.rule(CHAIN_ID.RULE.FONT);
             fontRule.oneOfs.clear();
             fontRule.type('asset/inline');
@@ -1597,6 +2134,21 @@ const applyGenerator = (api)=>{
         }
     });
 };
+const applyResolve = (api)=>{
+    api.modifyRspackConfig((config)=>{
+        const resolve = config.resolve ??= {};
+        const conditions = (resolve.conditionNames ?? []).filter((condition)=>'require' !== condition);
+        if (!conditions.includes('module')) conditions.splice(conditions.indexOf('import') + 1, 0, 'module');
+        resolve.byDependency = {
+            ...resolve.byDependency,
+            esm: {
+                ...resolve.byDependency?.['esm'],
+                conditionNames: conditions
+            }
+        };
+    });
+};
+const DEV_LOGS_PATH = '/__dev_logs';
 const RESET = '\x1b[0m';
 const GRAY = '\x1b[90m';
 const RED = '\x1b[31m';
@@ -1631,7 +2183,9 @@ const formatArg = (arg)=>{
     if ('string' == typeof arg) return arg;
     if ('object' == typeof arg && 'Error' === arg.__type) {
         const err = arg;
-        return err.stack || `${err.name}: ${err.message}`;
+        const header = err.message ? `${err.name}: ${err.message}` : err.name;
+        if (!err.stack) return header;
+        return err.stack.startsWith(header) ? err.stack : `${header}\n${err.stack}`;
     }
     try {
         return JSON.stringify(arg, null, 2);
@@ -1639,28 +2193,19 @@ const formatArg = (arg)=>{
         return String(arg);
     }
 };
-let logFile = null;
-let logFilePath = '';
-const getLogFilePath = ()=>logFilePath;
-const ensureLogFile = ()=>{
-    if (!logFile) {
-        logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
-        logFile = node_fs.createWriteStream(logFilePath, {
-            flags: 'w'
-        });
-    }
-    return logFile;
-};
-const writeLog = (entry)=>{
-    const stream = ensureLogFile();
+const writeLog = (stream, entry)=>{
     const color = LEVEL_COLORS[entry.level] || WHITE;
     const label = LEVEL_LABELS[entry.level] || entry.level.toUpperCase();
     const time = formatTimestamp(entry.timestamp);
     const args = entry.args.map(formatArg).join(' ');
     stream.write(`${GRAY}${time}${RESET} ${color}${label}${RESET} ${args}\n`);
 };
-const createDevLoggerMiddleware = ()=>(req, res, next)=>{
-        if ('OPTIONS' === req.method && '/__dev_logs' === req.url) {
+const createDevLoggerMiddleware = (logFilePath)=>{
+    const logFile = node_fs.createWriteStream(logFilePath, {
+        flags: 'w'
+    });
+    return (req, res, next)=>{
+        if ('OPTIONS' === req.method && req.url === DEV_LOGS_PATH) {
             res.writeHead(204, {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'POST, OPTIONS',
@@ -1669,7 +2214,7 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             return;
         }
-        if ('POST' !== req.method || '/__dev_logs' !== req.url) return void next();
+        if ('POST' !== req.method || req.url !== DEV_LOGS_PATH) return void next();
         let body = '';
         req.on('data', (chunk)=>{
             body += chunk.toString();
@@ -1681,22 +2226,21 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             try {
                 const { logs } = JSON.parse(body);
-                for (const entry of logs)writeLog(entry);
+                for (const entry of logs)writeLog(logFile, entry);
             } catch  {}
         });
     };
-const LOG_PORT_OFFSET = 1;
+};
+const FALLBACK_ORIGIN = 'http://localhost:3000';
 const applyDevLogger = (api)=>{
     api.modifyRspackConfig((rspackConfig)=>{
         if ('development' !== rspackConfig.mode) return rspackConfig;
         const publicPath = rspackConfig.output?.publicPath;
-        let logUrl = '';
+        let origin = FALLBACK_ORIGIN;
         if ('string' == typeof publicPath && publicPath.startsWith('http')) try {
-            const parsed = new URL(publicPath);
-            const logPort = Number(parsed.port || 80) + LOG_PORT_OFFSET;
-            logUrl = `${parsed.protocol}//${parsed.hostname}:${logPort}/__dev_logs`;
+            origin = new URL(publicPath).origin;
         } catch  {}
-        if (!logUrl) logUrl = `http://localhost:${3000 + LOG_PORT_OFFSET}/__dev_logs`;
+        const logUrl = `${origin}${DEV_LOGS_PATH}`;
         rspackConfig.plugins = rspackConfig.plugins || [];
         rspackConfig.plugins.push({
             name: 'lynx:angular:dev-logger-define',
@@ -1709,22 +2253,12 @@ const applyDevLogger = (api)=>{
         });
         return rspackConfig;
     });
-    api.onAfterStartDevServer(({ port })=>{
-        const logPort = port + LOG_PORT_OFFSET;
-        const middleware = createDevLoggerMiddleware();
-        const server = node_http.createServer((req, res)=>{
-            middleware(req, res, ()=>{
-                res.writeHead(404);
-                res.end();
-            });
-        });
-        server.listen(logPort, '0.0.0.0', ()=>{
-            console.log(`[dev-logger] Log server on :${logPort} → tail -f ${getLogFilePath()}`);
-        });
-        server.on('error', (err)=>{
-            if ('EADDRINUSE' === err.code) server.listen(logPort + 1, '0.0.0.0');
-            else console.warn('[dev-logger] Failed to start log server:', err.message);
-        });
+    const logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
+    api.onBeforeStartDevServer(({ server })=>{
+        server.middlewares.use(createDevLoggerMiddleware(logFilePath));
+    });
+    api.onAfterStartDevServer(()=>{
+        console.log(`[dev-logger] LynxLogger output: tail -f ${logFilePath}`);
     });
 };
 const applySplitChunksRule = (api, options)=>{
@@ -1754,22 +2288,1869 @@ const applySplitChunksRule = (api, options)=>{
         return rspackConfig;
     });
 };
+const foldCalc = (value)=>{
+    if (!value.includes('calc(')) return value;
+    const parsed = postcss_value_parser(value);
+    foldNodes(parsed.nodes);
+    return parsed.toString();
+};
+const foldNodes = (nodes)=>{
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        const folded = 'calc' === node.value.toLowerCase() ? evaluate(node.nodes) : void 0;
+        if (folded) Object.assign(node, {
+            type: 'word',
+            value: formatDimension(folded)
+        });
+        else foldNodes(node.nodes);
+    }
+};
+const INFINITY_VALUE = 9999;
+const formatDimension = ({ value, unit })=>`${Number(value.toFixed(6))}${unit}`;
+const evaluate = (nodes)=>{
+    const tokens = tokenize(nodes);
+    if (!tokens) return;
+    let position = 0;
+    const peek = ()=>tokens[position];
+    const factor = ()=>{
+        const token = tokens[position++];
+        return 'object' == typeof token ? token : void 0;
+    };
+    const term = ()=>{
+        let left = factor();
+        while(left && ('*' === peek() || '/' === peek())){
+            const operator = tokens[position++];
+            const right = factor();
+            left = right && ('*' === operator ? multiply(left, right) : divide(left, right));
+        }
+        return left;
+    };
+    const expression = ()=>{
+        let left = term();
+        while(left && ('+' === peek() || '-' === peek())){
+            const operator = tokens[position++];
+            const right = term();
+            left = right && add(left, '-' === operator ? negate(right) : right);
+        }
+        return left;
+    };
+    const result = expression();
+    return position === tokens.length ? result : void 0;
+};
+const tokenize = (nodes)=>{
+    const tokens = [];
+    for (const node of nodes){
+        if ('space' === node.type || 'comment' === node.type) continue;
+        if ('function' === node.type) {
+            const name = node.value.toLowerCase();
+            const group = 'calc' === name || '' === name ? evaluate(node.nodes) : void 0;
+            if (!group) return;
+            tokens.push(group);
+            continue;
+        }
+        if ('word' !== node.type) return;
+        if ([
+            '+',
+            '-',
+            '*',
+            '/'
+        ].includes(node.value)) {
+            tokens.push(node.value);
+            continue;
+        }
+        if (/^-?infinity$/i.test(node.value)) {
+            tokens.push({
+                value: node.value.startsWith('-') ? -INFINITY_VALUE : INFINITY_VALUE,
+                unit: ''
+            });
+            continue;
+        }
+        const unit = postcss_value_parser.unit(node.value);
+        if (!unit) return;
+        tokens.push({
+            value: Number(unit.number),
+            unit: unit.unit.toLowerCase()
+        });
+    }
+    return tokens;
+};
+const negate = ({ value, unit })=>({
+        value: -value,
+        unit
+    });
+const add = (a, b)=>a.unit === b.unit ? {
+        value: a.value + b.value,
+        unit: a.unit
+    } : void 0;
+const multiply = (a, b)=>{
+    if (a.unit && b.unit) return;
+    return {
+        value: a.value * b.value,
+        unit: a.unit || b.unit
+    };
+};
+const divide = (a, b)=>b.unit || 0 === b.value ? void 0 : {
+        value: a.value / b.value,
+        unit: a.unit
+    };
+const clampHugeNumbers = (value)=>value.replace(/(-?)\d*\.?\d+e\+?(\d+)([a-z%]*)/gi, (match, sign, exponent, unit)=>Number(exponent) >= 7 ? `${sign}${INFINITY_VALUE}${unit}` : match);
+const COLOR_FUNCTIONS = new Set([
+    'rgb',
+    'rgba',
+    'hsl',
+    'hsla',
+    'hwb',
+    'lab',
+    'lch',
+    'oklab',
+    'oklch',
+    'color-mix'
+]);
+const LOWERED_FUNCTIONS = new Set([
+    ...COLOR_FUNCTIONS
+].filter((name)=>'rgb' !== name && 'rgba' !== name));
+const NAMED_COLORS = {
+    aliceblue: 'f0f8ff',
+    antiquewhite: 'faebd7',
+    aqua: '00ffff',
+    aquamarine: '7fffd4',
+    azure: 'f0ffff',
+    beige: 'f5f5dc',
+    bisque: 'ffe4c4',
+    black: '000000',
+    blanchedalmond: 'ffebcd',
+    blue: '0000ff',
+    blueviolet: '8a2be2',
+    brown: 'a52a2a',
+    burlywood: 'deb887',
+    cadetblue: '5f9ea0',
+    chartreuse: '7fff00',
+    chocolate: 'd2691e',
+    coral: 'ff7f50',
+    cornflowerblue: '6495ed',
+    cornsilk: 'fff8dc',
+    crimson: 'dc143c',
+    cyan: '00ffff',
+    darkblue: '00008b',
+    darkcyan: '008b8b',
+    darkgoldenrod: 'b8860b',
+    darkgray: 'a9a9a9',
+    darkgreen: '006400',
+    darkgrey: 'a9a9a9',
+    darkkhaki: 'bdb76b',
+    darkmagenta: '8b008b',
+    darkolivegreen: '556b2f',
+    darkorange: 'ff8c00',
+    darkorchid: '9932cc',
+    darkred: '8b0000',
+    darksalmon: 'e9967a',
+    darkseagreen: '8fbc8f',
+    darkslateblue: '483d8b',
+    darkslategray: '2f4f4f',
+    darkslategrey: '2f4f4f',
+    darkturquoise: '00ced1',
+    darkviolet: '9400d3',
+    deeppink: 'ff1493',
+    deepskyblue: '00bfff',
+    dimgray: '696969',
+    dimgrey: '696969',
+    dodgerblue: '1e90ff',
+    firebrick: 'b22222',
+    floralwhite: 'fffaf0',
+    forestgreen: '228b22',
+    fuchsia: 'ff00ff',
+    gainsboro: 'dcdcdc',
+    ghostwhite: 'f8f8ff',
+    gold: 'ffd700',
+    goldenrod: 'daa520',
+    gray: '808080',
+    green: '008000',
+    greenyellow: 'adff2f',
+    grey: '808080',
+    honeydew: 'f0fff0',
+    hotpink: 'ff69b4',
+    indianred: 'cd5c5c',
+    indigo: '4b0082',
+    ivory: 'fffff0',
+    khaki: 'f0e68c',
+    lavender: 'e6e6fa',
+    lavenderblush: 'fff0f5',
+    lawngreen: '7cfc00',
+    lemonchiffon: 'fffacd',
+    lightblue: 'add8e6',
+    lightcoral: 'f08080',
+    lightcyan: 'e0ffff',
+    lightgoldenrodyellow: 'fafad2',
+    lightgray: 'd3d3d3',
+    lightgreen: '90ee90',
+    lightgrey: 'd3d3d3',
+    lightpink: 'ffb6c1',
+    lightsalmon: 'ffa07a',
+    lightseagreen: '20b2aa',
+    lightskyblue: '87cefa',
+    lightslategray: '778899',
+    lightslategrey: '778899',
+    lightsteelblue: 'b0c4de',
+    lightyellow: 'ffffe0',
+    lime: '00ff00',
+    limegreen: '32cd32',
+    linen: 'faf0e6',
+    magenta: 'ff00ff',
+    maroon: '800000',
+    mediumaquamarine: '66cdaa',
+    mediumblue: '0000cd',
+    mediumorchid: 'ba55d3',
+    mediumpurple: '9370db',
+    mediumseagreen: '3cb371',
+    mediumslateblue: '7b68ee',
+    mediumspringgreen: '00fa9a',
+    mediumturquoise: '48d1cc',
+    mediumvioletred: 'c71585',
+    midnightblue: '191970',
+    mintcream: 'f5fffa',
+    mistyrose: 'ffe4e1',
+    moccasin: 'ffe4b5',
+    navajowhite: 'ffdead',
+    navy: '000080',
+    oldlace: 'fdf5e6',
+    olive: '808000',
+    olivedrab: '6b8e23',
+    orange: 'ffa500',
+    orangered: 'ff4500',
+    orchid: 'da70d6',
+    palegoldenrod: 'eee8aa',
+    palegreen: '98fb98',
+    paleturquoise: 'afeeee',
+    palevioletred: 'db7093',
+    papayawhip: 'ffefd5',
+    peachpuff: 'ffdab9',
+    peru: 'cd853f',
+    pink: 'ffc0cb',
+    plum: 'dda0dd',
+    powderblue: 'b0e0e6',
+    purple: '800080',
+    rebeccapurple: '663399',
+    red: 'ff0000',
+    rosybrown: 'bc8f8f',
+    royalblue: '4169e1',
+    saddlebrown: '8b4513',
+    salmon: 'fa8072',
+    sandybrown: 'f4a460',
+    seagreen: '2e8b57',
+    seashell: 'fff5ee',
+    sienna: 'a0522d',
+    silver: 'c0c0c0',
+    skyblue: '87ceeb',
+    slateblue: '6a5acd',
+    slategray: '708090',
+    slategrey: '708090',
+    snow: 'fffafa',
+    springgreen: '00ff7f',
+    steelblue: '4682b4',
+    tan: 'd2b48c',
+    teal: '008080',
+    thistle: 'd8bfd8',
+    tomato: 'ff6347',
+    turquoise: '40e0d0',
+    violet: 'ee82ee',
+    wheat: 'f5deb3',
+    white: 'ffffff',
+    whitesmoke: 'f5f5f5',
+    yellow: 'ffff00',
+    yellowgreen: '9acd32'
+};
+const lowerColors = (value, channelVariables = new Set())=>{
+    if (![
+        ...LOWERED_FUNCTIONS
+    ].some((name)=>value.includes(`${name}(`))) return value;
+    const parsed = postcss_value_parser(value);
+    rewriteColorFunctions(parsed.nodes, channelVariables);
+    return parsed.toString();
+};
+const rewriteColorFunctions = (nodes, channelVariables)=>{
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        const name = node.value.toLowerCase();
+        const color = LOWERED_FUNCTIONS.has(name) ? parseColor(node) : void 0;
+        if (color) {
+            Object.assign(node, {
+                type: 'word',
+                value: formatRgb(color)
+            });
+            continue;
+        }
+        rewriteColorFunctions(node.nodes, channelVariables);
+        const mixed = 'color-mix' === name ? mixWithChannels(node.nodes, channelVariables) : void 0;
+        if (mixed) Object.assign(node, {
+            type: 'word',
+            value: mixed
+        });
+    }
+};
+const mixWithChannels = (nodes, channelVariables)=>{
+    const parts = splitByComma(nodes);
+    if (3 !== parts.length) return;
+    const [, first, second] = parts;
+    const variable = first.find((node)=>'function' === node.type && 'var' === node.value.toLowerCase());
+    const name = variable?.nodes[0]?.value;
+    const percentage = first.filter((node)=>node !== variable).map((node)=>postcss_value_parser.unit(node.value) || {
+            number: '',
+            unit: ''
+        });
+    const isTransparent = 1 === second.length && 'transparent' === second[0].value.toLowerCase();
+    if (!name || !channelVariables.has(name) || 1 !== variable.nodes.length || !isTransparent || percentage.length > 1 || 1 === percentage.length && percentage[0]?.unit !== '%') return;
+    const alpha = percentage[0] ? Number(percentage[0].number) / 100 : 0.5;
+    return `rgba(var(${name}-rgb), ${Number(alpha.toFixed(4))})`;
+};
+const formatRgb = ({ r, g, b, alpha })=>{
+    const channel = (value)=>Math.round(255 * clamp01(value));
+    const channels = `${channel(r)}, ${channel(g)}, ${channel(b)}`;
+    const a = Number(clamp01(alpha).toFixed(4));
+    return 1 === a ? `rgb(${channels})` : `rgba(${channels}, ${a})`;
+};
+const clamp01 = (value)=>Math.min(1, Math.max(0, value));
+const parseColor = (node)=>{
+    if ('word' === node.type) {
+        const word = node.value.toLowerCase();
+        if ('transparent' === word) return {
+            r: 0,
+            g: 0,
+            b: 0,
+            alpha: 0
+        };
+        const named = NAMED_COLORS[word];
+        return parseHex('string' == typeof named ? `#${named}` : word);
+    }
+    if ('function' !== node.type) return;
+    const name = node.value.toLowerCase();
+    if (!COLOR_FUNCTIONS.has(name)) return;
+    if ('color-mix' === name) return parseColorMix(node.nodes);
+    const args = colorArguments(node.nodes);
+    if (!args) return;
+    const { channels, alpha } = args;
+    switch(name){
+        case 'rgb':
+        case 'rgba':
+            return withAlpha(rgbFromChannels(channels.map((c)=>colors_channel(c, 255))), alpha);
+        case 'hsl':
+        case 'hsla':
+            return withAlpha(hslToRgb(angle(channels[0]), percent(channels[1]), percent(channels[2])), alpha);
+        case 'hwb':
+            return withAlpha(hwbToRgb(angle(channels[0]), percent(channels[1]), percent(channels[2])), alpha);
+        case 'lab':
+            return withAlpha(labToRgb([
+                colors_channel(channels[0], 100),
+                colors_channel(channels[1], 125),
+                colors_channel(channels[2], 125)
+            ]), alpha);
+        case 'lch':
+            return withAlpha(labToRgb(polarToRectangular([
+                colors_channel(channels[0], 100),
+                colors_channel(channels[1], 150),
+                angle(channels[2])
+            ])), alpha);
+        case 'oklab':
+            return withAlpha(oklabToRgb([
+                colors_channel(channels[0], 1),
+                colors_channel(channels[1], 0.4),
+                colors_channel(channels[2], 0.4)
+            ]), alpha);
+        default:
+            return withAlpha(oklabToRgb(polarToRectangular([
+                colors_channel(channels[0], 1),
+                colors_channel(channels[1], 0.4),
+                angle(channels[2])
+            ])), alpha);
+    }
+};
+const rgbFromChannels = ([r, g, b])=>({
+        r: r / 255,
+        g: g / 255,
+        b: b / 255,
+        alpha: 1
+    });
+const withAlpha = (color, alpha)=>({
+        ...color,
+        alpha: void 0 === alpha ? 1 : colors_channel(alpha, 1)
+    });
+const parseHex = (word)=>{
+    const match = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(word);
+    if (!match) return;
+    let hex = match[1];
+    if (hex.length <= 4) hex = [
+        ...hex
+    ].map((digit)=>digit + digit).join('');
+    const byte = (index)=>Number.parseInt(hex.slice(2 * index, 2 * index + 2), 16) / 255;
+    return {
+        r: byte(0),
+        g: byte(1),
+        b: byte(2),
+        alpha: 8 === hex.length ? byte(3) : 1
+    };
+};
+const colorArguments = (nodes)=>{
+    const words = [];
+    let alpha;
+    let afterSlash = false;
+    for (const node of nodes)if ('space' !== node.type && 'comment' !== node.type) {
+        if ('div' === node.type) {
+            afterSlash ||= '/' === node.value;
+            continue;
+        }
+        if ('word' !== node.type) return;
+        if (afterSlash) alpha = node.value;
+        else words.push(node.value);
+    }
+    if (void 0 === alpha && 4 === words.length) alpha = words.pop();
+    if (3 !== words.length || ![
+        ...words,
+        ...void 0 === alpha ? [] : [
+            alpha
+        ]
+    ].every(isNumeric)) return;
+    return {
+        channels: words,
+        alpha
+    };
+};
+const isNumeric = (word)=>'none' === word.toLowerCase() || false !== postcss_value_parser.unit(word);
+const colors_channel = (word, full)=>{
+    const { number, unit } = postcss_value_parser.unit(word) || {
+        number: '0',
+        unit: ''
+    };
+    return '%' === unit ? Number(number) / 100 * full : Number(number);
+};
+const percent = (word)=>colors_channel(word, 100) / 100;
+const angle = (word)=>{
+    const { number, unit } = postcss_value_parser.unit(word) || {
+        number: '0',
+        unit: ''
+    };
+    const value = Number(number);
+    switch(unit.toLowerCase()){
+        case 'rad':
+            return 180 * value / Math.PI;
+        case 'grad':
+            return 0.9 * value;
+        case 'turn':
+            return 360 * value;
+        default:
+            return value;
+    }
+};
+const hslToRgb = (hue, saturation, lightness)=>{
+    const h = (hue % 360 + 360) % 360;
+    const f = (n)=>{
+        const k = (n + h / 30) % 12;
+        const a = saturation * Math.min(lightness, 1 - lightness);
+        return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return {
+        r: f(0),
+        g: f(8),
+        b: f(4),
+        alpha: 1
+    };
+};
+const hwbToRgb = (hue, whiteness, blackness)=>{
+    if (whiteness + blackness >= 1) {
+        const gray = whiteness / (whiteness + blackness);
+        return {
+            r: gray,
+            g: gray,
+            b: gray,
+            alpha: 1
+        };
+    }
+    const { r, g, b } = hslToRgb(hue, 1, 0.5);
+    const scale = (value)=>value * (1 - whiteness - blackness) + whiteness;
+    return {
+        r: scale(r),
+        g: scale(g),
+        b: scale(b),
+        alpha: 1
+    };
+};
+const polarToRectangular = ([lightness, chroma, hue])=>{
+    const radians = hue * Math.PI / 180;
+    return [
+        lightness,
+        chroma * Math.cos(radians),
+        chroma * Math.sin(radians)
+    ];
+};
+const rectangularToPolar = ([lightness, a, b])=>{
+    const hue = 180 * Math.atan2(b, a) / Math.PI;
+    return [
+        lightness,
+        Math.hypot(a, b),
+        (hue + 360) % 360
+    ];
+};
+const gammaEncode = (value)=>{
+    const sign = value < 0 ? -1 : 1;
+    const abs = Math.abs(value);
+    return abs > 0.0031308 ? sign * (1.055 * abs ** (1 / 2.4) - 0.055) : 12.92 * value;
+};
+const gammaDecode = (value)=>{
+    const sign = value < 0 ? -1 : 1;
+    const abs = Math.abs(value);
+    return abs > 0.04045 ? sign * ((abs + 0.055) / 1.055) ** 2.4 : value / 12.92;
+};
+const oklabToLinearRgb = ([l, a, b])=>{
+    const lms = [
+        (l + 0.3963377773761749 * a + 0.2158037573099136 * b) ** 3,
+        (l - 0.1055613458156586 * a - 0.0638541728258133 * b) ** 3,
+        (l - 0.0894841775298119 * a - 1.2914855480194092 * b) ** 3
+    ];
+    return [
+        4.0767416360759583 * lms[0] - 3.3077115392580629 * lms[1] + 0.2309699031821043 * lms[2],
+        -1.2684379732850315 * lms[0] + 2.6097573492876882 * lms[1] - 0.341319376002657 * lms[2],
+        -0.0041960761386756 * lms[0] - 0.7034186179359363 * lms[1] + 1.7076146940746117 * lms[2]
+    ];
+};
+const linearRgbToOklab = ([r, g, b])=>{
+    const lms = [
+        Math.cbrt(0.4122214694707629 * r + 0.5363325372617349 * g + 0.0514459932675022 * b),
+        Math.cbrt(0.2119034958178251 * r + 0.6806995506452344 * g + 0.1073969535369406 * b),
+        Math.cbrt(0.0883024591900564 * r + 0.2817188391361215 * g + 0.6299787016738223 * b)
+    ];
+    return [
+        0.2104542553 * lms[0] + 0.793617785 * lms[1] - 0.0040720468 * lms[2],
+        1.9779984951 * lms[0] - 2.428592205 * lms[1] + 0.4505937099 * lms[2],
+        0.0259040371 * lms[0] + 0.7827717662 * lms[1] - 0.808675766 * lms[2]
+    ];
+};
+const encodeRgb = ([r, g, b])=>({
+        r: gammaEncode(r),
+        g: gammaEncode(g),
+        b: gammaEncode(b),
+        alpha: 1
+    });
+const rgbToOklab = ({ r, g, b })=>linearRgbToOklab([
+        gammaDecode(r),
+        gammaDecode(g),
+        gammaDecode(b)
+    ]);
+const isInGamut = ({ r, g, b })=>[
+        r,
+        g,
+        b
+    ].every((value)=>value >= -0.000001 && value <= 1 + 1e-6);
+const clip = ({ r, g, b, alpha })=>({
+        r: clamp01(r),
+        g: clamp01(g),
+        b: clamp01(b),
+        alpha
+    });
+const oklabToRgb = (oklab)=>{
+    const color = encodeRgb(oklabToLinearRgb(oklab));
+    if (isInGamut(color)) return color;
+    const [lightness, chroma, hue] = rectangularToPolar(oklab);
+    if (lightness >= 1) return {
+        r: 1,
+        g: 1,
+        b: 1,
+        alpha: 1
+    };
+    if (lightness <= 0) return {
+        r: 0,
+        g: 0,
+        b: 0,
+        alpha: 1
+    };
+    const JND = 0.02;
+    const EPSILON = 0.0001;
+    const atChroma = (c)=>encodeRgb(oklabToLinearRgb(polarToRectangular([
+            lightness,
+            c,
+            hue
+        ])));
+    const deltaE = (a, b)=>Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+    let clipped = clip(color);
+    if (deltaE(rgbToOklab(clipped), oklab) < JND) return clipped;
+    let min = 0;
+    let max = chroma;
+    let minInGamut = true;
+    while(max - min > EPSILON){
+        const c = (min + max) / 2;
+        const current = atChroma(c);
+        if (minInGamut && isInGamut(current)) {
+            min = c;
+            continue;
+        }
+        clipped = clip(current);
+        const e = deltaE(rgbToOklab(clipped), polarToRectangular([
+            lightness,
+            c,
+            hue
+        ]));
+        if (e < JND) {
+            if (JND - e < EPSILON) break;
+            minInGamut = false;
+            min = c;
+        } else max = c;
+    }
+    return clipped;
+};
+const labToRgb = ([l, a, b])=>{
+    const k = 24389 / 27;
+    const e = 216 / 24389;
+    const fy = (l + 16) / 116;
+    const fx = a / 500 + fy;
+    const fz = fy - b / 200;
+    const xyz = [
+        (fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / k) * 0.3457 / 0.3585,
+        l > k * e ? fy ** 3 : l / k,
+        (fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / k) * 0.2958 / 0.3585
+    ];
+    const d65 = [
+        0.955473421488075 * xyz[0] - 0.02309845494876471 * xyz[1] + 0.06325924320057072 * xyz[2],
+        -0.0283697093338637 * xyz[0] + 1.0099953980813041 * xyz[1] + 0.021041441191917323 * xyz[2],
+        0.012314014864481998 * xyz[0] - 0.020507649298898964 * xyz[1] + 1.330365926242124 * xyz[2]
+    ];
+    const linear = [
+        3.2409699419045226 * d65[0] - 1.537383177570094 * d65[1] - 0.4986107602930034 * d65[2],
+        -0.9692436362808796 * d65[0] + 1.8759675015077202 * d65[1] + 0.04155505740717559 * d65[2],
+        0.05563007969699366 * d65[0] - 0.20397695888897652 * d65[1] + 1.0569715142428786 * d65[2]
+    ];
+    const color = encodeRgb(linear);
+    return isInGamut(color) ? color : oklabToRgb(linearRgbToOklab(linear));
+};
+const parseColorMix = (nodes)=>{
+    const parts = splitByComma(nodes);
+    if (3 !== parts.length) return;
+    const space = mixSpace(parts[0]);
+    const first = mixColor(parts[1]);
+    const second = mixColor(parts[2]);
+    if (!space || !first || !second) return;
+    let p1 = first.percentage;
+    let p2 = second.percentage;
+    if (void 0 === p1 && void 0 === p2) p1 = p2 = 50;
+    else if (void 0 === p1) p1 = 100 - p2;
+    else if (void 0 === p2) p2 = 100 - p1;
+    const sum = p1 + p2;
+    if (sum <= 0) return;
+    const mixed = interpolate(space, first.color, second.color, p2 / sum);
+    return {
+        ...mixed,
+        alpha: mixed.alpha * Math.min(sum, 100) / 100
+    };
+};
+const splitByComma = (nodes)=>{
+    const parts = [
+        []
+    ];
+    for (const node of nodes)if ('div' === node.type && ',' === node.value) parts.push([]);
+    else if ('space' !== node.type && 'comment' !== node.type) parts[parts.length - 1].push(node);
+    return parts;
+};
+const MIX_SPACES = new Set([
+    'srgb',
+    'srgb-linear',
+    'oklab',
+    'oklch'
+]);
+const mixSpace = (nodes)=>{
+    const words = nodes.map((node)=>node.value.toLowerCase());
+    const [keyword, space, ...hue] = words;
+    const defaultHue = 0 === hue.length || 'shorter' === hue[0] && 'hue' === hue[1];
+    return 'in' === keyword && MIX_SPACES.has(space) && defaultHue ? space : void 0;
+};
+const mixColor = (nodes)=>{
+    let color;
+    let percentage;
+    for (const node of nodes){
+        const unit = 'word' === node.type && postcss_value_parser.unit(node.value);
+        if (unit && '%' === unit.unit && void 0 === percentage) percentage = Number(unit.number);
+        else {
+            if (color) return;
+            color = parseColor(node);
+            if (!color) return;
+        }
+    }
+    return color && {
+        color,
+        percentage
+    };
+};
+const interpolate = (space, from, to, weight)=>{
+    const alpha = from.alpha * (1 - weight) + to.alpha * weight;
+    if (0 === alpha) return {
+        r: 0,
+        g: 0,
+        b: 0,
+        alpha: 0
+    };
+    const blend = (a, b)=>(a * from.alpha * (1 - weight) + b * to.alpha * weight) / alpha;
+    switch(space){
+        case 'srgb':
+            return {
+                r: blend(from.r, to.r),
+                g: blend(from.g, to.g),
+                b: blend(from.b, to.b),
+                alpha
+            };
+        case 'srgb-linear':
+            return {
+                ...encodeRgb([
+                    blend(gammaDecode(from.r), gammaDecode(to.r)),
+                    blend(gammaDecode(from.g), gammaDecode(to.g)),
+                    blend(gammaDecode(from.b), gammaDecode(to.b))
+                ]),
+                alpha
+            };
+        case 'oklab':
+            {
+                const a = rgbToOklab(from);
+                const b = rgbToOklab(to);
+                return {
+                    ...oklabToRgb([
+                        blend(a[0], b[0]),
+                        blend(a[1], b[1]),
+                        blend(a[2], b[2])
+                    ]),
+                    alpha
+                };
+            }
+        default:
+            {
+                const a = rectangularToPolar(rgbToOklab(from));
+                const b = rectangularToPolar(rgbToOklab(to));
+                const powerless = (color, source)=>color[1] < 1e-4 || 0 === source.alpha;
+                const hueA = powerless(a, from) ? b[2] : a[2];
+                const hueB = powerless(b, to) ? a[2] : b[2];
+                let delta = hueB - hueA;
+                if (delta > 180) delta -= 360;
+                else if (delta < -180) delta += 360;
+                const hue = hueA + delta * weight;
+                return {
+                    ...oklabToRgb(polarToRectangular([
+                        blend(a[0], b[0]),
+                        blend(a[1], b[1]),
+                        hue
+                    ])),
+                    alpha
+                };
+            }
+    }
+};
+const LYNX_PROPERTIES = new Set([
+    '-x-animation-color-interpolation',
+    '-x-app-region',
+    '-x-auto-font-size',
+    '-x-auto-font-size-line-ranges',
+    '-x-auto-font-size-preset-sizes',
+    '-x-box-match-parent-size',
+    '-x-box-propagate-min-constraints',
+    '-x-caret-gradient',
+    '-x-caret-height',
+    '-x-caret-radius',
+    '-x-caret-width',
+    '-x-handle-color',
+    '-x-handle-size',
+    '-x-placeholder-color',
+    '-x-placeholder-font-family',
+    '-x-placeholder-font-size',
+    '-x-placeholder-font-style',
+    '-x-placeholder-font-weight',
+    '-x-text-decoration-gap',
+    '-x-text-decoration-width',
+    'adapt-font-size',
+    'align-content',
+    'align-items',
+    'align-self',
+    'animation',
+    'animation-delay',
+    'animation-direction',
+    'animation-duration',
+    'animation-fill-mode',
+    'animation-iteration-count',
+    'animation-name',
+    'animation-play-state',
+    'animation-timing-function',
+    'aspect-ratio',
+    'background',
+    'background-clip',
+    'background-color',
+    'background-image',
+    'background-origin',
+    'background-position',
+    'background-repeat',
+    'background-size',
+    'border',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-bottom-style',
+    'border-bottom-width',
+    'border-color',
+    'border-end-end-radius',
+    'border-end-start-radius',
+    'border-inline-end-color',
+    'border-inline-end-style',
+    'border-inline-end-width',
+    'border-inline-start-color',
+    'border-inline-start-style',
+    'border-inline-start-width',
+    'border-left',
+    'border-left-color',
+    'border-left-style',
+    'border-left-width',
+    'border-radius',
+    'border-right',
+    'border-right-color',
+    'border-right-style',
+    'border-right-width',
+    'border-start-end-radius',
+    'border-start-start-radius',
+    'border-style',
+    'border-top',
+    'border-top-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-top-style',
+    'border-top-width',
+    'border-width',
+    'bottom',
+    'box-shadow',
+    'box-sizing',
+    'caret-color',
+    'clip-path',
+    'color',
+    'column-gap',
+    'content',
+    'cursor',
+    'direction',
+    'display',
+    'enter-transition-name',
+    'exit-transition-name',
+    'filter',
+    'flex',
+    'flex-basis',
+    'flex-direction',
+    'flex-flow',
+    'flex-grow',
+    'flex-shrink',
+    'flex-wrap',
+    'font-family',
+    'font-feature-settings',
+    'font-optical-sizing',
+    'font-size',
+    'font-style',
+    'font-variation-settings',
+    'font-weight',
+    'gap',
+    'grid-auto-columns',
+    'grid-auto-flow',
+    'grid-auto-rows',
+    'grid-column',
+    'grid-column-end',
+    'grid-column-gap',
+    'grid-column-span',
+    'grid-column-start',
+    'grid-row',
+    'grid-row-end',
+    'grid-row-gap',
+    'grid-row-span',
+    'grid-row-start',
+    'grid-template-columns',
+    'grid-template-rows',
+    'height',
+    'hyphens',
+    'image-rendering',
+    'implicit-animation',
+    'inset-inline-end',
+    'inset-inline-start',
+    'justify-content',
+    'justify-items',
+    'justify-self',
+    'layout-animation-create-delay',
+    'layout-animation-create-duration',
+    'layout-animation-create-property',
+    'layout-animation-create-timing-function',
+    'layout-animation-delete-delay',
+    'layout-animation-delete-duration',
+    'layout-animation-delete-property',
+    'layout-animation-delete-timing-function',
+    'layout-animation-update-delay',
+    'layout-animation-update-duration',
+    'layout-animation-update-timing-function',
+    'left',
+    'letter-spacing',
+    'line-height',
+    'line-spacing',
+    'linear-cross-gravity',
+    'linear-direction',
+    'linear-gravity',
+    'linear-layout-gravity',
+    'linear-orientation',
+    'linear-weight',
+    'linear-weight-sum',
+    'list-cross-axis-gap',
+    'list-main-axis-gap',
+    'margin',
+    'margin-bottom',
+    'margin-inline-end',
+    'margin-inline-start',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'mask',
+    'mask-clip',
+    'mask-composite',
+    'mask-image',
+    'mask-origin',
+    'mask-position',
+    'mask-repeat',
+    'mask-size',
+    'max-height',
+    'max-width',
+    'min-height',
+    'min-width',
+    'offset-distance',
+    'offset-path',
+    'offset-rotate',
+    'opacity',
+    'order',
+    'outline',
+    'outline-color',
+    'outline-style',
+    'outline-width',
+    'overflow',
+    'overflow-x',
+    'overflow-y',
+    'padding',
+    'padding-bottom',
+    'padding-inline-end',
+    'padding-inline-start',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'pause-transition-name',
+    'perspective',
+    'pointer-events',
+    'position',
+    'relative-align-bottom',
+    'relative-align-inline-end',
+    'relative-align-inline-start',
+    'relative-align-left',
+    'relative-align-right',
+    'relative-align-top',
+    'relative-bottom-of',
+    'relative-center',
+    'relative-id',
+    'relative-inline-end-of',
+    'relative-inline-start-of',
+    'relative-layout-once',
+    'relative-left-of',
+    'relative-right-of',
+    'relative-top-of',
+    'resume-transition-name',
+    'right',
+    'row-gap',
+    'text-align',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-thickness',
+    'text-indent',
+    'text-overflow',
+    'text-shadow',
+    'text-stroke',
+    'text-stroke-color',
+    'text-stroke-width',
+    'top',
+    'transform',
+    'transform-origin',
+    'transition',
+    'transition-delay',
+    'transition-duration',
+    'transition-property',
+    'transition-timing-function',
+    'vertical-align',
+    'visibility',
+    'white-space',
+    'width',
+    'word-break',
+    'z-index'
+]);
+const LYNX_KEYWORDS = new Map(Object.entries({
+    '-x-animation-color-interpolation': [
+        'auto',
+        'srgb',
+        'linearrgb'
+    ],
+    '-x-app-region': [
+        'none',
+        'drag',
+        'no-drag'
+    ],
+    '-x-placeholder-font-style': [
+        'normal',
+        'italic',
+        'oblique'
+    ],
+    '-x-placeholder-font-weight': [
+        'normal',
+        'bold',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '900'
+    ],
+    'align-content': [
+        'flex-start',
+        'flex-end',
+        'center',
+        'stretch',
+        'space-between',
+        'space-around',
+        'start',
+        'end'
+    ],
+    'box-sizing': [
+        'border-box',
+        'content-box',
+        'auto'
+    ],
+    direction: [
+        'normal',
+        'lynx-rtl',
+        'rtl',
+        'ltr'
+    ],
+    display: [
+        'none',
+        'flex',
+        'grid',
+        'linear',
+        'relative',
+        'block',
+        'auto',
+        '-x-box'
+    ],
+    'flex-direction': [
+        'column',
+        'row',
+        'row-reverse',
+        'column-reverse'
+    ],
+    'flex-wrap': [
+        'wrap',
+        'nowrap',
+        'wrap-reverse'
+    ],
+    'font-optical-sizing': [
+        'none',
+        'auto'
+    ],
+    'font-style': [
+        'normal',
+        'italic',
+        'oblique'
+    ],
+    'font-weight': [
+        'normal',
+        'bold',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '900'
+    ],
+    hyphens: [
+        'none',
+        'manual',
+        'auto'
+    ],
+    'image-rendering': [
+        'auto',
+        'crisp-edges',
+        'pixelated'
+    ],
+    'justify-content': [
+        'flex-start',
+        'center',
+        'flex-end',
+        'space-between',
+        'space-around',
+        'space-evenly',
+        'stretch',
+        'start',
+        'end'
+    ],
+    'linear-cross-gravity': [
+        'none',
+        'start',
+        'end',
+        'center',
+        'stretch'
+    ],
+    'linear-gravity': [
+        'none',
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'center-vertical',
+        'center-horizontal',
+        'space-between',
+        'start',
+        'end',
+        'center'
+    ],
+    'linear-layout-gravity': [
+        'none',
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'center-vertical',
+        'center-horizontal',
+        'fill-vertical',
+        'fill-horizontal',
+        'center',
+        'stretch',
+        'start',
+        'end'
+    ],
+    'linear-orientation': [
+        'horizontal',
+        'vertical',
+        'horizontal-reverse',
+        'vertical-reverse',
+        'row',
+        'column',
+        'row-reverse',
+        'column-reverse'
+    ],
+    'pointer-events': [
+        'auto',
+        'none'
+    ],
+    position: [
+        'absolute',
+        'relative',
+        'fixed',
+        'sticky'
+    ],
+    'relative-center': [
+        'none',
+        'vertical',
+        'horizontal',
+        'both'
+    ],
+    'text-align': [
+        'left',
+        'center',
+        'right',
+        'start',
+        'end',
+        'justify'
+    ],
+    'text-overflow': [
+        'clip',
+        'ellipsis'
+    ],
+    visibility: [
+        'hidden',
+        'visible',
+        'none',
+        'collapse'
+    ],
+    'white-space': [
+        'normal',
+        'nowrap'
+    ],
+    'word-break': [
+        'normal',
+        'break-all',
+        'keep-all'
+    ]
+}).map(([property, keywords])=>[
+        property,
+        new Set(keywords)
+    ]));
+const COMPOSED_TRANSFORM = "translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) scale(var(--tw-scale-x), var(--tw-scale-y)) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)";
+const TRANSFORM_DEFAULTS = new Map([
+    [
+        '--tw-translate-x',
+        '0'
+    ],
+    [
+        '--tw-translate-y',
+        '0'
+    ],
+    [
+        '--tw-translate-z',
+        '0'
+    ],
+    [
+        '--tw-rotate',
+        '0deg'
+    ],
+    [
+        '--tw-scale-x',
+        '1'
+    ],
+    [
+        '--tw-scale-y',
+        '1'
+    ]
+]);
+const lowerDeclarations = (rule, channelVariables = new Set())=>{
+    const composed = [];
+    for (const declaration of rule.nodes.slice())if ('decl' === declaration.type) {
+        declaration.value = lowerColors(declaration.value, channelVariables);
+        if (lowerTransformProperty(declaration)) {
+            composed.push(declaration);
+            continue;
+        }
+        lowerValue(declaration);
+        expandLogical(declaration);
+    }
+    if (composed.length > 0) {
+        composed[composed.length - 1].before({
+            prop: 'transform',
+            value: COMPOSED_TRANSFORM
+        });
+        for (const declaration of composed)declaration.remove();
+    }
+    dropUnsupportedProperties(rule);
+    return {
+        composesTransform: composed.length > 0
+    };
+};
+const TRANSFORM_VARIABLES = /^--tw-(?:translate-[xyz]|rotate(?:-[xyz])?|skew-[xy]|scale-[xyz])$/;
+const lowerTransformVariables = (root)=>{
+    root.walkDecls(TRANSFORM_VARIABLES, (declaration)=>{
+        declaration.value = transformValue(declaration.prop, declaration.value);
+    });
+};
+const lowerTransformProperty = (declaration)=>{
+    const { prop } = declaration;
+    const values = splitSpaces(declaration.value);
+    switch(prop){
+        case 'translate':
+            if (!isTailwindComposition(values, '--tw-translate-')) {
+                const [x, y = '0', z = '0'] = 'none' === values[0] ? [
+                    '0',
+                    '0',
+                    '0'
+                ] : values;
+                setVariables(declaration, {
+                    '--tw-translate-x': x,
+                    '--tw-translate-y': y,
+                    '--tw-translate-z': z
+                });
+            }
+            break;
+        case 'rotate':
+            if (1 !== values.length) return false;
+            setVariables(declaration, {
+                '--tw-rotate': 'none' === values[0] ? '0deg' : values[0]
+            });
+            break;
+        case 'scale':
+            if (!isTailwindComposition(values, '--tw-scale-')) {
+                const [x, y = x] = 'none' === values[0] ? [
+                    '1',
+                    '1'
+                ] : values;
+                setVariables(declaration, {
+                    '--tw-scale-x': x,
+                    '--tw-scale-y': y
+                });
+            }
+            break;
+        case 'transform':
+            if (!isTailwindComposition(values, '--tw-')) return false;
+            break;
+        default:
+            return false;
+    }
+    return true;
+};
+const isTailwindComposition = (values, prefix)=>values.length > 0 && values.every((value)=>value.startsWith(`var(${prefix}`));
+const setVariables = (declaration, variables)=>{
+    for (const [prop, value] of Object.entries(variables))declaration.before({
+        prop,
+        value: transformValue(prop, value)
+    });
+};
+const transformValue = (prop, value)=>{
+    const folded = foldCalc(value);
+    if (!prop.startsWith('--tw-scale-')) return folded;
+    const unit = postcss_value_parser.unit(folded);
+    return unit && '%' === unit.unit ? String(Number(unit.number) / 100) : folded;
+};
+const splitSpaces = (value)=>postcss_value_parser(value).nodes.filter((node)=>'space' !== node.type && 'comment' !== node.type).map((node)=>postcss_value_parser.stringify(node));
+const lowerValue = (declaration)=>{
+    switch(declaration.prop){
+        case 'opacity':
+            {
+                const unit = postcss_value_parser.unit(declaration.value);
+                if (unit && '%' === unit.unit) declaration.value = String(Number(unit.number) / 100);
+                break;
+            }
+        case 'text-decoration-line':
+            declaration.prop = 'text-decoration';
+            break;
+        case 'transition-property':
+            declaration.value = lowerTransitionProperty(declaration.value);
+            break;
+        case '--tw-gradient-position':
+            declaration.value = lowerGradientPosition(declaration);
+            break;
+        default:
+            if (/\binfinity\b/i.test(declaration.value)) declaration.value = foldCalc(declaration.value);
+            declaration.value = clampHugeNumbers(declaration.value);
+            break;
+    }
+};
+const lowerTransitionProperty = (value)=>{
+    const properties = value.split(',').map((property)=>{
+        const name = property.trim().toLowerCase();
+        return [
+            'translate',
+            'rotate',
+            'scale'
+        ].includes(name) ? 'transform' : name;
+    }).filter((name)=>'all' === name || 'none' === name || LYNX_PROPERTIES.has(name));
+    return [
+        ...new Set(properties)
+    ].join(', ') || 'none';
+};
+const lowerGradientPosition = (declaration)=>{
+    const position = declaration.value.replace(/\s*\bin\s+[a-z0-9-]+(?:\s+(?:shorter|longer|increasing|decreasing)\s+hue)?/gi, '').trim();
+    if (position) return position;
+    let gradient = 'linear';
+    declaration.parent?.walkDecls('background-image', ({ value })=>{
+        gradient = /^(radial|conic)-gradient\(/.exec(value)?.[1] ?? gradient;
+    });
+    return ({
+        linear: 'to bottom',
+        radial: 'ellipse',
+        conic: 'from 0deg'
+    })[gradient];
+};
+const LOGICAL_PAIRS = {
+    'padding-inline': [
+        'padding-left',
+        'padding-right'
+    ],
+    'padding-block': [
+        'padding-top',
+        'padding-bottom'
+    ],
+    'margin-inline': [
+        'margin-left',
+        'margin-right'
+    ],
+    'margin-block': [
+        'margin-top',
+        'margin-bottom'
+    ],
+    'inset-inline': [
+        'left',
+        'right'
+    ],
+    'inset-block': [
+        'top',
+        'bottom'
+    ],
+    'border-inline-width': [
+        'border-left-width',
+        'border-right-width'
+    ],
+    'border-block-width': [
+        'border-top-width',
+        'border-bottom-width'
+    ],
+    'border-inline-style': [
+        'border-left-style',
+        'border-right-style'
+    ],
+    'border-block-style': [
+        'border-top-style',
+        'border-bottom-style'
+    ],
+    'border-inline-color': [
+        'border-left-color',
+        'border-right-color'
+    ],
+    'border-block-color': [
+        'border-top-color',
+        'border-bottom-color'
+    ]
+};
+const LOGICAL_BOTH_SIDES = {
+    'border-inline': [
+        'border-left',
+        'border-right'
+    ],
+    'border-block': [
+        'border-top',
+        'border-bottom'
+    ]
+};
+const LOGICAL_LONGHANDS = {
+    'padding-inline-start': 'padding-left',
+    'padding-inline-end': 'padding-right',
+    'padding-block-start': 'padding-top',
+    'padding-block-end': 'padding-bottom',
+    'margin-inline-start': 'margin-left',
+    'margin-inline-end': 'margin-right',
+    'margin-block-start': 'margin-top',
+    'margin-block-end': 'margin-bottom',
+    'inset-inline-start': 'left',
+    'inset-inline-end': 'right',
+    'inset-block-start': 'top',
+    'inset-block-end': 'bottom',
+    'border-inline-start': 'border-left',
+    'border-inline-end': 'border-right',
+    'border-block-start': 'border-top',
+    'border-block-end': 'border-bottom',
+    'border-inline-start-width': 'border-left-width',
+    'border-inline-end-width': 'border-right-width',
+    'border-block-start-width': 'border-top-width',
+    'border-block-end-width': 'border-bottom-width',
+    'border-inline-start-style': 'border-left-style',
+    'border-inline-end-style': 'border-right-style',
+    'border-block-start-style': 'border-top-style',
+    'border-block-end-style': 'border-bottom-style',
+    'border-inline-start-color': 'border-left-color',
+    'border-inline-end-color': 'border-right-color',
+    'border-block-start-color': 'border-top-color',
+    'border-block-end-color': 'border-bottom-color',
+    'border-start-start-radius': 'border-top-left-radius',
+    'border-start-end-radius': 'border-top-right-radius',
+    'border-end-start-radius': 'border-bottom-left-radius',
+    'border-end-end-radius': 'border-bottom-right-radius'
+};
+const expandLogical = (declaration)=>{
+    const { prop, value, important } = declaration;
+    const longhand = LOGICAL_LONGHANDS[prop];
+    if (longhand) {
+        declaration.prop = longhand;
+        return;
+    }
+    let expanded;
+    const pair = LOGICAL_PAIRS[prop];
+    const bothSides = LOGICAL_BOTH_SIDES[prop];
+    if (pair) {
+        const [start, end = start] = splitSpaces(value);
+        expanded = [
+            [
+                pair[0],
+                start
+            ],
+            [
+                pair[1],
+                end
+            ]
+        ];
+    } else if (bothSides) expanded = [
+        [
+            bothSides[0],
+            value
+        ],
+        [
+            bothSides[1],
+            value
+        ]
+    ];
+    else if ('inset' === prop) {
+        const [top, right = top, bottom = top, left = right] = splitSpaces(value);
+        expanded = [
+            [
+                'top',
+                top
+            ],
+            [
+                'right',
+                right
+            ],
+            [
+                'bottom',
+                bottom
+            ],
+            [
+                'left',
+                left
+            ]
+        ];
+    }
+    if (!expanded) return;
+    for (const [physical, physicalValue] of expanded)declaration.before({
+        prop: physical,
+        value: physicalValue,
+        important
+    });
+    declaration.remove();
+};
+const dropUnsupportedProperties = (rule)=>{
+    rule.each((node)=>{
+        if ('decl' !== node.type || node.prop.startsWith('--')) return;
+        const prop = node.prop.toLowerCase();
+        const keywords = LYNX_KEYWORDS.get(prop);
+        const value = node.value.trim().toLowerCase();
+        if (!LYNX_PROPERTIES.has(prop) || void 0 !== keywords && /^[a-z-]+$/.test(value) && !GLOBAL_KEYWORDS.has(value) && !keywords.has(value)) node.remove();
+    });
+};
+const GLOBAL_KEYWORDS = new Set([
+    'inherit',
+    'initial',
+    'unset',
+    'revert'
+]);
+const lowerSelectors = (rule)=>{
+    const selectors = rule.selectors.filter((selector)=>!/(?<!\\):host\b/.test(selector)).flatMap(unwrapWhereAndIs);
+    if (0 === selectors.length) return false;
+    rule.selectors = selectors.every((selector)=>NOT_LAST_CHILD.test(selector)) && mirrorBetweenChildren(rule) ? selectors.map((selector)=>selector.replace(NOT_LAST_CHILD, ' > * + *')) : selectors;
+    return true;
+};
+const unwrapWhereAndIs = (selector)=>{
+    const match = /^:(?:where|is)\(/i.exec(selector);
+    if (!match || closingParenthesis(selector, match[0].length) !== selector.length - 1) return [
+        selector
+    ];
+    return splitTopLevel(selector.slice(match[0].length, -1)).flatMap(unwrapWhereAndIs);
+};
+const closingParenthesis = (text, start)=>{
+    let depth = 1;
+    for(let index = start; index < text.length; index++){
+        const character = text[index];
+        if ('\\' === character) index++;
+        else if ('(' === character) depth++;
+        else if (')' === character && 0 === --depth) return index;
+    }
+    return -1;
+};
+const splitTopLevel = (list)=>{
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for(let index = 0; index < list.length; index++){
+        const character = list[index];
+        if ('\\' === character) {
+            current += list.slice(index, index + 2);
+            index++;
+            continue;
+        }
+        if ('(' === character) depth++;
+        else if (')' === character) depth--;
+        else if (',' === character && 0 === depth) {
+            parts.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += character;
+    }
+    parts.push(current.trim());
+    return parts;
+};
+const NOT_LAST_CHILD = /\s*>\s*:not\(:last-child\)$/;
+const OPPOSITE_SIDES = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+    'block-start': 'block-end',
+    'block-end': 'block-start',
+    'inline-start': 'inline-end',
+    'inline-end': 'inline-start'
+};
+const mirrorBetweenChildren = (rule)=>{
+    const sidesOnly = rule.nodes.every((node)=>'decl' !== node.type || node.prop.startsWith('--') || /^(margin|padding|border)-/.test(node.prop));
+    if (!sidesOnly) return false;
+    rule.walkDecls((declaration)=>{
+        if (declaration.prop.startsWith('--')) return;
+        declaration.prop = declaration.prop.replace(/\b(top|bottom|left|right|block-start|block-end|inline-start|inline-end)\b/, (side)=>OPPOSITE_SIDES[side]);
+    });
+    return true;
+};
+const flattenNesting = (root)=>{
+    root.each((node)=>{
+        flattenNode(node);
+    });
+};
+const flattenNode = (node)=>{
+    if ('rule' === node.type) flattenRule(node);
+    else if ('atrule' === node.type && node.nodes) node.each((child)=>{
+        flattenNode(child);
+    });
+};
+const flattenRule = (rule)=>{
+    let last = rule;
+    for (const child of rule.nodes.slice())if ('rule' === child.type) {
+        child.selectors = resolveNested(child.selectors, rule.selectors);
+        last.after(child);
+        last = flattenRule(child);
+    } else if ('atrule' === child.type) {
+        wrapDeclarations(child, rule);
+        last.after(child);
+        last = child;
+        flattenNode(child);
+    }
+    return last;
+};
+const wrapDeclarations = (atRule, rule)=>{
+    if (!atRule.nodes) return;
+    for (const child of atRule.nodes)if ('rule' === child.type) child.selectors = resolveNested(child.selectors, rule.selectors);
+    else if ('atrule' === child.type) wrapDeclarations(child, rule);
+    const declarations = atRule.nodes.filter((node)=>'decl' === node.type);
+    if (declarations.length > 0) {
+        const wrapper = rule.clone();
+        wrapper.removeAll();
+        wrapper.append(declarations);
+        atRule.prepend(wrapper);
+    }
+};
+const resolveNested = (selectors, parents)=>parents.flatMap((parent)=>selectors.map((selector)=>/(?<!\\)&/.test(selector) ? selector.replaceAll(/(?<!\\)&/g, parent) : `${parent} ${selector}`));
+const unwrapLayers = (container)=>{
+    container.each((node)=>{
+        if ('atrule' !== node.type) return;
+        if ('layer' === node.name.toLowerCase()) if (node.nodes) {
+            unwrapLayers(node);
+            node.replaceWith(node.nodes);
+        } else node.remove();
+        else if (node.nodes) unwrapLayers(node);
+    });
+};
+const takePropertyRegistrations = (root)=>{
+    const initialValues = new Map();
+    root.walkAtRules(/^property$/i, (atRule)=>{
+        atRule.walkDecls('initial-value', (declaration)=>{
+            initialValues.set(atRule.params.trim(), declaration.value);
+        });
+        atRule.remove();
+    });
+    root.walkAtRules(/^supports$/i, (atRule)=>{
+        const rules = atRule.nodes?.filter((node)=>'rule' === node.type) ?? [];
+        if (rules.length > 0 && rules.every((rule)=>rule.selector.includes('::backdrop'))) atRule.remove();
+    });
+    return initialValues;
+};
+const removeEmptyContainers = (container)=>{
+    container.each((node)=>{
+        if ('rule' !== node.type && 'atrule' !== node.type) return;
+        if (!node.nodes) return;
+        removeEmptyContainers(node);
+        if (node.nodes.every((child)=>'comment' === child.type)) node.remove();
+    });
+};
+const IMPLIED_KEYFRAME_VALUES = {
+    transform: 'none',
+    opacity: '1'
+};
+const completeKeyframes = (root)=>{
+    root.walkAtRules(/^(?:-webkit-)?keyframes$/i, (atRule)=>{
+        const offsets = new Set();
+        const properties = new Set();
+        atRule.walkRules((rule)=>{
+            for (const selector of rule.selectors)offsets.add({
+                from: '0%',
+                to: '100%'
+            }[selector.toLowerCase()] ?? selector);
+            rule.walkDecls(({ prop })=>{
+                if (prop in IMPLIED_KEYFRAME_VALUES) properties.add(prop);
+            });
+        });
+        const first = atRule.first;
+        if (0 === properties.size || first?.type !== 'rule') return;
+        for (const [offset, selector] of [
+            [
+                '0%',
+                'from'
+            ],
+            [
+                '100%',
+                'to'
+            ]
+        ]){
+            if (offsets.has(offset)) continue;
+            const keyframe = first.clone({
+                selector
+            });
+            keyframe.removeAll();
+            for (const prop of properties)keyframe.append({
+                prop,
+                value: IMPLIED_KEYFRAME_VALUES[prop]
+            });
+            if ('from' === selector) atRule.prepend(keyframe);
+            else atRule.append(keyframe);
+        }
+    });
+};
+const resolveNestedVariables = (root, registrations)=>{
+    const theme = themeVariables(root);
+    root.walkDecls(/^--/, (declaration)=>{
+        if (!declaration.value.includes('var(')) return;
+        const parsed = postcss_value_parser(declaration.value);
+        const lookup = (name)=>sameRuleValue(declaration, name) ?? theme.get(name) ?? registrations.get(name);
+        if (resolveInFunctions(parsed.nodes, false, lookup, new Set())) declaration.value = foldCalc(parsed.toString());
+    });
+};
+const themeVariables = (root)=>{
+    const variables = new Map();
+    root.walkRules((rule)=>{
+        if (rule.selectors.includes(':root')) rule.walkDecls(/^--/, ({ prop, value })=>{
+            variables.set(prop, value);
+        });
+    });
+    return variables;
+};
+const sameRuleValue = (declaration, name)=>{
+    let value;
+    declaration.parent.each((node)=>{
+        if ('decl' === node.type && node.prop === name && node !== declaration) value = node.value;
+    });
+    return value;
+};
+const resolveInFunctions = (nodes, insideFunction, lookup, seen)=>{
+    let changed = false;
+    for (const node of nodes){
+        if ('function' !== node.type) continue;
+        if ('var' !== node.value.toLowerCase()) {
+            changed = resolveInFunctions(node.nodes, true, lookup, seen) || changed;
+            continue;
+        }
+        const resolved = insideFunction ? resolveVariable(node, lookup, seen) : void 0;
+        if (void 0 === resolved) {
+            changed = resolveInFunctions(node.nodes, insideFunction, lookup, seen) || changed;
+            continue;
+        }
+        Object.assign(node, {
+            type: 'word',
+            value: resolved
+        });
+        changed = true;
+    }
+    return changed;
+};
+const resolveVariable = (node, lookup, seen)=>{
+    const name = node.nodes[0]?.value ?? '';
+    if (seen.has(name)) return;
+    const commaIndex = node.nodes.findIndex((child)=>'div' === child.type && ',' === child.value);
+    const fallback = -1 === commaIndex ? void 0 : postcss_value_parser.stringify(node.nodes.slice(commaIndex + 1)).trim();
+    const value = lookup(name) ?? fallback;
+    if (void 0 === value) return;
+    const parsed = postcss_value_parser(value);
+    resolveInFunctions(parsed.nodes, true, lookup, new Set([
+        ...seen,
+        name
+    ]));
+    return parsed.toString();
+};
+const TAILWIND_POSTCSS = '@tailwindcss/postcss';
+const tailwindForLynx = ()=>({
+        postcssPlugin: 'angular-lynx-tailwind',
+        OnceExit (root, { result, rule }) {
+            if (!compiledByTailwind(result)) return;
+            lowerForLynx(root, (selector)=>rule({
+                    selector
+                }));
+        }
+    });
+tailwindForLynx.postcss = true;
+const compiledByTailwind = (result)=>result.messages.some((message)=>message.plugin === TAILWIND_POSTCSS);
+const lowerForLynx = (root, createRule)=>{
+    flattenNesting(root);
+    unwrapLayers(root);
+    const registrations = takePropertyRegistrations(root);
+    const defaults = new Map(registrations);
+    const channelVariables = colorChannelVariables(root);
+    root.walkRules((rule)=>{
+        const inKeyframes = rule.parent?.type === 'atrule' && /keyframes$/i.test(rule.parent.name);
+        if (!inKeyframes && !lowerSelectors(rule)) return void rule.remove();
+        if (lowerDeclarations(rule, channelVariables).composesTransform) {
+            for (const [name, value] of TRANSFORM_DEFAULTS)if (!defaults.has(name)) defaults.set(name, value);
+        }
+    });
+    unwrapLoweredColorMixSupports(root);
+    resolveNestedVariables(root, registrations);
+    lowerTransformVariables(root);
+    completeKeyframes(root);
+    removeEmptyContainers(root);
+    if (defaults.size > 0) {
+        const defaultsRule = createRule('*');
+        for (const [prop, value] of defaults)defaultsRule.append({
+            prop,
+            value
+        });
+        const imports = root.nodes.filter((node)=>'atrule' === node.type && /^(charset|import)$/i.test(node.name));
+        if (imports.length > 0) imports[imports.length - 1].after(defaultsRule);
+        else root.prepend(defaultsRule);
+    }
+};
+const colorChannelVariables = (root)=>{
+    const names = new Set();
+    root.walkDecls(/^--.+-rgb$/, ({ prop })=>{
+        names.add(prop.slice(0, -4));
+    });
+    return names;
+};
+const unwrapLoweredColorMixSupports = (root)=>{
+    root.walkAtRules(/^supports$/i, (atRule)=>{
+        if (!atRule.params.includes('color-mix(') || !atRule.nodes) return;
+        let mixes = false;
+        atRule.walkDecls((declaration)=>{
+            mixes ||= declaration.value.includes('color-mix(');
+        });
+        if (!mixes) atRule.replaceWith(atRule.nodes);
+    });
+};
 const TAILWIND_CONFIG_FILES = [
     'tailwind.config.ts',
     'tailwind.config.js',
     'tailwind.config.mjs',
     'tailwind.config.cjs'
 ];
+const isTailwind = (plugin)=>'function' == typeof plugin ? 'tailwindcss' === plugin.name : plugin?.postcssPlugin === 'tailwindcss';
+const isTailwind4 = (plugin)=>plugin?.postcssPlugin === '@tailwindcss/postcss';
 const applyTailwind = (api)=>{
     const configFile = findUp(TAILWIND_CONFIG_FILES, process.cwd());
-    if (!configFile) return;
-    pluginTailwindCSS({
-        config: configFile,
-        exclude: [
-            /[\\/]node_modules[\\/]/
-        ]
-    }).setup(api);
+    let warned = false;
+    api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
+            tools: {
+                postcss: ({ postcssOptions }, { addPlugins })=>{
+                    const configured = 'object' == typeof postcssOptions ? postcssOptions.plugins ?? [] : [];
+                    if (configFile && !configured.some(isTailwind)) {
+                        const require = createRequire(configFile);
+                        const { version } = require('tailwindcss/package.json');
+                        if (Number.parseInt(version, 10) < 4) {
+                            const tailwindcss = require('tailwindcss');
+                            addPlugins(tailwindcss({
+                                config: configFile
+                            }));
+                        } else if (!configured.some(isTailwind4) && !warned) {
+                            warned = true;
+                            api.logger.warn(`Found ${configFile}, but Tailwind CSS ${version} is installed, which doesn't run from a Tailwind config file. List @tailwindcss/postcss in a .postcssrc.json, or run \`ng generate @blotch/angular-lynx:add-tailwind\`.`);
+                        }
+                    }
+                    addPlugins(tailwindForLynx());
+                }
+            }
+        }));
 };
+const DEPRECATED_OPTIONS = [
+    'enableICU',
+    'enableParallelElement',
+    'pipelineSchedulerConfig'
+];
+const deprecatedOptionsIn = (options)=>DEPRECATED_OPTIONS.filter((name)=>options?.[name] !== void 0);
 const normalizeOptions = (options)=>{
     const defaultOptions = {
         customCSSInheritanceList: void 0,
@@ -1779,20 +4160,19 @@ const normalizeOptions = (options)=>{
         enableCSSInheritance: false,
         enableCSSInvalidation: false,
         enableCSSSelector: true,
-        enableICU: false,
         enableNewGesture: true,
-        enableParallelElement: true,
         defaultDisplayLinear: true,
         enableRemoveCSSScope: false,
         enableSSR: false,
         pages: void 0,
-        pipelineSchedulerConfig: 0x00010000,
         targetSdkVersion: '3.2',
         defaultOverflowVisible: true,
         removeDescendantSelectorScope: false,
         experimental_isLazyBundle: false
     };
-    return Object.assign(defaultOptions, options);
+    const normalized = Object.assign(defaultOptions, options);
+    for (const name of DEPRECATED_OPTIONS)delete normalized[name];
+    return normalized;
 };
 const pluginAngularLynx = (options)=>({
         name: 'lynx:angular',
@@ -1801,12 +4181,18 @@ const pluginAngularLynx = (options)=>({
             ANGULAR_CLI_CONTEXT_PLUGIN_NAME
         ],
         setup: async (api)=>{
+            for (const name of deprecatedOptionsIn(options))api.logger.warn(`pluginAngularLynx(): the \`${name}\` option has no effect and will be removed in a future release. Remove it from your config.`);
             const normalizedOptions = normalizeOptions(options);
+            const backgroundEntries = createBackgroundEntries({
+                rootPath: api.context.rootPath
+            });
             applyCSS(api, normalizedOptions);
             applyTailwind(api);
-            applyEntry(api, normalizedOptions);
+            const appEntries = new Set();
+            applyEntry(api, normalizedOptions, backgroundEntries, appEntries);
             applyLayers(api);
-            const angularRules = applyAngularRules(api, normalizedOptions);
+            applyResolve(api);
+            const angularRules = applyAngularRules(api, normalizedOptions, backgroundEntries, appEntries);
             applyGenerator(api);
             applySplitChunksRule(api, normalizedOptions);
             applyDevLogger(api);