Skip to content

Commit

Permalink
fix(optimizer): include exports for css modules (#13519)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red authored Jun 14, 2023
1 parent 1999311 commit 1fd9919
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 5 deletions.
12 changes: 7 additions & 5 deletions packages/vite/src/node/optimizer/esbuildDepPlugin.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import path from 'node:path'
import type { ImportKind, Plugin } from 'esbuild'
import { CSS_LANGS_RE, KNOWN_ASSET_TYPES } from '../constants'
import { KNOWN_ASSET_TYPES } from '../constants'
import { getDepOptimizationConfig } from '..'
import type { PackageCache, ResolvedConfig } from '..'
import {
Expand All @@ -12,6 +12,7 @@ import {
normalizePath,
} from '../utils'
import { browserExternalId, optionalPeerDepId } from '../plugins/resolve'
import { isCSSRequest, isModuleCSSRequest } from '../plugins/css'

const externalWithConversionNamespace =
'vite:dep-pre-bundle:external-conversion'
Expand Down Expand Up @@ -172,10 +173,11 @@ export function esbuildDepPlugin(
// import itself with prefix (this is the actual part of require-import conversion)
const modulePath = `"${convertedExternalPrefix}${args.path}"`
return {
contents: CSS_LANGS_RE.test(args.path)
? `import ${modulePath};`
: `export { default } from ${modulePath};` +
`export * from ${modulePath};`,
contents:
isCSSRequest(args.path) && !isModuleCSSRequest(args.path)
? `import ${modulePath};`
: `export { default } from ${modulePath};` +
`export * from ${modulePath};`,
loader: 'js',
}
},
Expand Down
1 change: 1 addition & 0 deletions playground/optimize-deps/__tests__/optimize-deps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ test('pre bundle css require', async () => {
}

expect(await getColor('.css-require')).toBe('red')
expect(await getColor('.css-module-require')).toBe('red')
})

test.runIf(isBuild)('no missing deps during build', async () => {
Expand Down
2 changes: 2 additions & 0 deletions playground/optimize-deps/dep-css-require/mod.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const style = require('./mod.module.css')
module.exports = style
3 changes: 3 additions & 0 deletions playground/optimize-deps/dep-css-require/mod.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.cssModuleRequire {
color: red;
}
7 changes: 7 additions & 0 deletions playground/optimize-deps/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,9 @@ <h2>Non Optimized Module isn't duplicated</h2>
<h2>Pre bundle css require</h2>
<div class="css-require">css require</div>

<h2>Pre bundle css modules require</h2>
<div class="css-module-require">This should be red</div>

<script>
function text(el, text) {
document.querySelector(el).textContent = text
Expand Down Expand Up @@ -127,6 +130,10 @@ <h2>Pre bundle css require</h2>

import '@vitejs/test-dep-cjs-with-assets'
import '@vitejs/test-dep-css-require'
import cssModuleRequire from '@vitejs/test-dep-css-require/mod.cjs'
document
.querySelector('.css-module-require')
.classList.add(cssModuleRequire.cssModuleRequire)

import { env } from '@vitejs/test-dep-node-env'
text('.node-env', env)
Expand Down

0 comments on commit 1fd9919

Please sign in to comment.