From 4ed9182685e746030b52c5787d8917d881212247 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Fri, 1 Jul 2022 12:08:47 +0900
Subject: [PATCH 1/2] 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: {

From 5f2c76a78850ba6b20584d6dbc1a8fcf9c69380b Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Fri, 1 Jul 2022 12:17:19 +0900
Subject: [PATCH 2/2] test: add #8461 test case

---
 playground/css/__tests__/css.spec.ts     |  5 +++++
 playground/css/css-js-dep/bar.module.css |  3 +++
 playground/css/css-js-dep/foo.css        |  3 +++
 playground/css/css-js-dep/index.js       |  4 ++++
 playground/css/css-js-dep/package.json   |  7 +++++++
 playground/css/index.html                |  7 +++++++
 playground/css/main.js                   |  5 +++++
 playground/css/package.json              |  1 +
 pnpm-lock.yaml                           | 16 +++++++++++++++-
 9 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 playground/css/css-js-dep/bar.module.css
 create mode 100644 playground/css/css-js-dep/foo.css
 create mode 100644 playground/css/css-js-dep/index.js
 create mode 100644 playground/css/css-js-dep/package.json

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 2cd70ea0ddba1b..3c9f5fc4ea9b0a 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -349,6 +349,11 @@ test('PostCSS dir-dependency', async () => {
   }
 })
 
+test('import dependency includes css import', async () => {
+  expect(await getColor('.css-js-dep')).toBe('green')
+  expect(await getColor('.css-js-dep-module')).toBe('green')
+})
+
 test('URL separation', async () => {
   const urlSeparated = await page.$('.url-separated')
   const baseUrl = 'url(images/dog.webp)'
diff --git a/playground/css/css-js-dep/bar.module.css b/playground/css/css-js-dep/bar.module.css
new file mode 100644
index 00000000000000..9d62f66761fa3d
--- /dev/null
+++ b/playground/css/css-js-dep/bar.module.css
@@ -0,0 +1,3 @@
+.cssJsDepModule {
+  color: green;
+}
diff --git a/playground/css/css-js-dep/foo.css b/playground/css/css-js-dep/foo.css
new file mode 100644
index 00000000000000..515ee7693bff3f
--- /dev/null
+++ b/playground/css/css-js-dep/foo.css
@@ -0,0 +1,3 @@
+.css-js-dep {
+  color: green;
+}
diff --git a/playground/css/css-js-dep/index.js b/playground/css/css-js-dep/index.js
new file mode 100644
index 00000000000000..853094b806fa97
--- /dev/null
+++ b/playground/css/css-js-dep/index.js
@@ -0,0 +1,4 @@
+import './foo.css'
+import barModuleClasses from './bar.module.css'
+
+export { barModuleClasses }
diff --git a/playground/css/css-js-dep/package.json b/playground/css/css-js-dep/package.json
new file mode 100644
index 00000000000000..d762f6566fdbdc
--- /dev/null
+++ b/playground/css/css-js-dep/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "css-js-dep",
+  "private": true,
+  "type": "module",
+  "version": "1.0.0",
+  "main": "index.js"
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index a2ff46a70f78a9..7e591ee25f0a5b 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -117,6 +117,13 @@ <h1>CSS</h1>
     PostCSS dir-dependency (file 3): this should be grey too
   </p>
 
+  <p class="css-js-dep">
+    import dependency includes 'import "./foo.css"': this should be green
+  </p>
+  <p class="css-js-dep-module">
+    import dependency includes 'import "./bar.module.css"': this should be green
+  </p>
+
   <p class="url-separated">
     URL separation preservation: should have valid background-image
   </p>
diff --git a/playground/css/main.js b/playground/css/main.js
index c39feaa64af167..c9384b6a79013c 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -47,6 +47,11 @@ text('.charset-css', charset)
 import './dep.css'
 import './glob-dep.css'
 
+import { barModuleClasses } from 'css-js-dep'
+document
+  .querySelector('.css-js-dep-module')
+  .classList.add(barModuleClasses.cssJsDepModule)
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }
diff --git a/playground/css/package.json b/playground/css/package.json
index 03c4964f0284ea..11dc33c48f7aa2 100644
--- a/playground/css/package.json
+++ b/playground/css/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "css-js-dep": "file:./css-js-dep",
     "fast-glob": "^3.2.11",
     "less": "^4.1.3",
     "postcss-nested": "^5.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67f75f4da8630d..790ac42ccd2b7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,6 +377,7 @@ importers:
   playground/css:
     specifiers:
       css-dep: link:./css-dep
+      css-js-dep: file:./css-js-dep
       fast-glob: ^3.2.11
       less: ^4.1.3
       postcss-nested: ^5.0.6
@@ -384,6 +385,7 @@ importers:
       stylus: ^0.58.1
     devDependencies:
       css-dep: link:css-dep
+      css-js-dep: file:playground/css/css-js-dep
       fast-glob: 3.2.11
       less: 4.1.3
       postcss-nested: 5.0.6
@@ -411,6 +413,9 @@ importers:
   playground/css/css-dep:
     specifiers: {}
 
+  playground/css/css-js-dep:
+    specifiers: {}
+
   playground/css/pkg-dep:
     specifiers: {}
 
@@ -708,6 +713,9 @@ importers:
   playground/optimize-deps/nested-include:
     specifiers: {}
 
+  playground/optimize-deps/non-optimizable-include:
+    specifiers: {}
+
   playground/optimize-missing-deps:
     specifiers:
       express: ^4.18.1
@@ -8709,6 +8717,12 @@ packages:
     version: 0.0.0
     dev: false
 
+  file:playground/css/css-js-dep:
+    resolution: {directory: playground/css/css-js-dep, type: directory}
+    name: css-js-dep
+    version: 1.0.0
+    dev: true
+
   file:playground/define/commonjs-dep:
     resolution: {directory: playground/define/commonjs-dep, type: directory}
     name: commonjs-dep
@@ -8877,7 +8891,7 @@ packages:
 
   file:playground/ssr-deps/no-external-css:
     resolution: {directory: playground/ssr-deps/no-external-css, type: directory}
-    name: primitive-export-css
+    name: no-external-css
     version: 0.0.0
     dev: false