fix(css): import using imports field in CS was not resolved (#15985)

Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

package.json

@@ -125,7 +125,8 @@
     },
     "patchedDependencies": {
       "chokidar@3.6.0": "patches/chokidar@3.6.0.patch",
-      "sirv@2.0.4": "patches/sirv@2.0.4.patch"
+      "sirv@2.0.4": "patches/sirv@2.0.4.patch",
+      "postcss-import@16.0.1": "patches/postcss-import@16.0.1.patch"
     },
     "peerDependencyRules": {
       "allowedVersions": {

patches/postcss-import@16.0.1.patch

@@ -0,0 +1,38 @@
+diff --git a/lib/parse-styles.js b/lib/parse-styles.js
+index 68a1fef604fad82ac367f6bd63e845027bf86089..4617545e86301f58bfcd649f66c0536e29bda50f 100644
+--- a/lib/parse-styles.js
++++ b/lib/parse-styles.js
+@@ -223,19 +223,20 @@ function isProcessableURL(uri) {
+     return false
+   }
+ 
+-  // check for fragment or query
+-  try {
+-    // needs a base to parse properly
+-    const url = new URL(uri, "https://example.com")
+-
+-    if (url.hash) {
+-      return false
+-    }
+-
+-    if (url.search) {
+-      return false
+-    }
+-  } catch {} // Ignore
++  // PATCH: comment out this part to support resolving imports field
++  // // check for fragment or query
++  // try {
++  //   // needs a base to parse properly
++  //   const url = new URL(uri, "https://example.com")
++
++  //   if (url.hash) {
++  //     return false
++  //   }
++
++  //   if (url.search) {
++  //     return false
++  //   }
++  // } catch {} // Ignore
+ 
+   return true
+ }

playground/css/__tests__/css.spec.ts

@@ -476,6 +476,10 @@ test('aliased css has content', async () => {
   expect(await getColor('.aliased-module')).toBe('blue')
 })
 
+test('resolve imports field in CSS', async () => {
+  expect(await getColor('.imports-field')).toBe('red')
+})
+
 test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
   serverLogs.forEach((log) => {
     // no warning from esbuild css minifier

playground/css/imports-field.css

@@ -0,0 +1,3 @@
+.imports-field {
+  color: red;
+}

playground/css/imports-imports-field.css

@@ -0,0 +1 @@
+@import '#imports';

playground/css/index.html

@@ -200,6 +200,9 @@
   <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>
+
+  <p>Imports field</p>
+  <p class="imports-field">import '#imports': this should be red</p>
 </div>
 <style>
   @import url(./imported.scss);

playground/css/main.js

@@ -126,3 +126,5 @@ import './async/index'
 
 import('./same-name/sub1/sub')
 import('./same-name/sub2/sub')
+
+import './imports-imports-field.css'

playground/css/package.json

@@ -27,5 +27,8 @@
     "sass": "^1.71.0",
     "stylus": "^0.62.0",
     "sugarss": "^4.0.1"
+  },
+  "imports": {
+    "#imports": "./imports-field.css"
   }
 }

pnpm-lock.yaml

@@ -13,6 +13,9 @@ patchedDependencies:
   chokidar@3.6.0:
     hash: bckcfsslxcffppz65mxcq6naau
     path: patches/chokidar@3.6.0.patch
+  postcss-import@16.0.1:
+    hash: fjrm7xa2co7loa5ldk32oip4ly
+    path: patches/postcss-import@16.0.1.patch
   sirv@2.0.4:
     hash: amdes53ifqfntejkflpaq5ifce
     path: patches/sirv@2.0.4.patch
@@ -371,7 +374,7 @@ importers:
         version: 2.3.1
       postcss-import:
         specifier: ^16.0.1
-        version: 16.0.1(postcss@8.4.35)
+        version: 16.0.1(patch_hash=fjrm7xa2co7loa5ldk32oip4ly)(postcss@8.4.35)
       postcss-load-config:
         specifier: ^4.0.2
         version: 4.0.2(postcss@8.4.35)(ts-node@10.9.2)
@@ -7899,7 +7902,7 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.4
 
-  /postcss-import@16.0.1(postcss@8.4.35):
+  /postcss-import@16.0.1(patch_hash=fjrm7xa2co7loa5ldk32oip4ly)(postcss@8.4.35):
     resolution: {integrity: sha512-i2Pci0310NaLHr/5JUFSw1j/8hf1CzwMY13g6ZDxgOavmRHQi2ba3PmUHoihO+sjaum+KmCNzskNsw7JDrg03g==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
@@ -7913,6 +7916,7 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.4
     dev: true
+    patched: true
 
   /postcss-js@4.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}