fix: extract-css should pass cacheable (#6707)

* fix: extract-css should pass cacheable

* test: pass through cacheable (#6711)

* test: pass cachable in css extract

* test: pass cachable in css extract

---------

Co-authored-by: harpsealjs <lingyucoder@gmail.com>

crates/node_binding/binding.d.ts

@@ -344,6 +344,7 @@ export interface JsExecuteModuleResult {
   contextDependencies: Array<string>
   buildDependencies: Array<string>
   missingDependencies: Array<string>
+  cacheable: boolean
   assets: Array<string>
   id: number
 }

crates/rspack_binding_values/src/compilation.rs

@@ -476,6 +476,7 @@ impl JsCompilation {
       match result {
         Ok(res) => {
           let js_result = JsExecuteModuleResult {
+            cacheable: res.cacheable,
             file_dependencies: res
               .file_dependencies
               .into_iter()
@@ -513,6 +514,7 @@ pub struct JsExecuteModuleResult {
   pub context_dependencies: Vec<String>,
   pub build_dependencies: Vec<String>,
   pub missing_dependencies: Vec<String>,
+  pub cacheable: bool,
   pub assets: Vec<String>,
   pub id: u32,
 }

crates/rspack_core/src/compiler/module_executor/execute.rs

@@ -20,6 +20,7 @@ pub type ExecuteModuleId = u32;
 
 #[derive(Debug, Default)]
 pub struct ExecuteModuleResult {
+  pub cacheable: bool,
   pub file_dependencies: HashSet<std::path::PathBuf>,
   pub context_dependencies: HashSet<std::path::PathBuf>,
   pub missing_dependencies: HashSet<std::path::PathBuf>,
@@ -203,9 +204,12 @@ impl Task<MakeTaskContext> for ExecuteTask {
     let module_graph = compilation.get_module_graph();
     let mut execute_result = match exports {
       Ok(_) => {
-        let mut result = modules
-          .iter()
-          .fold(ExecuteModuleResult::default(), |mut res, m| {
+        let mut result = modules.iter().fold(
+          ExecuteModuleResult {
+            cacheable: true,
+            ..Default::default()
+          },
+          |mut res, m| {
             let module = module_graph.module_by_identifier(m).expect("unreachable");
 
             let build_info = &module.build_info();
@@ -222,9 +226,13 @@ impl Task<MakeTaskContext> for ExecuteTask {
               res
                 .build_dependencies
                 .extend(info.build_dependencies.iter().cloned());
+              if !info.cacheable {
+                res.cacheable = false;
+              }
             }
             res
-          });
+          },
+        );
 
         result.id = id;
 

crates/rspack_plugin_extract_css/src/css_dependency.rs

@@ -25,7 +25,7 @@ pub struct CssDependency {
   pub(crate) order_index: u32,
 
   resource_identifier: String,
-
+  pub(crate) cacheable: bool,
   pub(crate) file_dependencies: FxHashSet<PathBuf>,
   pub(crate) context_dependencies: FxHashSet<PathBuf>,
   pub(crate) missing_dependencies: FxHashSet<PathBuf>,
@@ -43,6 +43,7 @@ impl CssDependency {
     source_map: String,
     identifier_index: u32,
     order_index: u32,
+    cacheable: bool,
     file_dependencies: FxHashSet<PathBuf>,
     context_dependencies: FxHashSet<PathBuf>,
     missing_dependencies: FxHashSet<PathBuf>,
@@ -60,6 +61,7 @@ impl CssDependency {
       identifier_index,
       order_index,
       resource_identifier,
+      cacheable,
       file_dependencies,
       context_dependencies,
       missing_dependencies,

crates/rspack_plugin_extract_css/src/css_module.rs

@@ -40,7 +40,7 @@ pub(crate) struct CssModule {
   dependencies: Vec<DependencyId>,
 
   identifier__: Identifier,
-
+  cacheable: bool,
   file_dependencies: FxHashSet<PathBuf>,
   context_dependencies: FxHashSet<PathBuf>,
   missing_dependencies: FxHashSet<PathBuf>,
@@ -84,6 +84,7 @@ impl CssModule {
       build_meta: None,
       source_map_kind: rspack_util::source_map::SourceMapKind::empty(),
       identifier__,
+      cacheable: dep.cacheable,
       file_dependencies: dep.file_dependencies,
       context_dependencies: dep.context_dependencies,
       missing_dependencies: dep.missing_dependencies,
@@ -160,6 +161,7 @@ impl Module for CssModule {
     Ok(BuildResult {
       build_info: BuildInfo {
         hash: Some(self.compute_hash(build_context.compiler_options)),
+        cacheable: self.cacheable,
         file_dependencies: self.file_dependencies.clone(),
         context_dependencies: self.context_dependencies.clone(),
         missing_dependencies: self.missing_dependencies.clone(),

crates/rspack_plugin_extract_css/src/parser_and_generator.rs

@@ -87,6 +87,7 @@ impl ParserAndGenerator for CssExtractParserAndGenerator {
                 source_map.clone(),
                 *identifier_index,
                 idx,
+                parse_context.build_info.cacheable,
                 parse_context.build_info.file_dependencies.clone(),
                 parse_context.build_info.context_dependencies.clone(),
                 parse_context.build_info.missing_dependencies.clone(),

packages/rspack-test-tools/src/processor/hot-step.ts

@@ -188,6 +188,8 @@ export class HotSnapshotProcessor<
 			for (let [raw, replacement] of Object.entries(hashes)) {
 				str = str.split(raw).join(replacement);
 			}
+			// handle timestamp in css-extract
+			str = str.replace(/\/\/ (\d+)\s+(?=var cssReload)/, "");
 			return str;
 		};
 

packages/rspack-test-tools/tests/diagnosticsCases/module-build-failed/asset-module-build-failed/stats.err

@@ -1 +1 @@
-ERROR in ./logo.svg× Module build failed:╰─▶   × Error: Failed to loadat Object.<anonymous>.module.exports (<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/asset-module-build-failed/my-loader.js:2:8)at LOADER_EXECUTION (<RSPACK_ROOT>/dist/loader-runner/index.js:620:23)at runSyncOrAsync (<RSPACK_ROOT>/dist/loader-runner/index.js:621:11)at <RSPACK_ROOT>/dist/loader-runner/index.js:725:9at handleResult (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:125:5)at loadLoader (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:106:16)at iterateNormalLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:714:5)at <RSPACK_ROOT>/dist/loader-runner/index.js:541:13at new Promise (<anonymous>)at runLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:516:12)help: File was processed with this loader: '<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/asset-module-build-failed/my-loader.js'
+ERROR in ./logo.svg× Module build failed:╰─▶   × Error: Failed to loadat Object.<anonymous>.module.exports (<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/asset-module-build-failed/my-loader.js:2:8)at LOADER_EXECUTION (<RSPACK_ROOT>/dist/loader-runner/index.js:626:23)at runSyncOrAsync (<RSPACK_ROOT>/dist/loader-runner/index.js:627:11)at <RSPACK_ROOT>/dist/loader-runner/index.js:731:9at handleResult (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:125:5)at loadLoader (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:106:16)at iterateNormalLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:720:5)at <RSPACK_ROOT>/dist/loader-runner/index.js:547:13at new Promise (<anonymous>)at runLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:522:12)help: File was processed with this loader: '<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/asset-module-build-failed/my-loader.js'

packages/rspack-test-tools/tests/diagnosticsCases/module-build-failed/loader-throw-error/stats.err

@@ -1 +1 @@
-ERROR in ./lib.js× Module build failed:╰─▶   × Error: Failed to loadat Object.<anonymous>.module.exports (<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/loader-throw-error/my-loader.js:2:9)at LOADER_EXECUTION (<RSPACK_ROOT>/dist/loader-runner/index.js:620:23)at runSyncOrAsync (<RSPACK_ROOT>/dist/loader-runner/index.js:621:11)at <RSPACK_ROOT>/dist/loader-runner/index.js:725:9at handleResult (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:125:5)at loadLoader (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:106:16)at iterateNormalLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:714:5)at <RSPACK_ROOT>/dist/loader-runner/index.js:541:13at new Promise (<anonymous>)at runLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:516:12)help: File was processed with this loader: '<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/loader-throw-error/my-loader.js'
+ERROR in ./lib.js× Module build failed:╰─▶   × Error: Failed to loadat Object.<anonymous>.module.exports (<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/loader-throw-error/my-loader.js:2:9)at LOADER_EXECUTION (<RSPACK_ROOT>/dist/loader-runner/index.js:626:23)at runSyncOrAsync (<RSPACK_ROOT>/dist/loader-runner/index.js:627:11)at <RSPACK_ROOT>/dist/loader-runner/index.js:731:9at handleResult (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:125:5)at loadLoader (<RSPACK_ROOT>/dist/loader-runner/loadLoader.js:106:16)at iterateNormalLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:720:5)at <RSPACK_ROOT>/dist/loader-runner/index.js:547:13at new Promise (<anonymous>)at runLoaders (<RSPACK_ROOT>/dist/loader-runner/index.js:522:12)help: File was processed with this loader: '<PROJECT_ROOT>/tests/diagnosticsCases/module-build-failed/loader-throw-error/my-loader.js'

packages/rspack-test-tools/tests/hotCases/css/css-extract/__snapshots__/web/0.snap.txt

@@ -0,0 +1,12 @@
+# Case css-extract: Step 0
+
+## Changed Files
+
+
+## Asset Files
+- Bundle: bundle.js
+
+## Manifest
+
+		
+## Update

packages/rspack-test-tools/tests/hotCases/css/css-extract/__snapshots__/web/1.snap.txt

@@ -0,0 +1,64 @@
+# Case css-extract: Step 1
+
+## Changed Files
+- entry.js
+
+## Asset Files
+- Bundle: bundle.js
+- Manifest: main.LAST_HASH.hot-update.json, size: 28
+- Update: main.LAST_HASH.hot-update.js, size: 924
+
+## Manifest
+
+### main.LAST_HASH.hot-update.json
+
+```json
+{"c":["main"],"r":[],"m":[]}
+```
+
+		
+## Update
+
+
+### main.LAST_HASH.hot-update.js
+
+#### Changed Modules
+- ./entry.js
+- ./index.module.css
+
+#### Changed Runtime Modules
+- webpack/runtime/get_full_hash
+
+#### Changed Content
+```js
+"use strict";
+self["webpackHotUpdate"]('main', {
+"./entry.js": (function (module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */var _index_module_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.module.css */ "./index.module.css");
+
+module.hot.accept();
+// modify
+/* harmony default export */ __webpack_exports__["default"] = (_index_module_css__WEBPACK_IMPORTED_MODULE_0__["default"]);
+
+
+}),
+"./index.module.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+/* harmony default export */ __webpack_exports__["default"] = ({"bar":"Te04splqSHRbkdUMfiwa"});
+
+}),
+
+},function(__webpack_require__) {
+// webpack/runtime/get_full_hash
+(() => {
+__webpack_require__.h = function () {
+	return "CURRENT_HASH";
+};
+
+})();
+
+}
+);
+```

packages/rspack-test-tools/tests/hotCases/css/css-extract/entry.js

@@ -0,0 +1,8 @@
+import styles from './index.module.css'
+module.hot.accept();
+export default styles;
+---
+import styles from './index.module.css'
+module.hot.accept();
+// modify
+export default styles;

packages/rspack-test-tools/tests/hotCases/css/css-extract/entry2.js

@@ -0,0 +1,3 @@
+import styles from './index.module.css'
+module.hot.accept();
+export default styles;

packages/rspack-test-tools/tests/hotCases/css/css-extract/index.js

@@ -0,0 +1,11 @@
+const styles = require('./entry').default
+require('./entry2')
+
+it("css hmr", (done) => {
+	expect(styles).toHaveProperty('foo')
+	NEXT(require("../../update")(done, true, () => {
+		const updatedStyles = require('./entry').default
+		expect(updatedStyles).toHaveProperty('bar')
+		done()
+	}));
+});

packages/rspack-test-tools/tests/hotCases/css/css-extract/index.module.css

@@ -0,0 +1,3 @@
+.foo {
+    background-color: blue;
+}

packages/rspack-test-tools/tests/hotCases/css/css-extract/loader.js

@@ -0,0 +1,14 @@
+let i = 0;
+module.exports = function(content) {
+  this.cacheable(false);
+  i++;
+  if (i === 1) {
+    return content;
+  } else {
+    return `
+		.bar {
+			color: red;
+		}
+    `;
+  }
+}

packages/rspack-test-tools/tests/hotCases/css/css-extract/rspack.config.js

@@ -0,0 +1,35 @@
+const rspack = require("@rspack/core");
+
+/** @type {import("@rspack/core").Configuration} */
+module.exports = {
+  cache: true,
+  mode: "development",
+  entry: "./index",
+  module: {
+    rules: [
+      {
+        test: /\.module.css$/,
+        use: [
+          {
+            loader: rspack.CssExtractRspackPlugin.loader,
+						options: {
+							emit: false,
+							esModule: true,
+						}
+          },
+          "css-loader",
+					"./loader.js"
+        ]
+      },
+    ]
+  },
+  experiments: {
+    css: false,
+  },
+  plugins: [
+    new rspack.CssExtractRspackPlugin({
+      filename: "[name].css",
+			runtime: false,
+    }),
+  ]
+};

packages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/__snapshots__/web/0.snap.txt

@@ -0,0 +1,12 @@
+# Case recovery-cacheable: Step 0
+
+## Changed Files
+
+
+## Asset Files
+- Bundle: bundle.js
+
+## Manifest
+
+		
+## Update

packages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/__snapshots__/web/2.snap.txt

@@ -0,0 +1,60 @@
+# Case recovery-cacheable: Step 2
+
+## Changed Files
+- change.css
+
+## Asset Files
+- Bundle: bundle.js
+- Manifest: main.LAST_HASH.hot-update.json, size: 28
+- Update: main.LAST_HASH.hot-update.js, size: 861
+
+## Manifest
+
+### main.LAST_HASH.hot-update.json
+
+```json
+{"c":["main"],"r":[],"m":[]}
+```
+
+		
+## Update
+
+
+### main.LAST_HASH.hot-update.js
+
+#### Changed Modules
+- ./change.css?5dec
+
+#### Changed Runtime Modules
+- webpack/runtime/get_full_hash
+
+#### Changed Content
+```js
+"use strict";
+self["webpackHotUpdate"]('main', {
+"./change.css?5dec": (function (module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by css-extract-rspack-plugin
+
+    if(true) {
+      var cssReload = __webpack_require__(/*! ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
+      module.hot.dispose(cssReload);
+      module.hot.accept(undefined, function(__WEBPACK_OUTDATED_DEPENDENCIES__) {
+(cssReload)(__WEBPACK_OUTDATED_DEPENDENCIES__); }.bind(this));
+    }
+
+
+}),
+
+},function(__webpack_require__) {
+// webpack/runtime/get_full_hash
+(() => {
+__webpack_require__.h = function () {
+	return "CURRENT_HASH";
+};
+
+})();
+
+}
+);
+```

packages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/change.css

@@ -0,0 +1,9 @@
+body {
+  background-color: red;
+}
+---
+body {} {} {@}
+---
+body {
+  background-color: yellow;
+}

packages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/change.js

@@ -0,0 +1 @@
+import './change.css'