perf(swc): switch to xxHash32 and Base62 (jantimon#23)

- Replaced `sha3_256` with `xxHash32` as it produces a smaller output (32bit vs 256bit)
- Replaced Base64 with Base62 as it generates [a-zA-Z0-9] and removed the obsolete replacement of certain characters

Co-authored-by: Luca Schneider <luca.schneider@digitecgalaxus.ch>
Co-authored-by: Martin Disch <martindisch@gmail.com>

Author: Mad-Kat

package.json

@@ -63,8 +63,8 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.20.1",
     "@babel/types": "^7.20.2",
-    "@swc/core": "1.2.211",
-    "@swc/jest": "^0.2.21",
+    "@swc/core": "1.3.27",
+    "@swc/jest": "^0.2.24",
     "@types/jest": "^29.2.3",
     "jest": "^29.3.1",
     "terser": "5.15.1",

swc/Cargo.lock

@@ -24,11 +24,11 @@ swc_core = {version = "0.58.0", features = [
 	"ecma_ast",
 	"common",
 ]}
-sha3 = "0.10.6"
-base64 = "0.21.0"
 pathdiff = "0.2.1"
 regex = "1.7.1"
 lazy_static = "1.4.0"
+xxhash-rust = { version = "0.8.6", features = ["xxh32"] }
+base62 = "2.0.2"
 
 [dev-dependencies]
 swc_ecma_parser = "0.124.2"

swc/Cargo.toml

@@ -1,41 +1,31 @@
-use base64::{engine::general_purpose, Engine as _};
-use sha3::{Digest, Sha3_256};
+use xxhash_rust::xxh32::xxh32;
 
-/// Creates a CSS identifier of the given length using SHA3.
-///
-/// In CSS, identifiers (including element names, classes, and IDs in
-/// selectors) can contain only the characters \[a-zA-Z0-9\] and ISO 10646
-/// characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
-/// they cannot start with a digit, two hyphens, or a hyphen followed by a
-/// digit.
-pub fn hash(data: impl AsRef<[u8]>, length: usize) -> String {
-    let mut hasher = Sha3_256::new();
-    hasher.update(data);
-    let hash_base64 = general_purpose::URL_SAFE_NO_PAD.encode(hasher.finalize());
-
-    let first_char = hash_base64.chars().next().unwrap();
-    // Ensure that the identifier starts with [_a-zA-Z]
-    let first_char = if first_char.is_ascii_digit() || first_char == '-' {
-        '_'
-    } else {
-        first_char
-    };
-    let css_safe_string = format!("{first_char}{}", &hash_base64[1..length]);
-
-    css_safe_string
+/// Creates a CSS identifier using xxHash (https://cyan4973.github.io/xxHash/).
+/// Shortened to base62 (https://en.wikipedia.org/wiki/Base62) to avoid invalid characters.
+pub fn hash(data: &str) -> String {
+    let hash = xxh32(data.as_bytes(), 0);
+    base62::encode(hash)
 }
 
 #[cfg(test)]
 mod tests {
     use super::*;
 
     #[test]
-    fn hey() {
-        assert_eq!(hash("hey", 5), "XldIH");
+    fn short() {
+        assert_eq!(hash("hey"), "2Hy69D");
+    }
+
+    #[test]
+    fn longer() {
+        assert_eq!(hash("hey how are you doing?"), "34D1Ek");
     }
 
     #[test]
-    fn hey_long() {
-        assert_eq!(hash("hey", 15), "XldIHZZJaTy1TcB");
+    fn longest() {
+        assert_eq!(
+            hash("hey how are you doing? I am doing fine, thanks for asking."),
+            "1XQ5hm"
+        );
     }
 }

swc/src/hash.rs

@@ -26,7 +26,7 @@ use hash::hash;
 #[serde(rename_all = "camelCase")]
 #[serde(deny_unknown_fields)]
 pub struct Config {
-    /// Prefix variables with a readable name, e.g. `primary--1isauia0`.
+    /// Prefix variables with a readable name, e.g. `primary--2Hy69D0`.
     #[serde(default = "bool::default")]
     pub display_name: bool,
     /// The hash for a css-variable depends on the file name including createVar().
@@ -175,7 +175,7 @@ pub fn process_transform(program: Program, metadata: TransformPluginProgramMetad
         .get_context(&TransformPluginMetadataContextKind::Filename)
         .expect("failed to get filename");
     let deterministic_path = relative_posix_path(&config.base_path, &file_name);
-    let hashed_filename = hash(deterministic_path, 5);
+    let hashed_filename = hash(&deterministic_path);
 
     program.fold_with(&mut as_folder(TransformVisitor::new(
         config,

swc/src/lib.rs

@@ -5,9 +5,8 @@ describe("createVar", () => {
       const foo = createVar();
       const bar = createVar();
       const baz = createVar();
-      expect(foo.name).toMatchInlineSnapshot(`"--foo--_llxb0"`);
-      expect(bar.name).toMatchInlineSnapshot( `"--bar--_llxb1"`);
-      expect(baz.name).toMatchInlineSnapshot( `"--baz--_llxb2"`);
+      expect(foo.name).toMatchInlineSnapshot(`"--foo--2hzhhy0"`);
+      expect(bar.name).toMatchInlineSnapshot( `"--bar--2hzhhy1"`);
+      expect(baz.name).toMatchInlineSnapshot( `"--baz--2hzhhy2"`);
     });
-
   });