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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.8.0
+
+### Minor Changes
+
+- **BREAKING CHANGE** ([#2803](https://github.com/lynx-family/lynx-stack/pull/2803))
+
+  Remove `CssExtractWebpackPlugin` / `CssExtractWebpackPluginOptions` along with the `mini-css-extract-plugin` dependency. Use `CssExtractRspackPlugin` instead.
+
+  The `cssPlugins` option is now optional, defaulting to `[CSS.Plugins.removeFunctionWhiteSpace()]`.
+
+- **BREAKING CHANGE** ([#2803](https://github.com/lynx-family/lynx-stack/pull/2803))
+
+  Drop webpack support — the plugins now target Rspack only. All public types come from `@rspack/core` instead of `webpack` (e.g. `Compiler`, `Compilation`, `LoaderContext`), and the `webpack` dependency is removed.
+
+### Patch Changes
+
+- Prefix Lynx runtime module names with `webpack/runtime/` (e.g. `Lynx async chunks` → `webpack/runtime/lynx async chunks`), matching the path-structured naming of the bundler's built-in runtime modules. The previous bare names had no path segment, so when they appear as a source-map `sources` entry under a `file://` module-filename template they collapsed into an invalid URL authority (the space-containing name became the host) and broke `SourceMapConsumer` parsing. ([#2642](https://github.com/lynx-family/lynx-stack/pull/2642))
+
+- Widen peer ranges to admit the new minor versions of `@lynx-js/template-webpack-plugin` (^0.12.0) and `@lynx-js/rspeedy` (^0.15.0) shipping with the unified `debug-metadata.json` feature. ([#2642](https://github.com/lynx-family/lynx-stack/pull/2642))
+
 ## 0.7.1
 
 ### Patch Changes

package/lib/CssExtractRspackPlugin.d.ts

@@ -9,7 +9,7 @@ interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOp
     /**
      * plugins passed to parser
      */
-    cssPlugins: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
+    cssPlugins?: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
     /**
      * The name of non-initial CSS chunk files
      */
@@ -75,7 +75,7 @@ declare class CssExtractRspackPlugin {
      *
      * @public
      */
-    static defaultOptions: Readonly<CssExtractRspackPluginOptions>;
+    static defaultOptions: Readonly<CssExtractRspackPluginOptions & Pick<Required<CssExtractRspackPluginOptions>, 'cssPlugins'>>;
     /**
      * The entry point of a webpack plugin.
      * @param compiler - the webpack compiler

package/lib/CssExtractRspackPlugin.js

@@ -107,9 +107,7 @@ class CssExtractRspackPluginImpl {
         }).apply(compiler);
         compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
             if (this.isHMREnabled(compiler)) {
-                const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(
-                // @ts-expect-error Rspack to Webpack Compilation
-                compilation);
+                const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
                 hooks.beforeEmit.tapPromise(this.name, async (args) => {
                     const cssChunks = args.cssChunks;
                     const content = cssChunks.map((chunk) => chunk.source.source().toString('utf-8'));
@@ -119,7 +117,8 @@ class CssExtractRspackPluginImpl {
                         if (!hotUpdateFilePath) {
                             continue;
                         }
-                        const css = LynxTemplatePlugin.convertCSSChunksToMap(content, options.cssPlugins, Boolean(args.finalEncodeOptions.compilerOptions['enableCSSSelector']));
+                        const css = LynxTemplatePlugin.convertCSSChunksToMap(content, options.cssPlugins
+                            ?? CssExtractRspackPlugin.defaultOptions.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);
@@ -129,10 +128,12 @@ class CssExtractRspackPluginImpl {
                             const { compilerOptions: { 
                             // remove the `templateDebugUrl` to avoid "emit different content to the same filename" error while chunk splitting is enabled, see #1481
                             templateDebugUrl, ...restCompilerOptions }, } = args.finalEncodeOptions;
+                            const baseEncodeOptions = { ...args.finalEncodeOptions };
+                            baseEncodeOptions.compilerOptions = restCompilerOptions;
+                            delete baseEncodeOptions.elementTemplate;
                             const { buffer } = await hooks.encode.promise({
                                 encodeOptions: {
-                                    ...args.finalEncodeOptions,
-                                    compilerOptions: restCompilerOptions,
+                                    ...baseEncodeOptions,
                                     css,
                                     lepusCode: {
                                         root: undefined,
@@ -167,7 +168,7 @@ class CssExtractRspackPluginImpl {
                 const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
                 class CSSHotUpdateRuntimeModule extends RuntimeModule {
                     constructor(hash, hotUpdateFiles) {
-                        super('lynx css hot update');
+                        super('webpack/runtime/lynx css hot update');
                         this.hash = hash;
                         this.hotUpdateFiles = hotUpdateFiles;
                     }

package/lib/index.d.ts

@@ -3,9 +3,7 @@
  *
  * This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS and CSSId.
  */
-export { CssExtractWebpackPlugin } from './CssExtractWebpackPlugin.js';
-export type { CssExtractWebpackPluginOptions } from './CssExtractWebpackPlugin.js';
-export type { LoaderOptions } from './loader.js';
-export type { LoaderOptions as CssExtractRspackLoaderOptions } from './loader.js';
+export type { LoaderOptions } from './rspack-loader.js';
+export type { LoaderOptions as CssExtractRspackLoaderOptions } from './rspack-loader.js';
 export { CssExtractRspackPlugin } from './CssExtractRspackPlugin.js';
 export type { CssExtractRspackPluginOptions } from './CssExtractRspackPlugin.js';

package/lib/index.js

@@ -1,11 +1,5 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-/**
- * @packageDocumentation
- *
- * This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS and CSSId.
- */
-export { CssExtractWebpackPlugin } from './CssExtractWebpackPlugin.js';
 export { CssExtractRspackPlugin } from './CssExtractRspackPlugin.js';
 //# sourceMappingURL=index.js.map

package/lib/rspack-loader.d.ts

@@ -1,5 +1,54 @@
 import type { LoaderContext } from '@rspack/core';
-import type { LoaderOptions } from './loader.js';
 export declare function pitch(this: LoaderContext<LoaderOptions>, request: string, 
 /** previousRequest */ _: string, data: Record<string, unknown>): Promise<void>;
 export default function loader(this: LoaderContext<LoaderOptions>, content: string): string | undefined;
+/**
+ * The options of CSS extract loader.
+ *
+ * @public
+ */
+export interface LoaderOptions {
+    /**
+     * The same as {@link https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master?tab=readme-ov-file#emit | mini-css-extract-plugin}.
+     * Control whether emit the CSS to filesystem.
+     *
+     * - If `true`(default), emits a file (writes a file to the filesystem).
+     *
+     * - If `false`, the plugin will extract the CSS but will not emit the file.
+     *
+     * It is often useful to disable this option for server-side packages.
+     *
+     * @defaultValue true
+     * @public
+     */
+    emit?: boolean;
+    /**
+     * {@inheritdoc @lynx-js/rspeedy#CssExtractRspackLoaderOptions.esModule}
+     */
+    esModule?: boolean | undefined;
+    /**
+     * The layer of the CSS execution.
+     *
+     * @remarks
+     *
+     * This should be combined with `experiments.layers`.
+     */
+    layer?: string | undefined;
+}
+interface DependencySourceMap {
+    mappings?: string | undefined;
+    [key: string]: unknown;
+}
+export interface Dep {
+    identifier: string;
+    context: string | null;
+    content: Buffer;
+    media: string;
+    identifierIndex?: number;
+    supports?: string | undefined;
+    layer?: string | undefined;
+    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 {};

package/lib/rspack-loader.js

@@ -1,7 +1,9 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { load } from './loader.js';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { extractPathFromIdentifier, stringifyRequest } from './util.js';
 export async function pitch(request, 
 /** previousRequest */ _, data) {
     if (this._compiler?.options?.experiments?.css) {
@@ -17,9 +19,7 @@ export async function pitch(request,
         // So the `load` function may crash.
         // We make an temporary try-catch here.
         // See: https://github.com/web-infra-dev/rspack/issues/8536
-        const resultSource = await load.call(
-        // @ts-expect-error webpack & rspack loaderContext
-        this, request, addDependencies.bind(this));
+        const resultSource = await load.call(this, request, addDependencies.bind(this));
         callback(null, resultSource, undefined, data);
     }
     catch (error) {
@@ -47,4 +47,195 @@ export default function loader(content) {
     }
     return;
 }
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const BASE_URI = 'webpack://';
+export async function load(request, addDependencies) {
+    /** TODO: schema */
+    const options = this.getOptions();
+    const emit = options.emit ?? true;
+    const esModule = options.esModule ?? true;
+    const moduleExports = await new Promise((resolve, reject) => {
+        this.importModule(`${this.resourcePath}.webpack[javascript/auto]!=!!!${request}`, {
+            baseUri: `${BASE_URI}/`,
+            layer: options.layer,
+        }, (err, exports) => {
+            if (err) {
+                return reject(err);
+            }
+            return resolve(exports);
+        });
+    });
+    let locals;
+    if (isNamedExports(moduleExports)) {
+        Object.keys(moduleExports).forEach((key) => {
+            if (key !== 'default') {
+                locals ??= {};
+                locals[key] = moduleExports[key];
+            }
+        });
+    }
+    else {
+        locals =
+            (isCJSExports(moduleExports) ? moduleExports : moduleExports.default)
+                ?.locals;
+    }
+    let dependencies;
+    const exportContent = isCJSExports(moduleExports)
+        ? moduleExports
+        : moduleExports.default;
+    const { cssId: rawCssId } = parseQuery(this.resourceQuery);
+    const cssId = rawCssId ?? '';
+    const identifierCountMap = new Map();
+    if (Array.isArray(exportContent)) {
+        dependencies = exportContent.map(([identifier, content, media, sourceMap, supports, layer]) => {
+            const count = identifierCountMap.get(identifier) ?? 0;
+            const rawResourcePath = extractPathFromIdentifier(identifier, true);
+            const [resourcePath, resourceQuery] = rawResourcePath.split('?');
+            const params = new URLSearchParams(resourceQuery ? `?${resourceQuery}` : '');
+            if (params.get('cssId') === null) {
+                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(shouldWrapCSSId
+                    /**
+                     * Given the following source code:
+                     *
+                     * ```css foo.css?cssId=1001
+                     * @import 'bar.css'
+                     * .foo {
+                     *   color: red;
+                     * }
+                     * ```
+                     *
+                     * ```css bar.css
+                     * .bar {
+                     *   color: blue;
+                     * }
+                     * ```
+                     *
+                     * The output should be:
+                     *
+                     * ```css
+                     * @cssId "1001" "bar.css" {
+                     *   .bar {
+                     *     color: blue;
+                     *   }
+                     * }
+                     * @cssId "1001" "foo.css" {
+                     *   .foo {
+                     *     color: red;
+                     *   }
+                     * }
+                     * ```
+                     */
+                    ? `@cssId "${cssId}" "${filePath}" {
+${content}
+}
+`
+                    : content),
+                media,
+                supports,
+                layer,
+                identifierIndex: count,
+                sourceMap: sourceMap
+                    ? Buffer.from(JSON.stringify(shouldWrapCSSId ? offsetSourceMapLines(sourceMap, 1) : sourceMap))
+                    : undefined,
+            };
+        });
+        addDependencies(dependencies);
+    }
+    else {
+        dependencies = [[null, exportContent]];
+    }
+    const result = (function makeResult() {
+        if (locals) {
+            if (isNamedExports(moduleExports)) {
+                const identifiers = Array.from((function* generateIdentifiers() {
+                    let identifierId = 0;
+                    for (const key of Object.keys(locals)) {
+                        identifierId += 1;
+                        yield [`_${identifierId.toString(16)}`, key];
+                    }
+                })());
+                const localsString = identifiers
+                    .map(
+                // TODO: support function locals
+                ([id, key]) => `\nvar ${id} = ${JSON.stringify(locals[key])};`)
+                    .join('');
+                const exportsString = `export { ${identifiers
+                    .map(([id, key]) => `${id} as ${JSON.stringify(key)}`)
+                    .join(', ')} }`;
+                return `${localsString}\n${exportsString}\n`;
+            }
+            return `\n${esModule ? 'export default' : 'module.exports = '} ${JSON.stringify(locals)};`;
+        }
+        else if (esModule) {
+            return '\nexport {};';
+        }
+        return '';
+    })();
+    let resultSource = `// extracted by mini-css-extract-plugin`;
+    // only attempt hot reloading if the css is actually used for something other than hash values
+    resultSource += this.hot && emit
+        ? hotLoader(result, {
+            loaderContext: this,
+            options,
+            locals,
+            cssId,
+        })
+        : result;
+    return resultSource;
+}
+export function offsetSourceMapLines(sourceMap, lineOffset) {
+    if (lineOffset <= 0 || !sourceMap.mappings) {
+        return sourceMap;
+    }
+    return {
+        ...sourceMap,
+        mappings: `${';'.repeat(lineOffset)}${sourceMap.mappings}`,
+    };
+}
+function hotLoader(content, context) {
+    const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
+    return `${content}
+  if (module.hot) {
+    (function() {
+      var localsJsonString = ${localsJsonString};
+      // ${Date.now()}
+      var cssReload = require(${stringifyRequest(context.loaderContext, path.resolve(__dirname, '../runtime/hotModuleReplacement.cjs'))})(module.id, ${JSON.stringify(context.options)}, "${context.cssId ?? '0'}");
+      // only invalidate when locals change
+      if (
+        module.hot.data &&
+        module.hot.data.value &&
+        module.hot.data.value !== localsJsonString
+      ) {
+        module.hot.invalidate();
+      } else {
+        module.hot.accept();
+      }
+      module.hot.dispose(function(data) {
+        data.value = localsJsonString;
+        cssReload();
+      });
+    })();
+  }`;
+}
+function isCJSExports(exports) {
+    return !exports.__esModule;
+}
+function isNamedExports(exports) {
+    return !isCJSExports(exports)
+        && (!exports.default || !('locals' in exports.default));
+}
+function parseQuery(query) {
+    const params = new URLSearchParams(query);
+    return Object.fromEntries(params);
+}
 //# sourceMappingURL=rspack-loader.js.map

package/lib/util.d.ts

@@ -1,5 +1,5 @@
-import type { LoaderOptions } from 'mini-css-extract-plugin';
-import type { LoaderContext } from 'webpack';
+import type { LoaderContext } from '@rspack/core';
+import type { LoaderOptions } from './rspack-loader.js';
 export declare function isAbsolutePath(str: string): boolean;
 export declare function isRelativePath(str: string): boolean;
 export declare function stringifyRequest(loaderContext: LoaderContext<LoaderOptions>, request: string): string;

package/lib/util.js

@@ -12,7 +12,7 @@ export function isRelativePath(str) {
 export function stringifyRequest(loaderContext, request) {
     if (typeof loaderContext.utils !== 'undefined'
         && typeof loaderContext.utils.contextify === 'function') {
-        return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
+        return JSON.stringify(loaderContext.utils.contextify(loaderContext.context ?? loaderContext.rootContext, request));
     }
     const split = request.split('!');
     const { context } = loaderContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -40,28 +40,24 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "dependencies": {
-    "mini-css-extract-plugin": "^2.10.0"
-  },
   "devDependencies": {
     "@microsoft/api-extractor": "7.58.2",
-    "@rspack/core": "1.7.9",
+    "@rspack/core": "2.0.8",
+    "@rstest/core": "0.10.5",
     "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"
+    "@lynx-js/template-webpack-plugin": "0.12.0",
+    "@lynx-js/test-tools": "0.0.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.11.0"
+    "@lynx-js/template-webpack-plugin": "^0.11.0 || ^0.12.0"
   },
   "engines": {
     "node": ">=18"
   },
   "scripts": {
     "api-extractor": "api-extractor run --verbose",
-    "test": "pnpm -w run test --project webpack/css-extract"
+    "test": "rstest"
   }
 }

package/lib/CssExtractWebpackPlugin.d.ts

@@ -1,74 +0,0 @@
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import type { Compiler } from 'webpack';
-/**
- * The options for CssExtractWebpackPlugin
- *
- * @public
- */
-interface CssExtractWebpackPluginOptions extends MiniCssExtractPlugin.PluginOptions {
-}
-/**
- * @public
- *
- * CssExtractWebpackPlugin is the CSS extract plugin for Lynx.
- * It works just like the {@link https://github.com/webpack-contrib/mini-css-extract-plugin | MiniCssExtractPlugin} in Web.
- *
- * @example
- * ```js
- * import { CssExtractWebpackPlugin } from '@lynx-js/css-extract-webpack-plugin'
- * export default {
- *   plugins: [new CssExtractWebpackPlugin()],
- *   module: {
- *     rules: [
- *       {
- *         test: /\.css$/,
- *         uses: [CssExtractWebpackPlugin.loader, 'css-loader'],
- *       },
- *     ],
- *   },
- * }
- * ```
- */
-declare class CssExtractWebpackPlugin {
-    private readonly options?;
-    constructor(options?: CssExtractWebpackPluginOptions | undefined);
-    /**
-     * The loader to extract CSS.
-     *
-     * @remarks
-     * It should be used with the {@link https://github.com/webpack-contrib/css-loader | 'css-loader'}.
-     *
-     * @example
-     *
-     * ```js
-     * import { CssExtractWebpackPlugin } from '@lynx-js/css-extract-webpack-plugin'
-     * export default {
-     *   plugins: [new CssExtractWebpackPlugin()],
-     *   module: {
-     *     rules: [
-     *       {
-     *         test: /\.css$/,
-     *         uses: [CssExtractWebpackPlugin.loader, 'css-loader'],
-     *       },
-     *     ],
-     *   },
-     * }
-     * ```
-     *
-     * @public
-     */
-    static loader: string;
-    /**
-     * `defaultOptions` is the default options that the {@link CssExtractWebpackPlugin} uses.
-     *
-     * @public
-     */
-    static defaultOptions: Readonly<Required<CssExtractWebpackPluginOptions>>;
-    /**
-     * The entry point of a webpack plugin.
-     * @param compiler - the webpack compiler
-     */
-    apply(compiler: Compiler): void;
-}
-export { CssExtractWebpackPlugin };
-export type { CssExtractWebpackPluginOptions };

package/lib/CssExtractWebpackPlugin.js

@@ -1,99 +0,0 @@
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-import { createRequire } from 'node:module';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-const require = createRequire(import.meta.url);
-/**
- * @public
- *
- * CssExtractWebpackPlugin is the CSS extract plugin for Lynx.
- * It works just like the {@link https://github.com/webpack-contrib/mini-css-extract-plugin | MiniCssExtractPlugin} in Web.
- *
- * @example
- * ```js
- * import { CssExtractWebpackPlugin } from '@lynx-js/css-extract-webpack-plugin'
- * export default {
- *   plugins: [new CssExtractWebpackPlugin()],
- *   module: {
- *     rules: [
- *       {
- *         test: /\.css$/,
- *         uses: [CssExtractWebpackPlugin.loader, 'css-loader'],
- *       },
- *     ],
- *   },
- * }
- * ```
- */
-class CssExtractWebpackPlugin {
-    constructor(options) {
-        this.options = options;
-    }
-    /**
-     * The loader to extract CSS.
-     *
-     * @remarks
-     * It should be used with the {@link https://github.com/webpack-contrib/css-loader | 'css-loader'}.
-     *
-     * @example
-     *
-     * ```js
-     * import { CssExtractWebpackPlugin } from '@lynx-js/css-extract-webpack-plugin'
-     * export default {
-     *   plugins: [new CssExtractWebpackPlugin()],
-     *   module: {
-     *     rules: [
-     *       {
-     *         test: /\.css$/,
-     *         uses: [CssExtractWebpackPlugin.loader, 'css-loader'],
-     *       },
-     *     ],
-     *   },
-     * }
-     * ```
-     *
-     * @public
-     */
-    static { this.loader = require.resolve('./loader.js'); }
-    /**
-     * `defaultOptions` is the default options that the {@link CssExtractWebpackPlugin} uses.
-     *
-     * @public
-     */
-    static { this.defaultOptions = Object.freeze({
-        filename: '[name].css',
-        chunkFilename: undefined,
-        ignoreOrder: undefined,
-        insert: undefined,
-        attributes: undefined,
-        linkType: undefined,
-        runtime: undefined,
-        experimentalUseImportModule: undefined,
-    }); }
-    /**
-     * The entry point of a webpack plugin.
-     * @param compiler - the webpack compiler
-     */
-    apply(compiler) {
-        new CssExtractWebpackPluginImpl(compiler, Object.assign({}, CssExtractWebpackPlugin.defaultOptions, this.options));
-    }
-}
-export { CssExtractWebpackPlugin };
-class CssExtractWebpackPluginImpl {
-    constructor(compiler, options) {
-        this.options = options;
-        this.name = 'CssExtractWebpackPlugin';
-        new MiniCssExtractPlugin({
-            filename: options.filename,
-            chunkFilename: options.chunkFilename,
-            ignoreOrder: options.ignoreOrder,
-            insert: options.insert,
-            attributes: options.attributes,
-            linkType: options.linkType,
-            runtime: options.runtime,
-            experimentalUseImportModule: options.experimentalUseImportModule,
-        }).apply(compiler);
-    }
-}
-//# sourceMappingURL=CssExtractWebpackPlugin.js.map

package/lib/loader.d.ts

@@ -1,53 +0,0 @@
-import type { LoaderContext } from 'webpack';
-/**
- * The options of CSS extract loader.
- *
- * @public
- */
-export interface LoaderOptions {
-    /**
-     * The same as {@link https://github.com/webpack-contrib/mini-css-extract-plugin/tree/master?tab=readme-ov-file#emit | mini-css-extract-plugin}.
-     * Control whether emit the CSS to filesystem.
-     *
-     * - If `true`(default), emits a file (writes a file to the filesystem).
-     *
-     * - If `false`, the plugin will extract the CSS but will not emit the file.
-     *
-     * It is often useful to disable this option for server-side packages.
-     *
-     * @defaultValue true
-     * @public
-     */
-    emit?: boolean;
-    /**
-     * {@inheritdoc @lynx-js/rspeedy#CssExtractRspackLoaderOptions.esModule}
-     */
-    esModule?: boolean | undefined;
-    /**
-     * The layer of the CSS execution.
-     *
-     * @remarks
-     *
-     * This should be combined with `experiments.layers`.
-     */
-    layer?: string | undefined;
-}
-interface DependencySourceMap {
-    mappings?: string | undefined;
-    [key: string]: unknown;
-}
-export interface Dep {
-    identifier: string;
-    context: string | null;
-    content: Buffer;
-    media: string;
-    identifierIndex?: number;
-    supports?: string | undefined;
-    layer?: string | undefined;
-    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

@@ -1,241 +0,0 @@
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { extractPathFromIdentifier, stringifyRequest } from './util.js';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const BASE_URI = 'webpack://';
-export async function load(request, addDependencies) {
-    /** TODO: schema */
-    const options = this.getOptions();
-    const emit = options.emit ?? true;
-    const esModule = options.esModule ?? true;
-    const moduleExports = await new Promise((resolve, reject) => {
-        this.importModule(`${this.resourcePath}.webpack[javascript/auto]!=!!!${request}`, {
-            baseUri: `${BASE_URI}/`,
-            layer: options.layer,
-        }, (err, exports) => {
-            if (err) {
-                return reject(err);
-            }
-            return resolve(exports);
-        });
-    });
-    let locals;
-    if (isNamedExports(moduleExports)) {
-        Object.keys(moduleExports).forEach((key) => {
-            if (key !== 'default') {
-                locals ??= {};
-                locals[key] = moduleExports[key];
-            }
-        });
-    }
-    else {
-        locals =
-            (isCJSExports(moduleExports) ? moduleExports : moduleExports.default)
-                ?.locals;
-    }
-    let dependencies;
-    const exportContent = isCJSExports(moduleExports)
-        ? moduleExports
-        : moduleExports.default;
-    const { cssId: rawCssId } = parseQuery(this.resourceQuery);
-    const cssId = rawCssId ?? '';
-    const identifierCountMap = new Map();
-    if (Array.isArray(exportContent)) {
-        dependencies = exportContent.map(([identifier, content, media, sourceMap, supports, layer]) => {
-            const count = identifierCountMap.get(identifier) ?? 0;
-            const rawResourcePath = extractPathFromIdentifier(identifier, true);
-            const [resourcePath, resourceQuery] = rawResourcePath.split('?');
-            const params = new URLSearchParams(resourceQuery ? `?${resourceQuery}` : '');
-            if (params.get('cssId') === null) {
-                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(shouldWrapCSSId
-                    /**
-                     * Given the following source code:
-                     *
-                     * ```css foo.css?cssId=1001
-                     * @import 'bar.css'
-                     * .foo {
-                     *   color: red;
-                     * }
-                     * ```
-                     *
-                     * ```css bar.css
-                     * .bar {
-                     *   color: blue;
-                     * }
-                     * ```
-                     *
-                     * The output should be:
-                     *
-                     * ```css
-                     * @cssId "1001" "bar.css" {
-                     *   .bar {
-                     *     color: blue;
-                     *   }
-                     * }
-                     * @cssId "1001" "foo.css" {
-                     *   .foo {
-                     *     color: red;
-                     *   }
-                     * }
-                     * ```
-                     */
-                    ? `@cssId "${cssId}" "${filePath}" {
-${content}
-}
-`
-                    : content),
-                media,
-                supports,
-                layer,
-                identifierIndex: count,
-                sourceMap: sourceMap
-                    ? Buffer.from(JSON.stringify(shouldWrapCSSId ? offsetSourceMapLines(sourceMap, 1) : sourceMap))
-                    : undefined,
-            };
-        });
-        addDependencies(dependencies);
-    }
-    else {
-        dependencies = [[null, exportContent]];
-    }
-    const result = (function makeResult() {
-        if (locals) {
-            if (isNamedExports(moduleExports)) {
-                const identifiers = Array.from((function* generateIdentifiers() {
-                    let identifierId = 0;
-                    for (const key of Object.keys(locals)) {
-                        identifierId += 1;
-                        yield [`_${identifierId.toString(16)}`, key];
-                    }
-                })());
-                const localsString = identifiers
-                    .map(
-                // TODO: support function locals
-                ([id, key]) => `\nvar ${id} = ${JSON.stringify(locals[key])};`)
-                    .join('');
-                const exportsString = `export { ${identifiers
-                    .map(([id, key]) => `${id} as ${JSON.stringify(key)}`)
-                    .join(', ')} }`;
-                return `${localsString}\n${exportsString}\n`;
-            }
-            return `\n${esModule ? 'export default' : 'module.exports = '} ${JSON.stringify(locals)};`;
-        }
-        else if (esModule) {
-            return '\nexport {};';
-        }
-        return '';
-    })();
-    let resultSource = `// extracted by ${MiniCssExtractPlugin.pluginName}`;
-    // only attempt hot reloading if the css is actually used for something other than hash values
-    resultSource += this.hot && emit
-        ? hotLoader(result, {
-            loaderContext: this,
-            options,
-            locals,
-            cssId,
-        })
-        : 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
-        && (this._module.type === 'css'
-            || this._module.type === 'css/auto'
-            || this._module.type === 'css/global'
-            || this._module.type === 'css/module')) {
-        this.emitWarning(new Error('You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `@lynx-js/css-extract-webpack-plugin` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `@lynx-js/css-extract-webpack-plugin` in your webpack config (now `@lynx-js/css-extract-webpack-plugin` does nothing).'));
-        return;
-    }
-    /** TODO: schema */
-    const options = this.getOptions();
-    const emit = options.emit ?? true;
-    const addDependencies = (dependencies) => {
-        const { webpack } = this._compiler;
-        if (!Array.isArray(dependencies) && dependencies !== null) {
-            throw new Error(`Exported value was not extracted as an array: ${JSON.stringify(dependencies)}`);
-        }
-        const identifierCountMap = new Map();
-        for (const dependency of dependencies) {
-            if (!('identifier' in dependency) || !emit) {
-                continue;
-            }
-            const CssDependency = MiniCssExtractPlugin.getCssDependency(webpack);
-            const count = identifierCountMap.get(dependency.identifier) ?? 0;
-            this._module.addDependency(new CssDependency(dependency, dependency.context, count));
-            identifierCountMap.set(dependency.identifier, count + 1);
-        }
-    };
-    return await load.call(this, request, addDependencies);
-}
-export default function loader(content) {
-    if (this._compiler?.options?.experiments?.css
-        && this._module
-        && (this._module.type === 'css'
-            || this._module.type === 'css/auto'
-            || this._module.type === 'css/global'
-            || this._module.type === 'css/module')) {
-        return content;
-    }
-    return;
-}
-function hotLoader(content, context) {
-    const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
-    return `${content}
-  if (module.hot) {
-    (function() {
-      var localsJsonString = ${localsJsonString};
-      // ${Date.now()}
-      var cssReload = require(${stringifyRequest(context.loaderContext, path.resolve(__dirname, '../runtime/hotModuleReplacement.cjs'))})(module.id, ${JSON.stringify(context.options)}, "${context.cssId ?? '0'}");
-      // only invalidate when locals change
-      if (
-        module.hot.data &&
-        module.hot.data.value &&
-        module.hot.data.value !== localsJsonString
-      ) {
-        module.hot.invalidate();
-      } else {
-        module.hot.accept();
-      }
-      module.hot.dispose(function(data) {
-        data.value = localsJsonString;
-        cssReload();
-      });
-    })();
-  }`;
-}
-function isCJSExports(exports) {
-    return !exports.__esModule;
-}
-function isNamedExports(exports) {
-    return !isCJSExports(exports)
-        && (!exports.default || !('locals' in exports.default));
-}
-function parseQuery(query) {
-    const params = new URLSearchParams(query);
-    return Object.fromEntries(params);
-}
-//# sourceMappingURL=loader.js.map