From b5d41905c8b254f28ca4dce9c25154879acebb79 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 24 Feb 2022 21:14:19 -0500
Subject: [PATCH 1/3] fix(css): escape pattern chars in postcss dir-dependency
 messages

---
 packages/playground/css/__tests__/css.spec.ts         |  9 +++++++++
 packages/playground/css/glob-dep/nested (dir)/baz.css |  3 +++
 packages/playground/css/index.html                    |  3 +++
 packages/playground/css/postcss.config.js             | 10 +++++++++-
 packages/vite/src/node/plugins/css.ts                 |  4 +++-
 5 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/css/glob-dep/nested (dir)/baz.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index c37c52eabdf52a..17f98e242b9918 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -295,9 +295,11 @@ test('treeshaken async chunk', async () => {
 test('PostCSS dir-dependency', async () => {
   const el1 = await page.$('.dir-dep')
   const el2 = await page.$('.dir-dep-2')
+  const el3 = await page.$('.dir-dep-3')
 
   expect(await getColor(el1)).toBe('grey')
   expect(await getColor(el2)).toBe('grey')
+  expect(await getColor(el3)).toBe('grey')
 
   if (!isBuild) {
     editFile('glob-dep/foo.css', (code) =>
@@ -312,6 +314,13 @@ test('PostCSS dir-dependency', async () => {
     await untilUpdated(() => getColor(el2), 'red')
     expect(await getColor(el1)).toBe('blue')
 
+    editFile('glob-dep/nested (dir)/baz.css', (code) =>
+      code.replace('color: grey', 'color: green')
+    )
+    await untilUpdated(() => getColor(el3), 'green')
+    expect(await getColor(el1)).toBe('blue')
+    expect(await getColor(el2)).toBe('red')
+
     // test add/remove
     removeFile('glob-dep/bar.css')
     await untilUpdated(() => getColor(el2), 'black')
diff --git a/packages/playground/css/glob-dep/nested (dir)/baz.css b/packages/playground/css/glob-dep/nested (dir)/baz.css
new file mode 100644
index 00000000000000..9a8b0f0ba47dc5
--- /dev/null
+++ b/packages/playground/css/glob-dep/nested (dir)/baz.css	
@@ -0,0 +1,3 @@
+.dir-dep-3 {
+  color: grey;
+}
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 4de35d66441bee..775caef593cae1 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -99,6 +99,9 @@ <h1>CSS</h1>
   <p class="dir-dep-2">
     PostCSS dir-dependency (file 2): this should be grey too
   </p>
+  <p class="dir-dep-3">
+    PostCSS dir-dependency (file 3): this should be grey too
+  </p>
 
   <p class="url-separated">
     Url separation preservation: should have valid background-image
diff --git a/packages/playground/css/postcss.config.js b/packages/playground/css/postcss.config.js
index f3d6ac9548b6a9..5e1100f2238a15 100644
--- a/packages/playground/css/postcss.config.js
+++ b/packages/playground/css/postcss.config.js
@@ -16,7 +16,7 @@ function testDirDep() {
     AtRule(atRule, { result, Comment }) {
       if (atRule.name === 'test') {
         const pattern = normalizePath(
-          path.resolve(path.dirname(result.opts.from), './glob-dep/*.css')
+          path.resolve(path.dirname(result.opts.from), './glob-dep/**/*.css')
         )
         const files = glob.sync(pattern)
         const text = files.map((f) => fs.readFileSync(f, 'utf-8')).join('\n')
@@ -30,6 +30,14 @@ function testDirDep() {
           glob: '*.css',
           parent: result.opts.from
         })
+
+        result.messages.push({
+          type: 'dir-dependency',
+          plugin: 'dir-dep',
+          dir: './glob-dep/nested (dir)',
+          glob: '*.css',
+          parent: result.opts.from
+        })
       }
     }
   }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index cb62b785732e0d..c3a27dd56335a6 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -769,7 +769,9 @@ async function compileCSS(
       // https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies
       const { dir, glob: globPattern = '**' } = message
       const pattern =
-        normalizePath(path.resolve(path.dirname(id), dir)) + `/` + globPattern
+        glob.escapePath(normalizePath(path.resolve(path.dirname(id), dir))) +
+        `/` +
+        globPattern
       const files = glob.sync(pattern, {
         ignore: ['**/node_modules/**']
       })

From 1c1fa75eea2c2607c4fe5614afb6662d24aacdb7 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Wed, 15 Jun 2022 00:02:42 +0900
Subject: [PATCH 2/3] chore: add comment

---
 playground/css/postcss.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/css/postcss.config.js b/playground/css/postcss.config.js
index 4e591efb6468fe..b30209bff42097 100644
--- a/playground/css/postcss.config.js
+++ b/playground/css/postcss.config.js
@@ -34,7 +34,7 @@ function testDirDep() {
         result.messages.push({
           type: 'dir-dependency',
           plugin: 'dir-dep',
-          dir: './glob-dep/nested (dir)',
+          dir: './glob-dep/nested (dir)', // includes special characters in glob
           glob: '*.css',
           parent: result.opts.from
         })

From 47b4e498a30f98959968c2610023977cc31ff346 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Wed, 15 Jun 2022 00:06:07 +0900
Subject: [PATCH 3/3] chore: fix merge fail

---
 playground/assets/nested/glob-dep/nested (dir)/baz.css | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 playground/assets/nested/glob-dep/nested (dir)/baz.css

diff --git a/playground/assets/nested/glob-dep/nested (dir)/baz.css b/playground/assets/nested/glob-dep/nested (dir)/baz.css
deleted file mode 100644
index 9a8b0f0ba47dc5..00000000000000
--- a/playground/assets/nested/glob-dep/nested (dir)/baz.css	
+++ /dev/null
@@ -1,3 +0,0 @@
-.dir-dep-3 {
-  color: grey;
-}