refactor: update hashing for css modules

vitest-dev · Sep 4, 2022 · 8385186 · 8385186
1 parent 274d213
commit 8385186
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/packages/vitest/src/integrations/css/css-modules.ts b/packages/vitest/src/integrations/css/css-modules.ts
@@ -1,7 +1,8 @@
+import { createHash } from 'node:crypto'
 import type { CSSModuleScopeStrategy } from '../../types'
 
-export function generateCssFilenameHash(filename: string) {
-  return Buffer.from(filename).toString('base64').substring(0, 6)
+export function generateCssFilenameHash(filepath: string) {
+  return createHash('md5').update(filepath).digest('hex').slice(0, 6)
 }
 
 export function generateScopedClassName(

diff --git a/test/css/test/default-css.spec.ts b/test/css/test/default-css.spec.ts
@@ -22,16 +22,16 @@ describe('don\'t process css by default', () => {
     const { default: styles } = await import('../src/App.module.css')
 
     // HASH is static, based on the filepath to root
-    expect(styles.module).toBe('_module_c3JjL0')
-    expect(styles.someRandomValue).toBe('_someRandomValue_c3JjL0')
+    expect(styles.module).toBe('_module_6dc87e')
+    expect(styles.someRandomValue).toBe('_someRandomValue_6dc87e')
     const element = document.createElement('div')
-    element.className = '_module_c3JjL0'
+    element.className = '_module_6dc87e'
     const computed = window.getComputedStyle(element)
     expect(computed.display).toBe('block')
     expect(computed.width).toBe('')
     expect(element).toMatchInlineSnapshot(`
       <div
-        class="_module_c3JjL0"
+        class="_module_6dc87e"
       />
     `)
   })

diff --git a/test/css/test/process-css.spec.ts b/test/css/test/process-css.spec.ts
@@ -21,16 +21,16 @@ describe('process only css, not module css', () => {
   test('module is not processed', async () => {
     const { default: styles } = await import('../src/App.module.css')
 
-    expect(styles.module).toBe('_module_c3JjL0')
-    expect(styles.someRandomValue).toBe('_someRandomValue_c3JjL0')
+    expect(styles.module).toBe('_module_6dc87e')
+    expect(styles.someRandomValue).toBe('_someRandomValue_6dc87e')
     const element = document.createElement('div')
-    element.className = '_module_c3JjL0'
+    element.className = '_module_6dc87e'
     const computed = window.getComputedStyle(element)
     expect(computed.display).toBe('block')
     expect(computed.width).toBe('')
     expect(element).toMatchInlineSnapshot(`
       <div
-        class="_module_c3JjL0"
+        class="_module_6dc87e"
       />
     `)
   })

diff --git a/test/css/test/process-module.spec.ts b/test/css/test/process-module.spec.ts
@@ -16,16 +16,16 @@ describe('processing module css', () => {
   test('module is processed', async () => {
     const { default: styles } = await import('../src/App.module.css')
 
-    expect(styles.module).toBe('_module_c3JjL0')
+    expect(styles.module).toBe('_module_6dc87e')
     expect(styles.someRandomValue).toBeUndefined()
     const element = document.createElement('div')
-    element.className = '_main_c3JjL0 _module_c3JjL0'
+    element.className = '_main_6dc87e _module_6dc87e'
     const computed = window.getComputedStyle(element)
     expect(computed.display, 'css is processed').toBe('flex')
     expect(computed.width).toBe('100px')
     expect(element).toMatchInlineSnapshot(`
       <div
-        class="_main_c3JjL0 _module_c3JjL0"
+        class="_main_6dc87e _module_6dc87e"
       />
     `)
   })