css modules: use a terser selector format that requires less escaping (#3437)

Fixes WEB-447.

Previously, generated classnames would include literal `/` characters,
which need escaping when generating selectors. While users should still
escape selectors, this avoids it for this case and makes generated code
easier to read. This format is also more aligned with what webpack-based
css modules generates.

This also removes the square character as a separator, since it breaks
words and makes double-clicking for selection more difficult.

Author: wbinnssmith

Cargo.lock

@@ -18,8 +18,7 @@ export default function Home() {
 function runTests() {
   it("returns structured data about the font styles from the font function", () => {
     expect(interNoArgs).toEqual({
-      className:
-        "className◽[project-with-next]/crates/next-dev-tests/tests/integration/next/font-google/basic/[embedded_modules]/@vercel/turbopack-next/internal/font/google/inter_34ab8b4d.module.css",
+      className: "className__inter_34ab8b4d__77c0d301",
       style: {
         fontFamily: "'__Inter_34ab8b4d'",
         fontStyle: "normal",

crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js

@@ -13,8 +13,9 @@ bench = false
 anyhow = "1.0.47"
 async-trait = "0.1.56"
 indexmap = { workspace = true }
+once_cell = "1.13.0"
+regex = "1.6.0"
 serde = "1.0.136"
-
 turbo-tasks = { path = "../turbo-tasks" }
 turbo-tasks-fs = { path = "../turbo-tasks-fs" }
 turbo-tasks-hash = { path = "../turbo-tasks-hash" }

crates/turbopack-css/Cargo.toml

@@ -1,7 +1,9 @@
 use std::sync::Arc;
 
-use anyhow::Result;
+use anyhow::{Context, Result};
 use indexmap::IndexMap;
+use once_cell::sync::Lazy;
+use regex::Regex;
 use swc_core::{
     common::{
         errors::Handler, source_map::SourceMapGenConfig, BytePos, FileName, LineCol, SourceMap,
@@ -26,6 +28,9 @@ use crate::{
     CssModuleAssetType,
 };
 
+// Capture up until the first "."
+static BASENAME_RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"^[^.]*").unwrap());
+
 #[turbo_tasks::value(shared, serialization = "none", eq = "manual")]
 pub enum ParseResult {
     Ok {
@@ -201,15 +206,19 @@ async fn parse_content(
         CssModuleAssetType::Global => Default::default(),
         CssModuleAssetType::Module => {
             let imports = swc_core::css::modules::imports::analyze_imports(&parsed_stylesheet);
+            let basename = BASENAME_RE
+                .captures(fs_path.file_name())
+                .context("Must include basename preceding .")?
+                .get(0)
+                .context("Must include basename preceding .")?
+                .as_str();
+            // Truncate this as u32 so it's formated as 8-character hex in the suffic below
+            let path_hash = turbo_tasks_hash::hash_xxh3_hash64(fs_path_str) as u32;
             let result = swc_core::css::modules::compile(
                 &mut parsed_stylesheet,
                 // TODO swc_css_modules should take `impl TransformConfig + '_`
                 ModuleTransformConfig {
-                    // Note this uses an square emoji to join class name with module name
-                    // This emoji is usually not used in css class names so it's easy for the user
-                    // to see which class names are generated by css modules. Its also a pretty
-                    // small, so it's not too intense for the eyes.
-                    suffix: format!("◽{}", fs_path_str),
+                    suffix: format!("__{}__{:x}", basename, path_hash),
                 },
             );
             let mut exports = result.renamed.into_iter().collect::<IndexMap<_, _>>();

crates/turbopack-css/src/parse.rs

@@ -31,3 +31,8 @@ turbopack-env = { path = "../turbopack-env" }
 
 [build-dependencies]
 turbo-tasks-build = { path = "../turbo-tasks-build" }
+
+[features]
+default = ["native-tls"]
+native-tls = ["next-core/native-tls"]
+rustls-tls = ["next-core/rustls-tls"]