githubmirror/webpack

examples/css/webpack.config.js
95 строк3 KB
Alexander Akait
feat: scope view-transition names in CSS modules (#21486)
23 июл 2026, 16:54
23 июл 2026, 16:54828a65c
"use strict";

const fs = require("fs");

/** @typedef {import("webpack").Compiler} Compiler */

/**
 * Renders a CSS module's export map into a `.d.ts`, using the object form that
 * typed-css-modules and similar tools emit: quoted keys handle every class name
 * (kebab-case, reserved words like `default`) with no special-casing.
 * Paired with `parser: { namedExports: false }` below, the CSS module's default
 * export is that object, so `import styles from "./x.module.css"` is typed.
 * @param {Map<string, string>} exports the original-name -> scoped-name map
 * @returns {string} the `.d.ts` contents
 */
const toDts = (exports) => {
	const lines = [
		"// Generated by CssModuleTypesPlugin. Do not edit.",
		"declare const styles: {"
	];
	for (const name of [...exports.keys()].sort()) {
		lines.push(`\treadonly ${JSON.stringify(name)}: string;`);
	}
	lines.push("};", "export default styles;", "");
	return lines.join("\n");
};

/**
 * Writes a TypeScript declaration **next to each CSS module** (e.g.
 * `style.module.css.d.ts` beside `style.module.css`) so editors and `tsc` type
 * `import styles from "./x.module.css"`. The names come from
 * `module.buildInfo.cssData.exports` (a `Map<string, string>` of original name
 * -> generated scoped name) — the same source webpack uses for the JS exports,
 * and the same data Lightning CSS returns as `exports` from `transform()`, so no
 * separate parse of the CSS is needed. Commit the generated `.d.ts` files, or
 * add `*.module.css.d.ts` to `.gitignore` — either works.
 */
class CssModuleTypesPlugin {
	/**
	 * @param {Compiler} compiler the compiler
	 * @returns {void}
	 */
	apply(compiler) {
		const { Compilation } = compiler.webpack;

		compiler.hooks.thisCompilation.tap(
			"CssModuleTypesPlugin",
			(compilation) => {
				compilation.hooks.processAssets.tap(
					{
						name: "CssModuleTypesPlugin",
						stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
					},
					() => {
						for (const module of compilation.modules) {
							const cssData =
								/** @type {{ exports?: Map<string, string> }=} */
								(module.buildInfo && module.buildInfo.cssData);
							if (!cssData || !cssData.exports || cssData.exports.size === 0) {
								continue;
							}
							const { resource } =
								/** @type {import("webpack").NormalModule} */ (module);
							fs.writeFileSync(`${resource}.d.ts`, toDts(cssData.exports));
						}
					}
				);
			}
		);
	}
}

/** @type {import("webpack").Configuration} */
const config = {
	output: {
		uniqueName: "app"
	},
	module: {
		rules: [
			{
				test: /\.module\.css$/,
				type: "css/module",
				// Default export = the class map object, matching the `export default
				// styles` shape of the generated `.d.ts` (and css-loader's default).
				parser: { namedExports: false }
			}
		]
	},
	experiments: {
		css: true
	},
	plugins: [new CssModuleTypesPlugin()]
};

module.exports = config;