From 5151e7466bdb86066991b77df8db6ada066bb71f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 14 Jun 2022 15:39:23 -0400
Subject: [PATCH] fix(css): escape pattern chars from base path in postcss
 dir-dependency messages (#7081)

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index ce068ac6104f81..45af9233bf4560 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -861,7 +861,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/**']
       })
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index e9d1fccac61d6e..564f0665bf0cea 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -317,9 +317,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) =>
@@ -334,6 +336,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/playground/css/glob-dep/nested (dir)/baz.css b/playground/css/glob-dep/nested (dir)/baz.css
new file mode 100644
index 00000000000000..9a8b0f0ba47dc5
--- /dev/null
+++ b/playground/css/glob-dep/nested (dir)/baz.css	
@@ -0,0 +1,3 @@
+.dir-dep-3 {
+  color: grey;
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index 15e81192cec7f1..4310967b6ca65b 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -113,6 +113,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/playground/css/postcss.config.js b/playground/css/postcss.config.js
index 33058023541515..b30209bff42097 100644
--- a/playground/css/postcss.config.js
+++ b/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)', // includes special characters in glob
+          glob: '*.css',
+          parent: result.opts.from
+        })
       }
     }
   }