From 48086dac8d0d4dc4e56170e4b9fdf1a070949662 Mon Sep 17 00:00:00 2001
From: Kyle Herock
Date: Tue, 19 Apr 2022 09:02:07 -0400
Subject: [PATCH 1/2] feat(css): support resolving stylesheets via export
conditions
---
packages/vite/src/node/plugins/css.ts | 6 ++++++
packages/vite/src/node/plugins/resolve.ts | 7 ++++++-
playground/css/__tests__/css.spec.ts | 8 ++++++++
playground/css/css-dep-exports/index.js | 1 +
playground/css/css-dep-exports/package.json | 13 +++++++++++++
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 +++++
12 files changed, 55 insertions(+), 1 deletion(-)
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 142a696662f5e3..db63c0f23f6286 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -730,8 +730,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(cssResolve = config.createResolver({
extensions: ['.css'],
mainFields: ['style'],
+ conditions: ['style'],
tryIndex: false,
preferRelative: true,
+ isUnsafeExport: true,
}))
)
},
@@ -742,9 +744,11 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(sassResolve = config.createResolver({
extensions: ['.scss', '.sass', '.css'],
mainFields: ['sass', 'style'],
+ conditions: ['sass', 'style'],
tryIndex: true,
tryPrefix: '_',
preferRelative: true,
+ isUnsafeExport: true,
}))
)
},
@@ -755,8 +759,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(lessResolve = config.createResolver({
extensions: ['.less', '.css'],
mainFields: ['less', 'style'],
+ conditions: ['less', 'style'],
tryIndex: false,
preferRelative: true,
+ isUnsafeExport: true,
}))
)
},
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 81480c9e67dbf5..d8b6f77f40ac20 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -91,6 +91,9 @@ export interface InternalResolveOptions extends Required {
skipPackageJson?: boolean
preferRelative?: boolean
isRequire?: boolean
+ isImport?: boolean
+ // When true, the export resolver should opt out of Node's default resolution conditions
+ isUnsafeExport?: boolean
// #3040
// when the importer is a ts module,
// if the specifier requests a non-existent `.js/jsx/mjs/cjs` file,
@@ -1085,7 +1088,8 @@ function resolveExports(
}
if (
(!overrideConditions || overrideConditions.has('module')) &&
- !options.isRequire
+ !options.isRequire &&
+ !options.isUnsafeExport
) {
conditions.push('module')
}
@@ -1102,6 +1106,7 @@ function resolveExports(
return _resolveExports(pkg, key, {
browser: targetWeb && !conditions.includes('node'),
require: options.isRequire && !conditions.includes('import'),
+ unsafe: options.isUnsafeExport,
conditions,
})
}
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index c3ae17f0ed9237..749bcd595af0d6 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -285,6 +285,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 00000000000000..47b55353d03edb
--- /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 00000000000000..5f1f6af55a5116
--- /dev/null
+++ b/playground/css/css-dep-exports/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "@vitejs/test-css-dep-exports",
+ "private": true,
+ "version": "1.0.0",
+ "exports": {
+ ".": {
+ "import": "./index.js",
+ "sass": "./style.scss",
+ "style": "./style.css"
+ },
+ "./package.json": "./package.json"
+ }
+}
diff --git a/playground/css/css-dep-exports/style.css b/playground/css/css-dep-exports/style.css
new file mode 100644
index 00000000000000..838a8afbe4d435
--- /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 00000000000000..37df38d7d49d24
--- /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 ad3e1bcd12480c..3578a9d5312363 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 f520d6514b0df7..69e9ce677a1c40 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -125,6 +125,13 @@ CSS
@import dependency w/ sass entrypoints: this should be orange
+
+ @import dependency w/ style export mapping: this should be purple
+
+
+ @import dependency w/ sass export mapping: this should be orange
+
+
PostCSS dir-dependency: this should be grey
PostCSS dir-dependency (file 2): this should be grey too
diff --git a/playground/css/package.json b/playground/css/package.json
index d011228e390f28..2b19f3fe8e64ea 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 796d9ba68b0c05..4105e1aefa9c55 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 4c4607a617bd75..787e75a95b00ab 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: {}
From 159eb0a56617bcc4cb93ec3c8b8dc0e30843a2a7 Mon Sep 17 00:00:00 2001
From: bluwy
Date: Sun, 26 Feb 2023 00:28:16 +0800
Subject: [PATCH 2/2] chore: remove unsafe
---
packages/vite/src/node/plugins/css.ts | 3 ---
packages/vite/src/node/plugins/resolve.ts | 7 +------
playground/css/css-dep-exports/package.json | 7 +++----
3 files changed, 4 insertions(+), 13 deletions(-)
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index b58ecbbae540b0..82ac2cc5b9cfde 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -734,7 +734,6 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
conditions: ['style'],
tryIndex: false,
preferRelative: true,
- isUnsafeExport: true,
}))
)
},
@@ -749,7 +748,6 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
tryIndex: true,
tryPrefix: '_',
preferRelative: true,
- isUnsafeExport: true,
}))
)
},
@@ -763,7 +761,6 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
conditions: ['less', 'style'],
tryIndex: false,
preferRelative: true,
- isUnsafeExport: true,
}))
)
},
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 8ddcfcbfebd613..1976de78f64258 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -100,9 +100,6 @@ export interface InternalResolveOptions extends Required {
skipPackageJson?: boolean
preferRelative?: boolean
isRequire?: boolean
- isImport?: boolean
- // When true, the export resolver should opt out of Node's default resolution conditions
- isUnsafeExport?: boolean
// #3040
// when the importer is a ts module,
// if the specifier requests a non-existent `.js/jsx/mjs/cjs` file,
@@ -1104,8 +1101,7 @@ function resolveExports(
}
if (
(!overrideConditions || overrideConditions.has('module')) &&
- !options.isRequire &&
- !options.isUnsafeExport
+ !options.isRequire
) {
conditions.push('module')
}
@@ -1122,7 +1118,6 @@ function resolveExports(
const result = exports(pkg, key, {
browser: targetWeb && !conditions.includes('node'),
require: options.isRequire && !conditions.includes('import'),
- unsafe: options.isUnsafeExport,
conditions,
})
diff --git a/playground/css/css-dep-exports/package.json b/playground/css/css-dep-exports/package.json
index 5f1f6af55a5116..70cb0e17aad988 100644
--- a/playground/css/css-dep-exports/package.json
+++ b/playground/css/css-dep-exports/package.json
@@ -4,10 +4,9 @@
"version": "1.0.0",
"exports": {
".": {
- "import": "./index.js",
"sass": "./style.scss",
- "style": "./style.css"
- },
- "./package.json": "./package.json"
+ "style": "./style.css",
+ "import": "./index.js"
+ }
}
}