Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: if not processed, CSS Modules return a proxy, scope class name…
…s by filename (#1803)
- Loading branch information
1 parent
58fe60b
commit f32383a
Showing
19 changed files
with
353 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { createHash } from 'node:crypto' | ||
import type { CSSModuleScopeStrategy } from '../../types' | ||
|
||
export function generateCssFilenameHash(filepath: string) { | ||
return createHash('md5').update(filepath).digest('hex').slice(0, 6) | ||
} | ||
|
||
export function generateScopedClassName( | ||
strategy: CSSModuleScopeStrategy, | ||
name: string, | ||
filename: string, | ||
) { | ||
// should be configured by Vite defaults | ||
if (strategy === 'scoped') | ||
return null | ||
if (strategy === 'non-scoped') | ||
return name | ||
const hash = generateCssFilenameHash(filename) | ||
return `_${name}_${hash}` | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"name": "@vitest/test-css", | ||
"private": true, | ||
"scripts": { | ||
"test": "node testing.mjs", | ||
"coverage": "vitest run --coverage" | ||
}, | ||
"devDependencies": { | ||
"jsdom": "^20.0.0", | ||
"vitest": "workspace:*" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
.main { | ||
display: flex; | ||
width: 100px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.main { | ||
display: flex; | ||
} | ||
|
||
.module { | ||
width: 100px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { describe, expect, test } from 'vitest' | ||
import { useRemoveStyles } from './utils' | ||
|
||
describe('don\'t process css by default', () => { | ||
useRemoveStyles() | ||
|
||
test('doesn\'t apply css', async () => { | ||
await import('../src/App.css') | ||
|
||
const element = document.createElement('div') | ||
element.className = 'main' | ||
const computed = window.getComputedStyle(element) | ||
expect(computed.display).toBe('block') | ||
expect(element).toMatchInlineSnapshot(` | ||
<div | ||
class="main" | ||
/> | ||
`) | ||
}) | ||
|
||
test('module is not processed', async () => { | ||
const { default: styles } = await import('../src/App.module.css') | ||
|
||
// HASH is static, based on the filepath to root | ||
expect(styles.module).toBe('_module_6dc87e') | ||
expect(styles.someRandomValue).toBe('_someRandomValue_6dc87e') | ||
const element = document.createElement('div') | ||
element.className = '_module_6dc87e' | ||
const computed = window.getComputedStyle(element) | ||
expect(computed.display).toBe('block') | ||
expect(computed.width).toBe('') | ||
expect(element).toMatchInlineSnapshot(` | ||
<div | ||
class="_module_6dc87e" | ||
/> | ||
`) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { expect, test } from 'vitest' | ||
|
||
test('module is processed', async () => { | ||
const { default: styles } = await import('../src/App.module.css') | ||
|
||
expect(styles.module).toBe('module') | ||
expect(styles.someRandomValue).toBeUndefined() | ||
const element = document.createElement('div') | ||
element.className = `${styles.main} ${styles.module}` | ||
const computed = window.getComputedStyle(element) | ||
expect(computed.display).toBe('flex') | ||
expect(computed.width).toBe('100px') | ||
expect(element).toMatchInlineSnapshot(` | ||
<div | ||
class="main module" | ||
/> | ||
`) | ||
}) |
Oops, something went wrong.