From 82d87d91048b90282c4cae079ee142deb2a782d5 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 26 Jan 2021 11:30:34 -0500 Subject: [PATCH] feat(css): support alias in css @imports close #650 --- packages/playground/css/linked.css | 2 +- packages/playground/css/vite.config.js | 3 +++ packages/vite/src/node/config.ts | 12 ++++++++++++ packages/vite/src/node/optimizer/index.ts | 12 ++---------- packages/vite/src/node/plugins/css.ts | 24 ++++++++++++++++++++--- packages/vite/types/shims.d.ts | 8 +++++++- 6 files changed, 46 insertions(+), 15 deletions(-) diff --git a/packages/playground/css/linked.css b/packages/playground/css/linked.css index 9a1d71b76348e8..ff38b8bc9345ba 100644 --- a/packages/playground/css/linked.css +++ b/packages/playground/css/linked.css @@ -1,4 +1,4 @@ -@import './linked-at-import.css'; +@import '@/linked-at-import.css'; /* test postcss nesting */ .wrapper { diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js index 80bc734da16ffe..87685735f88c8f 100644 --- a/packages/playground/css/vite.config.js +++ b/packages/playground/css/vite.config.js @@ -2,6 +2,9 @@ * @type {import('vite').UserConfig} */ module.exports = { + alias: { + '@': __dirname + }, css: { modules: { generateScopedName: '[name]__[local]___[hash:base64:5]' diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 9f7af999f8f847..0beffe573ded87 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -26,6 +26,11 @@ import { createFilter } from '@rollup/pluginutils' import { ResolvedBuildOptions } from '.' import { parse as parseUrl } from 'url' import { JsonOptions } from './plugins/json' +import { + createPluginContainer, + PluginContainer +} from './server/pluginContainer' +import aliasPlugin from '@rollup/plugin-alias' const debug = createDebugger('vite:config') @@ -147,6 +152,7 @@ export type ResolvedConfig = Readonly< optimizeCacheDir: string | undefined env: Record alias: Alias[] + aliasResolver: PluginContainer plugins: readonly Plugin[] server: ServerOptions build: ResolvedBuildOptions @@ -285,6 +291,7 @@ export async function resolveConfig( isProduction, optimizeCacheDir, alias: resolvedAlias, + aliasResolver: null as any, plugins: userPlugins, server: config.server || {}, build: resolvedBuildOptions, @@ -309,6 +316,11 @@ export async function resolveConfig( postPlugins ) + resolved.aliasResolver = await createPluginContainer({ + ...resolved, + plugins: [aliasPlugin({ entries: config.alias })] + }) + // call configResolved hooks userPlugins.forEach((p) => { if (p.configResolved) { diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 9db023108e39f7..e5cfc2edb0326d 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/packages/vite/src/node/optimizer/index.ts @@ -12,12 +12,8 @@ import { resolveFrom, writeFile } from '../utils' -import { - createPluginContainer, - PluginContainer -} from '../server/pluginContainer' +import { PluginContainer } from '../server/pluginContainer' import { tryNodeResolve } from '../plugins/resolve' -import aliasPlugin from '@rollup/plugin-alias' import { createFilter } from '@rollup/pluginutils' import { prompt } from 'enquirer' import { build } from 'esbuild' @@ -123,17 +119,13 @@ export async function optimizeDeps( } const options = config.optimizeDeps || {} + const aliasResolver = config.aliasResolver // Determine deps to optimize. The goal is to only pre-bundle deps that falls // under one of the following categories: // 1. Has imports to relative files (e.g. lodash-es, lit-html) // 2. Has imports to bare modules that are not in the project's own deps // (i.e. esm that imports its own dependencies, e.g. styled-components) - // await init - const aliasResolver = await createPluginContainer({ - ...config, - plugins: [aliasPlugin({ entries: config.alias })] - }) const { qualified, external } = await resolveQualifiedDeps( root, config, diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 412200be02a2d6..c4094605b8168f 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -32,6 +32,7 @@ import { import { ViteDevServer } from '../' import { assetUrlRE, urlToBuiltUrl } from './asset' import MagicString from 'magic-string' +import { PluginContainer } from '../server/pluginContainer' // const debug = createDebugger('vite:css') @@ -124,7 +125,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin { id, raw, config, - urlReplacer + urlReplacer, + config.aliasResolver ) if (modules) { moduleCache.set(id, modules) @@ -326,7 +328,8 @@ async function compileCSS( id: string, code: string, config: ResolvedConfig, - urlReplacer: CssUrlReplacer + urlReplacer: CssUrlReplacer, + aliasResolver: PluginContainer ): Promise<{ code: string map?: SourceMap @@ -404,7 +407,22 @@ async function compileCSS( postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : [] if (needInlineImport) { - postcssPlugins.unshift((await import('postcss-import')).default()) + postcssPlugins.unshift( + (await import('postcss-import')).default({ + async resolve(id, basedir) { + if (!id.startsWith('.')) { + const resolved = await aliasResolver.resolveId( + id, + path.join(basedir, '*') + ) + if (resolved) { + return resolved.id + } + } + return id + } + }) + ) } postcssPlugins.push( UrlRewritePostcssPlugin({ diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts index a0ee52a1c189d1..6a1eb3af27358f 100644 --- a/packages/vite/types/shims.d.ts +++ b/packages/vite/types/shims.d.ts @@ -60,7 +60,13 @@ declare module 'postcss-load-config' { declare module 'postcss-import' { import { Plugin } from 'postcss' - const plugin: () => Plugin + const plugin: (options: { + resolve: ( + id: string, + basedir: string, + importOptions: any + ) => string | string[] | Promise + }) => Plugin export = plugin }