From 56f0735f5c83790bb6b640876160bc1ed0d5c243 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Tue, 1 Mar 2022 18:35:01 +0800
Subject: [PATCH 01/16] fix(style): fix create wrong url when import css in
 less

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index cb62b785732e0d..c67a1017b8c7e5 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -658,6 +658,12 @@ async function compileCSS(
     }
     // important: set this for relative import resolving
     opts.filename = cleanUrl(id)
+
+    // use behavior same as less-loader and more intuitive
+    if (lang === 'less') {
+      opts.relativeUrls = opts.relativeUrls ?? true
+    }
+
     const preprocessResult = await preProcessor(
       code,
       config.root,

From ea38d1eb9278066f121cd4ef8452c092a65bdba2 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 15:38:26 +0800
Subject: [PATCH 02/16] fix(less): fix not support import css in less

---
 packages/playground/css/index.html            |   3 +
 packages/playground/css/index.vue             |   9 ++
 packages/playground/css/main.js               |   6 +
 .../playground/css/nested/css-in-less-2.less  |   3 +
 .../playground/css/nested/css-in-less.css     |   3 +
 .../playground/css/nested/css-in-less.less    |   1 +
 packages/playground/css/package.json          |   6 +-
 packages/playground/css/vite.config.js        |   5 +-
 packages/vite/src/node/plugins/css.ts         |  93 ++++++++++++++-
 packages/vite/src/node/plugins/resolve.ts     |   5 +
 pnpm-lock.yaml                                | 106 +++++++++++++++++-
 11 files changed, 228 insertions(+), 12 deletions(-)
 create mode 100644 packages/playground/css/index.vue
 create mode 100644 packages/playground/css/nested/css-in-less-2.less
 create mode 100644 packages/playground/css/nested/css-in-less.css
 create mode 100644 packages/playground/css/nested/css-in-less.less

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 4de35d66441bee..4544156bd0d084 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -105,6 +105,9 @@ <h1>CSS</h1>
   </p>
 
   <p class="inlined">Inlined import - this should NOT be red.</p>
+
+  <div class="app"></div>
+
   <pre class="inlined-code"></pre>
 </div>
 
diff --git a/packages/playground/css/index.vue b/packages/playground/css/index.vue
new file mode 100644
index 00000000000000..2387f7d93b286e
--- /dev/null
+++ b/packages/playground/css/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="css-in-less">test for import css in less with SFC</div>
+</template>
+
+<script setup></script>
+
+<style lang="less">
+@import './nested/css-in-less.less';
+</style>
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 3599ed0d60562c..002e851a401cd9 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -12,6 +12,11 @@ text('.imported-less', less)
 import stylus from './stylus.styl'
 text('.imported-stylus', stylus)
 
+import sfc from './index.vue'
+import { createApp } from 'vue'
+
+createApp(sfc).mount('.app')
+
 import mod from './mod.module.css'
 document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))
@@ -67,6 +72,7 @@ if (import.meta.env.DEV) {
 
 // inlined
 import inlined from './inlined.css?inline'
+import { vueI18nPlugin } from '../vue/CustomBlockPlugin'
 text('.inlined-code', inlined)
 
 // glob
diff --git a/packages/playground/css/nested/css-in-less-2.less b/packages/playground/css/nested/css-in-less-2.less
new file mode 100644
index 00000000000000..443d17da34c0da
--- /dev/null
+++ b/packages/playground/css/nested/css-in-less-2.less
@@ -0,0 +1,3 @@
+.css-in-less-2 {
+  color: blue;
+}
diff --git a/packages/playground/css/nested/css-in-less.css b/packages/playground/css/nested/css-in-less.css
new file mode 100644
index 00000000000000..b174a601b1356c
--- /dev/null
+++ b/packages/playground/css/nested/css-in-less.css
@@ -0,0 +1,3 @@
+.css-in-less {
+  color: yellow;
+}
diff --git a/packages/playground/css/nested/css-in-less.less b/packages/playground/css/nested/css-in-less.less
new file mode 100644
index 00000000000000..0e7962297992a7
--- /dev/null
+++ b/packages/playground/css/nested/css-in-less.less
@@ -0,0 +1 @@
+@import './css-in-less.css';
diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json
index 13a58874578c09..b97339f684d07f 100644
--- a/packages/playground/css/package.json
+++ b/packages/playground/css/package.json
@@ -3,16 +3,20 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --debug css,resolve-details",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:^2.2.4",
     "css-dep": "link:./css-dep",
     "less": "^4.1.2",
     "postcss-nested": "^5.0.6",
     "sass": "^1.43.4",
     "stylus": "^0.55.0"
+  },
+  "dependencies": {
+    "vue": "^3.2.31"
   }
 }
diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js
index e4dc8d5a9f265f..e17bdacd9c14a1 100644
--- a/packages/playground/css/vite.config.js
+++ b/packages/playground/css/vite.config.js
@@ -1,4 +1,6 @@
 const path = require('path')
+const vue = require('@vitejs/plugin-vue')
+
 /**
  * @type {import('vite').UserConfig}
  */
@@ -48,5 +50,6 @@ module.exports = {
         ]
       }
     }
-  }
+  },
+  plugins: [vue()]
 }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index c67a1017b8c7e5..f690843649d5d6 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -11,7 +11,8 @@ import {
   isObject,
   normalizePath,
   processSrcSet,
-  parseRequest
+  parseRequest,
+  createDebugger
 } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
@@ -46,7 +47,7 @@ import type { ModuleNode } from '../server/moduleGraph'
 import { transform, formatMessages } from 'esbuild'
 import { addToHTMLProxyTransformResult } from './html'
 
-// const debug = createDebugger('vite:css')
+const debug = createDebugger('vite:css')
 
 export interface CSSOptions {
   /**
@@ -659,9 +660,13 @@ async function compileCSS(
     // important: set this for relative import resolving
     opts.filename = cleanUrl(id)
 
+    if (lang === 'less') {
+      debug('pre-processing %o', opts)
+    }
+
     // use behavior same as less-loader and more intuitive
     if (lang === 'less') {
-      opts.relativeUrls = opts.relativeUrls ?? true
+      // opts.relativeUrls = opts.relativeUrls ?? true
     }
 
     const preprocessResult = await preProcessor(
@@ -670,6 +675,9 @@ async function compileCSS(
       opts,
       atImportResolvers
     )
+    if (lang === 'less') {
+      debug(preprocessResult.code)
+    }
     if (preprocessResult.errors.length) {
       throw preprocessResult.errors[0]
     }
@@ -691,6 +699,7 @@ async function compileCSS(
   const postcssPlugins =
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
+  debug(`needInlineImport -> ${needInlineImport}`)
   if (needInlineImport) {
     const isHTMLProxy = htmlProxyRE.test(id)
     postcssPlugins.unshift(
@@ -700,10 +709,12 @@ async function compileCSS(
           if (isHTMLProxy && publicFile) {
             return publicFile
           }
+          debug('resolving %o', id, basedir)
           const resolved = await atImportResolvers.css(
             id,
             path.join(basedir, '*')
           )
+          debug('resolv %s', resolved)
           if (resolved) {
             return path.resolve(resolved)
           }
@@ -718,6 +729,7 @@ async function compileCSS(
     }) as Postcss.Plugin
   )
 
+  debug(`isModule -> ${isModule}`)
   if (isModule) {
     postcssPlugins.unshift(
       (await import('postcss-modules')).default({
@@ -864,6 +876,7 @@ type CssUrlReplacer = (
 // https://drafts.csswg.org/css-syntax-3/#identifier-code-point
 export const cssUrlRE =
   /(?<=^|[^\w\-\u0080-\uffff])url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
+export const importCssRE = /@import ('[^']+\.css'|"[^"]+\.css"|[^'")]+\.css)/
 const cssImageSetRE = /image-set\(([^)]+)\)/
 
 const UrlRewritePostcssPlugin: Postcss.PluginCreator<{
@@ -913,6 +926,16 @@ function rewriteCssUrls(
   })
 }
 
+function rewriteImportCss(
+  css: string,
+  replacer: CssUrlReplacer
+): Promise<string> {
+  return asyncReplace(css, importCssRE, async (match) => {
+    const [matched, rawUrl] = match
+    return await doImportCSSReplace(rawUrl, matched, replacer)
+  })
+}
+
 function rewriteCssImageSet(
   css: string,
   replacer: CssUrlReplacer
@@ -943,6 +966,24 @@ async function doUrlReplace(
   return `url(${wrap}${await replacer(rawUrl)}${wrap})`
 }
 
+async function doImportCSSReplace(
+  rawUrl: string,
+  matched: string,
+  replacer: CssUrlReplacer
+) {
+  let wrap = ''
+  const first = rawUrl[0]
+  if (first === `"` || first === `'`) {
+    wrap = first
+    rawUrl = rawUrl.slice(1, -1)
+  }
+  if (isExternalUrl(rawUrl) || isDataUrl(rawUrl) || rawUrl.startsWith('#')) {
+    return matched
+  }
+
+  return `@import ${wrap}${await replacer(rawUrl)}${wrap}`
+}
+
 async function minifyCSS(css: string, config: ResolvedConfig) {
   const { code, warnings } = await transform(css, {
     loader: 'css',
@@ -1141,10 +1182,16 @@ async function rebaseUrls(
   }
   // no url()
   const content = fs.readFileSync(file, 'utf-8')
-  if (!cssUrlRE.test(content)) {
+  const hasUrls = cssUrlRE.test(content)
+  const hasImportCss = importCssRE.test(content)
+  if (!hasUrls && !hasImportCss) {
+    debug('not url()')
     return { file }
   }
-  const rebased = await rewriteCssUrls(content, (url) => {
+
+  let rebased
+  const rebaseFn = (url: string) => {
+    debug('rebase url', url)
     if (url.startsWith('/')) return url
     // match alias, no need to rewrite
     for (const { find } of alias) {
@@ -1156,8 +1203,36 @@ async function rebaseUrls(
     }
     const absolute = path.resolve(fileDir, url)
     const relative = path.relative(rootDir, absolute)
+
+    debug(
+      `[rebase]: fileDir: ${colors.blue(fileDir)}, url: ${colors.blue(
+        url
+      )}, absolute: ${colors.blue(absolute)}, rootDir: ${colors.blue(
+        rootDir
+      )}, relative: ${colors.blue(relative)}`
+    )
+
+    debug(`[rebase]: normalizePath: ${colors.blue(normalizePath(relative))}`)
     return normalizePath(relative)
-  })
+  }
+  // fix import css in less
+  // hwo to know is import css in less?
+  // less file has @import "foo.css"
+  if (hasImportCss) {
+    debug('find: import css in less', content)
+    rebased = await rewriteImportCss(content, rebaseFn)
+  }
+
+  debug('rebased to 1', rebased)
+
+  if (hasUrls) {
+    rebased = await rewriteCssUrls(rebased || content, rebaseFn)
+    if (rebased.includes('css-in-less.css')) {
+      debug(`rebase content: ${rebased}`)
+    }
+  }
+
+  debug('rebased to 2', rebased)
   return {
     file,
     contents: rebased
@@ -1181,6 +1256,7 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
       ...options,
       plugins: [viteResolverPlugin, ...(options.plugins || [])]
     })
+    debug(`result: ${result.css.toString()}, imports: ${result.imports}`)
   } catch (e) {
     const error = e as Less.RenderError
     // normalize error info
@@ -1243,6 +1319,11 @@ function createViteLessPlugin(
         )
         if (resolved) {
           const result = await rebaseUrls(resolved, this.rootFile, this.alias)
+          debug(
+            `resolved: ${resolved}, filename: ${filename}, dir: ${dir}, opts: ${Object.keys(
+              opts
+            )}`
+          )
           let contents: string
           if (result && 'contents' in result) {
             contents = result.contents
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 03a9026242f428..7d2de6a6cb8d6c 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -142,6 +142,11 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
           return res
         }
       }
+      debug(
+        `[all] ${colors.cyan(id)} -> ${colors.dim(importer)}, ${colors.blue(
+          preferRelative.toString()
+        )}`
+      )
 
       // relative
       if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab2b4a7833c686..dc7e838ad35c12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,12 +127,17 @@ importers:
 
   packages/playground/css:
     specifiers:
+      '@vitejs/plugin-vue': workspace:^2.2.4
       css-dep: link:./css-dep
       less: ^4.1.2
       postcss-nested: ^5.0.6
       sass: ^1.43.4
       stylus: ^0.55.0
+      vue: ^3.2.31
+    dependencies:
+      vue: 3.2.31
     devDependencies:
+      '@vitejs/plugin-vue': link:../../plugin-vue
       css-dep: link:css-dep
       less: 4.1.2
       postcss-nested: 5.0.6
@@ -2660,6 +2665,15 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /@vue/compiler-core/3.2.31:
+    resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
+    dependencies:
+      '@babel/parser': 7.17.0
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: false
+
   /@vue/compiler-dom/3.2.26:
     resolution: {integrity: sha512-smBfaOW6mQDxcT3p9TKT6mE22vjxjJL50GFVJiI0chXYGU/xzC05QRGrW3HHVuJrmLTLx5zBhsZ2dIATERbarg==}
     dependencies:
@@ -2680,6 +2694,13 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
+  /@vue/compiler-dom/3.2.31:
+    resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
+    dependencies:
+      '@vue/compiler-core': 3.2.31
+      '@vue/shared': 3.2.31
+    dev: false
+
   /@vue/compiler-sfc/3.2.26:
     resolution: {integrity: sha512-ePpnfktV90UcLdsDQUh2JdiTuhV0Skv2iYXxfNMOK/F3Q+2BO0AulcVcfoksOpTJGmhhfosWfMyEaEf0UaWpIw==}
     dependencies:
@@ -2724,6 +2745,21 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /@vue/compiler-sfc/3.2.31:
+    resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
+    dependencies:
+      '@babel/parser': 7.17.0
+      '@vue/compiler-core': 3.2.31
+      '@vue/compiler-dom': 3.2.31
+      '@vue/compiler-ssr': 3.2.31
+      '@vue/reactivity-transform': 3.2.31
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      magic-string: 0.25.7
+      postcss: 8.4.6
+      source-map: 0.6.1
+    dev: false
+
   /@vue/compiler-ssr/3.2.26:
     resolution: {integrity: sha512-2mywLX0ODc4Zn8qBoA2PDCsLEZfpUGZcyoFRLSOjyGGK6wDy2/5kyDOWtf0S0UvtoyVq95OTSGIALjZ4k2q/ag==}
     dependencies:
@@ -2744,6 +2780,13 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
+  /@vue/compiler-ssr/3.2.31:
+    resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.31
+      '@vue/shared': 3.2.31
+    dev: false
+
   /@vue/devtools-api/6.0.0-beta.21.1:
     resolution: {integrity: sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==}
     dev: false
@@ -2777,6 +2820,16 @@ packages:
       magic-string: 0.25.7
     dev: true
 
+  /@vue/reactivity-transform/3.2.31:
+    resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
+    dependencies:
+      '@babel/parser': 7.17.0
+      '@vue/compiler-core': 3.2.31
+      '@vue/shared': 3.2.31
+      estree-walker: 2.0.2
+      magic-string: 0.25.7
+    dev: false
+
   /@vue/reactivity/3.2.26:
     resolution: {integrity: sha512-h38bxCZLW6oFJVDlCcAiUKFnXI8xP8d+eO0pcDxx+7dQfSPje2AO6M9S9QO6MrxQB7fGP0DH0dYQ8ksf6hrXKQ==}
     dependencies:
@@ -2794,6 +2847,12 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
+  /@vue/reactivity/3.2.31:
+    resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
+    dependencies:
+      '@vue/shared': 3.2.31
+    dev: false
+
   /@vue/runtime-core/3.2.26:
     resolution: {integrity: sha512-BcYi7qZ9Nn+CJDJrHQ6Zsmxei2hDW0L6AB4vPvUQGBm2fZyC0GXd/4nVbyA2ubmuhctD5RbYY8L+5GUJszv9mQ==}
     dependencies:
@@ -2814,6 +2873,13 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
+  /@vue/runtime-core/3.2.31:
+    resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
+    dependencies:
+      '@vue/reactivity': 3.2.31
+      '@vue/shared': 3.2.31
+    dev: false
+
   /@vue/runtime-dom/3.2.26:
     resolution: {integrity: sha512-dY56UIiZI+gjc4e8JQBwAifljyexfVCkIAu/WX8snh8vSOt/gMSEGwPRcl2UpYpBYeyExV8WCbgvwWRNt9cHhQ==}
     dependencies:
@@ -2837,6 +2903,14 @@ packages:
       csstype: 2.6.19
     dev: true
 
+  /@vue/runtime-dom/3.2.31:
+    resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
+    dependencies:
+      '@vue/runtime-core': 3.2.31
+      '@vue/shared': 3.2.31
+      csstype: 2.6.19
+    dev: false
+
   /@vue/server-renderer/3.2.26_vue@3.2.26:
     resolution: {integrity: sha512-Jp5SggDUvvUYSBIvYEhy76t4nr1vapY/FIFloWmQzn7UxqaHrrBpbxrqPcTrSgGrcaglj0VBp22BKJNre4aA1w==}
     peerDependencies:
@@ -2866,6 +2940,16 @@ packages:
       vue: 3.2.30
     dev: true
 
+  /@vue/server-renderer/3.2.31_vue@3.2.31:
+    resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
+    peerDependencies:
+      vue: 3.2.31
+    dependencies:
+      '@vue/compiler-ssr': 3.2.31
+      '@vue/shared': 3.2.31
+      vue: 3.2.31
+    dev: false
+
   /@vue/shared/3.2.26:
     resolution: {integrity: sha512-vPV6Cq+NIWbH5pZu+V+2QHE9y1qfuTq49uNWw4f7FDEeZaDU2H2cx5jcUZOAKW7qTrUS4k6qZPbMy1x4N96nbA==}
 
@@ -2877,6 +2961,10 @@ packages:
     resolution: {integrity: sha512-B3HouBtUxcfu2w2d+VhdLcVBXKYYhXiFMAfQ+hoe8NUhKkPRkWDIqhpuehCZxVQ3S2dN1P1WfKGlxGC+pfmxGg==}
     dev: true
 
+  /@vue/shared/3.2.31:
+    resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
+    dev: false
+
   /@wessberg/stringutil/1.0.19:
     resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==}
     engines: {node: '>=8.0.0'}
@@ -4972,7 +5060,7 @@ packages:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
 
   /fsevents/2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -6558,12 +6646,12 @@ packages:
       yallist: 4.0.0
 
   /magic-string/0.25.7:
-    resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
+    resolution: {integrity: sha1-P0l9b9NMZpxnmNy4IfLvMfVEUFE=}
     dependencies:
       sourcemap-codec: 1.4.8
 
   /make-dir/2.1.0:
-    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    resolution: {integrity: sha1-XwMQ4YuL6JjMBwCSlaMK5B6R5vU=}
     engines: {node: '>=6'}
     requiresBuild: true
     dependencies:
@@ -8329,7 +8417,7 @@ packages:
     dev: true
 
   /sourcemap-codec/1.4.8:
-    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    resolution: {integrity: sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=}
 
   /spdx-compare/1.0.0:
     resolution: {integrity: sha512-C1mDZOX0hnu0ep9dfmuoi03+eOdDoz2yvK79RxbcrVEG1NO1Ph35yW102DHWKN4pk80nwCgeMmSY5L25VE4D9A==}
@@ -9194,6 +9282,16 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
+  /vue/3.2.31:
+    resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.31
+      '@vue/compiler-sfc': 3.2.31
+      '@vue/runtime-dom': 3.2.31
+      '@vue/server-renderer': 3.2.31_vue@3.2.31
+      '@vue/shared': 3.2.31
+    dev: false
+
   /vuex/4.0.2_vue@3.2.26:
     resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
     peerDependencies:

From 593527a67b8362983f00b26b513d397a00e6dc39 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 15:41:31 +0800
Subject: [PATCH 03/16] fix(deg): pnpm-lock not update

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc7e838ad35c12..85d96652c249c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,7 +127,7 @@ importers:
 
   packages/playground/css:
     specifiers:
-      '@vitejs/plugin-vue': workspace:^2.2.4
+      '@vitejs/plugin-vue': workspace:*
       css-dep: link:./css-dep
       less: ^4.1.2
       postcss-nested: ^5.0.6

From 2855e97151594dccb2dad1b5eeba02dc06d8d569 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 15:51:25 +0800
Subject: [PATCH 04/16] refactor(debug): remove debug

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index f690843649d5d6..8aa00ca714d48d 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -11,8 +11,7 @@ import {
   isObject,
   normalizePath,
   processSrcSet,
-  parseRequest,
-  createDebugger
+  parseRequest
 } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
@@ -47,7 +46,7 @@ import type { ModuleNode } from '../server/moduleGraph'
 import { transform, formatMessages } from 'esbuild'
 import { addToHTMLProxyTransformResult } from './html'
 
-const debug = createDebugger('vite:css')
+// const debug = createDebugger('vite:css')
 
 export interface CSSOptions {
   /**
@@ -660,24 +659,13 @@ async function compileCSS(
     // important: set this for relative import resolving
     opts.filename = cleanUrl(id)
 
-    if (lang === 'less') {
-      debug('pre-processing %o', opts)
-    }
-
-    // use behavior same as less-loader and more intuitive
-    if (lang === 'less') {
-      // opts.relativeUrls = opts.relativeUrls ?? true
-    }
-
     const preprocessResult = await preProcessor(
       code,
       config.root,
       opts,
       atImportResolvers
     )
-    if (lang === 'less') {
-      debug(preprocessResult.code)
-    }
+
     if (preprocessResult.errors.length) {
       throw preprocessResult.errors[0]
     }
@@ -699,7 +687,6 @@ async function compileCSS(
   const postcssPlugins =
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
-  debug(`needInlineImport -> ${needInlineImport}`)
   if (needInlineImport) {
     const isHTMLProxy = htmlProxyRE.test(id)
     postcssPlugins.unshift(
@@ -709,12 +696,12 @@ async function compileCSS(
           if (isHTMLProxy && publicFile) {
             return publicFile
           }
-          debug('resolving %o', id, basedir)
+
           const resolved = await atImportResolvers.css(
             id,
             path.join(basedir, '*')
           )
-          debug('resolv %s', resolved)
+
           if (resolved) {
             return path.resolve(resolved)
           }
@@ -729,7 +716,6 @@ async function compileCSS(
     }) as Postcss.Plugin
   )
 
-  debug(`isModule -> ${isModule}`)
   if (isModule) {
     postcssPlugins.unshift(
       (await import('postcss-modules')).default({
@@ -1180,18 +1166,19 @@ async function rebaseUrls(
   if (fileDir === rootDir) {
     return { file }
   }
-  // no url()
+
   const content = fs.readFileSync(file, 'utf-8')
+  // no url()
   const hasUrls = cssUrlRE.test(content)
+  // no @import xxx.css
   const hasImportCss = importCssRE.test(content)
+
   if (!hasUrls && !hasImportCss) {
-    debug('not url()')
     return { file }
   }
 
   let rebased
   const rebaseFn = (url: string) => {
-    debug('rebase url', url)
     if (url.startsWith('/')) return url
     // match alias, no need to rewrite
     for (const { find } of alias) {
@@ -1203,36 +1190,18 @@ async function rebaseUrls(
     }
     const absolute = path.resolve(fileDir, url)
     const relative = path.relative(rootDir, absolute)
-
-    debug(
-      `[rebase]: fileDir: ${colors.blue(fileDir)}, url: ${colors.blue(
-        url
-      )}, absolute: ${colors.blue(absolute)}, rootDir: ${colors.blue(
-        rootDir
-      )}, relative: ${colors.blue(relative)}`
-    )
-
-    debug(`[rebase]: normalizePath: ${colors.blue(normalizePath(relative))}`)
     return normalizePath(relative)
   }
-  // fix import css in less
-  // hwo to know is import css in less?
-  // less file has @import "foo.css"
+
+  // fix import css in les shas @import "foo.css"
   if (hasImportCss) {
-    debug('find: import css in less', content)
     rebased = await rewriteImportCss(content, rebaseFn)
   }
 
-  debug('rebased to 1', rebased)
-
   if (hasUrls) {
     rebased = await rewriteCssUrls(rebased || content, rebaseFn)
-    if (rebased.includes('css-in-less.css')) {
-      debug(`rebase content: ${rebased}`)
-    }
   }
 
-  debug('rebased to 2', rebased)
   return {
     file,
     contents: rebased
@@ -1256,7 +1225,6 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
       ...options,
       plugins: [viteResolverPlugin, ...(options.plugins || [])]
     })
-    debug(`result: ${result.css.toString()}, imports: ${result.imports}`)
   } catch (e) {
     const error = e as Less.RenderError
     // normalize error info
@@ -1319,11 +1287,6 @@ function createViteLessPlugin(
         )
         if (resolved) {
           const result = await rebaseUrls(resolved, this.rootFile, this.alias)
-          debug(
-            `resolved: ${resolved}, filename: ${filename}, dir: ${dir}, opts: ${Object.keys(
-              opts
-            )}`
-          )
           let contents: string
           if (result && 'contents' in result) {
             contents = result.contents

From 4c64caecc5ce29f9066678d48e0fe1bd8ad61a76 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 17:22:18 +0800
Subject: [PATCH 05/16] test(example): add test case

---
 packages/playground/css/index.vue               | 7 ++++++-
 packages/playground/css/nested/css-in-less.less | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/playground/css/index.vue b/packages/playground/css/index.vue
index 2387f7d93b286e..fcf412a12281ab 100644
--- a/packages/playground/css/index.vue
+++ b/packages/playground/css/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="css-in-less">test for import css in less with SFC</div>
+  <div class="css-in-less">
+    test for import css in less with SFC, color will be yellow
+  </div>
+  <div class="css-in-less-2">
+    test for import less in less with SFC, color will be blue
+  </div>
 </template>
 
 <script setup></script>
diff --git a/packages/playground/css/nested/css-in-less.less b/packages/playground/css/nested/css-in-less.less
index 0e7962297992a7..e359b21ea13ab3 100644
--- a/packages/playground/css/nested/css-in-less.less
+++ b/packages/playground/css/nested/css-in-less.less
@@ -1 +1,5 @@
+@import url('./css-in-less.css');
 @import './css-in-less.css';
+
+@import url('./css-in-less-2.less');
+@import './css-in-less-2.less';

From 0cf802fc6afb1271533a825f7e18dc681f109293 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 18:59:41 +0800
Subject: [PATCH 06/16] refactor: remove debug

---
 packages/vite/src/node/plugins/resolve.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 7d2de6a6cb8d6c..03a9026242f428 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -142,11 +142,6 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
           return res
         }
       }
-      debug(
-        `[all] ${colors.cyan(id)} -> ${colors.dim(importer)}, ${colors.blue(
-          preferRelative.toString()
-        )}`
-      )
 
       // relative
       if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) {

From c101c243399529e0a366426a7daf4907772e1a1c Mon Sep 17 00:00:00 2001
From: Vladimir <sheremet.va@icloud.com>
Date: Tue, 1 Mar 2022 20:01:47 +0300
Subject: [PATCH 07/16] fix: throw Error when can't preload CSS (#7108)

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index bb5b50f93cdbb9..d816d4c1995fd8 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -75,7 +75,9 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) {
       if (isCss) {
         return new Promise((res, rej) => {
           link.addEventListener('load', res)
-          link.addEventListener('error', rej)
+          link.addEventListener('error', () =>
+            rej(new Error(`Unable to preload CSS for ${dep}`))
+          )
         })
       }
     })

From 7b9be284611d545a8f022b20bd765051723c6a33 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 1 Mar 2022 20:45:02 +0100
Subject: [PATCH 08/16] fix: revert #7052, hmr style tag no support in html
 (#7136)

---
 .../assets/__tests__/assets.spec.ts           | 17 +----
 .../src/node/server/middlewares/indexHtml.ts  | 67 +++++++++----------
 2 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index 8efbf1fcc2f082..191da897858dd5 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -8,8 +8,7 @@ import {
   readManifest,
   readFile,
   editFile,
-  notifyRebuildComplete,
-  untilUpdated
+  notifyRebuildComplete
 } from '../../testUtils'
 
 const assetMatch = isBuild
@@ -38,7 +37,7 @@ describe('injected scripts', () => {
 
   test('html-proxy', async () => {
     const hasHtmlProxy = await page.$(
-      'script[type="module"][src^="/foo/index.html?html-proxy"]'
+      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
     )
     if (isBuild) {
       expect(hasHtmlProxy).toBeFalsy()
@@ -259,15 +258,3 @@ describe('css and assets in css in build watch', () => {
     })
   }
 })
-
-if (!isBuild) {
-  test('@import in html style tag hmr', async () => {
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
-    editFile(
-      './css/import.css',
-      (code) => code.replace('#0088ff', '#00ff88'),
-      true
-    )
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
-  })
-}
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 3c76d94c526930..2721502c408e28 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import MagicString from 'magic-string'
-import type { AttributeNode, ElementNode } from '@vue/compiler-dom'
+import type { AttributeNode } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 import type { Connect } from 'types/connect'
 import type { IndexHtmlTransformHook } from '../../plugins/html'
@@ -94,39 +94,9 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   const base = config.base || '/'
 
   const s = new MagicString(html)
-  let inlineModuleIndex = -1
+  let scriptModuleIndex = -1
   const filePath = cleanUrl(htmlPath)
 
-  const addInlineModule = (node: ElementNode, ext: 'js' | 'css') => {
-    inlineModuleIndex++
-
-    const url = filePath.replace(normalizePath(config.root), '')
-
-    const contents = node.children
-      .map((child: any) => child.content || '')
-      .join('')
-
-    // add HTML Proxy to Map
-    addToHTMLProxyCache(config, url, inlineModuleIndex, contents)
-
-    // inline js module. convert to src="proxy"
-    const modulePath = `${
-      config.base + htmlPath.slice(1)
-    }?html-proxy&index=${inlineModuleIndex}.${ext}`
-
-    // invalidate the module so the newly cached contents will be served
-    const module = server?.moduleGraph.getModuleById(modulePath)
-    if (module) {
-      server?.moduleGraph.invalidateModule(module)
-    }
-
-    s.overwrite(
-      node.loc.start.offset,
-      node.loc.end.offset,
-      `<script type="module" src="${modulePath}"></script>`
-    )
-  }
-
   await traverseHtml(html, htmlPath, (node) => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
@@ -135,16 +105,39 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // script tags
     if (node.tag === 'script') {
       const { src, isModule } = getScriptInfo(node)
+      if (isModule) {
+        scriptModuleIndex++
+      }
 
       if (src) {
         processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph)
       } else if (isModule) {
-        addInlineModule(node, 'js')
-      }
-    }
+        const url = filePath.replace(normalizePath(config.root), '')
+
+        const contents = node.children
+          .map((child: any) => child.content || '')
+          .join('')
 
-    if (node.tag === 'style' && node.children.length) {
-      addInlineModule(node, 'css')
+        // add HTML Proxy to Map
+        addToHTMLProxyCache(config, url, scriptModuleIndex, contents)
+
+        // inline js module. convert to src="proxy"
+        const modulePath = `${
+          config.base + htmlPath.slice(1)
+        }?html-proxy&index=${scriptModuleIndex}.js`
+
+        // invalidate the module so the newly cached contents will be served
+        const module = server?.moduleGraph.getModuleById(modulePath)
+        if (module) {
+          server?.moduleGraph.invalidateModule(module)
+        }
+
+        s.overwrite(
+          node.loc.start.offset,
+          node.loc.end.offset,
+          `<script type="module" src="${modulePath}"></script>`
+        )
+      }
     }
 
     // elements with [href/src] attrs

From a3f7fd48d16ba1a2ea8691877f48f79813c9fba6 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 1 Mar 2022 21:19:46 +0100
Subject: [PATCH 09/16] release: v2.8.6

---
 packages/vite/CHANGELOG.md | 10 ++++++++++
 packages/vite/package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index 711fdfb3026df8..bb0c4d0b312fe1 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [2.8.6](https://github.com/vitejs/vite/compare/v2.8.5...v2.8.6) (2022-03-01)
+
+
+### Bug Fixes
+
+* revert [#7052](https://github.com/vitejs/vite/issues/7052), hmr style tag no support in html ([#7136](https://github.com/vitejs/vite/issues/7136)) ([5c116ec](https://github.com/vitejs/vite/commit/5c116ecde0ad43409334853457d68481a22e19d4))
+* throw Error when can't preload CSS ([#7108](https://github.com/vitejs/vite/issues/7108)) ([d9f8edb](https://github.com/vitejs/vite/commit/d9f8edbd5b243f60212cc4bb9271c01b7e3fdd76))
+
+
+
 ## [2.8.5](https://github.com/vitejs/vite/compare/v2.8.4...v2.8.5) (2022-02-28)
 
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index e311edaf9527dc..72bb90249a0286 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",

From a1bcf77620e3e3030ea03bb61bd7fcbf29c22100 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 19:17:45 +0800
Subject: [PATCH 10/16] test: remove necessary import try to fix test case

---
 packages/playground/css/index.html     |  7 ++++++-
 packages/playground/css/index.vue      | 14 --------------
 packages/playground/css/less.less      |  1 +
 packages/playground/css/main.js        |  5 -----
 packages/playground/css/vite.config.js |  4 +---
 5 files changed, 8 insertions(+), 23 deletions(-)
 delete mode 100644 packages/playground/css/index.vue

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 4544156bd0d084..8716f47eb8bf85 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -106,7 +106,12 @@ <h1>CSS</h1>
 
   <p class="inlined">Inlined import - this should NOT be red.</p>
 
-  <div class="app"></div>
+  <div class="css-in-less">
+    test for import css in less with SFC, color will be yellow
+  </div>
+  <div class="css-in-less-2">
+    test for import less in less with SFC, color will be blue
+  </div>
 
   <pre class="inlined-code"></pre>
 </div>
diff --git a/packages/playground/css/index.vue b/packages/playground/css/index.vue
deleted file mode 100644
index fcf412a12281ab..00000000000000
--- a/packages/playground/css/index.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="css-in-less">
-    test for import css in less with SFC, color will be yellow
-  </div>
-  <div class="css-in-less-2">
-    test for import less in less with SFC, color will be blue
-  </div>
-</template>
-
-<script setup></script>
-
-<style lang="less">
-@import './nested/css-in-less.less';
-</style>
diff --git a/packages/playground/css/less.less b/packages/playground/css/less.less
index f8870e06f3a72c..69ffa830862014 100644
--- a/packages/playground/css/less.less
+++ b/packages/playground/css/less.less
@@ -1,4 +1,5 @@
 @import '@/nested/nested';
+@import './nested/css-in-less.less';
 
 @color: blue;
 
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 002e851a401cd9..8913b75d6d9719 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -12,11 +12,6 @@ text('.imported-less', less)
 import stylus from './stylus.styl'
 text('.imported-stylus', stylus)
 
-import sfc from './index.vue'
-import { createApp } from 'vue'
-
-createApp(sfc).mount('.app')
-
 import mod from './mod.module.css'
 document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))
diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js
index e17bdacd9c14a1..53d001d8387989 100644
--- a/packages/playground/css/vite.config.js
+++ b/packages/playground/css/vite.config.js
@@ -1,5 +1,4 @@
 const path = require('path')
-const vue = require('@vitejs/plugin-vue')
 
 /**
  * @type {import('vite').UserConfig}
@@ -50,6 +49,5 @@ module.exports = {
         ]
       }
     }
-  },
-  plugins: [vue()]
+  }
 }

From 68d94499dcc91ef069487dd1bb05533d8af2f49a Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 19:20:33 +0800
Subject: [PATCH 11/16] test: remove necessary dep

---
 packages/playground/css/main.js      |  1 -
 packages/playground/css/package.json |  6 +-
 pnpm-lock.yaml                       | 98 ----------------------------
 3 files changed, 1 insertion(+), 104 deletions(-)

diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 8913b75d6d9719..3599ed0d60562c 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -67,7 +67,6 @@ if (import.meta.env.DEV) {
 
 // inlined
 import inlined from './inlined.css?inline'
-import { vueI18nPlugin } from '../vue/CustomBlockPlugin'
 text('.inlined-code', inlined)
 
 // glob
diff --git a/packages/playground/css/package.json b/packages/playground/css/package.json
index b97339f684d07f..13a58874578c09 100644
--- a/packages/playground/css/package.json
+++ b/packages/playground/css/package.json
@@ -3,20 +3,16 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite --debug css,resolve-details",
+    "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "workspace:^2.2.4",
     "css-dep": "link:./css-dep",
     "less": "^4.1.2",
     "postcss-nested": "^5.0.6",
     "sass": "^1.43.4",
     "stylus": "^0.55.0"
-  },
-  "dependencies": {
-    "vue": "^3.2.31"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85d96652c249c3..97ce0c064307f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,17 +127,12 @@ importers:
 
   packages/playground/css:
     specifiers:
-      '@vitejs/plugin-vue': workspace:*
       css-dep: link:./css-dep
       less: ^4.1.2
       postcss-nested: ^5.0.6
       sass: ^1.43.4
       stylus: ^0.55.0
-      vue: ^3.2.31
-    dependencies:
-      vue: 3.2.31
     devDependencies:
-      '@vitejs/plugin-vue': link:../../plugin-vue
       css-dep: link:css-dep
       less: 4.1.2
       postcss-nested: 5.0.6
@@ -2665,15 +2660,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /@vue/compiler-core/3.2.31:
-    resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
-    dependencies:
-      '@babel/parser': 7.17.0
-      '@vue/shared': 3.2.31
-      estree-walker: 2.0.2
-      source-map: 0.6.1
-    dev: false
-
   /@vue/compiler-dom/3.2.26:
     resolution: {integrity: sha512-smBfaOW6mQDxcT3p9TKT6mE22vjxjJL50GFVJiI0chXYGU/xzC05QRGrW3HHVuJrmLTLx5zBhsZ2dIATERbarg==}
     dependencies:
@@ -2694,13 +2680,6 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
-  /@vue/compiler-dom/3.2.31:
-    resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
-    dependencies:
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
-    dev: false
-
   /@vue/compiler-sfc/3.2.26:
     resolution: {integrity: sha512-ePpnfktV90UcLdsDQUh2JdiTuhV0Skv2iYXxfNMOK/F3Q+2BO0AulcVcfoksOpTJGmhhfosWfMyEaEf0UaWpIw==}
     dependencies:
@@ -2745,21 +2724,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /@vue/compiler-sfc/3.2.31:
-    resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
-    dependencies:
-      '@babel/parser': 7.17.0
-      '@vue/compiler-core': 3.2.31
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/reactivity-transform': 3.2.31
-      '@vue/shared': 3.2.31
-      estree-walker: 2.0.2
-      magic-string: 0.25.7
-      postcss: 8.4.6
-      source-map: 0.6.1
-    dev: false
-
   /@vue/compiler-ssr/3.2.26:
     resolution: {integrity: sha512-2mywLX0ODc4Zn8qBoA2PDCsLEZfpUGZcyoFRLSOjyGGK6wDy2/5kyDOWtf0S0UvtoyVq95OTSGIALjZ4k2q/ag==}
     dependencies:
@@ -2780,13 +2744,6 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
-  /@vue/compiler-ssr/3.2.31:
-    resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/shared': 3.2.31
-    dev: false
-
   /@vue/devtools-api/6.0.0-beta.21.1:
     resolution: {integrity: sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==}
     dev: false
@@ -2820,16 +2777,6 @@ packages:
       magic-string: 0.25.7
     dev: true
 
-  /@vue/reactivity-transform/3.2.31:
-    resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
-    dependencies:
-      '@babel/parser': 7.17.0
-      '@vue/compiler-core': 3.2.31
-      '@vue/shared': 3.2.31
-      estree-walker: 2.0.2
-      magic-string: 0.25.7
-    dev: false
-
   /@vue/reactivity/3.2.26:
     resolution: {integrity: sha512-h38bxCZLW6oFJVDlCcAiUKFnXI8xP8d+eO0pcDxx+7dQfSPje2AO6M9S9QO6MrxQB7fGP0DH0dYQ8ksf6hrXKQ==}
     dependencies:
@@ -2847,12 +2794,6 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
-  /@vue/reactivity/3.2.31:
-    resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
-    dependencies:
-      '@vue/shared': 3.2.31
-    dev: false
-
   /@vue/runtime-core/3.2.26:
     resolution: {integrity: sha512-BcYi7qZ9Nn+CJDJrHQ6Zsmxei2hDW0L6AB4vPvUQGBm2fZyC0GXd/4nVbyA2ubmuhctD5RbYY8L+5GUJszv9mQ==}
     dependencies:
@@ -2873,13 +2814,6 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
-  /@vue/runtime-core/3.2.31:
-    resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
-    dependencies:
-      '@vue/reactivity': 3.2.31
-      '@vue/shared': 3.2.31
-    dev: false
-
   /@vue/runtime-dom/3.2.26:
     resolution: {integrity: sha512-dY56UIiZI+gjc4e8JQBwAifljyexfVCkIAu/WX8snh8vSOt/gMSEGwPRcl2UpYpBYeyExV8WCbgvwWRNt9cHhQ==}
     dependencies:
@@ -2903,14 +2837,6 @@ packages:
       csstype: 2.6.19
     dev: true
 
-  /@vue/runtime-dom/3.2.31:
-    resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
-    dependencies:
-      '@vue/runtime-core': 3.2.31
-      '@vue/shared': 3.2.31
-      csstype: 2.6.19
-    dev: false
-
   /@vue/server-renderer/3.2.26_vue@3.2.26:
     resolution: {integrity: sha512-Jp5SggDUvvUYSBIvYEhy76t4nr1vapY/FIFloWmQzn7UxqaHrrBpbxrqPcTrSgGrcaglj0VBp22BKJNre4aA1w==}
     peerDependencies:
@@ -2940,16 +2866,6 @@ packages:
       vue: 3.2.30
     dev: true
 
-  /@vue/server-renderer/3.2.31_vue@3.2.31:
-    resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
-    peerDependencies:
-      vue: 3.2.31
-    dependencies:
-      '@vue/compiler-ssr': 3.2.31
-      '@vue/shared': 3.2.31
-      vue: 3.2.31
-    dev: false
-
   /@vue/shared/3.2.26:
     resolution: {integrity: sha512-vPV6Cq+NIWbH5pZu+V+2QHE9y1qfuTq49uNWw4f7FDEeZaDU2H2cx5jcUZOAKW7qTrUS4k6qZPbMy1x4N96nbA==}
 
@@ -2961,10 +2877,6 @@ packages:
     resolution: {integrity: sha512-B3HouBtUxcfu2w2d+VhdLcVBXKYYhXiFMAfQ+hoe8NUhKkPRkWDIqhpuehCZxVQ3S2dN1P1WfKGlxGC+pfmxGg==}
     dev: true
 
-  /@vue/shared/3.2.31:
-    resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
-    dev: false
-
   /@wessberg/stringutil/1.0.19:
     resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==}
     engines: {node: '>=8.0.0'}
@@ -9282,16 +9194,6 @@ packages:
       '@vue/shared': 3.2.30
     dev: true
 
-  /vue/3.2.31:
-    resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
-    dependencies:
-      '@vue/compiler-dom': 3.2.31
-      '@vue/compiler-sfc': 3.2.31
-      '@vue/runtime-dom': 3.2.31
-      '@vue/server-renderer': 3.2.31_vue@3.2.31
-      '@vue/shared': 3.2.31
-    dev: false
-
   /vuex/4.0.2_vue@3.2.26:
     resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
     peerDependencies:

From a7888339e154fd4c655fbdbe6f9a1727ada1fe1b Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 19:57:54 +0800
Subject: [PATCH 12/16] refactor: rollback pnpm-lock

---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97ce0c064307f2..ab2b4a7833c686 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4972,7 +4972,7 @@ packages:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
 
   /fsevents/2.3.2:
-    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=}
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -6558,12 +6558,12 @@ packages:
       yallist: 4.0.0
 
   /magic-string/0.25.7:
-    resolution: {integrity: sha1-P0l9b9NMZpxnmNy4IfLvMfVEUFE=}
+    resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
     dependencies:
       sourcemap-codec: 1.4.8
 
   /make-dir/2.1.0:
-    resolution: {integrity: sha1-XwMQ4YuL6JjMBwCSlaMK5B6R5vU=}
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
     requiresBuild: true
     dependencies:
@@ -8329,7 +8329,7 @@ packages:
     dev: true
 
   /sourcemap-codec/1.4.8:
-    resolution: {integrity: sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=}
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
 
   /spdx-compare/1.0.0:
     resolution: {integrity: sha512-C1mDZOX0hnu0ep9dfmuoi03+eOdDoz2yvK79RxbcrVEG1NO1Ph35yW102DHWKN4pk80nwCgeMmSY5L25VE4D9A==}

From 9bac0c037b8ac323364e1319e255455d8cd95f89 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Wed, 2 Mar 2022 22:41:19 +0800
Subject: [PATCH 13/16] test: fix test

---
 packages/playground/css/nested/css-in-less.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/playground/css/nested/css-in-less.less b/packages/playground/css/nested/css-in-less.less
index e359b21ea13ab3..abdd904b43016a 100644
--- a/packages/playground/css/nested/css-in-less.less
+++ b/packages/playground/css/nested/css-in-less.less
@@ -1,5 +1,4 @@
 @import url('./css-in-less.css');
 @import './css-in-less.css';
 
-@import url('./css-in-less-2.less');
 @import './css-in-less-2.less';

From f45b01a013e24be1baccb4d452ebf0c06cf0c699 Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Thu, 3 Mar 2022 12:05:39 +0800
Subject: [PATCH 14/16] test: Adding the necessary test cases

---
 packages/playground/css/__tests__/css.spec.ts | 5 +++++
 packages/playground/css/index.html            | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index c37c52eabdf52a..360e46dbbba150 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -364,3 +364,8 @@ test('minify css', async () => {
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })
+
+test('import css in less', async () => {
+  expect(await getColor('.css-in-less')).toBe('yellow')
+  expect(await getColor('.css-in-less-2')).toBe('blue')
+})
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 8716f47eb8bf85..43b19157c36567 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -107,10 +107,10 @@ <h1>CSS</h1>
   <p class="inlined">Inlined import - this should NOT be red.</p>
 
   <div class="css-in-less">
-    test for import css in less with SFC, color will be yellow
+    test import css in less, this color will be yellow
   </div>
   <div class="css-in-less-2">
-    test for import less in less with SFC, color will be blue
+    test for import less in less, this color will be blue
   </div>
 
   <pre class="inlined-code"></pre>

From 86cda8bc4444cf3a385663ce3819f32f090f829d Mon Sep 17 00:00:00 2001
From: sinoon <sinoon1218@gmail.com>
Date: Fri, 4 Mar 2022 23:58:49 +0800
Subject: [PATCH 15/16] test: add test for import css in scss

---
 packages/playground/css/index.html             | 4 ++++
 packages/playground/css/nested/_index.scss     | 2 ++
 packages/playground/css/nested/css-in-scss.css | 3 +++
 3 files changed, 9 insertions(+)
 create mode 100644 packages/playground/css/nested/css-in-scss.css

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 43b19157c36567..acbbe44a7f8a60 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -113,6 +113,10 @@ <h1>CSS</h1>
     test for import less in less, this color will be blue
   </div>
 
+  <div class="css-in-scss">
+    test import css in scss, this color will be orange
+  </div>
+
   <pre class="inlined-code"></pre>
 </div>
 
diff --git a/packages/playground/css/nested/_index.scss b/packages/playground/css/nested/_index.scss
index 6f2103c79fc2c8..48d630b573ae1b 100644
--- a/packages/playground/css/nested/_index.scss
+++ b/packages/playground/css/nested/_index.scss
@@ -1,3 +1,5 @@
+@import './css-in-scss.css';
+
 .sass-at-import {
   color: olive;
   background: url(./icon.png) 10px no-repeat;
diff --git a/packages/playground/css/nested/css-in-scss.css b/packages/playground/css/nested/css-in-scss.css
new file mode 100644
index 00000000000000..a63e49e4d6a1fd
--- /dev/null
+++ b/packages/playground/css/nested/css-in-scss.css
@@ -0,0 +1,3 @@
+.css-in-scss {
+  color: orange;
+}

From c52626e4a84b8f98ce57c8a5f699d2a662c428b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A7=E6=B5=AA?= <sinoon1218@gmail.com>
Date: Mon, 7 Mar 2022 21:19:06 +0800
Subject: [PATCH 16/16] Update packages/vite/src/node/plugins/css.ts

Co-authored-by: Haoqun Jiang <haoqunjiang@gmail.com>
---
 packages/vite/src/node/plugins/css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 8aa00ca714d48d..780a82c900b9dd 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1193,7 +1193,7 @@ async function rebaseUrls(
     return normalizePath(relative)
   }
 
-  // fix import css in les shas @import "foo.css"
+  // fix css imports in less such as `@import "foo.css"`
   if (hasImportCss) {
     rebased = await rewriteImportCss(content, rebaseFn)
   }