From ed764953d9b84deb7c128dea574d20a738496a71 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Fri, 1 Jul 2022 12:17:19 +0900
Subject: [PATCH] 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                           | 10 +++++++++-
 9 files changed, 44 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 9e40058a8f1f4f..9cbab6f9147575 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 c806cf03e81b2f..66e1c5358589e1 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 c33f80ce0cb7ca..95cb29d68cb0a9 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..1ff687c198e828 100644
--- a/playground/css/package.json
+++ b/playground/css/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "css-js-dep": "link:./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..8dc7b17c44fd3a 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: link:./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: link: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
@@ -8877,7 +8885,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