@lynx-js/css-extract-webpack-plugin 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+# @lynx-js/css-extract-webpack-plugin
+
+## 0.5.0
+
+### Minor Changes
+
+- 1abf8f0: Use compilation hash for `css.hot-update.json` to avoid cache.
+
+### Patch Changes
+
+- 1abf8f0: Set the default `targetSdkVersion` to 3.2.
+
+## 0.4.1
+
+### Patch Changes
+
+- ad49fb1: Support CSS HMR for ReactLynx
+
+## 0.4.0
+
+### Minor Changes
+
+- a217b02: **BREAKING CHANGE**: Change the format of scoped CSS.
+
+  ```diff
+  - @file "<file-key>" {
+  -   <content>
+  - }
+  - @cssId <css-id> "<file-key>" {}
+  + @cssId "<css-id>" "<file-key>" {
+  +   <content>
+  + }
+  ```
+
+### Patch Changes
+
+- 0d3b44c: Support `@lynx-js/template-webpack-plugin` v0.6.0.
+
+## 0.3.0
+
+### Minor Changes
+
+- 587a782: **BREAKING CHANGE**: Requires `@lynx-js/template-webpack-plugin` v0.5.0
+
+### Patch Changes
+
+- ec189ad: Fix crash when css-loader failed.
+- 5099d89: Support `common` in query.
+
+## 0.0.6
+
+### Patch Changes
+
+- 7f8a4fe: Support Rspack v1.1.0.
+- Updated dependencies [84e49f5]
+- Updated dependencies [f1ddb5a]
+- Updated dependencies [d05e60b]
+  - @lynx-js/template-webpack-plugin@0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,3 @@
+<h2 align="center">@lynx-js/css-extract-webpack-plugin</h2>
+
+This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.

package/lib/CssExtractRspackPlugin.d.ts

@@ -0,0 +1,90 @@
+import type { Compiler, CssExtractRspackPluginOptions as ExternalCssExtractRspackPluginOptions } from '@rspack/core';
+import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
+/**
+ * The options for {@link @lynx-js/webpack/css-extract-webpack-plugin#CssExtractRspackPlugin}
+ *
+ * @public
+ */
+interface CssExtractRspackPluginOptions extends ExternalCssExtractRspackPluginOptions {
+    /**
+     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableRemoveCSSScope}
+     */
+    enableRemoveCSSScope: boolean;
+    /**
+     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableCSSSelector}
+     */
+    enableCSSSelector: boolean;
+    /**
+     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.targetSdkVersion}
+     */
+    targetSdkVersion: string;
+    /**
+     * plugins passed to parser
+     */
+    cssPlugins: Parameters<typeof LynxTemplatePlugin.convertCSSChunksToMap>[1];
+}
+/**
+ * @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.
+ *
+ * @example
+ * ```js
+ * import { CssExtractRspackPlugin } from '@lynx-js/css-extract-webpack-plugin'
+ * export default {
+ *   plugins: [new CssExtractRspackPlugin()],
+ *   module: {
+ *     rules: [
+ *       {
+ *         test: /\.css$/,
+ *         uses: [CssExtractRspackPlugin.loader, 'css-loader'],
+ *       },
+ *     ],
+ *   },
+ * }
+ * ```
+ */
+declare class CssExtractRspackPlugin {
+    private readonly options?;
+    constructor(options?: CssExtractRspackPluginOptions | 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 { CssExtractRspackPlugin } from '@lynx-js/css-extract-webpack-plugin'
+     * export default {
+     *   plugins: [new CssExtractRspackPlugin()],
+     *   module: {
+     *     rules: [
+     *       {
+     *         test: /\.css$/,
+     *         uses: [CssExtractRspackPlugin.loader, 'css-loader'],
+     *       },
+     *     ],
+     *   },
+     * }
+     * ```
+     *
+     * @public
+     */
+    static loader: string;
+    /**
+     * `defaultOptions` is the default options that the {@link CssExtractRspackPlugin} uses.
+     *
+     * @public
+     */
+    static defaultOptions: Readonly<CssExtractRspackPluginOptions>;
+    /**
+     * The entry point of a webpack plugin.
+     * @param compiler - the webpack compiler
+     */
+    apply(compiler: Compiler): void;
+}
+export { CssExtractRspackPlugin };
+export type { CssExtractRspackPluginOptions };

package/lib/CssExtractRspackPlugin.js

@@ -0,0 +1,180 @@
+// 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 { LynxEncodePlugin, LynxTemplatePlugin, } from '@lynx-js/template-webpack-plugin';
+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.
+ *
+ * @example
+ * ```js
+ * import { CssExtractRspackPlugin } from '@lynx-js/css-extract-webpack-plugin'
+ * export default {
+ *   plugins: [new CssExtractRspackPlugin()],
+ *   module: {
+ *     rules: [
+ *       {
+ *         test: /\.css$/,
+ *         uses: [CssExtractRspackPlugin.loader, 'css-loader'],
+ *       },
+ *     ],
+ *   },
+ * }
+ * ```
+ */
+class CssExtractRspackPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    // TODO: implement a custom loader for scoped CSS.
+    /**
+     * 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 { CssExtractRspackPlugin } from '@lynx-js/css-extract-webpack-plugin'
+     * export default {
+     *   plugins: [new CssExtractRspackPlugin()],
+     *   module: {
+     *     rules: [
+     *       {
+     *         test: /\.css$/,
+     *         uses: [CssExtractRspackPlugin.loader, 'css-loader'],
+     *       },
+     *     ],
+     *   },
+     * }
+     * ```
+     *
+     * @public
+     */
+    static { this.loader = require.resolve('./rspack-loader.js'); }
+    /**
+     * `defaultOptions` is the default options that the {@link CssExtractRspackPlugin} uses.
+     *
+     * @public
+     */
+    static { this.defaultOptions = Object
+        .freeze({
+        enableRemoveCSSScope: false,
+        enableCSSSelector: true,
+        // TODO: version
+        targetSdkVersion: '3.2',
+        filename: '[name].css',
+        cssPlugins: [],
+    }); }
+    /**
+     * The entry point of a webpack plugin.
+     * @param compiler - the webpack compiler
+     */
+    apply(compiler) {
+        new CssExtractRspackPluginImpl(compiler, Object.assign({}, CssExtractRspackPlugin.defaultOptions, this.options));
+    }
+}
+export { CssExtractRspackPlugin };
+class CssExtractRspackPluginImpl {
+    constructor(compiler, options) {
+        this.options = options;
+        this.name = 'CssExtractRspackPlugin';
+        this.hash = null;
+        new compiler.webpack.CssExtractRspackPlugin({
+            filename: options.filename ?? '[name].css',
+            chunkFilename: options.chunkFilename ?? '',
+            ignoreOrder: options.ignoreOrder ?? false,
+            insert: options.insert ?? '',
+            attributes: options.attributes ?? {},
+            linkType: options.linkType ?? '',
+            runtime: options.runtime ?? false,
+        }).apply(compiler);
+        compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
+            if (compiler.options.mode === 'development'
+                || process.env['NODE_ENV'] === 'development') {
+                // We require publicPath to get css.hot-update.json
+                compilation.hooks.additionalTreeRuntimeRequirements.tap(this.name, (_, set) => {
+                    set.add(compiler.webpack.RuntimeGlobals.publicPath);
+                });
+                compilation.hooks.runtimeModule.tap(this.name, (runtimeModule, chunk) => {
+                    if (runtimeModule.name === 'require_chunk_loading') {
+                        const { path } = compilation.getPathWithInfo(options.filename ?? '[name].css', 
+                        // Rspack does not pass JsChunk to Rust.
+                        // See: https://github.com/web-infra-dev/rspack/blob/73c31abcb78472eb5a3d93e4ece19d9f106727a6/crates/rspack_binding_values/src/path_data.rs#L62
+                        { filename: chunk.name });
+                        this.#overrideChunkLoadingRuntimeModule(compiler, runtimeModule, path.replace('.css', `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`));
+                    }
+                });
+                compilation.hooks.processAssets.tapPromise({
+                    name: this.name,
+                    stage: 300,
+                }, async (assets) => {
+                    for (const [filename, source] of Object.entries(assets)) {
+                        if (!filename.endsWith('.css')) {
+                            continue;
+                        }
+                        // TODO: sourcemap
+                        const content = source.source().toString('utf-8');
+                        const { cssMap } = LynxTemplatePlugin.convertCSSChunksToMap([content], options.cssPlugins);
+                        const cssDeps = Object.entries(cssMap).reduce((acc, [key, value]) => {
+                            const importRuleNodes = value.filter((node) => node.type === 'ImportRule');
+                            acc[key] = importRuleNodes.map(({ href }) => href);
+                            return acc;
+                        }, {});
+                        const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(
+                        // @ts-expect-error Rspack to Webpack Compilation
+                        compilation);
+                        try {
+                            const encoded = await LynxEncodePlugin.encodeCSS([content], {
+                                targetSdkVersion: options.targetSdkVersion,
+                                enableCSSSelector: options.enableCSSSelector,
+                                enableRemoveCSSScope: options.enableRemoveCSSScope,
+                            }, options.cssPlugins, hooks.encode.taps.length > 0
+                                ? async (encodeOptions) => {
+                                    // @ts-expect-error Only CSS is needed
+                                    return await hooks.encode.promise({
+                                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                                        encodeOptions,
+                                    });
+                                }
+                                : undefined);
+                            const result = {
+                                content: encoded.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));
+                            this.hash = compilation.hash;
+                        }
+                        catch (error) {
+                            if (error && typeof error === 'object' && 'error_msg' in error) {
+                                compilation.errors.push(
+                                // TODO: use more human-readable error message(i.e.: using sourcemap to get source code)
+                                //       or give webpack/rspack with location of bundle
+                                new compiler.webpack.WebpackError(error.error_msg));
+                            }
+                            else {
+                                compilation.errors.push(error);
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+    #overrideChunkLoadingRuntimeModule(compiler, runtimeModule, filename) {
+        const { RuntimeGlobals } = compiler.webpack;
+        runtimeModule.source.source = Buffer.concat([
+            Buffer.from(runtimeModule.source.source),
+            // lynxCssFileName
+            Buffer.from(`
+      ${RuntimeGlobals.require}.lynxCssFileName = ${filename ? JSON.stringify(filename) : 'null'};
+    `),
+        ]);
+    }
+}
+//# sourceMappingURL=CssExtractRspackPlugin.js.map

package/lib/CssExtractWebpackPlugin.d.ts

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,99 @@
+// 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/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 type { CssExtractWebpackPluginOptions } from './CssExtractWebpackPlugin.js';
+export type { LoaderOptions } from './loader.js';
+export type { LoaderOptions as CssExtractRspackLoaderOptions } from './loader.js';
+export { CssExtractRspackPlugin } from './CssExtractRspackPlugin.js';
+export type { CssExtractRspackPluginOptions } from './CssExtractRspackPlugin.js';

package/lib/index.js

@@ -0,0 +1,11 @@
+// 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/loader.d.ts

@@ -0,0 +1,47 @@
+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;
+}
+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 pitch(this: LoaderContext<LoaderOptions>, request: string): Promise<string | undefined>;
+export default function loader(this: LoaderContext<LoaderOptions>, content: string): string | undefined;

package/lib/loader.js

@@ -0,0 +1,234 @@
+// 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') {
+                if (!locals) {
+                    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));
+            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')
+                    /**
+                     * 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(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 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

package/lib/rspack-loader.d.ts

@@ -0,0 +1,5 @@
+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;

package/lib/rspack-loader.js

@@ -0,0 +1,43 @@
+// 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';
+export async function pitch(request, 
+/** previousRequest */ _, data) {
+    if (this._compiler?.options?.experiments?.css) {
+        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;
+    }
+    const callback = this.async();
+    // See: https://github.com/web-infra-dev/rspack/pull/7878
+    const parseMeta = this.__internal__parseMeta;
+    try {
+        // Rspack does not return error in `importModule`.
+        // 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));
+        callback(null, resultSource, undefined, data);
+    }
+    catch (error) {
+        callback(error);
+    }
+    function addDependencies(dependencies) {
+        parseMeta[this._compiler.webpack.CssExtractRspackPlugin.pluginName] = JSON
+            .stringify(dependencies
+            .map(dep => ({
+            ...dep,
+            content: dep.content.toString('utf-8'),
+            sourceMap: dep.sourceMap?.toString('utf-8'),
+        })));
+    }
+}
+export default function loader(content) {
+    if (this._compiler?.options?.experiments?.css) {
+        return content;
+    }
+    return;
+}
+//# sourceMappingURL=rspack-loader.js.map

package/lib/util.d.ts

@@ -0,0 +1,24 @@
+import type { LoaderOptions } from 'mini-css-extract-plugin';
+import type { LoaderContext } from 'webpack';
+export declare function isAbsolutePath(str: string): boolean;
+export declare function isRelativePath(str: string): boolean;
+export declare function stringifyRequest(loaderContext: LoaderContext<LoaderOptions>, request: string): string;
+/**
+ * Extract file path from the identifier.
+ *
+ * @example
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css`,
+ * result in `./src/baz.css`
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css?cssId=123`, and the withPathQuery is false
+ * result in `./src/baz.css`
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css?cssId=123`, and the withPathQuery is true
+ * result in `./src/baz.css?cssId=123`
+ *
+ * @param identifier - The Webpack/Rspack identifier
+ * @param withPathQuery - Whether keep the query(e.g: ?xxx=xx) in the path
+ * @returns The resourcePath of the identifier.
+ */
+export declare function extractPathFromIdentifier(identifier: string, withPathQuery?: boolean): string | undefined;

package/lib/util.js

@@ -0,0 +1,65 @@
+// 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';
+export function isAbsolutePath(str) {
+    return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
+}
+const RELATIVE_PATH_REGEXP = /^\.\.?[/\\]/;
+export function isRelativePath(str) {
+    return RELATIVE_PATH_REGEXP.test(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));
+    }
+    const splitted = request.split('!');
+    const { context } = loaderContext;
+    return JSON.stringify(splitted
+        .map((part) => {
+        // First, separate singlePath from query, because the query might contain paths again
+        const splittedPart = /^(.*?)(\?.*)/.exec(part);
+        const query = splittedPart ? splittedPart[2] : '';
+        let singlePath = splittedPart ? splittedPart[1] : part;
+        if (isAbsolutePath(singlePath) && context) {
+            singlePath = path.relative(context, singlePath);
+            if (isAbsolutePath(singlePath)) {
+                // If singlePath still matches an absolute path, singlePath was on a different drive than context.
+                // In this case, we leave the path platform-specific without replacing any separators.
+                // @see https://github.com/webpack/loader-utils/pull/14
+                return singlePath + query;
+            }
+            if (isRelativePath(singlePath) === false) {
+                // Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
+                singlePath = `./${singlePath}`;
+            }
+        }
+        return singlePath.replace(/\\/g, '/') + query;
+    })
+        .join('!'));
+}
+/**
+ * Extract file path from the identifier.
+ *
+ * @example
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css`,
+ * result in `./src/baz.css`
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css?cssId=123`, and the withPathQuery is false
+ * result in `./src/baz.css`
+ *
+ * Given identifier `css-loader/index.js??ruleSet[1].rules[1].use[1]!./src/baz.css?cssId=123`, and the withPathQuery is true
+ * result in `./src/baz.css?cssId=123`
+ *
+ * @param identifier - The Webpack/Rspack identifier
+ * @param withPathQuery - Whether keep the query(e.g: ?xxx=xx) in the path
+ * @returns The resourcePath of the identifier.
+ */
+export function extractPathFromIdentifier(identifier, withPathQuery = false) {
+    const regex = withPathQuery ? /!([^!]+)$/ : /!([^!?]+)(?:\?[^!]*)?$/;
+    const matches = regex.exec(identifier);
+    return matches?.[1];
+}
+//# sourceMappingURL=util.js.map

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@lynx-js/css-extract-webpack-plugin",
+  "version": "0.5.0",
+  "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
+  "keywords": [
+    "webpack",
+    "Lynx"
+  ],
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Qingyu Wang",
+    "email": "colinwang.0616@gmail.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./runtime/hotModuleReplacement.cjs": {
+      "type": "./runtime/hotModuleReplacement.d.cts",
+      "default": "./runtime/hotModuleReplacement.cjs"
+    },
+    "./runtime/hotModuleReplacement.lepus.cjs": {
+      "type": "./runtime/hotModuleReplacement.lepus.d.cts",
+      "default": "./runtime/hotModuleReplacement.lepus.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "!lib/**/*.js.map",
+    "runtime",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "dependencies": {
+    "mini-css-extract-plugin": "^2.9.2"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "7.51.0",
+    "@rspack/cli": "1.2.6",
+    "@rspack/core": "1.2.6",
+    "css-loader": "^7.1.2",
+    "sass-loader": "^16.0.5",
+    "webpack": "^5.98.0",
+    "@lynx-js/css-serializer": "0.1.1",
+    "@lynx-js/template-webpack-plugin": "0.6.3",
+    "@lynx-js/test-tools": "0.0.0"
+  },
+  "peerDependencies": {
+    "@lynx-js/template-webpack-plugin": "^0.5.0 || ^0.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "api-extractor": "api-extractor run --verbose",
+    "test": "pnpm -w run test --project webpack/css-extract"
+  }
+}

package/runtime/hotModuleReplacement.cjs

@@ -0,0 +1,62 @@
+/**
+ * @param {Function} fn
+ * @param {number} time
+ * @returns {function(): void}
+ */
+function debounce(fn, time) {
+  let timeout = 0;
+
+  return function debounced(...args) {
+    clearTimeout(timeout);
+
+    timeout = setTimeout(
+      () => fn.apply(this, args),
+      time,
+    );
+  };
+}
+
+function updateStyle(cssId = 0) {
+  const filename = __webpack_require__.lynxCssFileName;
+  if (!filename) {
+    throw new Error('Css Filename not found');
+  }
+
+  lynx.requireModuleAsync(
+    // lynx.requireModuleAsync has two level hash and we cannot delete
+    // the LynxGroup level cache here.
+    // Temporarily using `Date.now` to avoid being cached.
+    __webpack_require__.p + filename,
+    (err, ret) => {
+      if (err) {
+        throw new Error('Load update css file `' + filename + '` failed');
+      }
+
+      if (ret.content) {
+        lynx.getCoreContext().dispatchEvent({
+          type: 'lynx.hmr.css',
+          data: { cssId, content: ret.content, deps: ret.deps },
+        });
+      }
+    },
+  );
+}
+
+/**
+ * @param {string | number} moduleId
+ * @param {unknown} options
+ * @param {number=} cssId
+ * @returns {() => void}
+ */
+module.exports = function update(moduleId, options, cssId) {
+  // TODO: should not pass cssId === ''
+  if (!cssId) {
+    cssId = 0;
+  }
+
+  function update() {
+    updateStyle(cssId);
+  }
+
+  return debounce(update, 50);
+};

package/runtime/hotModuleReplacement.d.cts

@@ -0,0 +1,7 @@
+declare function update(
+  moduleId: string | number,
+  options: unknown,
+  cssId?: number,
+): () => void;
+
+export = update;

package/runtime/hotModuleReplacement.lepus.cjs

@@ -0,0 +1,34 @@
+function main() {
+  try {
+    lynx.getJSContext().addEventListener('lynx.hmr.css', (event) => {
+      try {
+        const { data: { cssId, content, deps } } = event;
+        // Update the css deps first because the css deps are updated actually.
+        if (Array.isArray(deps[cssId])) {
+          deps[cssId].forEach(depCSSId => {
+            lynx.getDevtool().replaceStyleSheetByIdWithBase64(
+              Number(depCSSId),
+              content,
+            );
+          });
+        }
+
+        lynx.getDevtool().replaceStyleSheetByIdWithBase64(
+          Number(cssId),
+          content,
+        );
+
+        __FlushElementTree();
+      } catch (error) {
+        // TODO: use webpack-dev-server logger
+        console.error(error);
+      }
+    });
+  } catch (error) {
+    // TODO: use webpack-dev-server logger
+    console.warn(`[HMR] no lynx.getJSContext() found, will not HMR CSS`);
+    console.warn(error);
+  }
+}
+
+main();

package/runtime/hotModuleReplacement.lepus.d.cts

@@ -0,0 +1 @@
+export {};