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" + } } }