test: add #8461 test case

Author: sapphi-red

packages/playground/css/__tests__/css.spec.ts

@@ -342,6 +342,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)'

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

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

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

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

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

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

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

packages/playground/css/index.html

@@ -114,6 +114,13 @@ <h1>CSS</h1>
     PostCSS dir-dependency (file 2): 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>

packages/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
 }

packages/playground/css/package.json

@@ -6,7 +6,11 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "ts-node ../../../scripts/patchFileDeps.ts"
+  },
+  "dependencies": {
+    "css-js-dep": "file:./css-js-dep"
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",