fix(css): escape pattern chars from base path in postcss dir-dependen…

…cy messages (#7081)

Co-authored-by: sapphi-red <green@sapphi.red>

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/**']
       })

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')

playground/css/glob-dep/nested (dir)/baz.css

@@ -0,0 +1,3 @@
+.dir-dep-3 {
+  color: grey;
+}

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

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
+        })
       }
     }
   }