From 4df90627ef5293b5d8d9e373a96d97200884fa5a Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Thu, 1 Sep 2022 17:22:26 +0800
Subject: [PATCH 1/6] fix: css order problem in async chunk

---
 .../vite/src/node/plugins/importAnalysisBuild.ts  |  4 +++-
 .../__tests__/async-chunk-css-order.spec.ts       | 11 +++++++++++
 .../components/BlueButton.css                     |  3 +++
 .../components/BlueButton.jsx                     |  7 +++++++
 .../async-chunk-css-order/components/Button.css   |  3 +++
 .../async-chunk-css-order/components/Button.jsx   | 10 ++++++++++
 .../components/GreenButton.css                    |  3 +++
 .../components/GreenButton.jsx                    |  7 +++++++
 playground/async-chunk-css-order/index.html       | 15 +++++++++++++++
 playground/async-chunk-css-order/main.jsx         | 10 ++++++++++
 playground/async-chunk-css-order/package.json     | 15 +++++++++++++++
 playground/async-chunk-css-order/vite.config.js   |  1 +
 pnpm-lock.yaml                                    |  8 ++++++++
 13 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
 create mode 100644 playground/async-chunk-css-order/components/BlueButton.css
 create mode 100644 playground/async-chunk-css-order/components/BlueButton.jsx
 create mode 100644 playground/async-chunk-css-order/components/Button.css
 create mode 100644 playground/async-chunk-css-order/components/Button.jsx
 create mode 100644 playground/async-chunk-css-order/components/GreenButton.css
 create mode 100644 playground/async-chunk-css-order/components/GreenButton.jsx
 create mode 100644 playground/async-chunk-css-order/index.html
 create mode 100644 playground/async-chunk-css-order/main.jsx
 create mode 100644 playground/async-chunk-css-order/package.json
 create mode 100644 playground/async-chunk-css-order/vite.config.js

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index d78e4c3be77ba7..5f590d1f79030e 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -418,10 +418,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   const chunk = bundle[filename] as OutputChunk | undefined
                   if (chunk) {
                     deps.add(chunk.fileName)
+                    chunk.imports.forEach(addDeps)
+                    // Ensure that the css imported by current chunk is loaded after the dependencies.
+                    // So the style of current chunk won't be overwritten unexpectedly.
                     chunk.viteMetadata.importedCss.forEach((file) => {
                       deps.add(file)
                     })
-                    chunk.imports.forEach(addDeps)
                   } else {
                     const removedPureCssFiles =
                       removedPureCssFilesCache.get(config)!
diff --git a/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts b/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
new file mode 100644
index 00000000000000..d6036db2c58b66
--- /dev/null
+++ b/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'vitest'
+import { getColor, isBuild, page } from '~utils'
+
+describe.runIf(isBuild)('build', () => {
+  test('should apply correct style', async () => {
+    const greenButton = await page.$('.green')
+    const blueButton = await page.$('.blue')
+    expect(await getColor(greenButton)).toBe('green')
+    expect(await getColor(blueButton)).toBe('blue')
+  })
+})
diff --git a/playground/async-chunk-css-order/components/BlueButton.css b/playground/async-chunk-css-order/components/BlueButton.css
new file mode 100644
index 00000000000000..659edcf511a928
--- /dev/null
+++ b/playground/async-chunk-css-order/components/BlueButton.css
@@ -0,0 +1,3 @@
+.blue {
+  color: blue;
+}
diff --git a/playground/async-chunk-css-order/components/BlueButton.jsx b/playground/async-chunk-css-order/components/BlueButton.jsx
new file mode 100644
index 00000000000000..9ad64ae37cb699
--- /dev/null
+++ b/playground/async-chunk-css-order/components/BlueButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Button } from './Button'
+import './BlueButton.css'
+
+export function BlueButton() {
+  return <Button className="blue">I'm a blue button</Button>
+}
diff --git a/playground/async-chunk-css-order/components/Button.css b/playground/async-chunk-css-order/components/Button.css
new file mode 100644
index 00000000000000..cc6f88ddccdf10
--- /dev/null
+++ b/playground/async-chunk-css-order/components/Button.css
@@ -0,0 +1,3 @@
+.btn {
+  color: black;
+}
diff --git a/playground/async-chunk-css-order/components/Button.jsx b/playground/async-chunk-css-order/components/Button.jsx
new file mode 100644
index 00000000000000..38ef62af47b275
--- /dev/null
+++ b/playground/async-chunk-css-order/components/Button.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import './Button.css'
+
+export function Button({ children, className }) {
+  return (
+    <button className={`btn ${className}`} type="button">
+      {children}
+    </button>
+  )
+}
diff --git a/playground/async-chunk-css-order/components/GreenButton.css b/playground/async-chunk-css-order/components/GreenButton.css
new file mode 100644
index 00000000000000..fa95e11ba9ef9a
--- /dev/null
+++ b/playground/async-chunk-css-order/components/GreenButton.css
@@ -0,0 +1,3 @@
+.green {
+  color: green;
+}
diff --git a/playground/async-chunk-css-order/components/GreenButton.jsx b/playground/async-chunk-css-order/components/GreenButton.jsx
new file mode 100644
index 00000000000000..c08a037a1ae1e3
--- /dev/null
+++ b/playground/async-chunk-css-order/components/GreenButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import { Button } from './Button'
+import './GreenButton.css'
+
+export function GreenButton() {
+  return <Button className="green">I'm a green button</Button>
+}
diff --git a/playground/async-chunk-css-order/index.html b/playground/async-chunk-css-order/index.html
new file mode 100644
index 00000000000000..089cfa7bdca412
--- /dev/null
+++ b/playground/async-chunk-css-order/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+
+  <body>
+    <div id="green"></div>
+    <div id="blue"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>
diff --git a/playground/async-chunk-css-order/main.jsx b/playground/async-chunk-css-order/main.jsx
new file mode 100644
index 00000000000000..7251566ab855f1
--- /dev/null
+++ b/playground/async-chunk-css-order/main.jsx
@@ -0,0 +1,10 @@
+import { render } from 'react-dom'
+import React from 'react'
+
+import('./components/GreenButton').then(({ GreenButton }) => {
+  render(<GreenButton />, document.querySelector('#green'))
+})
+
+import('./components/BlueButton').then(({ BlueButton }) => {
+  render(<BlueButton />, document.querySelector('#blue'))
+})
diff --git a/playground/async-chunk-css-order/package.json b/playground/async-chunk-css-order/package.json
new file mode 100644
index 00000000000000..15b60d811dfcd9
--- /dev/null
+++ b/playground/async-chunk-css-order/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "test-async-chunk-css-order",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/playground/async-chunk-css-order/vite.config.js b/playground/async-chunk-css-order/vite.config.js
new file mode 100644
index 00000000000000..4ba52ba2c8df67
--- /dev/null
+++ b/playground/async-chunk-css-order/vite.config.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d459cc2893bd6..db16dcc3e5a8fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,6 +365,14 @@ importers:
   playground/assets-sanitize:
     specifiers: {}
 
+  playground/async-chunk-css-order:
+    specifiers:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+
   playground/backend-integration:
     specifiers:
       fast-glob: ^3.2.11

From 85ed65d191b0580db641f398405cd93ebb546831 Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Wed, 14 Sep 2022 18:11:16 +0800
Subject: [PATCH 2/6] feat: add test case and remove react

---
 .../__tests__/async-chunk-css-order.spec.ts     | 11 -----------
 .../components/BlueButton.jsx                   |  7 -------
 .../async-chunk-css-order/components/Button.jsx | 10 ----------
 .../components/GreenButton.jsx                  |  7 -------
 playground/async-chunk-css-order/index.html     | 15 ---------------
 playground/async-chunk-css-order/main.jsx       | 10 ----------
 playground/async-chunk-css-order/package.json   | 15 ---------------
 playground/async-chunk-css-order/vite.config.js |  1 -
 playground/css/__tests__/css.spec.ts            | 17 ++++++++++++++++-
 .../BlueButton.css => css/async/async-1.css}    |  2 +-
 playground/css/async/async-1.js                 |  4 ++++
 .../GreenButton.css => css/async/async-2.css}   |  2 +-
 playground/css/async/async-2.js                 |  4 ++++
 playground/css/async/async-3.js                 |  4 ++++
 playground/css/async/async-3.module.css         |  3 +++
 .../Button.css => css/async/base.css}           |  0
 playground/css/async/base.js                    |  8 ++++++++
 playground/css/async/index.js                   |  3 +++
 playground/css/index.html                       |  5 +++++
 playground/css/main.js                          |  2 ++
 20 files changed, 51 insertions(+), 79 deletions(-)
 delete mode 100644 playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
 delete mode 100644 playground/async-chunk-css-order/components/BlueButton.jsx
 delete mode 100644 playground/async-chunk-css-order/components/Button.jsx
 delete mode 100644 playground/async-chunk-css-order/components/GreenButton.jsx
 delete mode 100644 playground/async-chunk-css-order/index.html
 delete mode 100644 playground/async-chunk-css-order/main.jsx
 delete mode 100644 playground/async-chunk-css-order/package.json
 delete mode 100644 playground/async-chunk-css-order/vite.config.js
 rename playground/{async-chunk-css-order/components/BlueButton.css => css/async/async-1.css} (54%)
 create mode 100644 playground/css/async/async-1.js
 rename playground/{async-chunk-css-order/components/GreenButton.css => css/async/async-2.css} (54%)
 create mode 100644 playground/css/async/async-2.js
 create mode 100644 playground/css/async/async-3.js
 create mode 100644 playground/css/async/async-3.module.css
 rename playground/{async-chunk-css-order/components/Button.css => css/async/base.css} (100%)
 create mode 100644 playground/css/async/base.js
 create mode 100644 playground/css/async/index.js

diff --git a/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts b/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
deleted file mode 100644
index d6036db2c58b66..00000000000000
--- a/playground/async-chunk-css-order/__tests__/async-chunk-css-order.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { getColor, isBuild, page } from '~utils'
-
-describe.runIf(isBuild)('build', () => {
-  test('should apply correct style', async () => {
-    const greenButton = await page.$('.green')
-    const blueButton = await page.$('.blue')
-    expect(await getColor(greenButton)).toBe('green')
-    expect(await getColor(blueButton)).toBe('blue')
-  })
-})
diff --git a/playground/async-chunk-css-order/components/BlueButton.jsx b/playground/async-chunk-css-order/components/BlueButton.jsx
deleted file mode 100644
index 9ad64ae37cb699..00000000000000
--- a/playground/async-chunk-css-order/components/BlueButton.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Button } from './Button'
-import './BlueButton.css'
-
-export function BlueButton() {
-  return <Button className="blue">I'm a blue button</Button>
-}
diff --git a/playground/async-chunk-css-order/components/Button.jsx b/playground/async-chunk-css-order/components/Button.jsx
deleted file mode 100644
index 38ef62af47b275..00000000000000
--- a/playground/async-chunk-css-order/components/Button.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import './Button.css'
-
-export function Button({ children, className }) {
-  return (
-    <button className={`btn ${className}`} type="button">
-      {children}
-    </button>
-  )
-}
diff --git a/playground/async-chunk-css-order/components/GreenButton.jsx b/playground/async-chunk-css-order/components/GreenButton.jsx
deleted file mode 100644
index c08a037a1ae1e3..00000000000000
--- a/playground/async-chunk-css-order/components/GreenButton.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Button } from './Button'
-import './GreenButton.css'
-
-export function GreenButton() {
-  return <Button className="green">I'm a green button</Button>
-}
diff --git a/playground/async-chunk-css-order/index.html b/playground/async-chunk-css-order/index.html
deleted file mode 100644
index 089cfa7bdca412..00000000000000
--- a/playground/async-chunk-css-order/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-
-  <body>
-    <div id="green"></div>
-    <div id="blue"></div>
-    <script type="module" src="/main.jsx"></script>
-  </body>
-</html>
diff --git a/playground/async-chunk-css-order/main.jsx b/playground/async-chunk-css-order/main.jsx
deleted file mode 100644
index 7251566ab855f1..00000000000000
--- a/playground/async-chunk-css-order/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from 'react-dom'
-import React from 'react'
-
-import('./components/GreenButton').then(({ GreenButton }) => {
-  render(<GreenButton />, document.querySelector('#green'))
-})
-
-import('./components/BlueButton').then(({ BlueButton }) => {
-  render(<BlueButton />, document.querySelector('#blue'))
-})
diff --git a/playground/async-chunk-css-order/package.json b/playground/async-chunk-css-order/package.json
deleted file mode 100644
index 15b60d811dfcd9..00000000000000
--- a/playground/async-chunk-css-order/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "test-async-chunk-css-order",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
diff --git a/playground/async-chunk-css-order/vite.config.js b/playground/async-chunk-css-order/vite.config.js
deleted file mode 100644
index 4ba52ba2c8df67..00000000000000
--- a/playground/async-chunk-css-order/vite.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {}
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index f46e6d0bfdbabc..689e9c925f644a 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -9,7 +9,8 @@ import {
   page,
   removeFile,
   serverLogs,
-  untilUpdated
+  untilUpdated,
+  withRetry
 } from '~utils'
 
 // note: tests should retrieve the element at the beginning of test and reuse it
@@ -455,3 +456,17 @@ test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
     expect(log).not.toMatch('unsupported-css-property')
   })
 })
+
+// NOTE: the match inline snapshot should generate by build mode
+test('async css order', async () => {
+  await withRetry(async () => {
+    expect(await getColor('.async-green')).toMatchInlineSnapshot('"green"')
+    expect(await getColor('.async-blue')).toMatchInlineSnapshot('"blue"')
+  }, true)
+})
+
+test('async css order with css modules', async () => {
+  await withRetry(async () => {
+    expect(await getColor('.modules-pink')).toMatchInlineSnapshot('"pink"')
+  }, true)
+})
diff --git a/playground/async-chunk-css-order/components/BlueButton.css b/playground/css/async/async-1.css
similarity index 54%
rename from playground/async-chunk-css-order/components/BlueButton.css
rename to playground/css/async/async-1.css
index 659edcf511a928..9af99eec7843fe 100644
--- a/playground/async-chunk-css-order/components/BlueButton.css
+++ b/playground/css/async/async-1.css
@@ -1,3 +1,3 @@
-.blue {
+.async-blue {
   color: blue;
 }
diff --git a/playground/css/async/async-1.js b/playground/css/async/async-1.js
new file mode 100644
index 00000000000000..8187dc3b9307e7
--- /dev/null
+++ b/playground/css/async/async-1.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-1.css'
+
+createButton('async-blue')
diff --git a/playground/async-chunk-css-order/components/GreenButton.css b/playground/css/async/async-2.css
similarity index 54%
rename from playground/async-chunk-css-order/components/GreenButton.css
rename to playground/css/async/async-2.css
index fa95e11ba9ef9a..941e034da37389 100644
--- a/playground/async-chunk-css-order/components/GreenButton.css
+++ b/playground/css/async/async-2.css
@@ -1,3 +1,3 @@
-.green {
+.async-green {
   color: green;
 }
diff --git a/playground/css/async/async-2.js b/playground/css/async/async-2.js
new file mode 100644
index 00000000000000..157eafdc4bff79
--- /dev/null
+++ b/playground/css/async/async-2.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import './async-2.css'
+
+createButton('async-green')
diff --git a/playground/css/async/async-3.js b/playground/css/async/async-3.js
new file mode 100644
index 00000000000000..b5dd6da1f326d2
--- /dev/null
+++ b/playground/css/async/async-3.js
@@ -0,0 +1,4 @@
+import { createButton } from './base'
+import styles from './async-3.module.css'
+
+createButton(`${styles['async-pink']} modules-pink`)
diff --git a/playground/css/async/async-3.module.css b/playground/css/async/async-3.module.css
new file mode 100644
index 00000000000000..7f43f88d754252
--- /dev/null
+++ b/playground/css/async/async-3.module.css
@@ -0,0 +1,3 @@
+.async-pink {
+  color: pink;
+}
diff --git a/playground/async-chunk-css-order/components/Button.css b/playground/css/async/base.css
similarity index 100%
rename from playground/async-chunk-css-order/components/Button.css
rename to playground/css/async/base.css
diff --git a/playground/css/async/base.js b/playground/css/async/base.js
new file mode 100644
index 00000000000000..1a409d7e32e4c9
--- /dev/null
+++ b/playground/css/async/base.js
@@ -0,0 +1,8 @@
+import './base.css'
+
+export function createButton(className) {
+  const button = document.createElement('button')
+  button.className = `btn ${className}`
+  document.body.appendChild(button)
+  button.textContent = `button ${getComputedStyle(button).color}`
+}
diff --git a/playground/css/async/index.js b/playground/css/async/index.js
new file mode 100644
index 00000000000000..20d6975ab9d23a
--- /dev/null
+++ b/playground/css/async/index.js
@@ -0,0 +1,3 @@
+import('./async-1.js')
+import('./async-2.js')
+import('./async-3.js')
diff --git a/playground/css/index.html b/playground/css/index.html
index 61d0c2edce5bb8..1d708160574ca1 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -18,6 +18,11 @@ <h1>CSS</h1>
   <pre class="imported-css"></pre>
   <pre class="imported-css-glob"></pre>
   <pre class="imported-css-globEager"></pre>
+  <div>
+    <p>import.meta.glob import css</p>
+    <span class="dir-import">dir-import</span>
+    <span class="dir-import-2">dir-import-2</span>
+  </div>
 
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>
diff --git a/playground/css/main.js b/playground/css/main.js
index 39ccd916467faf..4e1ed37754968f 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -109,3 +109,5 @@ document
   .classList.add(aliasModule.aliasedModule)
 
 import './unsupported.css'
+
+import './async/index'

From 6b697549eaeb971867546d88143267b4c0ff7113 Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Wed, 14 Sep 2022 18:26:09 +0800
Subject: [PATCH 3/6] chore: remove useless html fragment

---
 playground/css/index.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/playground/css/index.html b/playground/css/index.html
index 1d708160574ca1..61d0c2edce5bb8 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -18,11 +18,6 @@ <h1>CSS</h1>
   <pre class="imported-css"></pre>
   <pre class="imported-css-glob"></pre>
   <pre class="imported-css-globEager"></pre>
-  <div>
-    <p>import.meta.glob import css</p>
-    <span class="dir-import">dir-import</span>
-    <span class="dir-import-2">dir-import-2</span>
-  </div>
 
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>

From 81044bf1da82f39ff9af34d371c501ffc1ecfd61 Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Wed, 14 Sep 2022 18:27:21 +0800
Subject: [PATCH 4/6] chore: update pnpm-lock.yaml

---
 .../test-package-b/node_modules/test-package-a/index.js   | 1 -
 .../node_modules/test-package-a/package.json              | 5 -----
 pnpm-lock.yaml                                            | 8 --------
 3 files changed, 14 deletions(-)
 delete mode 100644 playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
 delete mode 100644 playground/nested-deps/test-package-b/node_modules/test-package-a/package.json

diff --git a/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js b/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
deleted file mode 100644
index 8b21e17752a5a6..00000000000000
--- a/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default 'A@1.0.0'
diff --git a/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json b/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
deleted file mode 100644
index ce18862474971d..00000000000000
--- a/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "test-package-a",
-  "version": "1.0.0",
-  "main": "index.js"
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db16dcc3e5a8fb..1d459cc2893bd6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,14 +365,6 @@ importers:
   playground/assets-sanitize:
     specifiers: {}
 
-  playground/async-chunk-css-order:
-    specifiers:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-
   playground/backend-integration:
     specifiers:
       fast-glob: ^3.2.11

From 47ed53fffa8f81c82992649e744f137956eaff05 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 15 Sep 2022 20:56:54 +0900
Subject: [PATCH 5/6] Revert "chore: update pnpm-lock.yaml"

This reverts commit 81044bf1da82f39ff9af34d371c501ffc1ecfd61.
---
 .../test-package-b/node_modules/test-package-a/index.js   | 1 +
 .../node_modules/test-package-a/package.json              | 5 +++++
 pnpm-lock.yaml                                            | 8 ++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
 create mode 100644 playground/nested-deps/test-package-b/node_modules/test-package-a/package.json

diff --git a/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js b/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
new file mode 100644
index 00000000000000..8b21e17752a5a6
--- /dev/null
+++ b/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
@@ -0,0 +1 @@
+export default 'A@1.0.0'
diff --git a/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json b/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
new file mode 100644
index 00000000000000..ce18862474971d
--- /dev/null
+++ b/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "test-package-a",
+  "version": "1.0.0",
+  "main": "index.js"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d459cc2893bd6..db16dcc3e5a8fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,6 +365,14 @@ importers:
   playground/assets-sanitize:
     specifiers: {}
 
+  playground/async-chunk-css-order:
+    specifiers:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+
   playground/backend-integration:
     specifiers:
       fast-glob: ^3.2.11

From b6852187b3116d3937ef3f95516648d8e2138ff1 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 15 Sep 2022 20:57:23 +0900
Subject: [PATCH 6/6] chore: update pnpm-lock.yaml

---
 pnpm-lock.yaml | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db16dcc3e5a8fb..1d459cc2893bd6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -365,14 +365,6 @@ importers:
   playground/assets-sanitize:
     specifiers: {}
 
-  playground/async-chunk-css-order:
-    specifiers:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-
   playground/backend-integration:
     specifiers:
       fast-glob: ^3.2.11