From 064b5f64e7313a2d300835d49afa92fc912cbe78 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Wed, 31 Aug 2022 22:53:58 +0900
Subject: [PATCH] feat: set nameLayer option to postcss-import

https://github.com/vitejs/vite/issues/9368#issuecomment-1232800102
---
 packages/vite/src/node/plugins/css.ts |  3 +++
 packages/vite/types/shims.d.ts        |  1 +
 playground/css/__tests__/css.spec.ts  |  5 +++++
 playground/css/index.html             |  6 ++++++
 playground/css/layered/blue.css       |  5 +++++
 playground/css/layered/green.css      |  5 +++++
 playground/css/layered/index.css      | 13 +++++++++++++
 playground/css/main.js                |  2 ++
 8 files changed, 40 insertions(+)
 create mode 100644 playground/css/layered/blue.css
 create mode 100644 playground/css/layered/green.css
 create mode 100644 playground/css/layered/index.css

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index d2a0ca6538036c..81488c06d8ddd8 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/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}`
         }
       })
     )
diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts
index d90f0bf42c7057..110b34024cd161 100644
--- a/packages/vite/types/shims.d.ts
+++ b/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
 }
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 0053b184e8b197..f46e6d0bfdbabc 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/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')
 })
diff --git a/playground/css/index.html b/playground/css/index.html
index 39e4305ceda7b8..61d0c2edce5bb8 100644
--- a/playground/css/index.html
+++ b/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>
diff --git a/playground/css/layered/blue.css b/playground/css/layered/blue.css
new file mode 100644
index 00000000000000..faa644dd73ce2d
--- /dev/null
+++ b/playground/css/layered/blue.css
@@ -0,0 +1,5 @@
+@media screen {
+  .layers-blue {
+    color: blue;
+  }
+}
diff --git a/playground/css/layered/green.css b/playground/css/layered/green.css
new file mode 100644
index 00000000000000..15a762b7572e0b
--- /dev/null
+++ b/playground/css/layered/green.css
@@ -0,0 +1,5 @@
+@media screen {
+  .layers-green {
+    color: green;
+  }
+}
diff --git a/playground/css/layered/index.css b/playground/css/layered/index.css
new file mode 100644
index 00000000000000..49756673b674d4
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/playground/css/main.js b/playground/css/main.js
index f767a3d9b9674d..39ccd916467faf 100644
--- a/playground/css/main.js
+++ b/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'