feat: set nameLayer option to postcss-import

#9368 (comment)

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

@@ -848,6 +848,9 @@ async function compileCSS(
             return path.resolve(resolved)
           }
           return id
+        },
+        nameLayer(index) {
+          return `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'