feat: support css alias

playground/alias/TestAlias.vue

@@ -1,7 +1,7 @@
 <template>
  <h2>Alias</h2>
- <p class="alias">{{ msg }}</p>
- <p class="dir-alias">{{ dirMsg }}</p>
+ <p class="alias alias-css">{{ msg }}</p>
+ <p class="dir-alias alias-scss">{{ dirMsg }}</p>
  <p class="dir-alias-index">{{ dirIndexMsg }}</p>
  <p class="dir-alias-import-outside">{{ importOutsideMsg }}</p>
 </template>
@@ -21,3 +21,8 @@ export default {
  })
 }
 </script>
+
+<style lang="scss">
+ @import "/@alias/aliased.css";
+ @import "/@alias/aliasedScss.scss";
+</style>

playground/alias/aliased-dir/aliased.css

@@ -0,0 +1,3 @@
+.alias-css {
+ color: red;
+}

src/node/build/buildPluginCss.ts

@@ -17,6 +17,7 @@ import {
 } from '@vue/compiler-sfc'
 import chalk from 'chalk'
 import { CssPreprocessOptions } from '../config'
+import { InternalResolver } from '../resolver'
 
 const debug = require('debug')('vite:build:css')
 
@@ -34,16 +35,19 @@ interface BuildCssOption {
  modulesOptions?: SFCAsyncStyleCompileOptions['modulesOptions']
 }
 
-export const createBuildCssPlugin = ({
- root,
- publicBase,
- assetsDir,
- minify = false,
- inlineLimit = 0,
- cssCodeSplit = true,
- preprocessOptions,
- modulesOptions = {}
-}: BuildCssOption): Plugin => {
+export const createBuildCssPlugin = (
+ resolver: InternalResolver,
+ {
+ root,
+ publicBase,
+ assetsDir,
+ minify = false,
+ inlineLimit = 0,
+ cssCodeSplit = true,
+ preprocessOptions,
+ modulesOptions = {}
+ }: BuildCssOption
+): Plugin => {
  const styles: Map<string, string> = new Map()
  const assets = new Map<string, Buffer>()
  let staticCss = ''
@@ -63,6 +67,7 @@ export const createBuildCssPlugin = ({
  const result = isVueStyle
  ? css
  : await compileCss(
+ resolver,
  root,
  id,
  {

src/node/build/index.ts

@@ -151,7 +151,9 @@ export async function createBaseRollupPlugins(
  // vite:esbuild
  enableEsbuild ? await createEsbuildPlugin(options.jsx) : null,
  // vue
- enableRollupPluginVue ? await createVuePlugin(root, options) : null,
+ enableRollupPluginVue
+ ? await createVuePlugin(resolver, root, options)
+ : null,
  require('@rollup/plugin-json')({
  preferConst: true,
  indent: ' ',
@@ -181,6 +183,7 @@ export async function createBaseRollupPlugins(
 }
 
 async function createVuePlugin(
+ resolver: InternalResolver,
  root: string,
  {
  vueCustomBlockTransforms = {},
@@ -195,7 +198,7 @@ async function createVuePlugin(
  const {
  options: postcssOptions,
  plugins: postcssPlugins
- } = await resolvePostcssOptions(root, true)
+ } = await resolvePostcssOptions(resolver, root, true)
 
  if (typeof vueTransformAssetUrls === 'object') {
  vueTransformAssetUrls = {
@@ -378,7 +381,7 @@ export async function build(options: BuildConfig): Promise<BuildResult> {
  sourcemap
  ),
  // vite:css
- createBuildCssPlugin({
+ createBuildCssPlugin(resolver, {
  root,
  publicBase: publicBasePath,
  assetsDir,

src/node/server/serverPluginCss.ts

@@ -139,7 +139,7 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
  const filePath = resolver.requestToFile(ctx.path)
  const preprocessLang = ctx.path.replace(cssPreprocessLangRE, '$2')
 
- const result = await compileCss(root, ctx.path, {
+ const result = await compileCss(resolver, root, ctx.path, {
  id: '',
  source: css,
  filename: filePath,

src/node/server/serverPluginVue.ts

@@ -152,6 +152,7 @@ export const vuePlugin: ServerPlugin = ({
  }
  const id = hash_sum(publicPath)
  const result = await compileSFCStyle(
+ resolver,
  root,
  styleBlock,
  index,
@@ -601,6 +602,7 @@ function compileSFCTemplate(
 }
 
 async function compileSFCStyle(
+ resolver: InternalResolver,
  root: string,
  style: SFCStyleBlock,
  index: number,
@@ -619,7 +621,7 @@ async function compileSFCStyle(
 
  const { generateCodeFrame } = resolveCompiler(root)
  const resource = filePath + `?type=style&index=${index}`
- const result = (await compileCss(root, publicPath, {
+ const result = (await compileCss(resolver, root, publicPath, {
  source: style.content,
  filename: resource,
  id: ``, // will be computed in compileCss

src/node/utils/cssUtils.ts

@@ -2,13 +2,14 @@ import path from 'path'
 import postcssrc from 'postcss-load-config'
 import chalk from 'chalk'
 import { asyncReplace } from './transformUtils'
-import { isExternalUrl, resolveFrom } from './pathUtils'
+import { isExternalUrl, resolveFrom, bareImportRE } from './pathUtils'
 import { resolveCompiler } from './resolveVue'
 import hash_sum from 'hash-sum'
 import {
  SFCAsyncStyleCompileOptions,
  SFCStyleCompileResults
 } from '@vue/compiler-sfc'
+import { InternalResolver } from '../resolver'
 
 export const urlRE = /url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
 export const cssPreprocessLangRE = /(.+)\.(less|sass|scss|styl|stylus|postcss)$/
@@ -52,6 +53,7 @@ export function rewriteCssUrls(
 }
 
 export async function compileCss(
+ resolver: InternalResolver,
  root: string,
  publicPath: string,
  {
@@ -84,7 +86,7 @@ export async function compileCss(
  const {
  options: postcssOptions,
  plugins: postcssPlugins
- } = await resolvePostcssOptions(root, isBuild)
+ } = await resolvePostcssOptions(resolver, root, isBuild)
 
  if (preprocessLang) {
  preprocessOptions = preprocessOptions[preprocessLang] || preprocessOptions
@@ -94,6 +96,21 @@ export async function compileCss(
  case 'sass':
  preprocessOptions = {
  includePaths: ['node_modules'],
+ importer: [
+ (id: string) => {
+ if (id.startsWith('file://')) {
+ id = id.replace('file://', '')
+ }
+ if (isExternalUrl(id)) {
+ return { file: id }
+ }
+ id = resolver.alias(id) || id
+ if (id.startsWith('.') || bareImportRE.test(id)) {
+ return { file: id }
+ }
+ return { file: resolver.requestToFile(id) }
+ }
+ ],
  ...preprocessOptions
  }
  break
@@ -153,11 +170,25 @@ async function loadPostcssConfig(
  }
 }
 
-export async function resolvePostcssOptions(root: string, isBuild: boolean) {
+export async function resolvePostcssOptions(
+ resolver: InternalResolver,
+ root: string,
+ isBuild: boolean
+) {
  const config = await loadPostcssConfig(root)
  const options = config && config.options
  const plugins = config ? config.plugins : []
- plugins.unshift(require('postcss-import')())
+ plugins.unshift(
+ require('postcss-import')({
+ resolve: (id: string) => {
+ id = resolver.alias(id) || id
+ if (id.startsWith('.') || bareImportRE.test(id)) {
+ return id
+ }
+ return resolver.requestToFile(id)
+ }
+ })
+ )
  if (isBuild) {
  plugins.push(require('postcss-discard-comments')({ removeAll: true }))
  }

test/test.js

@@ -613,6 +613,9 @@ describe('vite', () => {
  'directory aliased internal import outside hmr works'
  )
  }
+ // css alias
+ expect(await getComputedColor('.alias-css')).toBe('rgb(255, 0, 0)')
+ expect(await getComputedColor('.alias-scss')).toBe('rgb(255, 0, 0)')
  })
 
  test('transforms', async () => {