Refactor styles and content management with breaking changes

jest.config.ts

@@ -1,6 +1,5 @@
 import type {Config} from "jest";
 import {availableParallelism} from "node:os";
-import {fileURLToPath} from "node:url";
 
 const shared: Config = {
     rootDir: import.meta.dirname,
@@ -85,12 +84,6 @@ const config: Config = {
             ...shared,
             displayName: "unit-dom",
             testEnvironment: "jsdom",
-            // Content builders use the import-only await-lock package; exercise its real implementation.
-            moduleNameMapper: {
-                ...shared.moduleNameMapper,
-                "^await-lock$": fileURLToPath(import.meta.resolve("await-lock")),
-            },
-            transformIgnorePatterns: ["/node_modules/(?!await-lock/)"],
             testMatch: domTests,
         },
         {...shared, displayName: "build", testMatch: buildTests},

package.json

@@ -152,12 +152,10 @@
     "@rspack/core": "^1.7.5",
     "@rspack/lite-tapable": "^1.1.0",
     "@svgr/webpack": "^8.1.0",
-    "await-lock": "^3.0.0",
     "c12": "^3.3.2",
     "cac": "^6.7.14",
     "consola": "^3.4.2",
     "css-loader": "^7.1.2",
-    "debounce": "^2.2.0",
     "file-loader": "^6.2.0",
     "get-value": "^4.0.1",
     "html-rspack-tags-plugin": "^0.0.3",

src/cli/bundler/layers.ts

@@ -1,14 +1,11 @@
 import type {ContentScriptWorld} from "@typing/content";
 
-const ContentLayerPrefix = "adnbn:content:";
+// CSS classification is independent of the importing JavaScript module's layer.
+// Default styles follow each entry's delivery policy; ?unisolated always targets the document.
+export const DefaultStylesLayer = "adnbn:css:default";
+export const DocumentStylesLayer = "adnbn:css:document";
 
-// This is a bundler layer, not a CSS @layer. A distinct css-loader identity is
-// also required: CssExtract deduplicates dependencies by their loader request.
-export const IsolatedStylesLayer = "adnbn:css:isolation";
-
-/** Shared build identity for content and Relay modules, independent of their UI isolation. */
+/** JavaScript identity depends on the execution world, never on CSS delivery. */
 export const getContentLayer = (world: ContentScriptWorld): string => {
-    return `${ContentLayerPrefix}${world.toLowerCase()}`;
+    return `adnbn:content:${world.toLowerCase()}`;
 };
-
-export const isContentLayer = (layer: string): boolean => layer.startsWith(ContentLayerPrefix);

src/cli/bundler/plugins/build-assets-map/BuildAssetsMapPlugin.test.ts

@@ -228,6 +228,7 @@ const compile = async (
         betaCssChange?: boolean;
         buildHashSalt?: string;
         cssDir?: string;
+        cssChunkDir?: string;
         cssFullHashCallback?: boolean;
         fullHashCallback?: boolean;
         htmlChunks?: readonly string[];
@@ -269,6 +270,11 @@ const compile = async (
         ? "[name].[app].[fullhash:8].css"
         : "[name].[app].[contenthash:8].css";
     const cssFilename = appFilenameResolver(AppName, () => cssTemplate, options.cssDir ?? "custom/css");
+    const cssChunkFilename = appFilenameResolver(
+        AppName,
+        () => cssTemplate,
+        options.cssChunkDir ?? options.cssDir ?? "custom/css"
+    );
     const assetFilename = appFilenameResolver(AppName, () => "[name].[app].[contenthash:8][ext]", "custom/assets");
     const background =
         options.background === "async"
@@ -395,7 +401,7 @@ const compile = async (
                 : false,
         },
         plugins: [
-            new CssExtractRspackPlugin({filename: cssFilename, chunkFilename: cssFilename}),
+            new CssExtractRspackPlugin({filename: cssFilename, chunkFilename: cssChunkFilename}),
             ...(options.betaCssChange
                 ? [
                       new NormalModuleReplacementPlugin(/beta\.css$/, resource => {
@@ -429,7 +435,7 @@ const compile = async (
             new BuildAssetsMapPlugin({
                 module: EntrypointAssetsModule,
                 buildHashSalt: options.buildHashSalt,
-                cssChunkFilename: cssFilename,
+                cssChunkFilename,
                 cssFilename,
                 fullMapEntrypoint: "background",
             }),
@@ -928,20 +934,23 @@ describe("BuildAssetsMapPlugin", () => {
         expectNoChangedBytesUnderStableNames(before, after);
     });
 
-    test("does not invent a JavaScript file for a CSS-only shared chunk", async () => {
-        const build = await compile(true, {sharedCssChunk: true});
-        const sharedCss = build.assets.alpha.initial.css.find(file => build.assets.beta.initial.css.includes(file));
-
-        expect(sharedCss).toMatch(/^custom\/css\/shared-styles\..+\.css$/);
-        expect(build.assets.alpha.initial.js.some(file => file.includes("shared-styles"))).toBe(false);
-        expect(build.assets.beta.initial.js.some(file => file.includes("shared-styles"))).toBe(false);
-        expect(executeEntrypoint(build, "alpha").sandbox.__alphaEntrypointAssets).toEqual(
-            runtimeAssets(build.assets.alpha)
-        );
-        expect(executeEntrypoint(build, "beta").sandbox.__betaEntrypointAssets).toEqual(
-            runtimeAssets(build.assets.beta)
-        );
-    });
+    test.each(["custom/css", "lazy/css"])(
+        "maps CSS-only initial shared chunks with async directory %s",
+        async cssChunkDir => {
+            const build = await compile(true, {sharedCssChunk: true, cssChunkDir});
+            const sharedCss = build.assets.alpha.initial.css.find(file => build.assets.beta.initial.css.includes(file));
+
+            expect(sharedCss).toMatch(/^custom\/css\/shared-styles\..+\.css$/);
+            expect(build.assets.alpha.initial.js.some(file => file.includes("shared-styles"))).toBe(false);
+            expect(build.assets.beta.initial.js.some(file => file.includes("shared-styles"))).toBe(false);
+            expect(executeEntrypoint(build, "alpha").sandbox.__alphaEntrypointAssets).toEqual(
+                runtimeAssets(build.assets.alpha)
+            );
+            expect(executeEntrypoint(build, "beta").sandbox.__betaEntrypointAssets).toEqual(
+                runtimeAssets(build.assets.beta)
+            );
+        }
+    );
 
     test("keeps configured CSS directories inside callback-generated names", async () => {
         const [css, styles] = await Promise.all([