fix(pack): preserve css module styles for dual imports (#3295)

Author: fireairforce

crates/pack-core/src/shared/transforms/inline_css/source_asset.rs

@@ -49,7 +49,9 @@ impl Asset for InlineCssFileSource {
     #[turbo_tasks::function]
     async fn content(&self) -> Result<Vc<AssetContent>> {
         let ident = self.css.ident().await?;
-        let ident_str = ident.path.to_string();
+        let mut ident_str = ident.path.to_string();
+        // Keep global and CSS Modules imports of the same file as distinct runtime styles.
+        ident_str.push_str(&ident.query);
         let content_import = StringifyJs(INLINE_CSS_CONTENT);
         let insert_js = StringifyJs(&*self.insert);
         let id_js = StringifyJs(&*ident_str);

crates/pack-tests/tests/snapshot/library/inline_css_dual_import/assert.js

@@ -0,0 +1,27 @@
+const assert = require("node:assert");
+const fs = require("node:fs");
+const path = require("node:path");
+
+const outputDir = path.join(__dirname, "output");
+const outputFiles = fs.readdirSync(outputDir);
+const bundle = fs.readFileSync(
+  path.join(outputDir, "index.morpho.min.js"),
+  "utf8",
+);
+const inlineStyleIds = [
+  ...bundle.matchAll(
+    /var update = [\s\S]*?\(\[\s*\[\s*"([^"]+\.css(?:\?modules)?)",/g,
+  ),
+].map((match) => match[1]);
+
+assert.deepStrictEqual(inlineStyleIds.sort(), [
+  "library/inline_css_dual_import/input/reward.less.css",
+  "library/inline_css_dual_import/input/reward.less.css?modules",
+]);
+assert.match(bundle, /\.reward-less__[\w]+__prizeBackgroundImage \{/);
+assert.match(bundle, /\\n\.prizeBackgroundImage \{/);
+assert.doesNotMatch(
+  outputFiles.join("\n"),
+  /\.css$/,
+  "inline CSS must not require a standalone stylesheet",
+);

crates/pack-tests/tests/snapshot/library/inline_css_dual_import/config.json

@@ -0,0 +1,22 @@
+{
+  "runtimeType": "Dummy",
+  "config": {
+    "entry": [
+      {
+        "import": "input/index.ts",
+        "name": "main",
+        "library": {
+          "name": "InlineCssDualImportLibrary"
+        }
+      }
+    ],
+    "output": {
+      "filename": "index.morpho.min.js",
+      "cssFilename": "index.morpho.min.css"
+    },
+    "sourceMaps": true,
+    "styles": {
+      "inlineCss": {}
+    }
+  }
+}

crates/pack-tests/tests/snapshot/library/inline_css_dual_import/input/index.ts

@@ -0,0 +1,4 @@
+import { prizeBackgroundImageClassName } from "./reward";
+import "./reward.less";
+
+export default prizeBackgroundImageClassName;

crates/pack-tests/tests/snapshot/library/inline_css_dual_import/input/reward.less

@@ -0,0 +1,4 @@
+.prizeBackgroundImage {
+  width: 528px;
+  height: 563px;
+}

crates/pack-tests/tests/snapshot/library/inline_css_dual_import/input/reward.ts

@@ -0,0 +1,3 @@
+import styles from "./reward.less";
+
+export const prizeBackgroundImageClassName = styles.prizeBackgroundImage;