From 69c038c87af3e1c8a48ff91fce2e1a84999c66e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E9=94=90=E8=81=AA?= <466403866@qq.com>
Date: Tue, 2 Mar 2021 01:17:03 +0800
Subject: [PATCH 1/4] fix(css): rewriteCssUrls abnormal when has alias

---
 packages/vite/src/node/plugins/css.ts | 29 +++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index bc509596d65a73..0cd6920601286e 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -36,6 +36,7 @@ import MagicString from 'magic-string'
 import * as Postcss from 'postcss'
 import * as Sass from 'sass'
 import type Less from 'less'
+import { Alias } from 'types/alias'
 
 // const debug = createDebugger('vite:css')
 
@@ -535,6 +536,7 @@ async function compileCSS(
       case 'sass':
         opts = {
           includePaths: ['node_modules'],
+          alias: config.resolve.alias,
           ...opts
         }
         break
@@ -543,6 +545,7 @@ async function compileCSS(
       case 'stylus':
         opts = {
           paths: ['node_modules'],
+          alias: config.resolve.alias,
           ...opts
         }
     }
@@ -848,6 +851,7 @@ type StylePreprocessor = (
     [key: string]: any
     additionalData?: PreprocessorAdditionalData
     filename: string
+    alias: Alias[]
   },
   resolvers: CSSAtImportResolvers
 ) => StylePreprocessorResults | Promise<StylePreprocessorResults>
@@ -886,7 +890,7 @@ const scss: StylePreprocessor = async (source, root, options, resolvers) => {
     importer(url, importer, done) {
       resolvers.sass(url, importer).then((resolved) => {
         if (resolved) {
-          rebaseUrls(resolved, options.filename).then(done)
+          rebaseUrls(resolved, options.filename, options.alias).then(done)
         } else {
           done(null)
         }
@@ -936,7 +940,8 @@ const sass: StylePreprocessor = (source, root, options, aliasResolver) =>
  */
 async function rebaseUrls(
   file: string,
-  rootFile: string
+  rootFile: string,
+  alias: Alias[]
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -952,6 +957,14 @@ async function rebaseUrls(
   }
   const rebased = await rewriteCssUrls(content, (url) => {
     if (url.startsWith('/')) return url
+    // match alias, no need to rewrite
+    for (const { find } of alias) {
+      const matches =
+        typeof find === 'string' ? url.startsWith(find) : find.test(url)
+      if (matches) {
+        return url
+      }
+    }
     const absolute = path.resolve(fileDir, url)
     const relative = path.relative(rootDir, absolute)
     return normalizePath(relative)
@@ -968,7 +981,8 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
   const viteResolverPlugin = createViteLessPlugin(
     nodeLess,
     options.filename,
-    resolvers
+    options.alias,
+    resolvers,
   )
   source = await getSource(source, options.filename, options.additionalData)
 
@@ -1004,16 +1018,19 @@ let ViteLessManager: any
 function createViteLessPlugin(
   less: typeof Less,
   rootFile: string,
+  alias: Alias[],
   resolvers: CSSAtImportResolvers
 ): Less.Plugin {
   if (!ViteLessManager) {
     ViteLessManager = class ViteManager extends less.FileManager {
       resolvers
       rootFile
-      constructor(rootFile: string, resolvers: CSSAtImportResolvers) {
+      alias
+      constructor(rootFile: string, resolvers: CSSAtImportResolvers, alias: Alias[]) {
         super()
         this.rootFile = rootFile
         this.resolvers = resolvers
+        this.alias = alias
       }
       supports() {
         return true
@@ -1032,7 +1049,7 @@ function createViteLessPlugin(
           path.join(dir, '*')
         )
         if (resolved) {
-          const result = await rebaseUrls(resolved, this.rootFile)
+          const result = await rebaseUrls(resolved, this.rootFile, this.alias)
           let contents
           if (result && 'contents' in result) {
             contents = result.contents
@@ -1052,7 +1069,7 @@ function createViteLessPlugin(
 
   return {
     install(_, pluginManager) {
-      pluginManager.addFileManager(new ViteLessManager(rootFile, resolvers))
+      pluginManager.addFileManager(new ViteLessManager(rootFile, resolvers, alias))
     },
     minVersion: [3, 0, 0]
   }

From 413a4e5c237a8de48163c64c4cf9add228f7811a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E9=94=90=E8=81=AA?= <466403866@qq.com>
Date: Fri, 5 Mar 2021 23:45:29 +0800
Subject: [PATCH 2/4] fix(css): playground add less/sass bg url match alias
 scene

---
 packages/playground/css/index.html         | 8 ++++++++
 packages/playground/css/nested/_index.scss | 5 +++++
 packages/playground/css/nested/nested.less | 5 +++++
 3 files changed, 18 insertions(+)

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index b2443e6ee9d5d5..c1128b68039047 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -21,6 +21,10 @@ <h1>CSS</h1>
   <p class="sass-at-import">
     @import from SASS _index: This should be olive and have bg image
   </p>
+  <p class="sass-at-import-alias">
+    @import from SASS _index: This should be olive and have bg image which url
+    contains alias
+  </p>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
@@ -29,6 +33,10 @@ <h1>CSS</h1>
   <p class="less-at-import">
     @import from Less: This should be darkslateblue and have bg image
   </p>
+  <p class="less-at-import-alias">
+    @import from Less: This should be darkslateblue and have bg image which url
+    contains alias
+  </p>
   <p>Imported Less string:</p>
   <pre class="imported-less"></pre>
 
diff --git a/packages/playground/css/nested/_index.scss b/packages/playground/css/nested/_index.scss
index 42306c84934322..6f2103c79fc2c8 100644
--- a/packages/playground/css/nested/_index.scss
+++ b/packages/playground/css/nested/_index.scss
@@ -2,3 +2,8 @@
   color: olive;
   background: url(./icon.png) 10px no-repeat;
 }
+
+.sass-at-import-alias {
+  color: olive;
+  background: url(@/nested/icon.png) 10px no-repeat;
+}
diff --git a/packages/playground/css/nested/nested.less b/packages/playground/css/nested/nested.less
index f6d00613c9e4a1..e4ce110ab73679 100644
--- a/packages/playground/css/nested/nested.less
+++ b/packages/playground/css/nested/nested.less
@@ -2,3 +2,8 @@
   color: darkslateblue;
   background: url(./icon.png) 10px no-repeat;
 }
+
+.less-at-import-alias {
+  color: darkslateblue;
+  background: url(@/nested/icon.png) 10px no-repeat;
+}

From 0a9e3eaef2ca68d9a6c14af857dcaf473eb3dfe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E9=94=90=E8=81=AA?= <466403866@qq.com>
Date: Sun, 21 Mar 2021 00:19:33 +0800
Subject: [PATCH 3/4] fix(css): naming standard

---
 packages/vite/src/node/plugins/css.ts | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 0cd6920601286e..9c374094956eea 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -536,7 +536,7 @@ async function compileCSS(
       case 'sass':
         opts = {
           includePaths: ['node_modules'],
-          alias: config.resolve.alias,
+          aliases: config.resolve.alias,
           ...opts
         }
         break
@@ -545,7 +545,7 @@ async function compileCSS(
       case 'stylus':
         opts = {
           paths: ['node_modules'],
-          alias: config.resolve.alias,
+          aliases: config.resolve.alias,
           ...opts
         }
     }
@@ -851,7 +851,7 @@ type StylePreprocessor = (
     [key: string]: any
     additionalData?: PreprocessorAdditionalData
     filename: string
-    alias: Alias[]
+    aliases: Alias[]
   },
   resolvers: CSSAtImportResolvers
 ) => StylePreprocessorResults | Promise<StylePreprocessorResults>
@@ -890,7 +890,7 @@ const scss: StylePreprocessor = async (source, root, options, resolvers) => {
     importer(url, importer, done) {
       resolvers.sass(url, importer).then((resolved) => {
         if (resolved) {
-          rebaseUrls(resolved, options.filename, options.alias).then(done)
+          rebaseUrls(resolved, options.filename, options.aliases).then(done)
         } else {
           done(null)
         }
@@ -941,7 +941,7 @@ const sass: StylePreprocessor = (source, root, options, aliasResolver) =>
 async function rebaseUrls(
   file: string,
   rootFile: string,
-  alias: Alias[]
+  aliases: Alias[]
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -958,7 +958,7 @@ async function rebaseUrls(
   const rebased = await rewriteCssUrls(content, (url) => {
     if (url.startsWith('/')) return url
     // match alias, no need to rewrite
-    for (const { find } of alias) {
+    for (const { find } of aliases) {
       const matches =
         typeof find === 'string' ? url.startsWith(find) : find.test(url)
       if (matches) {
@@ -981,8 +981,8 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
   const viteResolverPlugin = createViteLessPlugin(
     nodeLess,
     options.filename,
-    options.alias,
-    resolvers,
+    options.aliases,
+    resolvers
   )
   source = await getSource(source, options.filename, options.additionalData)
 
@@ -1018,19 +1018,23 @@ let ViteLessManager: any
 function createViteLessPlugin(
   less: typeof Less,
   rootFile: string,
-  alias: Alias[],
+  aliases: Alias[],
   resolvers: CSSAtImportResolvers
 ): Less.Plugin {
   if (!ViteLessManager) {
     ViteLessManager = class ViteManager extends less.FileManager {
       resolvers
       rootFile
-      alias
-      constructor(rootFile: string, resolvers: CSSAtImportResolvers, alias: Alias[]) {
+      aliases
+      constructor(
+        rootFile: string,
+        resolvers: CSSAtImportResolvers,
+        aliases: Alias[]
+      ) {
         super()
         this.rootFile = rootFile
         this.resolvers = resolvers
-        this.alias = alias
+        this.aliases = aliases
       }
       supports() {
         return true
@@ -1049,7 +1053,7 @@ function createViteLessPlugin(
           path.join(dir, '*')
         )
         if (resolved) {
-          const result = await rebaseUrls(resolved, this.rootFile, this.alias)
+          const result = await rebaseUrls(resolved, this.rootFile, this.aliases)
           let contents
           if (result && 'contents' in result) {
             contents = result.contents
@@ -1069,7 +1073,9 @@ function createViteLessPlugin(
 
   return {
     install(_, pluginManager) {
-      pluginManager.addFileManager(new ViteLessManager(rootFile, resolvers, alias))
+      pluginManager.addFileManager(
+        new ViteLessManager(rootFile, resolvers, aliases)
+      )
     },
     minVersion: [3, 0, 0]
   }

From 8f8b70b84794bfc7c716886cff8e48f0c11a712f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E9=94=90=E8=81=AA?= <466403866@qq.com>
Date: Sun, 21 Mar 2021 01:55:24 +0800
Subject: [PATCH 4/4] fix(css): revert aliases to alias

---
 packages/vite/src/node/plugins/css.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 9c374094956eea..5afc94e61b762c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -536,7 +536,7 @@ async function compileCSS(
       case 'sass':
         opts = {
           includePaths: ['node_modules'],
-          aliases: config.resolve.alias,
+          alias: config.resolve.alias,
           ...opts
         }
         break
@@ -545,7 +545,7 @@ async function compileCSS(
       case 'stylus':
         opts = {
           paths: ['node_modules'],
-          aliases: config.resolve.alias,
+          alias: config.resolve.alias,
           ...opts
         }
     }
@@ -851,7 +851,7 @@ type StylePreprocessor = (
     [key: string]: any
     additionalData?: PreprocessorAdditionalData
     filename: string
-    aliases: Alias[]
+    alias: Alias[]
   },
   resolvers: CSSAtImportResolvers
 ) => StylePreprocessorResults | Promise<StylePreprocessorResults>
@@ -890,7 +890,7 @@ const scss: StylePreprocessor = async (source, root, options, resolvers) => {
     importer(url, importer, done) {
       resolvers.sass(url, importer).then((resolved) => {
         if (resolved) {
-          rebaseUrls(resolved, options.filename, options.aliases).then(done)
+          rebaseUrls(resolved, options.filename, options.alias).then(done)
         } else {
           done(null)
         }
@@ -941,7 +941,7 @@ const sass: StylePreprocessor = (source, root, options, aliasResolver) =>
 async function rebaseUrls(
   file: string,
   rootFile: string,
-  aliases: Alias[]
+  alias: Alias[]
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -958,7 +958,7 @@ async function rebaseUrls(
   const rebased = await rewriteCssUrls(content, (url) => {
     if (url.startsWith('/')) return url
     // match alias, no need to rewrite
-    for (const { find } of aliases) {
+    for (const { find } of alias) {
       const matches =
         typeof find === 'string' ? url.startsWith(find) : find.test(url)
       if (matches) {
@@ -981,7 +981,7 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
   const viteResolverPlugin = createViteLessPlugin(
     nodeLess,
     options.filename,
-    options.aliases,
+    options.alias,
     resolvers
   )
   source = await getSource(source, options.filename, options.additionalData)
@@ -1018,23 +1018,23 @@ let ViteLessManager: any
 function createViteLessPlugin(
   less: typeof Less,
   rootFile: string,
-  aliases: Alias[],
+  alias: Alias[],
   resolvers: CSSAtImportResolvers
 ): Less.Plugin {
   if (!ViteLessManager) {
     ViteLessManager = class ViteManager extends less.FileManager {
       resolvers
       rootFile
-      aliases
+      alias
       constructor(
         rootFile: string,
         resolvers: CSSAtImportResolvers,
-        aliases: Alias[]
+        alias: Alias[]
       ) {
         super()
         this.rootFile = rootFile
         this.resolvers = resolvers
-        this.aliases = aliases
+        this.alias = alias
       }
       supports() {
         return true
@@ -1053,7 +1053,7 @@ function createViteLessPlugin(
           path.join(dir, '*')
         )
         if (resolved) {
-          const result = await rebaseUrls(resolved, this.rootFile, this.aliases)
+          const result = await rebaseUrls(resolved, this.rootFile, this.alias)
           let contents
           if (result && 'contents' in result) {
             contents = result.contents
@@ -1074,7 +1074,7 @@ function createViteLessPlugin(
   return {
     install(_, pluginManager) {
       pluginManager.addFileManager(
-        new ViteLessManager(rootFile, resolvers, aliases)
+        new ViteLessManager(rootFile, resolvers, alias)
       )
     },
     minVersion: [3, 0, 0]