Skip to content

Commit

Permalink
fix(css): treeshake css modules (#16051)
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy authored Mar 12, 2024
1 parent dd49505 commit 17d71ec
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 5 deletions.
2 changes: 1 addition & 1 deletion packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
map: { mappings: '' },
// avoid the css module from being tree-shaken so that we can retrieve
// it in renderChunk()
moduleSideEffects: inlined ? false : 'no-treeshake',
moduleSideEffects: modulesCode || inlined ? false : 'no-treeshake',
}
},

Expand Down
5 changes: 5 additions & 0 deletions playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -533,3 +533,8 @@ test.runIf(isBuild)('manual chunk path', async () => {
findAssetFile(/dir\/dir2\/manual-chunk-[-\w]{8}\.css$/),
).not.toBeUndefined()
})

test.runIf(isBuild)('CSS modules should be treeshaken if not used', () => {
const css = findAssetFile(/\.css$/, undefined, undefined, true)
expect(css).not.toContain('treeshake-module-b')
})
2 changes: 2 additions & 0 deletions playground/css/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ <h1>CSS</h1>
<p>Imported SASS module:</p>
<pre class="modules-sass-code"></pre>

<p class="modules-treeshake">CSS modules should treeshake in build</p>

<p>Imported compose/from CSS/SASS module:</p>
<p class="path-resolved-modules-css">
CSS modules composes path resolving: this should be turquoise
Expand Down
5 changes: 5 additions & 0 deletions playground/css/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ import sassMod from './mod.module.scss'
document.querySelector('.modules-sass').classList.add(sassMod['apply-color'])
text('.modules-sass-code', JSON.stringify(sassMod, null, 2))

import { a as treeshakeMod } from './treeshake-module/index.js'
document
.querySelector('.modules-treeshake')
.classList.add(treeshakeMod()['treeshake-module-a'])

import composesPathResolvingMod from './composes-path-resolving.module.css'
document
.querySelector('.path-resolved-modules-css')
Expand Down
5 changes: 5 additions & 0 deletions playground/css/treeshake-module/a.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import style from './a.module.css'

export function a() {
return style
}
3 changes: 3 additions & 0 deletions playground/css/treeshake-module/a.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.treeshake-module-a {
color: red;
}
5 changes: 5 additions & 0 deletions playground/css/treeshake-module/b.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import style from './b.module.css'

export function b() {
return style
}
3 changes: 3 additions & 0 deletions playground/css/treeshake-module/b.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.treeshake-module-b {
color: red;
}
2 changes: 2 additions & 0 deletions playground/css/treeshake-module/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { a } from './a.js'
export { b } from './b.js'
20 changes: 16 additions & 4 deletions playground/test-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export function findAssetFile(
match: string | RegExp,
base = '',
assets = 'assets',
matchAll = false,
): string {
const assetsDir = path.join(testDir, 'dist', base, assets)
let files: string[]
Expand All @@ -167,10 +168,21 @@ export function findAssetFile(
}
throw e
}
const file = files.find((file) => {
return file.match(match)
})
return file ? fs.readFileSync(path.resolve(assetsDir, file), 'utf-8') : ''
if (matchAll) {
const matchedFiles = files.filter((file) => file.match(match))
return matchedFiles.length
? matchedFiles
.map((file) =>
fs.readFileSync(path.resolve(assetsDir, file), 'utf-8'),
)
.join('')
: ''
} else {
const matchedFile = files.find((file) => file.match(match))
return matchedFile
? fs.readFileSync(path.resolve(assetsDir, matchedFile), 'utf-8')
: ''
}
}

export function readManifest(base = ''): Manifest {
Expand Down

0 comments on commit 17d71ec

Please sign in to comment.