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 = `<h1>This should be red</h1><h2>This should be blue</h2>`
+).innerHTML = `<h1>This should be red</h1><h2>This should be blue</h2><h3>This should be yellow</h3>`