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

Co-authored-by: Hiroshi Ogawa <[email protected]>

package.json

@@ -125,7 +125,8 @@
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     },
     "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 @@ <h1>CSS</h1>
   <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"
   }
 }