diff --git a/packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts b/packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts index 95fe97a1b953ba..4effcd6476bb51 100644 --- a/packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts +++ b/packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts @@ -3,6 +3,7 @@ import { findAssetFile, getColor, isBuild, readManifest } from '../../testUtils' test('should load both stylesheets', async () => { expect(await getColor('h1')).toBe('red') expect(await getColor('h2')).toBe('blue') + expect(await getColor('h3')).toBe('yellow') }) if (isBuild) { diff --git a/packages/playground/css-codesplit/async.css b/packages/playground/css-codesplit/async.css new file mode 100644 index 00000000000000..01e9deef3a50c5 --- /dev/null +++ b/packages/playground/css-codesplit/async.css @@ -0,0 +1,3 @@ +h3 { + color: yellow; +} diff --git a/packages/playground/css-codesplit/main.js b/packages/playground/css-codesplit/main.js index 8c80df2c181511..d374d3aa953cf2 100644 --- a/packages/playground/css-codesplit/main.js +++ b/packages/playground/css-codesplit/main.js @@ -1,6 +1,12 @@ import './style.css' import './main.css' +import('./async.css?inline').then((css) => { + const style = document.createElement('style') + style.dataset.import = true + style.textContent = css.default + document.head.appendChild(style) +}) document.getElementById( 'app' -).innerHTML = `

This should be red

This should be blue

` +).innerHTML = `

This should be red

This should be blue

This should be yellow

` diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a7cd3fd6cc11fa..f17da0c760ab82 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -319,7 +319,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { return { code: modulesCode || - (usedRE.test(id) + (usedRE.test(id) || inlined ? `export default ${JSON.stringify( inlined ? await minifyCSS(css, config) : css )}`