feat(css): support alias in css @imports

close #650
vitejs · Jan 26, 2021 · 82d87d9 · 82d87d9
1 parent d8689b8
commit 82d87d9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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<string, any>
     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
@@ -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
@@ -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
@@ -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<string | string[]>
+  }) => Plugin
   export = plugin
 }