Skip to content

Commit

Permalink
fix(css): handle pure css chunk heuristic with special queries (#12091)
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy authored Feb 18, 2023
1 parent 4b5cc9f commit a873af5
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 7 deletions.
16 changes: 9 additions & 7 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -464,15 +464,17 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
let isPureCssChunk = true
const ids = Object.keys(chunk.modules)
for (const id of ids) {
if (
!isCSSRequest(id) ||
cssModuleRE.test(id) ||
commonjsProxyRE.test(id)
) {
isPureCssChunk = false
}
if (styles.has(id)) {
chunkCSS += styles.get(id)
// a css module contains JS, so it makes this not a pure css chunk
if (cssModuleRE.test(id)) {
isPureCssChunk = false
}
} else {
// if the module does not have a style, then it's not a pure css chunk.
// this is true because in the `transform` hook above, only modules
// that are css gets added to the `styles` map.
isPureCssChunk = false
}
}

Expand Down
5 changes: 5 additions & 0 deletions playground/css-codesplit/__tests__/css-codesplit.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ test('should load all stylesheets', async () => {
expect(await getColor('h1')).toBe('red')
expect(await getColor('h2')).toBe('blue')
expect(await getColor('.dynamic')).toBe('green')
expect(await getColor('.chunk')).toBe('magenta')
})

test('should load dynamic import with inline', async () => {
Expand Down Expand Up @@ -40,4 +41,8 @@ describe.runIf(isBuild)('build', () => {
expect(manifest['index.html'].css.length).toBe(2)
expect(manifest['other.js'].css.length).toBe(1)
})

test('should not mark a css chunk with ?url and normal import as pure css chunk', () => {
expect(findAssetFile(/chunk-.*\.js$/)).toBeTruthy()
})
})
3 changes: 3 additions & 0 deletions playground/css-codesplit/chunk.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.chunk {
color: magenta;
}
2 changes: 2 additions & 0 deletions playground/css-codesplit/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,7 @@ <h2>This should be blue</h2>
<button class="order-bulk-update">change to green</button>
</p>

<p class="chunk">This should be magenta</p>

<script type="module" src="/main.js"></script>
<div id="app"></div>
6 changes: 6 additions & 0 deletions playground/css-codesplit/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import './style.css'
import './main.css'
import './order'

import './chunk.css'
import chunkCssUrl from './chunk.css?url'

// use this to not treeshake
globalThis.__test_chunkCssUrl = chunkCssUrl

import('./async.css')

import('./inline.css?inline').then((css) => {
Expand Down
5 changes: 5 additions & 0 deletions playground/css-codesplit/other.js
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
import './style.css'
import './chunk.css'
import chunkCssUrl from './chunk.css?url'

// use this to not treeshake
globalThis.__test_chunkCssUrl = chunkCssUrl
8 changes: 8 additions & 0 deletions playground/css-codesplit/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ module.exports = {
main: resolve(__dirname, './index.html'),
other: resolve(__dirname, './other.js'),
},
output: {
manualChunks(id) {
// make `chunk.css` it's own chunk for easier testing of pure css chunks
if (id.includes('chunk.css')) {
return 'chunk'
}
},
},
},
},
}

0 comments on commit a873af5

Please sign in to comment.