From 4816527b4655156d66cae411ada8f3c26945d8a7 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Fri, 1 Jul 2022 12:08:47 +0900
Subject: [PATCH] test: add #8245 test case

---
 playground/css/__tests__/css.spec.ts  | 6 ++++++
 playground/css/aliased/bar.module.css | 3 +++
 playground/css/aliased/foo.css        | 3 +++
 playground/css/index.html             | 5 +++++
 playground/css/main.js                | 7 +++++++
 playground/css/vite.config.js         | 4 +++-
 6 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 playground/css/aliased/bar.module.css
 create mode 100644 playground/css/aliased/foo.css

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index c51e821ec3d93c..2cd70ea0ddba1b 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -426,3 +426,9 @@ test('PostCSS source.input.from includes query', async () => {
   // should resolve assets
   expect(code).toContain('/postcss-source-input.css?query=foo')
 })
+
+test('aliased css has content', async () => {
+  expect(await getColor('.aliased')).toBe('blue')
+  expect(await page.textContent('.aliased-content')).toMatch('.aliased')
+  expect(await getColor('.aliased-module')).toBe('blue')
+})
diff --git a/playground/css/aliased/bar.module.css b/playground/css/aliased/bar.module.css
new file mode 100644
index 00000000000000..e4e46f3306a02e
--- /dev/null
+++ b/playground/css/aliased/bar.module.css
@@ -0,0 +1,3 @@
+.aliasedModule {
+  color: blue;
+}
diff --git a/playground/css/aliased/foo.css b/playground/css/aliased/foo.css
new file mode 100644
index 00000000000000..7e32cb71a8f375
--- /dev/null
+++ b/playground/css/aliased/foo.css
@@ -0,0 +1,3 @@
+.aliased {
+  color: blue;
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index 4310967b6ca65b..a2ff46a70f78a9 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -141,6 +141,11 @@ <h1>CSS</h1>
 
   <p>PostCSS source.input.from. Should include query</p>
   <pre class="postcss-source-input"></pre>
+
+  <p>Aliased</p>
+  <p class="aliased">import '#alias': this should be blue</p>
+  <pre class="aliased-content"></pre>
+  <p class="aliased-module">import '#alias-module': this should be blue</p>
 </div>
 
 <script type="module" src="./main.js"></script>
diff --git a/playground/css/main.js b/playground/css/main.js
index 90f74c96793c55..c39feaa64af167 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -92,3 +92,10 @@ text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
 
 import postcssSourceInput from './postcss-source-input.css?query=foo'
 text('.postcss-source-input', postcssSourceInput)
+
+import aliasContent from '#alias'
+text('.aliased-content', aliasContent)
+import aliasModule from '#alias-module'
+document
+  .querySelector('.aliased-module')
+  .classList.add(aliasModule.aliasedModule)
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 639a1302debb88..c501213b47cded 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -10,7 +10,9 @@ module.exports = {
   resolve: {
     alias: {
       '@': __dirname,
-      spacefolder: __dirname + '/folder with space'
+      spacefolder: __dirname + '/folder with space',
+      '#alias': __dirname + '/aliased/foo.css',
+      '#alias-module': __dirname + '/aliased/bar.module.css'
     }
   },
   css: {