chore(deps): update dependency postcss-import to v15 (#9929)

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

packages/vite/package.json

@@ -105,7 +105,7 @@
     "parse5": "^7.0.0",
     "periscopic": "^3.0.4",
     "picocolors": "^1.0.0",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "postcss-load-config": "^4.0.1",
     "postcss-modules": "^5.0.0",
     "resolve.exports": "^1.1.0",

packages/vite/src/node/plugins/css.ts

@@ -848,6 +848,9 @@ async function compileCSS(
             return path.resolve(resolved)
           }
           return id
+        },
+        nameLayer(index) {
+          return `vite--anon-layer-${getHash(id)}-${index}`
         }
       })
     )

packages/vite/types/shims.d.ts

@@ -47,6 +47,7 @@ declare module 'postcss-import' {
       basedir: string,
       importOptions: any
     ) => string | string[] | Promise<string | string[]>
+    nameLayer: (index: number, rootFilename: string) => string
   }) => Plugin
   export = plugin
 }

playground/css/__tests__/css.spec.ts

@@ -259,6 +259,11 @@ test.runIf(isBuild)('@charset hoist', async () => {
   })
 })
 
+test('layers', async () => {
+  expect(await getColor('.layers-blue')).toMatch('blue')
+  expect(await getColor('.layers-green')).toMatch('green')
+})
+
 test('@import dependency w/ style entry', async () => {
   expect(await getColor('.css-dep')).toBe('purple')
 })

playground/css/index.html

@@ -99,6 +99,12 @@ <h1>CSS</h1>
   <p>CSS with @charset:</p>
   <pre class="charset-css"></pre>
 
+  <p>
+    @import with layers:
+    <span class="layers-blue">blue</span>
+    <span class="layers-green">green</span>
+  </p>
+
   <p class="css-dep">
     @import dependency w/ style entrypoints: this should be purple
   </p>

playground/css/layered/blue.css

@@ -0,0 +1,5 @@
+@media screen {
+  .layers-blue {
+    color: blue;
+  }
+}

playground/css/layered/green.css

@@ -0,0 +1,5 @@
+@media screen {
+  .layers-green {
+    color: green;
+  }
+}

playground/css/layered/index.css

@@ -0,0 +1,13 @@
+@layer base;
+
+@import './blue.css' layer;
+@import './green.css' layer;
+
+@layer base {
+  .layers-blue {
+    color: black;
+  }
+  .layers-green {
+    color: black;
+  }
+}

playground/css/main.js

@@ -44,6 +44,8 @@ text('.modules-inline', inlineMod)
 import charset from './charset.css'
 text('.charset-css', charset)
 
+import './layered/index.css'
+
 import './dep.css'
 import './glob-dep.css'