@lynx-js/css-extract-webpack-plugin 0.6.5 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.7.1
+
+### Patch Changes
+
+- Fix CSS source map line offsets when wrapping extracted CSS with cssId metadata. ([#2514](https://github.com/lynx-family/lynx-stack/pull/2514))
+
+- Support `@lynx-js/template-webpack-plugin` v0.11.0. ([#2483](https://github.com/lynx-family/lynx-stack/pull/2483))
+
+## 0.7.0
+
+### Minor Changes
+
+- **BREAKING CHANGE**: Require `@lynx-js/template-webpack-plugin` 0.10.0. ([#1965](https://github.com/lynx-family/lynx-stack/pull/1965))
+
+- Merge all css chunk and generate a `.css.hot-update.json` file for each bundle. ([#1965](https://github.com/lynx-family/lynx-stack/pull/1965))
+
 ## 0.6.5
 
 ### Patch Changes

package/lib/CssExtractRspackPlugin.d.ts

@@ -23,7 +23,7 @@ interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOp
  * @public
  *
  * CssExtractRspackPlugin is the CSS extract plugin for Lynx.
- * It works just like the {@link https://www.rspack.dev/plugins/rspack/css-extract-rspack-plugin.html | CssExtractRspackPlugin} in Web.
+ * It works just like the {@link https://rspack.rs/plugins/rspack/css-extract-rspack-plugin.html | CssExtractRspackPlugin} in Web.
  *
  * @example
  * ```js

package/lib/CssExtractRspackPlugin.js

@@ -8,7 +8,7 @@ const require = createRequire(import.meta.url);
  * @public
  *
  * CssExtractRspackPlugin is the CSS extract plugin for Lynx.
- * It works just like the {@link https://www.rspack.dev/plugins/rspack/css-extract-rspack-plugin.html | CssExtractRspackPlugin} in Web.
+ * It works just like the {@link https://rspack.rs/plugins/rspack/css-extract-rspack-plugin.html | CssExtractRspackPlugin} in Web.
  *
  * @example
  * ```js
@@ -95,6 +95,7 @@ class CssExtractRspackPluginImpl {
         this.options = options;
         this.name = 'CssExtractRspackPlugin';
         this.hash = null;
+        this.hotUpdateFiles = new Map();
         new compiler.webpack.CssExtractRspackPlugin({
             filename: options.filename ?? '[name].css',
             chunkFilename: options.chunkFilename ?? '',
@@ -110,9 +111,15 @@ class CssExtractRspackPluginImpl {
                 // @ts-expect-error Rspack to Webpack Compilation
                 compilation);
                 hooks.beforeEmit.tapPromise(this.name, async (args) => {
-                    for (const { name: filename, source, } of args.cssChunks) {
-                        const content = source.source().toString('utf-8');
-                        const css = LynxTemplatePlugin.convertCSSChunksToMap([content], options.cssPlugins, Boolean(args.finalEncodeOptions.compilerOptions['enableCSSSelector']));
+                    const cssChunks = args.cssChunks;
+                    const content = cssChunks.map((chunk) => chunk.source.source().toString('utf-8'));
+                    for (const entryName of args.entryNames) {
+                        // generate hot update file which is required by cssHotUpdateList
+                        const hotUpdateFilePath = this.hotUpdateFiles.get(entryName);
+                        if (!hotUpdateFilePath) {
+                            continue;
+                        }
+                        const css = LynxTemplatePlugin.convertCSSChunksToMap(content, options.cssPlugins, Boolean(args.finalEncodeOptions.compilerOptions['enableCSSSelector']));
                         const cssDeps = Object.entries(css.cssMap).reduce((acc, [key, value]) => {
                             const importRuleNodes = value.filter((node) => node.type === 'ImportRule');
                             acc[key] = importRuleNodes.map(({ href }) => href);
@@ -140,7 +147,7 @@ class CssExtractRspackPluginImpl {
                                 content: buffer.toString('base64'),
                                 deps: cssDeps,
                             };
-                            compilation.emitAsset(filename.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`), new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
+                            compilation.emitAsset(hotUpdateFilePath, new compiler.webpack.sources.RawSource(JSON.stringify(result), true));
                         }
                         catch (error) {
                             if (error && typeof error === 'object' && 'error_msg' in error) {
@@ -159,9 +166,10 @@ class CssExtractRspackPluginImpl {
                 });
                 const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
                 class CSSHotUpdateRuntimeModule extends RuntimeModule {
-                    constructor(hash) {
+                    constructor(hash, hotUpdateFiles) {
                         super('lynx css hot update');
                         this.hash = hash;
+                        this.hotUpdateFiles = hotUpdateFiles;
                     }
                     generate() {
                         const chunk = this.chunk;
@@ -172,10 +180,16 @@ class CssExtractRspackPluginImpl {
                         });
                         const { path } = compilation.getPathWithInfo(options.filename ?? '[name].css', { chunk });
                         const initialChunk = [chunk.name, path];
-                        const cssHotUpdateList = [...asyncChunks, initialChunk].map(([chunkName, cssHotUpdatePath]) => [
-                            chunkName,
-                            cssHotUpdatePath.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`),
-                        ]);
+                        const cssHotUpdateList = [...asyncChunks, initialChunk].map(([chunkName, cssHotUpdatePath]) => {
+                            // use hash of previous compilation cause CSSHotUpdateRuntimeModule can not get hash immediately
+                            const hotUpdatePath = cssHotUpdatePath.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`);
+                            // save all hot update file info
+                            this.hotUpdateFiles.set(chunkName, hotUpdatePath);
+                            return [
+                                chunkName,
+                                hotUpdatePath,
+                            ];
+                        });
                         return `
 ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'};
 `;
@@ -187,7 +201,7 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify
                         return;
                     onceForChunkSet.add(chunk);
                     runtimeRequirements.add(RuntimeGlobals.publicPath);
-                    compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash));
+                    compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash, this.hotUpdateFiles));
                 };
                 compilation.hooks.runtimeRequirementInTree
                     .for(RuntimeGlobals.ensureChunkHandlers)

package/lib/loader.d.ts

@@ -32,6 +32,10 @@ export interface LoaderOptions {
      */
     layer?: string | undefined;
 }
+interface DependencySourceMap {
+    mappings?: string | undefined;
+    [key: string]: unknown;
+}
 export interface Dep {
     identifier: string;
     context: string | null;
@@ -43,5 +47,7 @@ export interface Dep {
     sourceMap?: Buffer | undefined;
 }
 export declare function load(this: LoaderContext<LoaderOptions>, request: string, addDependencies: (deps: Dep[]) => void): Promise<string>;
+export declare function offsetSourceMapLines<T extends DependencySourceMap>(sourceMap: T, lineOffset: number): T;
 export declare function pitch(this: LoaderContext<LoaderOptions>, request: string): Promise<string | undefined>;
 export default function loader(this: LoaderContext<LoaderOptions>, content: string): string | undefined;
+export {};

package/lib/loader.js

@@ -54,13 +54,14 @@ export async function load(request, addDependencies) {
                 params.set('cssId', cssId);
             }
             const filePath = path.relative(this.rootContext, extractPathFromIdentifier(identifier));
+            const shouldWrapCSSId = Boolean(cssId)
+                && (params.get('common') === null
+                    || params.get('common') === 'false');
             identifierCountMap.set(identifier, count + 1);
             return {
                 identifier: identifier.replace(rawResourcePath, `${resourcePath}?${params.toString()}`),
                 context: this.rootContext,
-                content: Buffer.from(cssId
-                    && (params.get('common') === null
-                        || params.get('common') === 'false')
+                content: Buffer.from(shouldWrapCSSId
                     /**
                      * Given the following source code:
                      *
@@ -92,8 +93,7 @@ export async function load(request, addDependencies) {
                      * }
                      * ```
                      */
-                    ? `\
-@cssId "${cssId}" "${filePath}" {
+                    ? `@cssId "${cssId}" "${filePath}" {
 ${content}
 }
 `
@@ -103,7 +103,7 @@ ${content}
                 layer,
                 identifierIndex: count,
                 sourceMap: sourceMap
-                    ? Buffer.from(JSON.stringify(sourceMap))
+                    ? Buffer.from(JSON.stringify(shouldWrapCSSId ? offsetSourceMapLines(sourceMap, 1) : sourceMap))
                     : undefined,
             };
         });
@@ -151,6 +151,15 @@ ${content}
         : result;
     return resultSource;
 }
+export function offsetSourceMapLines(sourceMap, lineOffset) {
+    if (lineOffset <= 0 || !sourceMap.mappings) {
+        return sourceMap;
+    }
+    return {
+        ...sourceMap,
+        mappings: `${';'.repeat(lineOffset)}${sourceMap.mappings}`,
+    };
+}
 export async function pitch(request) {
     if (this._compiler?.options?.experiments?.css
         && this._module

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -41,21 +41,21 @@
     "README.md"
   ],
   "dependencies": {
-    "mini-css-extract-plugin": "^2.9.4"
+    "mini-css-extract-plugin": "^2.10.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.52.15",
-    "@rspack/core": "1.6.5",
-    "css-loader": "^7.1.2",
-    "sass-loader": "^16.0.5",
-    "webpack": "^5.102.0",
-    "@lynx-js/css-serializer": "0.1.3",
-    "@lynx-js/template-webpack-plugin": "0.9.2",
+    "@microsoft/api-extractor": "7.58.2",
+    "@rspack/core": "1.7.9",
+    "css-loader": "^7.1.4",
+    "sass-loader": "^16.0.7",
+    "webpack": "^5.105.2",
+    "@lynx-js/css-serializer": "0.1.6",
+    "@lynx-js/template-webpack-plugin": "0.11.0",
     "@lynx-js/test-tools": "0.0.0",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.9.0"
+    "@lynx-js/template-webpack-plugin": "^0.11.0"
   },
   "engines": {
     "node": ">=18"