From 108aadf72865a3b95c8f013eb7721769d035a16c Mon Sep 17 00:00:00 2001
From: Kyle Herock <kherock@gmail.com>
Date: Tue, 7 Mar 2023 06:49:14 -0600
Subject: [PATCH] feat(css): support resolving stylesheets from exports map
 (#7817)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
---
 packages/vite/src/node/plugins/css.ts       |  3 +++
 playground/css/__tests__/css.spec.ts        |  8 ++++++++
 playground/css/css-dep-exports/index.js     |  1 +
 playground/css/css-dep-exports/package.json | 12 ++++++++++++
 playground/css/css-dep-exports/style.css    |  3 +++
 playground/css/css-dep-exports/style.scss   |  3 +++
 playground/css/dep.css                      |  1 +
 playground/css/index.html                   |  7 +++++++
 playground/css/package.json                 |  1 +
 playground/css/sass.scss                    |  1 +
 pnpm-lock.yaml                              |  5 +++++
 11 files changed, 45 insertions(+)
 create mode 100644 playground/css/css-dep-exports/index.js
 create mode 100644 playground/css/css-dep-exports/package.json
 create mode 100644 playground/css/css-dep-exports/style.css
 create mode 100644 playground/css/css-dep-exports/style.scss

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 810498df1..4956a90ca 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -731,6 +731,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (cssResolve = config.createResolver({
           extensions: ['.css'],
           mainFields: ['style'],
+          conditions: ['style'],
           tryIndex: false,
           preferRelative: true,
         }))
@@ -743,6 +744,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (sassResolve = config.createResolver({
           extensions: ['.scss', '.sass', '.css'],
           mainFields: ['sass', 'style'],
+          conditions: ['sass', 'style'],
           tryIndex: true,
           tryPrefix: '_',
           preferRelative: true,
@@ -756,6 +758,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         (lessResolve = config.createResolver({
           extensions: ['.less', '.css'],
           mainFields: ['less', 'style'],
+          conditions: ['less', 'style'],
           tryIndex: false,
           preferRelative: true,
         }))
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 9951558fa..45a33d4c3 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -289,6 +289,14 @@ test('@import dependency w/ sass entry', async () => {
   expect(await getColor('.css-dep-sass')).toBe('orange')
 })
 
+test('@import dependency w/ style export mapping', async () => {
+  expect(await getColor('.css-dep-exports')).toBe('purple')
+})
+
+test('@import dependency w/ sass export mapping', async () => {
+  expect(await getColor('.css-dep-exports-sass')).toBe('orange')
+})
+
 test('@import dependency w/out package scss', async () => {
   expect(await getColor('.sass-dep')).toBe('lavender')
 })
diff --git a/playground/css/css-dep-exports/index.js b/playground/css/css-dep-exports/index.js
new file mode 100644
index 000000000..47b55353d
--- /dev/null
+++ b/playground/css/css-dep-exports/index.js
@@ -0,0 +1 @@
+throw new Error('should not be imported')
diff --git a/playground/css/css-dep-exports/package.json b/playground/css/css-dep-exports/package.json
new file mode 100644
index 000000000..70cb0e17a
--- /dev/null
+++ b/playground/css/css-dep-exports/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@vitejs/test-css-dep-exports",
+  "private": true,
+  "version": "1.0.0",
+  "exports": {
+    ".": {
+      "sass": "./style.scss",
+      "style": "./style.css",
+      "import": "./index.js"
+    }
+  }
+}
diff --git a/playground/css/css-dep-exports/style.css b/playground/css/css-dep-exports/style.css
new file mode 100644
index 000000000..838a8afbe
--- /dev/null
+++ b/playground/css/css-dep-exports/style.css
@@ -0,0 +1,3 @@
+.css-dep-exports {
+  color: purple;
+}
diff --git a/playground/css/css-dep-exports/style.scss b/playground/css/css-dep-exports/style.scss
new file mode 100644
index 000000000..37df38d7d
--- /dev/null
+++ b/playground/css/css-dep-exports/style.scss
@@ -0,0 +1,3 @@
+.css-dep-exports-sass {
+  color: orange;
+}
diff --git a/playground/css/dep.css b/playground/css/dep.css
index ad3e1bcd1..3578a9d53 100644
--- a/playground/css/dep.css
+++ b/playground/css/dep.css
@@ -1 +1,2 @@
 @import '@vitejs/test-css-dep';
+@import '@vitejs/test-css-dep-exports';
diff --git a/playground/css/index.html b/playground/css/index.html
index a90c5dd7e..791a549ae 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -133,6 +133,13 @@
     @import dependency w/ sass entrypoints: this should be orange
   </p>
 
+  <p class="css-dep-exports">
+    @import dependency w/ style export mapping: this should be purple
+  </p>
+  <p class="css-dep-exports-sass">
+    @import dependency w/ sass export mapping: this should be orange
+  </p>
+
   <p class="dir-dep">PostCSS dir-dependency: this should be grey</p>
   <p class="dir-dep-2">
     PostCSS dir-dependency (file 2): this should be grey too
diff --git a/playground/css/package.json b/playground/css/package.json
index 04b3e25b2..22ccc686d 100644
--- a/playground/css/package.json
+++ b/playground/css/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/test-css-dep": "link:./css-dep",
+    "@vitejs/test-css-dep-exports": "link:./css-dep-exports",
     "@vitejs/test-css-js-dep": "file:./css-js-dep",
     "fast-glob": "^3.2.12",
     "less": "^4.1.3",
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 796d9ba68..4105e1aef 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -1,6 +1,7 @@
 @import '=/nested'; // alias + custom index resolving -> /nested/_index.scss
 @import '=/nested/partial'; // sass convention: omitting leading _ for partials
 @import '@vitejs/test-css-dep'; // package w/ sass entry points
+@import '@vitejs/test-css-dep-exports'; // package with a sass export mapping
 @import 'virtual-dep'; // virtual file added through importer
 @import '=/pkg-dep'; // package w/out sass field
 @import '=/weapp.wxss'; // wxss file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d78ed760d..26187d752 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -370,6 +370,7 @@ importers:
   playground/css:
     specifiers:
       '@vitejs/test-css-dep': link:./css-dep
+      '@vitejs/test-css-dep-exports': link:./css-dep-exports
       '@vitejs/test-css-js-dep': file:./css-js-dep
       fast-glob: ^3.2.12
       less: ^4.1.3
@@ -379,6 +380,7 @@ importers:
       sugarss: ^4.0.1
     devDependencies:
       '@vitejs/test-css-dep': link:css-dep
+      '@vitejs/test-css-dep-exports': link:css-dep-exports
       '@vitejs/test-css-js-dep': file:playground/css/css-js-dep
       fast-glob: 3.2.12
       less: 4.1.3
@@ -413,6 +415,9 @@ importers:
   playground/css/css-dep:
     specifiers: {}
 
+  playground/css/css-dep-exports:
+    specifiers: {}
+
   playground/css/css-js-dep:
     specifiers: {}