From a839c14b199d0a4731aa76ee096d27cada33c6d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Tue, 20 Feb 2024 22:07:48 +0900 Subject: [PATCH] fix(css): import using imports field in CS was not resolved (#15985) Co-authored-by: Hiroshi Ogawa --- package.json | 3 +- patches/postcss-import@16.0.1.patch | 38 ++++++++++++++++++++++++ playground/css/__tests__/css.spec.ts | 4 +++ playground/css/imports-field.css | 3 ++ playground/css/imports-imports-field.css | 1 + playground/css/index.html | 3 ++ playground/css/main.js | 2 ++ playground/css/package.json | 3 ++ pnpm-lock.yaml | 8 +++-- 9 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 patches/postcss-import@16.0.1.patch create mode 100644 playground/css/imports-field.css create mode 100644 playground/css/imports-imports-field.css diff --git a/package.json b/package.json index 1362607ae..aa8bc6f89 100644 --- a/package.json +++ b/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": { diff --git a/patches/postcss-import@16.0.1.patch b/patches/postcss-import@16.0.1.patch new file mode 100644 index 000000000..a0bee8d11 --- /dev/null +++ b/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 + } diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 2e7e78aef..89226a8fb 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/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 diff --git a/playground/css/imports-field.css b/playground/css/imports-field.css new file mode 100644 index 000000000..9120b6c04 --- /dev/null +++ b/playground/css/imports-field.css @@ -0,0 +1,3 @@ +.imports-field { + color: red; +} diff --git a/playground/css/imports-imports-field.css b/playground/css/imports-imports-field.css new file mode 100644 index 000000000..2f4167c30 --- /dev/null +++ b/playground/css/imports-imports-field.css @@ -0,0 +1 @@ +@import '#imports'; diff --git a/playground/css/index.html b/playground/css/index.html index 520e1e20b..508744160 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -200,6 +200,9 @@

import '#alias': this should be blue


   
import '#alias-module': this should be blue

+
+  
Imports field

+  
import '#imports': this should be red