Skip to content

Commit

Permalink
feat(css): support resolving stylesheets via export conditions
Browse files Browse the repository at this point in the history
  • Loading branch information
kherock committed May 3, 2022
1 parent 1db7c49 commit d65f444
Show file tree
Hide file tree
Showing 11 changed files with 57 additions and 7 deletions.
8 changes: 8 additions & 0 deletions packages/playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,14 @@ test('@import dependency w/ stylus entry', async () => {
expect(await getColor('.css-dep-stylus')).toBe('red')
})

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')
})
Expand Down
1 change: 1 addition & 0 deletions packages/playground/css/css-dep-exports/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
throw new Error('should not be imported')
13 changes: 13 additions & 0 deletions packages/playground/css/css-dep-exports/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "css-dep-exports",
"private": true,
"version": "1.0.0",
"exports": {
".": {
"import": "./index.js",
"sass": "./style.scss",
"style": "./style.css"
},
"./package.json": "./package.json"
}
}
3 changes: 3 additions & 0 deletions packages/playground/css/css-dep-exports/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.css-dep-exports {
color: purple;
}
3 changes: 3 additions & 0 deletions packages/playground/css/css-dep-exports/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.css-dep-exports-sass {
color: orange;
}
1 change: 1 addition & 0 deletions packages/playground/css/dep.css
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import 'css-dep';
@import 'css-dep-exports';
13 changes: 10 additions & 3 deletions packages/playground/css/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -100,13 +100,20 @@ <h1>CSS</h1>
<pre class="charset-css"></pre>

<p class="css-dep">
@import dependency w/ style enrtrypoints: this should be purple
@import dependency w/ style entrypoints: this should be purple
</p>
<p class="css-dep-sass">
@import dependency w/ sass enrtrypoints: this should be orange
@import dependency w/ sass entrypoints: this should be orange
</p>
<p class="css-dep-stylus">
@import dependency w/ styl enrtrypoints: this should be red
@import dependency w/ styl entrypoints: this should be red
</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>
Expand Down
1 change: 1 addition & 0 deletions packages/playground/css/sass.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import '@/nested'; // alias + custom index resolving -> /nested/_index.scss
@import '@/nested/partial'; // sass convention: omitting leading _ for partials
@import 'css-dep'; // package w/ sass entry points
@import '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

Expand Down
12 changes: 9 additions & 3 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -589,8 +589,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(cssResolve = config.createResolver({
extensions: ['.css'],
mainFields: ['style'],
conditions: ['style'],
tryIndex: false,
preferRelative: true
preferRelative: true,
isUnsafeExport: true
}))
)
},
Expand All @@ -601,9 +603,11 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(sassResolve = config.createResolver({
extensions: ['.scss', '.sass', '.css'],
mainFields: ['sass', 'style'],
conditions: ['sass', 'style'],
tryIndex: true,
tryPrefix: '_',
preferRelative: true
preferRelative: true,
isUnsafeExport: true
}))
)
},
Expand All @@ -614,8 +618,10 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
(lessResolve = config.createResolver({
extensions: ['.less', '.css'],
mainFields: ['less', 'style'],
conditions: ['less', 'style'],
tryIndex: false,
preferRelative: true
preferRelative: true,
isUnsafeExport: true
}))
)
}
Expand Down
6 changes: 5 additions & 1 deletion packages/vite/src/node/plugins/resolve.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ export interface InternalResolveOptions extends ResolveOptions {
preferRelative?: boolean
preserveSymlinks?: 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,
Expand Down Expand Up @@ -841,7 +844,7 @@ function resolveExports(
targetWeb: boolean
) {
const conditions = [options.isProduction ? 'production' : 'development']
if (!options.isRequire) {
if (!options.isRequire && !options.isUnsafeExport) {
conditions.push('module')
}
if (options.conditions) {
Expand All @@ -851,6 +854,7 @@ function resolveExports(
return _resolveExports(pkg, key, {
browser: targetWeb,
require: options.isRequire,
unsafe: options.isUnsafeExport,
conditions
})
}
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit d65f444

Please sign in to comment.