fix(turbopack): Fix CSS Modules class name for lightningcss mode (ver…

…cel/turborepo#7718) ### Description `lightningcss` enforces the class name to end with `[local]`. See: https://lightningcss.dev/css-modules.html#css-grid ### Testing Instructions I'll add a test soon. Closes PACK-2731
vercel · Mar 13, 2024 · 37bf88c · 37bf88c
1 parent eac9538
commit 37bf88c
Show file tree

Hide file tree

Showing 26 changed files with 123 additions and 34 deletions.
diff --git a/crates/turbopack-css/src/process.rs b/crates/turbopack-css/src/process.rs
@@ -539,11 +539,11 @@ async fn process_content(
             CssModuleAssetType::Module => Some(lightningcss::css_modules::Config {
                 pattern: Pattern {
                     segments: smallvec![
-                        Segment::Local,
-                        Segment::Literal("__"),
                         Segment::Name,
                         Segment::Literal("__"),
                         Segment::Hash,
+                        Segment::Literal("__"),
+                        Segment::Local,
                     ],
                 },
                 dashed_idents: false,

diff --git a/crates/turbopack-tests/tests/snapshot/css/css-modules/input/index.js b/crates/turbopack-tests/tests/snapshot/css/css-modules/input/index.js
@@ -0,0 +1,3 @@
+import style from "./style.module.css";
+
+console.log(style);
diff --git a/crates/turbopack-tests/tests/snapshot/css/css-modules/input/style.module.css b/crates/turbopack-tests/tests/snapshot/css/css-modules/input/style.module.css
@@ -0,0 +1,4 @@
+.module-style {
+  grid-template-areas: 'checkbox avatar content actions menu';
+}
+
diff --git a/...ss-modules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_8abc52._.js b/...ss-modules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_8abc52._.js
diff --git a/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_8abc52._.js.map b/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_8abc52._.js.map
diff --git a/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_250a0b.js b/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_250a0b.js
@@ -0,0 +1,12 @@
+(globalThis.TURBOPACK = globalThis.TURBOPACK || []).push([
+    "output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_250a0b.js",
+    {},
+]);
+(globalThis.TURBOPACK_CHUNK_LISTS = globalThis.TURBOPACK_CHUNK_LISTS || []).push({
+  "path": "output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_250a0b.js",
+  "chunks": [
+    "output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_71f14f.css",
+    "output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_8abc52._.js"
+  ],
+  "source": "entry"
+});
diff --git a/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_61f6de.js b/...odules/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_61f6de.js
diff --git a/...es/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_61f6de.js.map b/...es/output/crates_turbopack-tests_tests_snapshot_css_css-modules_input_index_61f6de.js.map
diff --git a/...utput/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_71f14f.css b/...utput/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_71f14f.css
diff --git a/...t/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_71f14f.css.map b/...t/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_71f14f.css.map
diff --git a/...utput/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_7d7e1c.css b/...utput/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_7d7e1c.css
diff --git a/...t/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_7d7e1c.css.map b/...t/crates_turbopack-tests_tests_snapshot_css_css-modules_input_style_module_7d7e1c.css.map
diff --git a/crates/turbopack-tests/tests/snapshot/css/css/output/8697f_foo_style_module_7d7e1c.css b/crates/turbopack-tests/tests/snapshot/css/css/output/8697f_foo_style_module_7d7e1c.css
diff --git a/...s/snapshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_34944c._.js b/...s/snapshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_34944c._.js
diff --git a/...apshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_34944c._.js.map b/...apshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_34944c._.js.map
diff --git a/.../snapshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_64af3a._.css b/.../snapshot/css/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_64af3a._.css
diff --git a/...ss/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_style_module_7d7e1c.css b/...ss/css/output/crates_turbopack-tests_tests_snapshot_css_css_input_style_module_7d7e1c.css
diff --git a/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_7d7e1c.css b/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_7d7e1c.css
diff --git a/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_cb674a.css b/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_cb674a.css
diff --git a/...mposes/output/crates_turbopack-tests_tests_snapshot_cssmodules_composes_input_2ba052._.js b/...mposes/output/crates_turbopack-tests_tests_snapshot_cssmodules_composes_input_2ba052._.js
diff --git a/...es/output/crates_turbopack-tests_tests_snapshot_cssmodules_composes_input_2ba052._.js.map b/...es/output/crates_turbopack-tests_tests_snapshot_cssmodules_composes_input_2ba052._.js.map
diff --git a/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_relative-uri-import_input_6d6278._.css b/...ut/79fb1_turbopack-tests_tests_snapshot_cssmodules_relative-uri-import_input_6d6278._.css
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import style from "./style.module.css";

		console.log(style);