test: add #8461 test case

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)'

playground/css/css-js-dep/bar.module.css

@@ -0,0 +1,3 @@
+.cssJsDepModule {
+  color: green;
+}

playground/css/css-js-dep/foo.css

@@ -0,0 +1,3 @@
+.css-js-dep {
+  color: green;
+}

playground/css/css-js-dep/index.js

@@ -0,0 +1,4 @@
+import './foo.css'
+import barModuleClasses from './bar.module.css'
+
+export { barModuleClasses }

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"
+}

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>

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
 }

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",