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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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

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.7.0",
+  "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.6",
-    "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.10.0",
+    "@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.10.0"
+    "@lynx-js/template-webpack-plugin": "^0.11.0"
   },
   "engines": {
     "node": ">=18"