diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 7e84ef6b23ff76..9707273c1ad6dc 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -615,7 +615,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
 
           const isEntry = chunk.isEntry && isPureCssChunk
-          const cssAssetName = ensureFileExt(chunk.name, '.css')
+          const cssFullAssetName = ensureFileExt(chunk.name, '.css')
+          // if facadeModuleId doesn't exist or doesn't have a CSS extension,
+          // that means a JS entry file imports a CSS file.
+          // in this case, only use the filename for the CSS chunk name like JS chunks.
+          const cssAssetName =
+            chunk.isEntry &&
+            (!chunk.facadeModuleId || !isCSSRequest(chunk.facadeModuleId))
+              ? path.basename(cssFullAssetName)
+              : cssFullAssetName
           const originalFilename = getChunkOriginalFileName(
             chunk,
             config.root,
diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts
index eb017f4498b507..563e03b5f4e7c9 100644
--- a/playground/backend-integration/__tests__/backend-integration.spec.ts
+++ b/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -54,6 +54,13 @@ describe.runIf(isBuild)('build', () => {
     // use the entry name
     expect(dirFooAssetEntry.file).toMatch('assets/bar-')
   })
+
+  test('CSS imported from JS entry should have a non-nested chunk name', () => {
+    const manifest = readManifest('dev')
+    const mainTsEntryCss = manifest['nested/sub.ts'].css
+    expect(mainTsEntryCss.length).toBe(1)
+    expect(mainTsEntryCss[0].replace('assets/', '')).not.toContain('/')
+  })
 })
 
 describe.runIf(isServe)('serve', () => {
diff --git a/playground/backend-integration/frontend/entrypoints/index.html b/playground/backend-integration/frontend/entrypoints/index.html
index 5de605a0b8f4b4..bc75dbc4b898e9 100644
--- a/playground/backend-integration/frontend/entrypoints/index.html
+++ b/playground/backend-integration/frontend/entrypoints/index.html
@@ -27,7 +27,12 @@ <h2>CSS Asset References</h2>
   </li>
 </ul>
 
+<h2>CSS imported from JS</h2>
+
+<p class="imported">text</p>
+
 <script type="module" src="./main.ts"></script>
+<script type="module" src="./nested/sub.ts"></script>
 <script type="module">
   import './global.css'
 
diff --git a/playground/backend-integration/frontend/entrypoints/nested/sub.ts b/playground/backend-integration/frontend/entrypoints/nested/sub.ts
new file mode 100644
index 00000000000000..9f9f2d70dc674a
--- /dev/null
+++ b/playground/backend-integration/frontend/entrypoints/nested/sub.ts
@@ -0,0 +1 @@
+import '../../styles/imported.css'
diff --git a/playground/backend-integration/frontend/styles/imported.css b/playground/backend-integration/frontend/styles/imported.css
new file mode 100644
index 00000000000000..65af30a2064c86
--- /dev/null
+++ b/playground/backend-integration/frontend/styles/imported.css
@@ -0,0 +1,3 @@
+.imported {
+  color: green;
+}