diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6d46c236f..d06717034 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -26,7 +26,7 @@ jobs:
       - name: Run unit tests
         run: pnpm run test:unit
 
-  ssr-test:
+  ssr-sfc-test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -45,6 +45,9 @@ jobs:
       - name: Run SSR tests
         run: pnpm run test:ssr
 
+      - name: Run compiler-sfc tests
+        run: pnpm run test:sfc
+
   e2e-test:
     runs-on: ubuntu-latest
     steps:
diff --git a/api-extractor.tsconfig.json b/api-extractor.tsconfig.json
index 39af6b8db..ba778b354 100644
--- a/api-extractor.tsconfig.json
+++ b/api-extractor.tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "baseUrl": "./temp",
     "types": []
-  },
-  "include": ["src"]
+  }
 }
diff --git a/package.json b/package.json
index fc624f93e..120c05e24 100644
--- a/package.json
+++ b/package.json
@@ -41,10 +41,11 @@
     "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:compiler ",
     "build": "node scripts/build.js",
     "build:ssr": "npm run build -- runtime-cjs,server-renderer",
-    "build:types": "rimraf temp && tsc --declaration --emitDeclarationOnly --outDir temp && api-extractor run",
-    "test": "npm run ts-check && npm run test:types && npm run test:unit && npm run test:e2e && npm run test:ssr",
+    "build:types": "rimraf temp && tsc --declaration --emitDeclarationOnly --outDir temp && api-extractor run && api-extractor run -c packages/compiler-sfc/api-extractor.json",
+    "test": "npm run ts-check && npm run test:types && npm run test:unit && npm run test:e2e && npm run test:ssr && npm run test:sfc",
     "test:unit": "vitest run test/unit",
     "test:ssr": "npm run build:ssr && vitest run server-renderer",
+    "test:sfc": "vitest run compiler-sfc",
     "test:e2e": "npm run build -- full-prod,server-renderer-basic && vitest run test/e2e",
     "test:transition": "karma start test/transition/karma.conf.js",
     "test:types": "npm run build:types && tsc -p ./types/tsconfig.json",
@@ -85,45 +86,45 @@
     "csstype": "^3.1.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.24.2",
+    "@microsoft/api-extractor": "^7.25.0",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/he": "^1.1.2",
-    "@types/node": "^17.0.30",
-    "chalk": "^4.0.0",
+    "@types/node": "^17.0.41",
+    "chalk": "^4.1.2",
     "conventional-changelog-cli": "^2.2.2",
     "cross-spawn": "^7.0.3",
-    "de-indent": "^1.0.2",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.14.39",
-    "execa": "^4.0.0",
+    "esbuild": "^0.14.43",
+    "execa": "^4.1.0",
     "he": "^1.2.0",
-    "jasmine-core": "^4.1.1",
+    "jasmine-core": "^4.2.0",
     "jsdom": "^19.0.0",
     "karma": "^6.3.20",
     "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
     "karma-esbuild": "^2.2.4",
     "karma-jasmine": "^5.0.1",
-    "lint-staged": "^12.4.1",
+    "lint-staged": "^12.5.0",
+    "postcss": "^8.4.14",
     "lodash": "^4.17.21",
-    "marked": "^4.0.6",
+    "marked": "^4.0.16",
     "minimist": "^1.2.6",
     "prettier": "^2.6.2",
-    "puppeteer": "^14.1.1",
+    "puppeteer": "^14.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.70.2",
+    "rollup": "^2.75.6",
     "rollup-plugin-typescript2": "^0.31.2",
     "semver": "^7.3.7",
     "shelljs": "^0.8.5",
-    "terser": "^5.13.1",
+    "terser": "^5.14.0",
     "todomvc-app-css": "^2.4.2",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4",
-    "vitest": "^0.12.6",
+    "typescript": "^4.7.3",
+    "vitest": "^0.12.10",
     "yorkie": "^2.0.0"
   }
 }
diff --git a/packages/compiler-sfc/api-extractor.json b/packages/compiler-sfc/api-extractor.json
new file mode 100644
index 000000000..eda03ee21
--- /dev/null
+++ b/packages/compiler-sfc/api-extractor.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  "projectFolder": ".",
+
+  "mainEntryPointFilePath": "../../temp/packages/compiler-sfc/src/index.d.ts",
+
+  "compiler": {
+    "tsconfigFilePath": "../../api-extractor.tsconfig.json"
+  },
+
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "",
+    "publicTrimmedFilePath": "./dist/compiler-sfc.d.ts"
+  },
+
+  "apiReport": {
+    "enabled": false
+  },
+
+  "docModel": {
+    "enabled": false
+  },
+
+  "tsdocMetadata": {
+    "enabled": false
+  },
+
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning",
+        "addToApiReportFile": true
+      },
+
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      },
+      "ae-internal-missing-underscore": {
+        "logLevel": "none"
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      }
+    },
+
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      },
+
+      "tsdoc-undefined-tag": {
+        "logLevel": "none"
+      }
+    }
+  }
+}
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 7d6c91284..802bba8d1 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -8,23 +8,28 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/parser": "^7.16.4",
-    "source-map": "^0.6.1",
-    "postcss": "^8.1.10"
+    "@babel/parser": "^7.18.4",
+    "postcss": "^8.4.14",
+    "source-map": "^0.6.1"
   },
   "devDependencies": {
+    "@babel/types": "^7.18.4",
     "@types/estree": "^0.0.48",
-    "@babel/types": "^7.16.0",
-    "@types/lru-cache": "^5.1.0",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.25.7",
-    "pug": "^3.0.1",
-    "sass": "^1.26.9",
+    "@types/hash-sum": "^1.0.0",
+    "@types/lru-cache": "^5.1.1",
     "@vue/consolidate": "^0.17.3",
+    "de-indent": "^1.0.2",
+    "estree-walker": "^2.0.2",
     "hash-sum": "^2.0.0",
+    "less": "^4.1.3",
     "lru-cache": "^5.1.1",
+    "magic-string": "^0.25.9",
     "merge-source-map": "^1.1.0",
-    "postcss-modules": "^4.0.0",
-    "postcss-selector-parser": "^6.0.4"
+    "postcss-modules": "^4.3.1",
+    "postcss-selector-parser": "^6.0.10",
+    "pug": "^3.0.2",
+    "sass": "^1.52.3",
+    "stylus": "^0.58.1",
+    "vue-template-es2015-compiler": "^1.9.1"
   }
 }
diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts
new file mode 100644
index 000000000..8418afc74
--- /dev/null
+++ b/packages/compiler-sfc/src/compileStyle.ts
@@ -0,0 +1,143 @@
+const postcss = require('postcss')
+import { ProcessOptions, LazyResult } from 'postcss'
+import trimPlugin from './stylePlugins/trim'
+import scopedPlugin from './stylePlugins/scoped'
+import {
+  processors,
+  StylePreprocessor,
+  StylePreprocessorResults
+} from './stylePreprocessors'
+
+export interface StyleCompileOptions {
+  source: string
+  filename: string
+  id: string
+  map?: any
+  scoped?: boolean
+  trim?: boolean
+  preprocessLang?: string
+  preprocessOptions?: any
+  postcssOptions?: any
+  postcssPlugins?: any[]
+}
+
+export interface AsyncStyleCompileOptions extends StyleCompileOptions {
+  isAsync?: boolean
+}
+
+export interface StyleCompileResults {
+  code: string
+  map: any | void
+  rawResult: LazyResult | void
+  errors: string[]
+}
+
+export function compileStyle(
+  options: StyleCompileOptions
+): StyleCompileResults {
+  return doCompileStyle({ ...options, isAsync: false })
+}
+
+export function compileStyleAsync(
+  options: StyleCompileOptions
+): Promise<StyleCompileResults> {
+  return Promise.resolve(doCompileStyle({ ...options, isAsync: true }))
+}
+
+export function doCompileStyle(
+  options: AsyncStyleCompileOptions
+): StyleCompileResults {
+  const {
+    filename,
+    id,
+    scoped = true,
+    trim = true,
+    preprocessLang,
+    postcssOptions,
+    postcssPlugins
+  } = options
+  const preprocessor = preprocessLang && processors[preprocessLang]
+  const preProcessedSource = preprocessor && preprocess(options, preprocessor)
+  const map = preProcessedSource ? preProcessedSource.map : options.map
+  const source = preProcessedSource ? preProcessedSource.code : options.source
+
+  const plugins = (postcssPlugins || []).slice()
+  if (trim) {
+    plugins.push(trimPlugin())
+  }
+  if (scoped) {
+    plugins.push(scopedPlugin(id))
+  }
+
+  const postCSSOptions: ProcessOptions = {
+    ...postcssOptions,
+    to: filename,
+    from: filename
+  }
+  if (map) {
+    postCSSOptions.map = {
+      inline: false,
+      annotation: false,
+      prev: map
+    }
+  }
+
+  let result, code, outMap
+  const errors: any[] = []
+  if (preProcessedSource && preProcessedSource.errors.length) {
+    errors.push(...preProcessedSource.errors)
+  }
+  try {
+    result = postcss(plugins).process(source, postCSSOptions)
+
+    // In async mode, return a promise.
+    if (options.isAsync) {
+      return result
+        .then(
+          (result: LazyResult): StyleCompileResults => ({
+            code: result.css || '',
+            map: result.map && result.map.toJSON(),
+            errors,
+            rawResult: result
+          })
+        )
+        .catch(
+          (error: Error): StyleCompileResults => ({
+            code: '',
+            map: undefined,
+            errors: [...errors, error.message],
+            rawResult: undefined
+          })
+        )
+    }
+
+    // force synchronous transform (we know we only have sync plugins)
+    code = result.css
+    outMap = result.map
+  } catch (e) {
+    errors.push(e)
+  }
+
+  return {
+    code: code || ``,
+    map: outMap && outMap.toJSON(),
+    errors,
+    rawResult: result
+  }
+}
+
+function preprocess(
+  options: StyleCompileOptions,
+  preprocessor: StylePreprocessor
+): StylePreprocessorResults {
+  return preprocessor(
+    options.source,
+    options.map,
+    Object.assign(
+      {
+        filename: options.filename
+      },
+      options.preprocessOptions
+    )
+  )
+}
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
new file mode 100644
index 000000000..8d768aa97
--- /dev/null
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -0,0 +1,203 @@
+import {
+  VueTemplateCompiler,
+  VueTemplateCompilerOptions,
+  ErrorWithRange
+} from './types'
+import assetUrlsModule, {
+  AssetURLOptions,
+  TransformAssetUrlsOptions
+} from './templateCompilerModules/assetUrl'
+import srcsetModule from './templateCompilerModules/srcset'
+import consolidate from '@vue/consolidate'
+import * as _compiler from 'web/entry-compiler'
+import transpile from 'vue-template-es2015-compiler'
+
+export interface TemplateCompileOptions {
+  source: string
+  filename: string
+  compiler?: VueTemplateCompiler
+  compilerOptions?: VueTemplateCompilerOptions
+  transformAssetUrls?: AssetURLOptions | boolean
+  transformAssetUrlsOptions?: TransformAssetUrlsOptions
+  preprocessLang?: string
+  preprocessOptions?: any
+  transpileOptions?: any
+  isProduction?: boolean
+  isFunctional?: boolean
+  optimizeSSR?: boolean
+  prettify?: boolean
+}
+
+export interface TemplateCompileResult {
+  ast: Object | undefined
+  code: string
+  source: string
+  tips: (string | ErrorWithRange)[]
+  errors: (string | ErrorWithRange)[]
+}
+
+export function compileTemplate(
+  options: TemplateCompileOptions
+): TemplateCompileResult {
+  const { preprocessLang } = options
+  const preprocessor = preprocessLang && consolidate[preprocessLang]
+  if (preprocessor) {
+    return actuallyCompile(
+      Object.assign({}, options, {
+        source: preprocess(options, preprocessor)
+      })
+    )
+  } else if (preprocessLang) {
+    return {
+      ast: {},
+      code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
+      source: options.source,
+      tips: [
+        `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
+      ],
+      errors: [
+        `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
+      ]
+    }
+  } else {
+    return actuallyCompile(options)
+  }
+}
+
+function preprocess(
+  options: TemplateCompileOptions,
+  preprocessor: any
+): string {
+  const { source, filename, preprocessOptions } = options
+
+  const finalPreprocessOptions = Object.assign(
+    {
+      filename
+    },
+    preprocessOptions
+  )
+
+  // Consolidate exposes a callback based API, but the callback is in fact
+  // called synchronously for most templating engines. In our case, we have to
+  // expose a synchronous API so that it is usable in Jest transforms (which
+  // have to be sync because they are applied via Node.js require hooks)
+  let res: any, err
+  preprocessor.render(
+    source,
+    finalPreprocessOptions,
+    (_err: Error | null, _res: string) => {
+      if (_err) err = _err
+      res = _res
+    }
+  )
+
+  if (err) throw err
+  return res
+}
+
+function actuallyCompile(
+  options: TemplateCompileOptions
+): TemplateCompileResult {
+  const {
+    source,
+    compiler = _compiler,
+    compilerOptions = {},
+    transpileOptions = {},
+    transformAssetUrls,
+    transformAssetUrlsOptions,
+    isProduction = process.env.NODE_ENV === 'production',
+    isFunctional = false,
+    optimizeSSR = false,
+    prettify = true
+  } = options
+
+  const compile =
+    optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile
+
+  let finalCompilerOptions = compilerOptions
+  if (transformAssetUrls) {
+    const builtInModules = [
+      transformAssetUrls === true
+        ? assetUrlsModule(undefined, transformAssetUrlsOptions)
+        : assetUrlsModule(transformAssetUrls, transformAssetUrlsOptions),
+      srcsetModule(transformAssetUrlsOptions)
+    ]
+    finalCompilerOptions = Object.assign({}, compilerOptions, {
+      modules: [...builtInModules, ...(compilerOptions.modules || [])],
+      filename: options.filename
+    })
+  }
+
+  const { ast, render, staticRenderFns, tips, errors } = compile(
+    source,
+    finalCompilerOptions
+  )
+
+  if (errors && errors.length) {
+    return {
+      ast,
+      code: `var render = function () {}\n` + `var staticRenderFns = []\n`,
+      source,
+      tips,
+      errors
+    }
+  } else {
+    // TODO better transpile
+    const finalTranspileOptions = Object.assign({}, transpileOptions, {
+      transforms: Object.assign({}, transpileOptions.transforms, {
+        stripWithFunctional: isFunctional
+      })
+    })
+
+    const toFunction = (code: string): string => {
+      return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`
+    }
+
+    // transpile code with vue-template-es2015-compiler, which is a forked
+    // version of Buble that applies ES2015 transforms + stripping `with` usage
+    let code =
+      transpile(
+        `var __render__ = ${toFunction(render)}\n` +
+          `var __staticRenderFns__ = [${staticRenderFns.map(toFunction)}]`,
+        finalTranspileOptions
+      ) + `\n`
+
+    // #23 we use __render__ to avoid `render` not being prefixed by the
+    // transpiler when stripping with, but revert it back to `render` to
+    // maintain backwards compat
+    code = code.replace(/\s__(render|staticRenderFns)__\s/g, ' $1 ')
+
+    if (!isProduction) {
+      // mark with stripped (this enables Vue to use correct runtime proxy
+      // detection)
+      code += `render._withStripped = true`
+
+      if (prettify) {
+        try {
+          code = require('prettier').format(code, {
+            semi: false,
+            parser: 'babel'
+          })
+        } catch (e: any) {
+          if (e.code === 'MODULE_NOT_FOUND') {
+            tips.push(
+              'The `prettify` option is on, but the dependency `prettier` is not found.\n' +
+                'Please either turn off `prettify` or manually install `prettier`.'
+            )
+          }
+          tips.push(
+            `Failed to prettify component ${options.filename} template source after compilation.`
+          )
+        }
+      }
+    }
+
+    return {
+      ast,
+      code,
+      source,
+      tips,
+      errors
+    }
+  }
+}
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
new file mode 100644
index 000000000..b8dee9764
--- /dev/null
+++ b/packages/compiler-sfc/src/index.ts
@@ -0,0 +1,12 @@
+// API
+export { parse } from './parse'
+export { compileTemplate } from './compileTemplate'
+export { compileStyle, compileStyleAsync } from './compileStyle'
+
+// types
+export { SFCBlock, SFCCustomBlock, SFCDescriptor } from './parseComponent'
+export {
+  TemplateCompileOptions,
+  TemplateCompileResult
+} from './compileTemplate'
+export { StyleCompileOptions, StyleCompileResults } from './compileStyle'
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
new file mode 100644
index 000000000..2c2aca2ea
--- /dev/null
+++ b/packages/compiler-sfc/src/parse.ts
@@ -0,0 +1,112 @@
+import { SourceMapGenerator } from 'source-map'
+import { RawSourceMap, VueTemplateCompiler } from './types'
+import {
+  parseComponent,
+  VueTemplateCompilerParseOptions,
+  SFCDescriptor
+} from './parseComponent'
+
+import hash from 'hash-sum'
+import LRU from 'lru-cache'
+
+const cache = new LRU<string, SFCDescriptor>(100)
+
+const splitRE = /\r?\n/g
+const emptyRE = /^(?:\/\/)?\s*$/
+
+export interface ParseOptions {
+  source: string
+  filename?: string
+  compiler?: VueTemplateCompiler
+  compilerParseOptions?: VueTemplateCompilerParseOptions
+  sourceRoot?: string
+  needMap?: boolean
+}
+
+export function parse(options: ParseOptions): SFCDescriptor {
+  const {
+    source,
+    filename = '',
+    compiler,
+    compilerParseOptions = { pad: 'line' } as VueTemplateCompilerParseOptions,
+    sourceRoot = '',
+    needMap = true
+  } = options
+  const cacheKey = hash(
+    filename + source + JSON.stringify(compilerParseOptions)
+  )
+
+  let output = cache.get(cacheKey)
+  if (output) {
+    return output
+  }
+
+  if (compiler) {
+    // user-provided compiler
+    output = compiler.parseComponent(source, compilerParseOptions)
+  } else {
+    // use built-in compiler
+    output = parseComponent(source, compilerParseOptions)
+  }
+
+  if (needMap) {
+    if (output.script && !output.script.src) {
+      output.script.map = generateSourceMap(
+        filename,
+        source,
+        output.script.content,
+        sourceRoot,
+        compilerParseOptions.pad
+      )
+    }
+    if (output.styles) {
+      output.styles.forEach(style => {
+        if (!style.src) {
+          style.map = generateSourceMap(
+            filename,
+            source,
+            style.content,
+            sourceRoot,
+            compilerParseOptions.pad
+          )
+        }
+      })
+    }
+  }
+  cache.set(cacheKey, output)
+  return output
+}
+
+function generateSourceMap(
+  filename: string,
+  source: string,
+  generated: string,
+  sourceRoot: string,
+  pad?: 'line' | 'space' | boolean
+): RawSourceMap {
+  const map = new SourceMapGenerator({
+    file: filename.replace(/\\/g, '/'),
+    sourceRoot: sourceRoot.replace(/\\/g, '/')
+  })
+  let offset = 0
+  if (!pad) {
+    offset = source.split(generated).shift()!.split(splitRE).length - 1
+  }
+  map.setSourceContent(filename, source)
+  generated.split(splitRE).forEach((line, index) => {
+    if (!emptyRE.test(line)) {
+      map.addMapping({
+        source: filename,
+        original: {
+          line: index + 1 + offset,
+          column: 0
+        },
+        generated: {
+          line: index + 1,
+          column: 0
+        }
+      })
+    }
+  })
+  return JSON.parse(map.toString())
+}
diff --git a/packages/compiler-sfc/src/parser.ts b/packages/compiler-sfc/src/parseComponent.ts
similarity index 78%
rename from packages/compiler-sfc/src/parser.ts
rename to packages/compiler-sfc/src/parseComponent.ts
index b39d94324..a91182406 100644
--- a/packages/compiler-sfc/src/parser.ts
+++ b/packages/compiler-sfc/src/parseComponent.ts
@@ -1,23 +1,49 @@
 import deindent from 'de-indent'
 import { parseHTML } from 'compiler/parser/html-parser'
 import { makeMap } from 'shared/util'
-import {
-  ASTAttr,
-  SFCBlock,
-  SFCDescriptor,
-  WarningMessage
-} from 'types/compiler'
+import { ASTAttr, WarningMessage } from 'types/compiler'
+import { RawSourceMap } from './types'
 
 const splitRE = /\r?\n/g
 const replaceRE = /./g
 const isSpecialTag = makeMap('script,style,template', true)
 
+export interface SFCCustomBlock {
+  type: string
+  content: string
+  attrs: { [key: string]: string | true }
+  start: number
+  end?: number
+  map?: RawSourceMap
+}
+
+export interface SFCBlock extends SFCCustomBlock {
+  lang?: string
+  src?: string
+  scoped?: boolean
+  module?: string | boolean
+}
+
+export interface SFCDescriptor {
+  template: SFCBlock | null
+  script: SFCBlock | null
+  styles: SFCBlock[]
+  customBlocks: SFCCustomBlock[]
+  errors: WarningMessage[]
+}
+
+export interface VueTemplateCompilerParseOptions {
+  pad?: 'line' | 'space' | boolean
+  deindent?: boolean
+  outputSourceRange?: boolean
+}
+
 /**
  * Parse a single-file component (*.vue) file into an SFC Descriptor Object.
  */
 export function parseComponent(
   content: string,
-  options: Record<string, any> = {}
+  options: VueTemplateCompilerParseOptions = {}
 ): SFCDescriptor {
   const sfc: SFCDescriptor = {
     template: null,
@@ -48,7 +74,7 @@ export function parseComponent(
 
   function start(
     tag: string,
-    attrs: Array<ASTAttr>,
+    attrs: ASTAttr[],
     unary: boolean,
     start: number,
     end: number
@@ -80,7 +106,7 @@ export function parseComponent(
     }
   }
 
-  function checkAttrs(block: SFCBlock, attrs: Array<ASTAttr>) {
+  function checkAttrs(block: SFCBlock, attrs: ASTAttr[]) {
     for (let i = 0; i < attrs.length; i++) {
       const attr = attrs[i]
       if (attr.name === 'lang') {
diff --git a/packages/compiler-sfc/src/stylePlugins/scoped.ts b/packages/compiler-sfc/src/stylePlugins/scoped.ts
new file mode 100644
index 000000000..1dcc248ad
--- /dev/null
+++ b/packages/compiler-sfc/src/stylePlugins/scoped.ts
@@ -0,0 +1,207 @@
+import { PluginCreator, Rule, AtRule } from 'postcss'
+import selectorParser from 'postcss-selector-parser'
+import { warn } from '../warn'
+
+const animationNameRE = /^(-\w+-)?animation-name$/
+const animationRE = /^(-\w+-)?animation$/
+
+const scopedPlugin: PluginCreator<string> = (id = '') => {
+  const keyframes = Object.create(null)
+  const shortId = id.replace(/^data-v-/, '')
+
+  return {
+    postcssPlugin: 'vue-sfc-scoped',
+    Rule(rule) {
+      processRule(id, rule)
+    },
+    AtRule(node) {
+      if (
+        /-?keyframes$/.test(node.name) &&
+        !node.params.endsWith(`-${shortId}`)
+      ) {
+        // register keyframes
+        keyframes[node.params] = node.params = node.params + '-' + shortId
+      }
+    },
+    OnceExit(root) {
+      if (Object.keys(keyframes).length) {
+        // If keyframes are found in this <style>, find and rewrite animation names
+        // in declarations.
+        // Caveat: this only works for keyframes and animation rules in the same
+        // <style> element.
+        // individual animation-name declaration
+        root.walkDecls(decl => {
+          if (animationNameRE.test(decl.prop)) {
+            decl.value = decl.value
+              .split(',')
+              .map(v => keyframes[v.trim()] || v.trim())
+              .join(',')
+          }
+          // shorthand
+          if (animationRE.test(decl.prop)) {
+            decl.value = decl.value
+              .split(',')
+              .map(v => {
+                const vals = v.trim().split(/\s+/)
+                const i = vals.findIndex(val => keyframes[val])
+                if (i !== -1) {
+                  vals.splice(i, 1, keyframes[vals[i]])
+                  return vals.join(' ')
+                } else {
+                  return v
+                }
+              })
+              .join(',')
+          }
+        })
+      }
+    }
+  }
+}
+
+const processedRules = new WeakSet<Rule>()
+
+function processRule(id: string, rule: Rule) {
+  if (
+    processedRules.has(rule) ||
+    (rule.parent &&
+      rule.parent.type === 'atrule' &&
+      /-?keyframes$/.test((rule.parent as AtRule).name))
+  ) {
+    return
+  }
+  processedRules.add(rule)
+  rule.selector = selectorParser(selectorRoot => {
+    selectorRoot.each(selector => {
+      rewriteSelector(id, selector, selectorRoot)
+    })
+  }).processSync(rule.selector)
+}
+
+function rewriteSelector(
+  id: string,
+  selector: selectorParser.Selector,
+  selectorRoot: selectorParser.Root,
+  slotted = false
+) {
+  let node: selectorParser.Node | null = null
+  let shouldInject = true
+  // find the last child node to insert attribute selector
+  selector.each(n => {
+    // DEPRECATED ">>>" and "/deep/" combinator
+    if (
+      n.type === 'combinator' &&
+      (n.value === '>>>' || n.value === '/deep/')
+    ) {
+      n.value = ' '
+      n.spaces.before = n.spaces.after = ''
+      warn(
+        `the >>> and /deep/ combinators have been deprecated. ` +
+          `Use :deep() instead.`
+      )
+      return false
+    }
+
+    if (n.type === 'pseudo') {
+      const { value } = n
+      // deep: inject [id] attribute at the node before the ::v-deep
+      // combinator.
+      if (value === ':deep' || value === '::v-deep') {
+        if (n.nodes.length) {
+          // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
+          // replace the current node with ::v-deep's inner selector
+          let last: selectorParser.Selector['nodes'][0] = n
+          n.nodes[0].each(ss => {
+            selector.insertAfter(last, ss)
+            last = ss
+          })
+          // insert a space combinator before if it doesn't already have one
+          const prev = selector.at(selector.index(n) - 1)
+          if (!prev || !isSpaceCombinator(prev)) {
+            selector.insertAfter(
+              n,
+              selectorParser.combinator({
+                value: ' '
+              })
+            )
+          }
+          selector.removeChild(n)
+        } else {
+          // DEPRECATED usage
+          // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
+          warn(
+            `::v-deep usage as a combinator has ` +
+              `been deprecated. Use :deep(<inner-selector>) instead.`
+          )
+          const prev = selector.at(selector.index(n) - 1)
+          if (prev && isSpaceCombinator(prev)) {
+            selector.removeChild(prev)
+          }
+          selector.removeChild(n)
+        }
+        return false
+      }
+
+      // slot: use selector inside `::v-slotted` and inject [id + '-s']
+      // instead.
+      // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
+      if (value === ':slotted' || value === '::v-slotted') {
+        rewriteSelector(id, n.nodes[0], selectorRoot, true /* slotted */)
+        let last: selectorParser.Selector['nodes'][0] = n
+        n.nodes[0].each(ss => {
+          selector.insertAfter(last, ss)
+          last = ss
+        })
+        // selector.insertAfter(n, n.nodes[0])
+        selector.removeChild(n)
+        // since slotted attribute already scopes the selector there's no
+        // need for the non-slot attribute.
+        shouldInject = false
+        return false
+      }
+
+      // global: replace with inner selector and do not inject [id].
+      // ::v-global(.foo) -> .foo
+      if (value === ':global' || value === '::v-global') {
+        selectorRoot.insertAfter(selector, n.nodes[0])
+        selectorRoot.removeChild(selector)
+        return false
+      }
+    }
+
+    if (n.type !== 'pseudo' && n.type !== 'combinator') {
+      node = n
+    }
+  })
+
+  if (node) {
+    ;(node as selectorParser.Node).spaces.after = ''
+  } else {
+    // For deep selectors & standalone pseudo selectors,
+    // the attribute selectors are prepended rather than appended.
+    // So all leading spaces must be eliminated to avoid problems.
+    selector.first.spaces.before = ''
+  }
+
+  if (shouldInject) {
+    const idToAdd = slotted ? id + '-s' : id
+    selector.insertAfter(
+      // If node is null it means we need to inject [id] at the start
+      // insertAfter can handle `null` here
+      node as any,
+      selectorParser.attribute({
+        attribute: idToAdd,
+        value: idToAdd,
+        raws: {},
+        quoteMark: `"`
+      })
+    )
+  }
+}
+
+function isSpaceCombinator(node: selectorParser.Node) {
+  return node.type === 'combinator' && /^\s+$/.test(node.value)
+}
+
+scopedPlugin.postcss = true
+export default scopedPlugin
diff --git a/packages/compiler-sfc/src/stylePlugins/trim.ts b/packages/compiler-sfc/src/stylePlugins/trim.ts
new file mode 100644
index 000000000..67c4a3f0f
--- /dev/null
+++ b/packages/compiler-sfc/src/stylePlugins/trim.ts
@@ -0,0 +1,18 @@
+import { PluginCreator } from 'postcss'
+
+const trimPlugin: PluginCreator<{}> = () => {
+  return {
+    postcssPlugin: 'vue-sfc-trim',
+    Once(root) {
+      root.walk(({ type, raws }) => {
+        if (type === 'rule' || type === 'atrule') {
+          if (raws.before) raws.before = '\n'
+          if ('after' in raws && raws.after) raws.after = '\n'
+        }
+      })
+    }
+  }
+}
+
+trimPlugin.postcss = true
+export default trimPlugin
diff --git a/packages/compiler-sfc/src/stylePreprocessors.ts b/packages/compiler-sfc/src/stylePreprocessors.ts
new file mode 100644
index 000000000..b59ea302e
--- /dev/null
+++ b/packages/compiler-sfc/src/stylePreprocessors.ts
@@ -0,0 +1,135 @@
+import merge from 'merge-source-map'
+import { RawSourceMap } from 'source-map'
+import { isFunction } from 'shared/util'
+
+export type StylePreprocessor = (
+  source: string,
+  map: RawSourceMap | undefined,
+  options: {
+    [key: string]: any
+    additionalData?: string | ((source: string, filename: string) => string)
+    filename: string
+  }
+) => StylePreprocessorResults
+
+export interface StylePreprocessorResults {
+  code: string
+  map?: object
+  errors: Error[]
+  dependencies: string[]
+}
+
+// .scss/.sass processor
+const scss: StylePreprocessor = (source, map, options) => {
+  const nodeSass = require('sass')
+  const finalOptions = {
+    ...options,
+    data: getSource(source, options.filename, options.additionalData),
+    file: options.filename,
+    outFile: options.filename,
+    sourceMap: !!map
+  }
+
+  try {
+    const result = nodeSass.renderSync(finalOptions)
+    const dependencies = result.stats.includedFiles
+    if (map) {
+      return {
+        code: result.css.toString(),
+        map: merge(map, JSON.parse(result.map.toString())),
+        errors: [],
+        dependencies
+      }
+    }
+
+    return { code: result.css.toString(), errors: [], dependencies }
+  } catch (e: any) {
+    return { code: '', errors: [e], dependencies: [] }
+  }
+}
+
+const sass: StylePreprocessor = (source, map, options) =>
+  scss(source, map, {
+    ...options,
+    indentedSyntax: true
+  })
+
+// .less
+const less: StylePreprocessor = (source, map, options) => {
+  const nodeLess = require('less')
+
+  let result: any
+  let error: Error | null = null
+  nodeLess.render(
+    getSource(source, options.filename, options.additionalData),
+    { ...options, syncImport: true },
+    (err: Error | null, output: any) => {
+      error = err
+      result = output
+    }
+  )
+
+  if (error) return { code: '', errors: [error], dependencies: [] }
+  const dependencies = result.imports
+  if (map) {
+    return {
+      code: result.css.toString(),
+      map: merge(map, result.map),
+      errors: [],
+      dependencies: dependencies
+    }
+  }
+
+  return {
+    code: result.css.toString(),
+    errors: [],
+    dependencies: dependencies
+  }
+}
+
+// .styl
+const styl: StylePreprocessor = (source, map, options) => {
+  const nodeStylus = require('stylus')
+  try {
+    const ref = nodeStylus(source)
+    Object.keys(options).forEach(key => ref.set(key, options[key]))
+    if (map) ref.set('sourcemap', { inline: false, comment: false })
+
+    const result = ref.render()
+    const dependencies = ref.deps()
+    if (map) {
+      return {
+        code: result,
+        map: merge(map, ref.sourcemap),
+        errors: [],
+        dependencies
+      }
+    }
+
+    return { code: result, errors: [], dependencies }
+  } catch (e: any) {
+    return { code: '', errors: [e], dependencies: [] }
+  }
+}
+
+function getSource(
+  source: string,
+  filename: string,
+  additionalData?: string | ((source: string, filename: string) => string)
+) {
+  if (!additionalData) return source
+  if (isFunction(additionalData)) {
+    return additionalData(source, filename)
+  }
+  return additionalData + source
+}
+
+export type PreprocessLang = 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
+
+export const processors: Record<PreprocessLang, StylePreprocessor> = {
+  less,
+  sass,
+  scss,
+  styl,
+  stylus: styl
+}
diff --git a/packages/compiler-sfc/src/templateCompilerModules/assetUrl.ts b/packages/compiler-sfc/src/templateCompilerModules/assetUrl.ts
new file mode 100644
index 000000000..3bc490af3
--- /dev/null
+++ b/packages/compiler-sfc/src/templateCompilerModules/assetUrl.ts
@@ -0,0 +1,76 @@
+// vue compiler module for transforming `<tag>:<attribute>` to `require`
+
+import { urlToRequire, ASTNode, Attr } from './utils'
+
+export interface AssetURLOptions {
+  [name: string]: string | string[]
+}
+
+export interface TransformAssetUrlsOptions {
+  /**
+   * If base is provided, instead of transforming relative asset urls into
+   * imports, they will be directly rewritten to absolute urls.
+   */
+  base?: string
+}
+
+const defaultOptions: AssetURLOptions = {
+  audio: 'src',
+  video: ['src', 'poster'],
+  source: 'src',
+  img: 'src',
+  image: ['xlink:href', 'href'],
+  use: ['xlink:href', 'href']
+}
+
+export default (
+  userOptions?: AssetURLOptions,
+  transformAssetUrlsOption?: TransformAssetUrlsOptions
+) => {
+  const options = userOptions
+    ? Object.assign({}, defaultOptions, userOptions)
+    : defaultOptions
+
+  return {
+    postTransformNode: (node: ASTNode) => {
+      transform(node, options, transformAssetUrlsOption)
+    }
+  }
+}
+
+function transform(
+  node: ASTNode,
+  options: AssetURLOptions,
+  transformAssetUrlsOption?: TransformAssetUrlsOptions
+) {
+  for (const tag in options) {
+    if ((tag === '*' || node.tag === tag) && node.attrs) {
+      const attributes = options[tag]
+      if (typeof attributes === 'string') {
+        node.attrs.some(attr =>
+          rewrite(attr, attributes, transformAssetUrlsOption)
+        )
+      } else if (Array.isArray(attributes)) {
+        attributes.forEach(item =>
+          node.attrs.some(attr => rewrite(attr, item, transformAssetUrlsOption))
+        )
+      }
+    }
+  }
+}
+
+function rewrite(
+  attr: Attr,
+  name: string,
+  transformAssetUrlsOption?: TransformAssetUrlsOptions
+) {
+  if (attr.name === name) {
+    const value = attr.value
+    // only transform static URLs
+    if (value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
+      attr.value = urlToRequire(value.slice(1, -1), transformAssetUrlsOption)
+      return true
+    }
+  }
+  return false
+}
diff --git a/packages/compiler-sfc/src/templateCompilerModules/srcset.ts b/packages/compiler-sfc/src/templateCompilerModules/srcset.ts
new file mode 100644
index 000000000..7f66ab347
--- /dev/null
+++ b/packages/compiler-sfc/src/templateCompilerModules/srcset.ts
@@ -0,0 +1,73 @@
+// vue compiler module for transforming `img:srcset` to a number of `require`s
+
+import { urlToRequire, ASTNode } from './utils'
+import { TransformAssetUrlsOptions } from './assetUrl'
+
+interface ImageCandidate {
+  require: string
+  descriptor: string
+}
+
+export default (transformAssetUrlsOptions?: TransformAssetUrlsOptions) => ({
+  postTransformNode: (node: ASTNode) => {
+    transform(node, transformAssetUrlsOptions)
+  }
+})
+
+// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
+const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
+
+function transform(
+  node: ASTNode,
+  transformAssetUrlsOptions?: TransformAssetUrlsOptions
+) {
+  const tags = ['img', 'source']
+
+  if (tags.indexOf(node.tag) !== -1 && node.attrs) {
+    node.attrs.forEach(attr => {
+      if (attr.name === 'srcset') {
+        // same logic as in transform-require.js
+        const value = attr.value
+        const isStatic =
+          value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
+        if (!isStatic) {
+          return
+        }
+
+        const imageCandidates: ImageCandidate[] = value
+          .substr(1, value.length - 2)
+          .split(',')
+          .map(s => {
+            // The attribute value arrives here with all whitespace, except
+            // normal spaces, represented by escape sequences
+            const [url, descriptor] = s
+              .replace(escapedSpaceCharacters, ' ')
+              .trim()
+              .split(' ', 2)
+            return {
+              require: urlToRequire(url, transformAssetUrlsOptions),
+              descriptor
+            }
+          })
+
+        // "require(url1)"
+        // "require(url1) 1x"
+        // "require(url1), require(url2)"
+        // "require(url1), require(url2) 2x"
+        // "require(url1) 1x, require(url2)"
+        // "require(url1) 1x, require(url2) 2x"
+        const code = imageCandidates
+          .map(
+            ({ require, descriptor }) =>
+              `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
+          )
+          .join('')
+          .slice(0, -6)
+          .concat('"')
+          .replace(/ \+ ""$/, '')
+
+        attr.value = code
+      }
+    })
+  }
+}
diff --git a/packages/compiler-sfc/src/templateCompilerModules/utils.ts b/packages/compiler-sfc/src/templateCompilerModules/utils.ts
new file mode 100644
index 000000000..f81862cf8
--- /dev/null
+++ b/packages/compiler-sfc/src/templateCompilerModules/utils.ts
@@ -0,0 +1,74 @@
+import { TransformAssetUrlsOptions } from './assetUrl'
+import { UrlWithStringQuery, parse as uriParse } from 'url'
+import path from 'path'
+
+export interface Attr {
+  name: string
+  value: string
+}
+
+export interface ASTNode {
+  tag: string
+  attrs: Attr[]
+}
+
+export function urlToRequire(
+  url: string,
+  transformAssetUrlsOption: TransformAssetUrlsOptions = {}
+): string {
+  const returnValue = `"${url}"`
+  // same logic as in transform-require.js
+  const firstChar = url.charAt(0)
+  if (firstChar === '~') {
+    const secondChar = url.charAt(1)
+    url = url.slice(secondChar === '/' ? 2 : 1)
+  }
+
+  const uriParts = parseUriParts(url)
+
+  if (transformAssetUrlsOption.base) {
+    // explicit base - directly rewrite the url into absolute url
+    // does not apply to absolute urls or urls that start with `@`
+    // since they are aliases
+    if (firstChar === '.' || firstChar === '~') {
+      // when packaged in the browser, path will be using the posix-
+      // only version provided by rollup-plugin-node-builtins.
+      return `"${(path.posix || path).join(
+        transformAssetUrlsOption.base,
+        uriParts.path + (uriParts.hash || '')
+      )}"`
+    }
+    return returnValue
+  }
+
+  if (firstChar === '.' || firstChar === '~' || firstChar === '@') {
+    if (!uriParts.hash) {
+      return `require("${url}")`
+    } else {
+      // support uri fragment case by excluding it from
+      // the require and instead appending it as string;
+      // assuming that the path part is sufficient according to
+      // the above caseing(t.i. no protocol-auth-host parts expected)
+      return `require("${uriParts.path}") + "${uriParts.hash}"`
+    }
+  }
+  return returnValue
+}
+
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ * @param urlString an url as a string
+ */
+function parseUriParts(urlString: string): UrlWithStringQuery {
+  // initialize return value
+  const returnValue: UrlWithStringQuery = uriParse('')
+  if (urlString) {
+    // A TypeError is thrown if urlString is not a string
+    // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
+    if ('string' === typeof urlString) {
+      // check is an uri
+      return uriParse(urlString) // take apart the uri
+    }
+  }
+  return returnValue
+}
diff --git a/packages/compiler-sfc/src/types.ts b/packages/compiler-sfc/src/types.ts
new file mode 100644
index 000000000..24b1d79f1
--- /dev/null
+++ b/packages/compiler-sfc/src/types.ts
@@ -0,0 +1,52 @@
+import { SFCDescriptor } from './parseComponent'
+
+export interface StartOfSourceMap {
+  file?: string
+  sourceRoot?: string
+}
+
+export interface RawSourceMap extends StartOfSourceMap {
+  version: string
+  sources: string[]
+  names: string[]
+  sourcesContent?: string[]
+  mappings: string
+}
+
+export interface VueTemplateCompiler {
+  parseComponent(source: string, options?: any): SFCDescriptor
+
+  compile(
+    template: string,
+    options: VueTemplateCompilerOptions
+  ): VueTemplateCompilerResults
+
+  ssrCompile(
+    template: string,
+    options: VueTemplateCompilerOptions
+  ): VueTemplateCompilerResults
+}
+
+// we'll just shim this much for now - in the future these types
+// should come from vue-template-compiler directly, or this package should be
+// part of the vue monorepo.
+export interface VueTemplateCompilerOptions {
+  modules?: Object[]
+  outputSourceRange?: boolean
+  whitespace?: 'preserve' | 'condense'
+  directives?: { [key: string]: Function }
+}
+
+export interface ErrorWithRange {
+  msg: string
+  start: number
+  end: number
+}
+
+export interface VueTemplateCompilerResults {
+  ast: Object | undefined
+  render: string
+  staticRenderFns: string[]
+  errors: (string | ErrorWithRange)[]
+  tips: (string | ErrorWithRange)[]
+}
diff --git a/packages/compiler-sfc/src/warn.ts b/packages/compiler-sfc/src/warn.ts
new file mode 100644
index 000000000..e4b698dc4
--- /dev/null
+++ b/packages/compiler-sfc/src/warn.ts
@@ -0,0 +1,16 @@
+const hasWarned: Record<string, boolean> = {}
+
+export function warnOnce(msg: string) {
+  const isNodeProd =
+    typeof process !== 'undefined' && process.env.NODE_ENV === 'production'
+  if (!isNodeProd && !hasWarned[msg]) {
+    hasWarned[msg] = true
+    warn(msg)
+  }
+}
+
+export function warn(msg: string) {
+  console.warn(
+    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
+  )
+}
diff --git a/packages/compiler-sfc/test/compileStyle.spec.ts b/packages/compiler-sfc/test/compileStyle.spec.ts
new file mode 100644
index 000000000..6f2a4f690
--- /dev/null
+++ b/packages/compiler-sfc/test/compileStyle.spec.ts
@@ -0,0 +1,203 @@
+import { parse } from '../src/parse'
+import { compileStyle, compileStyleAsync } from '../src/compileStyle'
+
+test.only('preprocess less', () => {
+  const style = parse({
+    source:
+      '<style lang="less">\n' +
+      '@red: rgb(255, 0, 0);\n' +
+      '.color { color: @red; }\n' +
+      '</style>\n',
+    filename: 'example.vue',
+    needMap: true
+  }).styles[0]
+
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: style.content,
+    map: style.map,
+    scoped: false,
+    preprocessLang: style.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toEqual(expect.stringContaining('color: #ff0000;'))
+  expect(result.map).toBeTruthy()
+})
+
+test('preprocess scss', () => {
+  const style = parse({
+    source:
+      '<style lang="scss">\n' +
+      '$red: rgb(255, 0, 0);\n' +
+      '.color { color: $red; }\n' +
+      '</style>\n',
+    filename: 'example.vue',
+    needMap: true
+  }).styles[0]
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: style.content,
+    map: style.map,
+    scoped: false,
+    preprocessLang: style.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toEqual(expect.stringContaining('color: red;'))
+  expect(result.map).toBeTruthy()
+})
+
+test('preprocess sass', () => {
+  const style = parse({
+    source:
+      '<style lang="sass">\n' +
+      '$red: rgb(255, 0, 0)\n' +
+      '.color\n' +
+      '   color: $red\n' +
+      '</style>\n',
+    filename: 'example.vue',
+    needMap: true
+  }).styles[0]
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: style.content,
+    map: style.map,
+    scoped: false,
+    preprocessLang: style.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toEqual(expect.stringContaining('color: red;'))
+  expect(result.map).toBeTruthy()
+})
+
+test('preprocess stylus', () => {
+  const style = parse({
+    source:
+      '<style lang="styl">\n' +
+      'red-color = rgb(255, 0, 0);\n' +
+      '.color\n' +
+      '   color: red-color\n' +
+      '</style>\n',
+    filename: 'example.vue',
+    needMap: true
+  }).styles[0]
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: style.content,
+    map: style.map,
+    scoped: false,
+    preprocessLang: style.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toEqual(expect.stringContaining('color: #f00;'))
+  expect(result.map).toBeTruthy()
+})
+
+test('custom postcss plugin', () => {
+  const spy = vi.fn()
+
+  compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssPlugins: [require('postcss').plugin('test-plugin', () => spy)()]
+  })
+
+  expect(spy).toHaveBeenCalled()
+})
+
+test('custom postcss options', () => {
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssOptions: { random: 'foo' }
+  })
+
+  expect((result.rawResult as any).opts.random).toBe('foo')
+})
+
+test('async postcss plugin in sync mode', () => {
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssPlugins: [
+      require('postcss').plugin(
+        'test-plugin',
+        () => async (result: any) => result
+      )
+    ]
+  })
+
+  expect(result.errors).toHaveLength(1)
+})
+
+test('async postcss plugin', async () => {
+  const promise = compileStyleAsync({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssPlugins: [
+      require('postcss').plugin(
+        'test-plugin',
+        () => async (result: any) => result
+      )
+    ]
+  })
+
+  expect(promise instanceof Promise).toBe(true)
+
+  const result = await promise
+  expect(result.errors).toHaveLength(0)
+  expect(result.code).toEqual(expect.stringContaining('color: red'))
+})
+
+test('media query', () => {
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    scoped: true,
+    filename: 'example.vue',
+    source: `
+@media print {
+  .foo {
+    color: #000;
+  }
+}`
+  })
+
+  expect(result.errors).toHaveLength(0)
+  expect(result.code).toContain(
+    '@media print {\n.foo[v-scope-xxx] {\n    color: #000;\n}\n}'
+  )
+})
+
+test('supports query', () => {
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    scoped: true,
+    filename: 'example.vue',
+    source: `
+@supports ( color: #000 ) {
+  .foo {
+    color: #000;
+  }
+}`
+  })
+
+  expect(result.errors).toHaveLength(0)
+  expect(result.code).toContain(
+    '@supports ( color: #000 ) {\n.foo[v-scope-xxx] {\n    color: #000;\n}\n}'
+  )
+})
diff --git a/packages/compiler-sfc/test/compileTemplate.spec.ts b/packages/compiler-sfc/test/compileTemplate.spec.ts
new file mode 100644
index 000000000..aa0e226c9
--- /dev/null
+++ b/packages/compiler-sfc/test/compileTemplate.spec.ts
@@ -0,0 +1,230 @@
+import { parse } from '../src/parse'
+import { SFCBlock } from '../src/parseComponent'
+import { compileTemplate } from '../src/compileTemplate'
+import Vue from 'vue'
+
+function mockRender(code: string, mocks: Record<string, any> = {}) {
+  console.log(code)
+  const fn = new Function(
+    `require`,
+    `${code}; return { render, staticRenderFns }`
+  )
+  const vm = new Vue(
+    Object.assign(
+      {},
+      fn((id: string) => mocks[id])
+    )
+  )
+  vm.$mount()
+  return (vm as any)._vnode
+}
+
+test('should work', () => {
+  const source = `<div><p>{{ render }}</p></div>`
+
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.source).toBe(source)
+  // should expose render fns
+  expect(result.code).toMatch(`var render = function`)
+  expect(result.code).toMatch(`var staticRenderFns = []`)
+  // should mark with stripped
+  expect(result.code).toMatch(`render._withStripped = true`)
+  // should prefix bindings
+  expect(result.code).toMatch(`_vm.render`)
+  expect(result.ast).not.toBeUndefined()
+})
+
+test('preprocess pug', () => {
+  const template = parse({
+    source:
+      '<template lang="pug">\n' +
+      'body\n' +
+      ' h1 Pug Examples\n' +
+      ' div.container\n' +
+      '   p Cool Pug example!\n' +
+      '</template>\n',
+    filename: 'example.vue',
+    needMap: true
+  }).template as SFCBlock
+
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source: template.content,
+    preprocessLang: template.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+})
+
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ */
+test('supports uri fragment in transformed require', () => {
+  const source = '<svg>\
+    <use href="~@svg/file.svg#fragment"></use>\
+  </svg>' //
+  const result = compileTemplate({
+    filename: 'svgparticle.html',
+    source: source,
+    transformAssetUrls: {
+      use: 'href'
+    }
+  })
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toMatch(
+    /href: require\("@svg\/file.svg"\) \+ "#fragment"/
+  )
+})
+
+/**
+ * vuejs/component-compiler-utils#22 Support uri fragment in transformed require
+ */
+test('when too short uri then empty require', () => {
+  const source = '<svg>\
+    <use href="~"></use>\
+  </svg>' //
+  const result = compileTemplate({
+    filename: 'svgparticle.html',
+    source: source,
+    transformAssetUrls: {
+      use: 'href'
+    }
+  })
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toMatch(/href: require\(""\)/)
+})
+
+test('warn missing preprocessor', () => {
+  const template = parse({
+    source: '<template lang="unknownLang">\n' + '</template>\n',
+
+    filename: 'example.vue',
+    needMap: true
+  }).template as SFCBlock
+
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source: template.content,
+    preprocessLang: template.lang
+  })
+
+  expect(result.errors.length).toBe(1)
+})
+
+test.only('transform assetUrls', () => {
+  const source = `
+<div>
+  <img src="./logo.png">
+  <img src="~fixtures/logo.png">
+  <img src="~/fixtures/logo.png">
+</div>
+`
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source,
+    transformAssetUrls: true
+  })
+  expect(result.errors.length).toBe(0)
+
+  const vnode = mockRender(result.code, {
+    './logo.png': 'a',
+    'fixtures/logo.png': 'b'
+  })
+
+  expect(vnode.children[0].data.attrs.src).toBe('a')
+  expect(vnode.children[2].data.attrs.src).toBe('b')
+  expect(vnode.children[4].data.attrs.src).toBe('b')
+})
+
+test('transform srcset', () => {
+  // TODO:
+  const source = `
+<div>
+  <img src="./logo.png">
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+    <image xlink:href="./logo.png" />
+  </svg>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+    <use xlink:href="./logo.png"/>
+  </svg>
+  </svg>
+  <img src="./logo.png" srcset="./logo.png">
+  <img src="./logo.png" srcset="./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
+  <img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x">
+  <img
+    src="./logo.png"
+    srcset="
+      ./logo.png 2x,
+      ./logo.png 3x
+  ">
+</div>
+`
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source,
+    transformAssetUrls: true
+  })
+  expect(result.errors.length).toBe(0)
+
+  const vnode = mockRender(result.code, {
+    './logo.png': 'test-url'
+  })
+
+  // img tag
+  expect(vnode.children[0].data.attrs.src).toBe('test-url')
+  // image tag (SVG)
+  expect(vnode.children[2].children[0].data.attrs['xlink:href']).toBe(
+    'test-url'
+  )
+  // use tag (SVG)
+  expect(vnode.children[4].children[0].data.attrs['xlink:href']).toBe(
+    'test-url'
+  )
+
+  // image tag with srcset
+  expect(vnode.children[6].data.attrs.srcset).toBe('test-url')
+  expect(vnode.children[8].data.attrs.srcset).toBe('test-url 2x')
+  // image tag with multiline srcset
+  expect(vnode.children[10].data.attrs.srcset).toBe('test-url, test-url 2x')
+  expect(vnode.children[12].data.attrs.srcset).toBe('test-url 2x, test-url')
+  expect(vnode.children[14].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
+  expect(vnode.children[16].data.attrs.srcset).toBe(
+    'test-url, test-url 2x, test-url 3x'
+  )
+  expect(vnode.children[18].data.attrs.srcset).toBe('test-url 2x, test-url 3x')
+})
+
+test('transform assetUrls and srcset with base option', () => {
+  const source = `
+<div>
+  <img src="./logo.png">
+  <img src="~fixtures/logo.png">
+  <img src="~/fixtures/logo.png">
+  <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x">
+</div>
+`
+  const result = compileTemplate({
+    filename: 'example.vue',
+    source,
+    transformAssetUrls: true,
+    transformAssetUrlsOptions: { base: '/base/' }
+  })
+
+  expect(result.errors.length).toBe(0)
+
+  const vnode = mockRender(result.code)
+  expect(vnode.children[0].data.attrs.src).toBe('/base/logo.png')
+  expect(vnode.children[2].data.attrs.src).toBe('/base/fixtures/logo.png')
+  expect(vnode.children[4].data.attrs.src).toBe('/base/fixtures/logo.png')
+  expect(vnode.children[6].data.attrs.srcset).toBe(
+    '/base/logo.png 2x, /base/logo.png 3x'
+  )
+})
diff --git a/test/unit/modules/sfc/sfc-parser.spec.ts b/packages/compiler-sfc/test/parseComponent.spec.ts
similarity index 98%
rename from test/unit/modules/sfc/sfc-parser.spec.ts
rename to packages/compiler-sfc/test/parseComponent.spec.ts
index 93db49c61..b2ee8d633 100644
--- a/test/unit/modules/sfc/sfc-parser.spec.ts
+++ b/packages/compiler-sfc/test/parseComponent.spec.ts
@@ -1,4 +1,5 @@
-import { parseComponent } from 'sfc/parser'
+import { WarningMessage } from 'types/compiler'
+import { parseComponent } from '../src/parseComponent'
 
 describe('Single File Component parser', () => {
   it('should parse', () => {
diff --git a/packages/compiler-sfc/test/stylePluginScoped.spec.ts b/packages/compiler-sfc/test/stylePluginScoped.spec.ts
new file mode 100644
index 000000000..46308e374
--- /dev/null
+++ b/packages/compiler-sfc/test/stylePluginScoped.spec.ts
@@ -0,0 +1,137 @@
+import { compileStyle } from '../src/compileStyle'
+
+// vue-loader/#1370
+test('spaces after selector', () => {
+  const { code } = compileStyle({
+    source: `.foo , .bar { color: red; }`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(`.foo[test], .bar[test] { color: red;`)
+})
+
+test('leading deep selector', () => {
+  const { code } = compileStyle({
+    source: `>>> .foo { color: red; }`,
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toMatch(`[test] .foo { color: red;`)
+})
+
+test('scoped css', () => {
+  const { code: style } = compileStyle({
+    id: 'v-scope-xxx',
+    scoped: true,
+    filename: 'example.vue',
+    source: `
+.test {
+  color: yellow;
+}
+.test:after {
+  content: 'bye!';
+}
+h1 {
+  color: green;
+}
+.anim {
+  animation: color 5s infinite, other 5s;
+}
+.anim-2 {
+  animation-name: color;
+  animation-duration: 5s;
+}
+.anim-3 {
+  animation: 5s color infinite, 5s other;
+}
+.anim-multiple {
+  animation: color 5s infinite, opacity 2s;
+}
+.anim-multiple-2 {
+  animation-name: color, opacity;
+  animation-duration: 5s, 2s;
+}
+
+@keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@-webkit-keyframes color {
+  from { color: red; }
+  to { color: green; }
+}
+@keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes opacity {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.foo p >>> .bar {
+  color: red;
+}
+.foo div /deep/ .bar {
+  color: red;
+}
+
+.foo span ::v-deep .bar {
+  color: red;
+}
+`
+  })
+
+  expect(style).toContain(`.test[v-scope-xxx] {\n  color: yellow;\n}`)
+  expect(style).toContain(`.test[v-scope-xxx]:after {\n  content: \'bye!\';\n}`)
+  expect(style).toContain(`h1[v-scope-xxx] {\n  color: green;\n}`)
+  // scoped keyframes
+  expect(style).toContain(
+    `.anim[v-scope-xxx] {\n  animation: color-v-scope-xxx 5s infinite, other 5s;`
+  )
+  expect(style).toContain(
+    `.anim-2[v-scope-xxx] {\n  animation-name: color-v-scope-xxx`
+  )
+  expect(style).toContain(
+    `.anim-3[v-scope-xxx] {\n  animation: 5s color-v-scope-xxx infinite, 5s other;`
+  )
+  expect(style).toContain(`@keyframes color-v-scope-xxx {`)
+  expect(style).toContain(`@-webkit-keyframes color-v-scope-xxx {`)
+
+  expect(style).toContain(
+    `.anim-multiple[v-scope-xxx] {\n  animation: color-v-scope-xxx 5s infinite,opacity-v-scope-xxx 2s;`
+  )
+  expect(style).toContain(
+    `.anim-multiple-2[v-scope-xxx] {\n  animation-name: color-v-scope-xxx,opacity-v-scope-xxx;`
+  )
+  expect(style).toContain(`@keyframes opacity-v-scope-xxx {`)
+  expect(style).toContain(`@-webkit-keyframes opacity-v-scope-xxx {`)
+  // >>> combinator
+  expect(style).toContain(`.foo p[v-scope-xxx] .bar {\n  color: red;\n}`)
+  // /deep/ alias for >>>
+  expect(style).toContain(`.foo div[v-scope-xxx] .bar {\n  color: red;\n}`)
+  // ::-v-deep alias for >>>
+  expect(style).toContain(`.foo span[v-scope-xxx] .bar {\n  color: red;\n}`)
+})
+
+test('pseudo element', () => {
+  const { code } = compileStyle({
+    source: '::selection { display: none; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('[test]::selection {')
+})
+
+test('spaces before pseudo element', () => {
+  const { code } = compileStyle({
+    source: '.abc, ::selection { color: red; }',
+    filename: 'test.css',
+    id: 'test'
+  })
+
+  expect(code).toContain('.abc[test],')
+  expect(code).toContain('[test]::selection {')
+})
diff --git a/packages/compiler-sfc/test/tsconfig.json b/packages/compiler-sfc/test/tsconfig.json
new file mode 100644
index 000000000..c0fca46c6
--- /dev/null
+++ b/packages/compiler-sfc/test/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "vitest/globals"]
+  },
+  "include": ["../src", "."]
+}
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index 6ac5fbf19..59370cfe2 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -24,7 +24,7 @@
     "url": "https://github.com/vuejs/vue/issues"
   },
   "dependencies": {
-    "chalk": "^4.0.0",
+    "chalk": "^4.1.2",
     "hash-sum": "^2.0.0",
     "he": "^1.2.0",
     "lodash.template": "^4.5.0",
diff --git a/packages/template-compiler/package.json b/packages/template-compiler/package.json
index 07e4b219b..0e4d434c7 100644
--- a/packages/template-compiler/package.json
+++ b/packages/template-compiler/package.json
@@ -26,8 +26,8 @@
   },
   "homepage": "https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme",
   "dependencies": {
-    "he": "^1.2.0",
-    "de-indent": "^1.0.2"
+    "de-indent": "^1.0.2",
+    "he": "^1.2.0"
   },
   "devDependencies": {
     "vue": "file:../.."
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b09d64d5..5ad8d78f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,111 +4,116 @@ importers:
 
   .:
     specifiers:
-      '@microsoft/api-extractor': ^7.24.2
+      '@microsoft/api-extractor': ^7.25.0
       '@rollup/plugin-alias': ^3.1.9
       '@rollup/plugin-commonjs': ^22.0.0
-      '@rollup/plugin-node-resolve': ^13.2.1
+      '@rollup/plugin-node-resolve': ^13.3.0
       '@rollup/plugin-replace': ^4.0.0
       '@types/he': ^1.1.2
-      '@types/node': ^17.0.30
+      '@types/node': ^17.0.41
       '@vue/compiler-sfc': workspace:*
-      chalk: ^4.0.0
+      chalk: ^4.1.2
       conventional-changelog-cli: ^2.2.2
       cross-spawn: ^7.0.3
       csstype: ^3.1.0
-      de-indent: ^1.0.2
       enquirer: ^2.3.6
-      esbuild: ^0.14.39
-      execa: ^4.0.0
+      esbuild: ^0.14.43
+      execa: ^4.1.0
       he: ^1.2.0
-      jasmine-core: ^4.1.1
+      jasmine-core: ^4.2.0
       jsdom: ^19.0.0
       karma: ^6.3.20
       karma-chrome-launcher: ^3.1.1
       karma-cli: ^2.0.0
       karma-esbuild: ^2.2.4
       karma-jasmine: ^5.0.1
-      lint-staged: ^12.4.1
+      lint-staged: ^12.5.0
       lodash: ^4.17.21
-      marked: ^4.0.6
+      marked: ^4.0.16
       minimist: ^1.2.6
+      postcss: ^8.4.14
       prettier: ^2.6.2
-      puppeteer: ^14.1.1
+      puppeteer: ^14.3.0
       rimraf: ^3.0.2
-      rollup: ^2.70.2
+      rollup: ^2.75.6
       rollup-plugin-typescript2: ^0.31.2
       semver: ^7.3.7
       shelljs: ^0.8.5
-      terser: ^5.13.1
+      terser: ^5.14.0
       todomvc-app-css: ^2.4.2
-      ts-node: ^10.7.0
+      ts-node: ^10.8.1
       tslib: ^2.4.0
-      typescript: ^4.6.4
-      vitest: ^0.12.6
+      typescript: ^4.7.3
+      vitest: ^0.12.10
       yorkie: ^2.0.0
     dependencies:
       '@vue/compiler-sfc': link:packages/compiler-sfc
       csstype: 3.1.0
     devDependencies:
-      '@microsoft/api-extractor': 7.24.2
-      '@rollup/plugin-alias': 3.1.9_rollup@2.75.3
-      '@rollup/plugin-commonjs': 22.0.0_rollup@2.75.3
-      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.3
-      '@rollup/plugin-replace': 4.0.0_rollup@2.75.3
+      '@microsoft/api-extractor': 7.25.0
+      '@rollup/plugin-alias': 3.1.9_rollup@2.75.6
+      '@rollup/plugin-commonjs': 22.0.0_rollup@2.75.6
+      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.75.6
+      '@rollup/plugin-replace': 4.0.0_rollup@2.75.6
       '@types/he': 1.1.2
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
       chalk: 4.1.2
       conventional-changelog-cli: 2.2.2
       cross-spawn: 7.0.3
-      de-indent: 1.0.2
       enquirer: 2.3.6
-      esbuild: 0.14.42
+      esbuild: 0.14.43
       execa: 4.1.0
       he: 1.2.0
-      jasmine-core: 4.1.1
+      jasmine-core: 4.2.0
       jsdom: 19.0.0
       karma: 6.3.20
       karma-chrome-launcher: 3.1.1
       karma-cli: 2.0.0
-      karma-esbuild: 2.2.4_esbuild@0.14.42
+      karma-esbuild: 2.2.4_esbuild@0.14.43
       karma-jasmine: 5.0.1_karma@6.3.20
-      lint-staged: 12.4.3_enquirer@2.3.6
+      lint-staged: 12.5.0_enquirer@2.3.6
       lodash: 4.17.21
       marked: 4.0.16
       minimist: 1.2.6
+      postcss: 8.4.14
       prettier: 2.6.2
-      puppeteer: 14.1.2
+      puppeteer: 14.3.0
       rimraf: 3.0.2
-      rollup: 2.75.3
-      rollup-plugin-typescript2: 0.31.2_nl2qxg2fxlgm6l264qcwjguuca
+      rollup: 2.75.6
+      rollup-plugin-typescript2: 0.31.2_fgms252lqu3rk7srzpqqayl4ya
       semver: 7.3.7
       shelljs: 0.8.5
       terser: 5.14.0
       todomvc-app-css: 2.4.2
-      ts-node: 10.8.0_w6gfxie3xfwntbz3mwbbvycbdq
+      ts-node: 10.8.1_f5eqjuxkorpjvs4z7mviievvou
       tslib: 2.4.0
-      typescript: 4.7.2
+      typescript: 4.7.3
       vitest: 0.12.10_jsdom@19.0.0
       yorkie: 2.0.0
 
   packages/compiler-sfc:
     specifiers:
-      '@babel/parser': ^7.16.4
-      '@babel/types': ^7.16.0
+      '@babel/parser': ^7.18.4
+      '@babel/types': ^7.18.4
       '@types/estree': ^0.0.48
-      '@types/lru-cache': ^5.1.0
+      '@types/hash-sum': ^1.0.0
+      '@types/lru-cache': ^5.1.1
       '@vue/consolidate': ^0.17.3
+      de-indent: ^1.0.2
       estree-walker: ^2.0.2
       hash-sum: ^2.0.0
+      less: ^4.1.3
       lru-cache: ^5.1.1
-      magic-string: ^0.25.7
+      magic-string: ^0.25.9
       merge-source-map: ^1.1.0
-      postcss: ^8.1.10
-      postcss-modules: ^4.0.0
-      postcss-selector-parser: ^6.0.4
-      pug: ^3.0.1
-      sass: ^1.26.9
+      postcss: ^8.4.14
+      postcss-modules: ^4.3.1
+      postcss-selector-parser: ^6.0.10
+      pug: ^3.0.2
+      sass: ^1.52.3
       source-map: ^0.6.1
+      stylus: ^0.58.1
+      vue-template-es2015-compiler: ^1.9.1
     dependencies:
       '@babel/parser': 7.18.4
       postcss: 8.4.14
@@ -116,22 +121,27 @@ importers:
     devDependencies:
       '@babel/types': 7.18.4
       '@types/estree': 0.0.48
+      '@types/hash-sum': 1.0.0
       '@types/lru-cache': 5.1.1
       '@vue/consolidate': 0.17.3
+      de-indent: 1.0.2
       estree-walker: 2.0.2
       hash-sum: 2.0.0
+      less: 4.1.3
       lru-cache: 5.1.1
       magic-string: 0.25.9
       merge-source-map: 1.1.0
       postcss-modules: 4.3.1_postcss@8.4.14
       postcss-selector-parser: 6.0.10
       pug: 3.0.2
-      sass: 1.52.1
+      sass: 1.52.3
+      stylus: 0.58.1
+      vue-template-es2015-compiler: 1.9.1
 
   packages/server-renderer:
     specifiers:
       '@types/webpack': ^4.41.32
-      chalk: ^4.0.0
+      chalk: ^4.1.2
       file-loader: ^3.0.1
       hash-sum: ^2.0.0
       he: ^1.2.0
@@ -267,19 +277,19 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.13
     dev: true
 
-  /@microsoft/api-extractor-model/7.17.3:
-    resolution: {integrity: sha512-ETslFxVEZTEK6mrOARxM34Ll2W/5H2aTk9Pe9dxsMCnthE8O/CaStV4WZAGsvvZKyjelSWgPVYGowxGVnwOMlQ==}
+  /@microsoft/api-extractor-model/7.18.0:
+    resolution: {integrity: sha512-Q7ZhD6zKQd/J5ayNNChFCCgHZ8tw3ibljm6nXP/JEmiEFFbpKKtWMPVCaN8Y+8/qFmrz7mblLrupcKmUu8cF4A==}
     dependencies:
       '@microsoft/tsdoc': 0.14.1
       '@microsoft/tsdoc-config': 0.16.1
       '@rushstack/node-core-library': 3.45.5
     dev: true
 
-  /@microsoft/api-extractor/7.24.2:
-    resolution: {integrity: sha512-QWZh9aQZvBAdRVK+Go8NiW8YNMN//OGiNqgA3iZ2sEy8imUqkRBCybXgmw2HkEYyPnn55CFoMKvnAHvV9+4B/A==}
+  /@microsoft/api-extractor/7.25.0:
+    resolution: {integrity: sha512-GS1XOY2RgLthUkfcTR4CLPvCIvpFYj+2MfJMZ3J4NX8H64BWSHGaDUvVV6QvjKNpt/RHdLyyJZ+j7dQveBAZnA==}
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.17.3
+      '@microsoft/api-extractor-model': 7.18.0
       '@microsoft/tsdoc': 0.14.1
       '@microsoft/tsdoc-config': 0.16.1
       '@rushstack/node-core-library': 3.45.5
@@ -306,58 +316,58 @@ packages:
     resolution: {integrity: sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==}
     dev: true
 
-  /@rollup/plugin-alias/3.1.9_rollup@2.75.3:
+  /@rollup/plugin-alias/3.1.9_rollup@2.75.6:
     resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==}
     engines: {node: '>=8.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0
     dependencies:
-      rollup: 2.75.3
+      rollup: 2.75.6
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-commonjs/22.0.0_rollup@2.75.3:
+  /@rollup/plugin-commonjs/22.0.0_rollup@2.75.6:
     resolution: {integrity: sha512-Ktvf2j+bAO+30awhbYoCaXpBcyPmJbaEUYClQns/+6SNCYFURbvBiNbWgHITEsIgDDWCDUclWRKEuf8cwZCFoQ==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       rollup: ^2.68.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 7.2.3
       is-reference: 1.2.1
       magic-string: 0.25.9
       resolve: 1.22.0
-      rollup: 2.75.3
+      rollup: 2.75.6
     dev: true
 
-  /@rollup/plugin-node-resolve/13.3.0_rollup@2.75.3:
+  /@rollup/plugin-node-resolve/13.3.0_rollup@2.75.6:
     resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
       rollup: ^2.42.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
       '@types/resolve': 1.17.1
       deepmerge: 4.2.2
       is-builtin-module: 3.1.0
       is-module: 1.0.0
       resolve: 1.22.0
-      rollup: 2.75.3
+      rollup: 2.75.6
     dev: true
 
-  /@rollup/plugin-replace/4.0.0_rollup@2.75.3:
+  /@rollup/plugin-replace/4.0.0_rollup@2.75.6:
     resolution: {integrity: sha512-+rumQFiaNac9y64OHtkHGmdjm7us9bo1PlbgQfdihQtuNxzjpaB064HbRnewUOggLQxVCCyINfStkgmBeQpv1g==}
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.75.3
+      '@rollup/pluginutils': 3.1.0_rollup@2.75.6
       magic-string: 0.25.9
-      rollup: 2.75.3
+      rollup: 2.75.6
     dev: true
 
-  /@rollup/pluginutils/3.1.0_rollup@2.75.3:
+  /@rollup/pluginutils/3.1.0_rollup@2.75.6:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
@@ -366,7 +376,7 @@ packages:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: 2.75.3
+      rollup: 2.75.6
     dev: true
 
   /@rollup/pluginutils/4.2.1:
@@ -466,6 +476,10 @@ packages:
     resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
     dev: true
 
+  /@types/hash-sum/1.0.0:
+    resolution: {integrity: sha512-FdLBT93h3kcZ586Aee66HPCVJ6qvxVjBlDWNmxSGSbCZe9hTsjRKdSsl4y1T+3zfujxo9auykQMnFsfyHWD7wg==}
+    dev: true
+
   /@types/he/1.1.2:
     resolution: {integrity: sha512-kSJPcLO1x+oolc0R89pUl2kozldQ/fVQ1C1p5mp8fPoLdF/ZcBvckaTC2M8xXh3GYendXvCpy5m/a2eSbfgNgw==}
     dev: true
@@ -486,6 +500,10 @@ packages:
     resolution: {integrity: sha512-V3orv+ggDsWVHP99K3JlwtH20R7J4IhI1Kksgc+64q5VxgfRkQG8Ws3MFm/FZOKDYGy9feGFlZ70/HpCNe9QaA==}
     dev: true
 
+  /@types/node/17.0.41:
+    resolution: {integrity: sha512-xA6drNNeqb5YyV5fO3OAEsnXLfO7uF0whiOfPTz5AeDo8KeZFmODKnvwPymMNO8qE/an8pVY/O50tig2SQCrGw==}
+    dev: true
+
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -493,7 +511,7 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
     dev: true
 
   /@types/source-list-map/0.1.2:
@@ -533,7 +551,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
     dev: true
     optional: true
 
@@ -1645,6 +1663,12 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /copy-anything/2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+    dev: true
+
   /copy-concurrently/1.0.5:
     resolution: {integrity: sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==}
     dependencies:
@@ -1746,6 +1770,14 @@ packages:
       randomfill: 1.0.4
     dev: true
 
+  /css/3.0.0:
+    resolution: {integrity: sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==}
+    dependencies:
+      inherits: 2.0.4
+      source-map: 0.6.1
+      source-map-resolve: 0.6.0
+    dev: true
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1815,6 +1847,18 @@ packages:
       ms: 2.0.0
     dev: true
 
+  /debug/3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+    optional: true
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -1922,8 +1966,8 @@ packages:
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
     dev: true
 
-  /devtools-protocol/0.0.982423:
-    resolution: {integrity: sha512-FnVW2nDbjGNw1uD/JRC+9U5768W7e1TfUwqbDTcSsAu1jXFjITSX8w3rkW5FEpHRMPPGpvNSmO1pOpqByiWscA==}
+  /devtools-protocol/0.0.1001819:
+    resolution: {integrity: sha512-G6OsIFnv/rDyxSqBa2lDLR6thp9oJioLsb2Gl+LbQlyoA9/OBAkrTU9jiCcQ8Pnh7z4d6slDiLaogR5hzgJLmQ==}
     dev: true
 
   /di/0.0.1:
@@ -2039,7 +2083,7 @@ packages:
     dependencies:
       '@types/cookie': 0.4.1
       '@types/cors': 2.8.12
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.4.2
@@ -2086,8 +2130,8 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
-  /esbuild-android-64/0.14.42:
-    resolution: {integrity: sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==}
+  /esbuild-android-64/0.14.43:
+    resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -2095,8 +2139,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.14.42:
-    resolution: {integrity: sha512-0cOqCubq+RWScPqvtQdjXG3Czb3AWI2CaKw3HeXry2eoA2rrPr85HF7IpdU26UWdBXgPYtlTN1LUiuXbboROhg==}
+  /esbuild-android-arm64/0.14.43:
+    resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -2104,8 +2148,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.14.42:
-    resolution: {integrity: sha512-ipiBdCA3ZjYgRfRLdQwP82rTiv/YVMtW36hTvAN5ZKAIfxBOyPXY7Cejp3bMXWgzKD8B6O+zoMzh01GZsCuEIA==}
+  /esbuild-darwin-64/0.14.43:
+    resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -2113,8 +2157,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.14.42:
-    resolution: {integrity: sha512-bU2tHRqTPOaoH/4m0zYHbFWpiYDmaA0gt90/3BMEFaM0PqVK/a6MA2V/ypV5PO0v8QxN6gH5hBPY4YJ2lopXgA==}
+  /esbuild-darwin-arm64/0.14.43:
+    resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -2122,8 +2166,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.14.42:
-    resolution: {integrity: sha512-75h1+22Ivy07+QvxHyhVqOdekupiTZVLN1PMwCDonAqyXd8TVNJfIRFrdL8QmSJrOJJ5h8H1I9ETyl2L8LQDaw==}
+  /esbuild-freebsd-64/0.14.43:
+    resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -2131,8 +2175,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.14.42:
-    resolution: {integrity: sha512-W6Jebeu5TTDQMJUJVarEzRU9LlKpNkPBbjqSu+GUPTHDCly5zZEQq9uHkmHHl7OKm+mQ2zFySN83nmfCeZCyNA==}
+  /esbuild-freebsd-arm64/0.14.43:
+    resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -2140,8 +2184,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.14.42:
-    resolution: {integrity: sha512-Ooy/Bj+mJ1z4jlWcK5Dl6SlPlCgQB9zg1UrTCeY8XagvuWZ4qGPyYEWGkT94HUsRi2hKsXvcs6ThTOjBaJSMfg==}
+  /esbuild-linux-32/0.14.43:
+    resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -2149,8 +2193,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.14.42:
-    resolution: {integrity: sha512-2L0HbzQfbTuemUWfVqNIjOfaTRt9zsvjnme6lnr7/MO9toz/MJ5tZhjqrG6uDWDxhsaHI2/nsDgrv8uEEN2eoA==}
+  /esbuild-linux-64/0.14.43:
+    resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -2158,8 +2202,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.14.42:
-    resolution: {integrity: sha512-STq69yzCMhdRaWnh29UYrLSr/qaWMm/KqwaRF1pMEK7kDiagaXhSL1zQGXbYv94GuGY/zAwzK98+6idCMUOOCg==}
+  /esbuild-linux-arm/0.14.43:
+    resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -2167,8 +2211,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.14.42:
-    resolution: {integrity: sha512-c3Ug3e9JpVr8jAcfbhirtpBauLxzYPpycjWulD71CF6ZSY26tvzmXMJYooQ2YKqDY4e/fPu5K8bm7MiXMnyxuA==}
+  /esbuild-linux-arm64/0.14.43:
+    resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -2176,8 +2220,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.14.42:
-    resolution: {integrity: sha512-QuvpHGbYlkyXWf2cGm51LBCHx6eUakjaSrRpUqhPwjh/uvNUYvLmz2LgPTTPwCqaKt0iwL+OGVL0tXA5aDbAbg==}
+  /esbuild-linux-mips64le/0.14.43:
+    resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -2185,8 +2229,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.14.42:
-    resolution: {integrity: sha512-8ohIVIWDbDT+i7lCx44YCyIRrOW1MYlks9fxTo0ME2LS/fxxdoJBwHWzaDYhjvf8kNpA+MInZvyOEAGoVDrMHg==}
+  /esbuild-linux-ppc64le/0.14.43:
+    resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -2194,8 +2238,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-riscv64/0.14.42:
-    resolution: {integrity: sha512-DzDqK3TuoXktPyG1Lwx7vhaF49Onv3eR61KwQyxYo4y5UKTpL3NmuarHSIaSVlTFDDpcIajCDwz5/uwKLLgKiQ==}
+  /esbuild-linux-riscv64/0.14.43:
+    resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -2203,8 +2247,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-s390x/0.14.42:
-    resolution: {integrity: sha512-YFRhPCxl8nb//Wn6SiS5pmtplBi4z9yC2gLrYoYI/tvwuB1jldir9r7JwAGy1Ck4D7sE7wBN9GFtUUX/DLdcEQ==}
+  /esbuild-linux-s390x/0.14.43:
+    resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -2212,8 +2256,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.14.42:
-    resolution: {integrity: sha512-QYSD2k+oT9dqB/4eEM9c+7KyNYsIPgzYOSrmfNGDIyJrbT1d+CFVKvnKahDKNJLfOYj8N4MgyFaU9/Ytc6w5Vw==}
+  /esbuild-netbsd-64/0.14.43:
+    resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -2221,8 +2265,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.14.42:
-    resolution: {integrity: sha512-M2meNVIKWsm2HMY7+TU9AxM7ZVwI9havdsw6m/6EzdXysyCFFSoaTQ/Jg03izjCsK17FsVRHqRe26Llj6x0MNA==}
+  /esbuild-openbsd-64/0.14.43:
+    resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -2230,8 +2274,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.14.42:
-    resolution: {integrity: sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==}
+  /esbuild-sunos-64/0.14.43:
+    resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -2239,8 +2283,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.14.42:
-    resolution: {integrity: sha512-4iw/8qWmRICWi9ZOnJJf9sYt6wmtp3hsN4TdI5NqgjfOkBVMxNdM9Vt3626G1Rda9ya2Q0hjQRD9W1o+m6Lz6g==}
+  /esbuild-windows-32/0.14.43:
+    resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -2248,8 +2292,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.14.42:
-    resolution: {integrity: sha512-j3cdK+Y3+a5H0wHKmLGTJcq0+/2mMBHPWkItR3vytp/aUGD/ua/t2BLdfBIzbNN9nLCRL9sywCRpOpFMx3CxzA==}
+  /esbuild-windows-64/0.14.43:
+    resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -2257,8 +2301,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.14.42:
-    resolution: {integrity: sha512-+lRAARnF+hf8J0mN27ujO+VbhPbDqJ8rCcJKye4y7YZLV6C4n3pTRThAb388k/zqF5uM0lS5O201u0OqoWSicw==}
+  /esbuild-windows-arm64/0.14.43:
+    resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -2266,32 +2310,32 @@ packages:
     dev: true
     optional: true
 
-  /esbuild/0.14.42:
-    resolution: {integrity: sha512-V0uPZotCEHokJdNqyozH6qsaQXqmZEOiZWrXnds/zaH/0SyrIayRXWRB98CENO73MIZ9T3HBIOsmds5twWtmgw==}
+  /esbuild/0.14.43:
+    resolution: {integrity: sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      esbuild-android-64: 0.14.42
-      esbuild-android-arm64: 0.14.42
-      esbuild-darwin-64: 0.14.42
-      esbuild-darwin-arm64: 0.14.42
-      esbuild-freebsd-64: 0.14.42
-      esbuild-freebsd-arm64: 0.14.42
-      esbuild-linux-32: 0.14.42
-      esbuild-linux-64: 0.14.42
-      esbuild-linux-arm: 0.14.42
-      esbuild-linux-arm64: 0.14.42
-      esbuild-linux-mips64le: 0.14.42
-      esbuild-linux-ppc64le: 0.14.42
-      esbuild-linux-riscv64: 0.14.42
-      esbuild-linux-s390x: 0.14.42
-      esbuild-netbsd-64: 0.14.42
-      esbuild-openbsd-64: 0.14.42
-      esbuild-sunos-64: 0.14.42
-      esbuild-windows-32: 0.14.42
-      esbuild-windows-64: 0.14.42
-      esbuild-windows-arm64: 0.14.42
+      esbuild-android-64: 0.14.43
+      esbuild-android-arm64: 0.14.43
+      esbuild-darwin-64: 0.14.43
+      esbuild-darwin-arm64: 0.14.43
+      esbuild-freebsd-64: 0.14.43
+      esbuild-freebsd-arm64: 0.14.43
+      esbuild-linux-32: 0.14.43
+      esbuild-linux-64: 0.14.43
+      esbuild-linux-arm: 0.14.43
+      esbuild-linux-arm64: 0.14.43
+      esbuild-linux-mips64le: 0.14.43
+      esbuild-linux-ppc64le: 0.14.43
+      esbuild-linux-riscv64: 0.14.43
+      esbuild-linux-s390x: 0.14.43
+      esbuild-netbsd-64: 0.14.43
+      esbuild-openbsd-64: 0.14.43
+      esbuild-sunos-64: 0.14.43
+      esbuild-windows-32: 0.14.43
+      esbuild-windows-64: 0.14.43
+      esbuild-windows-arm64: 0.14.43
     dev: true
 
   /escalade/3.1.1:
@@ -3051,6 +3095,14 @@ packages:
     resolution: {integrity: sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==}
     dev: true
 
+  /image-size/0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /immutable/4.1.0:
     resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
     dev: true
@@ -3311,6 +3363,10 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
+  /is-what/3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+    dev: true
+
   /is-windows/1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
@@ -3346,8 +3402,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /jasmine-core/4.1.1:
-    resolution: {integrity: sha512-lmUfT5XcK9KKvt3lLYzn93hc4MGzlUBowExFVgzbSW0ZCrdeyS574dfsyfRhxbg81Wj4gk+RxUiTnj7KBfDA1g==}
+  /jasmine-core/4.2.0:
+    resolution: {integrity: sha512-OcFpBrIhnbmb9wfI8cqPSJ50pv3Wg4/NSgoZIqHzIwO/2a9qivJWzv8hUvaREIMYYJBas6AvfXATFdVuzzCqVw==}
     dev: true
 
   /jju/1.4.0:
@@ -3467,13 +3523,13 @@ packages:
       resolve: 1.22.0
     dev: true
 
-  /karma-esbuild/2.2.4_esbuild@0.14.42:
+  /karma-esbuild/2.2.4_esbuild@0.14.43:
     resolution: {integrity: sha512-nt5+AJ0iFpgJXboBmXvwjM5LYTqTmFA9NuNGj9A442gCMJHwL4Eft4JUBVRc7ORSPoJAQ26Kgf5252Xt6GbkRw==}
     peerDependencies:
       esbuild: '>=0.8.45'
     dependencies:
       chokidar: 3.5.3
-      esbuild: 0.14.42
+      esbuild: 0.14.43
       source-map: 0.6.1
     dev: true
 
@@ -3483,7 +3539,7 @@ packages:
     peerDependencies:
       karma: ^6.0.0
     dependencies:
-      jasmine-core: 4.1.1
+      jasmine-core: 4.2.0
       karma: 6.3.20
     dev: true
 
@@ -3547,6 +3603,26 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /less/4.1.3:
+    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.4.0
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.10
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.1.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /levn/0.3.0:
     resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
     engines: {node: '>= 0.8.0'}
@@ -3564,8 +3640,8 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
-  /lint-staged/12.4.3_enquirer@2.3.6:
-    resolution: {integrity: sha512-eH6SKOmdm/ZwCRMTZAmM3q3dPkpq6vco/BfrOw8iGun4Xs/thYegPD/MLIwKO+iPkzibkLJuQcRhRLXKvaKreg==}
+  /lint-staged/12.5.0_enquirer@2.3.6:
+    resolution: {integrity: sha512-BKLUjWDsKquV/JuIcoQW4MSAI3ggwEImF1+sB4zaKvyVx1wBk3FsG7UK9bpnmBTN1pm7EH2BBcMwINJzCRv12g==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -3918,6 +3994,14 @@ packages:
       mime-db: 1.52.0
     dev: true
 
+  /mime/1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /mime/2.6.0:
     resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
     engines: {node: '>=4.0.0'}
@@ -4049,6 +4133,20 @@ packages:
       - supports-color
     dev: true
 
+  /needle/3.1.0:
+    resolution: {integrity: sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.6.3
+      sax: 1.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
   /negotiator/0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -4136,7 +4234,7 @@ packages:
     dev: true
 
   /npm-run-path/2.0.2:
-    resolution: {integrity: sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=}
+    resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==}
     engines: {node: '>=4'}
     dependencies:
       path-key: 2.0.1
@@ -4200,7 +4298,7 @@ packages:
     dev: true
 
   /once/1.4.0:
-    resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
     dev: true
@@ -4339,6 +4437,11 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
+  /parse-node-version/1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
@@ -4373,7 +4476,7 @@ packages:
     dev: true
 
   /path-is-absolute/1.0.1:
-    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -4384,7 +4487,7 @@ packages:
     dev: true
 
   /path-key/2.0.1:
-    resolution: {integrity: sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=}
+    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
     dev: true
 
@@ -4425,7 +4528,7 @@ packages:
     dev: true
 
   /pend/1.2.0:
-    resolution: {integrity: sha1-elfrVQpng/kRUzH89GY9XI4AelA=}
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
     dev: true
 
   /picocolors/1.0.0:
@@ -4607,7 +4710,7 @@ packages:
     dev: true
 
   /prr/1.0.1:
-    resolution: {integrity: sha1-0/wRS6BplaRexok/SEzrHXj19HY=}
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     dev: true
 
   /pseudomap/1.0.2:
@@ -4755,14 +4858,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /puppeteer/14.1.2:
-    resolution: {integrity: sha512-Nsyy1f7pT2KyBb15u8DHi4q3FfrIqOptAV0r4Bd1lAp2pHz8T0o4DO+On1yWZ7jFbcx1w3AqZ/e7nKqnc3Vwyg==}
+  /puppeteer/14.3.0:
+    resolution: {integrity: sha512-pDtg1+vyw1UPIhUjh2/VW1HUdQnaZJHfMacrJciR3AVm+PBiqdCEcFeFb3UJ/CDEQlHOClm3/WFa7IjY25zIGg==}
     engines: {node: '>=14.1.0'}
     requiresBuild: true
     dependencies:
       cross-fetch: 3.1.5
       debug: 4.3.4
-      devtools-protocol: 0.0.982423
+      devtools-protocol: 0.0.1001819
       extract-zip: 2.0.1
       https-proxy-agent: 5.0.1
       pkg-dir: 4.2.0
@@ -4771,7 +4874,7 @@ packages:
       rimraf: 3.0.2
       tar-fs: 2.1.1
       unbzip2-stream: 1.4.3
-      ws: 8.6.0
+      ws: 8.7.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -5026,7 +5129,7 @@ packages:
       inherits: 2.0.4
     dev: true
 
-  /rollup-plugin-typescript2/0.31.2_nl2qxg2fxlgm6l264qcwjguuca:
+  /rollup-plugin-typescript2/0.31.2_fgms252lqu3rk7srzpqqayl4ya:
     resolution: {integrity: sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q==}
     peerDependencies:
       rollup: '>=1.26.3'
@@ -5037,13 +5140,13 @@ packages:
       find-cache-dir: 3.3.2
       fs-extra: 10.1.0
       resolve: 1.22.0
-      rollup: 2.75.3
+      rollup: 2.75.6
       tslib: 2.4.0
-      typescript: 4.7.2
+      typescript: 4.7.3
     dev: true
 
-  /rollup/2.75.3:
-    resolution: {integrity: sha512-YA29fLU6MAYSaDxIQYrGGOcbXlDmG96h0krGGYObroezcQ0KgEPM3+7MtKD/qeuUbFuAJXvKZee5dA1dpwq1PQ==}
+  /rollup/2.75.6:
+    resolution: {integrity: sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
@@ -5079,8 +5182,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass/1.52.1:
-    resolution: {integrity: sha512-fSzYTbr7z8oQnVJ3Acp9hV80dM1fkMN7mSD/25mpcct9F7FPBMOI8krEYALgU1aZoqGhQNhTPsuSmxjnIvAm4Q==}
+  /sass/1.52.3:
+    resolution: {integrity: sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -5089,6 +5192,10 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
+
   /saxes/5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
     engines: {node: '>=10'}
@@ -5320,6 +5427,14 @@ packages:
       urix: 0.1.0
     dev: true
 
+  /source-map-resolve/0.6.0:
+    resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.0
+    dev: true
+
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
     dependencies:
@@ -5391,7 +5506,7 @@ packages:
     dev: true
 
   /sprintf-js/1.0.3:
-    resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: true
 
   /ssri/6.0.2:
@@ -5463,7 +5578,7 @@ packages:
     dev: true
 
   /string-hash/1.1.3:
-    resolution: {integrity: sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=}
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
     dev: true
 
   /string-width/4.2.3:
@@ -5542,6 +5657,19 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /stylus/0.58.1:
+    resolution: {integrity: sha512-AYiCHm5ogczdCPMfe9aeQa4NklB2gcf4D/IhzYPddJjTgPc+k4D/EVE0yfQbZD43MHP3lPy+8NZ9fcFxkrgs/w==}
+    hasBin: true
+    dependencies:
+      css: 3.0.0
+      debug: 4.3.4
+      glob: 7.2.3
+      sax: 1.2.4
+      source-map: 0.7.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /supports-color/5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -5676,7 +5804,7 @@ packages:
     dev: true
 
   /timsort/0.3.0:
-    resolution: {integrity: sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=}
+    resolution: {integrity: sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==}
     dev: true
 
   /tinypool/0.1.3:
@@ -5701,7 +5829,7 @@ packages:
     dev: true
 
   /to-fast-properties/2.0.0:
-    resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=}
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
   /to-object-path/0.3.0:
@@ -5774,8 +5902,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /ts-node/10.8.0_w6gfxie3xfwntbz3mwbbvycbdq:
-    resolution: {integrity: sha512-/fNd5Qh+zTt8Vt1KbYZjRHCE9sI5i7nqfD/dzBBRDeVXZXS6kToW6R7tTU6Nd4XavFs0mAVCg29Q//ML7WsZYA==}
+  /ts-node/10.8.1_f5eqjuxkorpjvs4z7mviievvou:
+    resolution: {integrity: sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==}
     hasBin: true
     peerDependencies:
       '@swc/core': '>=1.2.50'
@@ -5793,14 +5921,14 @@ packages:
       '@tsconfig/node12': 1.0.9
       '@tsconfig/node14': 1.0.1
       '@tsconfig/node16': 1.0.2
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
       acorn: 8.7.1
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.7.2
+      typescript: 4.7.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -5863,8 +5991,8 @@ packages:
     hasBin: true
     dev: true
 
-  /typescript/4.7.2:
-    resolution: {integrity: sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==}
+  /typescript/4.7.3:
+    resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
     engines: {node: '>=4.2.0'}
     hasBin: true
     dev: true
@@ -5942,7 +6070,7 @@ packages:
   /upath2/3.1.13:
     resolution: {integrity: sha512-M88uBoqgzrkXvXrF/+oSIPsTmL21uRwGhPVJKODrl+3lXkQ5NPKrTYuSBZVa+lgPGFoI6qYyHlSKACFHO0AoNw==}
     dependencies:
-      '@types/node': 17.0.36
+      '@types/node': 17.0.41
       path-is-network-drive: 1.0.15
       path-strip-sep: 1.0.12
       tslib: 2.4.0
@@ -6035,10 +6163,10 @@ packages:
       stylus:
         optional: true
     dependencies:
-      esbuild: 0.14.42
+      esbuild: 0.14.43
       postcss: 8.4.14
       resolve: 1.22.0
-      rollup: 2.75.3
+      rollup: 2.75.6
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -6092,6 +6220,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /vue-template-es2015-compiler/1.9.1:
+    resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
+    dev: true
+
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     dependencies:
@@ -6293,19 +6425,6 @@ packages:
         optional: true
     dev: true
 
-  /ws/8.6.0:
-    resolution: {integrity: sha512-AzmM3aH3gk0aX7/rZLYvjdvZooofDu3fFOzGqcSnQ1tOcTWwhM/o+q++E8mAyVVIyUdajrkzWUGftaVSDLn1bw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-    dev: true
-
   /ws/8.7.0:
     resolution: {integrity: sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==}
     engines: {node: '>=10.0.0'}
@@ -6420,7 +6539,7 @@ packages:
   'file:':
     resolution: {directory: '', type: directory}
     name: vue
-    version: 2.7.0-alpha.5
+    version: 2.7.0-alpha.6
     dependencies:
       '@vue/compiler-sfc': link:packages/compiler-sfc
       csstype: 3.1.0
diff --git a/scripts/config.js b/scripts/config.js
index 610e8d0a9..906077f0e 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -25,6 +25,12 @@ const resolve = p => {
   }
 }
 
+// we are bundling forked consolidate.js in compiler-sfc which dynamically
+// requires a ton of template engines which should be ignored.
+const consolidatePath = require.resolve('@vue/consolidate/package.json', {
+  paths: [path.resolve(__dirname, '../packages/compiler-sfc')]
+})
+
 const builds = {
   // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
   'runtime-cjs-dev': {
@@ -202,12 +208,27 @@ const builds = {
     )
   },
   'compiler-sfc': {
-    entry: resolve('web/entry-compiler-sfc.ts'),
+    entry: resolve('packages/compiler-sfc/src/index.ts'),
     dest: resolve('packages/compiler-sfc/dist/compiler-sfc.js'),
     format: 'cjs',
     external: Object.keys(
       require('../packages/compiler-sfc/package.json').dependencies
-    )
+    ),
+    plugins: [
+      node({ preferBuiltins: true }),
+      cjs({
+        ignore: [
+          ...Object.keys(require(consolidatePath).devDependencies),
+          'vm',
+          'crypto',
+          'react-dom/server',
+          'teacup/lib/express',
+          'arc-templates/dist/es5',
+          'then-pug',
+          'then-jade'
+        ]
+      })
+    ]
   }
 }
 
diff --git a/src/platforms/web/entry-compiler-sfc.ts b/src/platforms/web/entry-compiler-sfc.ts
deleted file mode 100644
index eb846577a..000000000
--- a/src/platforms/web/entry-compiler-sfc.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function compile() {}
diff --git a/src/platforms/web/entry-compiler.ts b/src/platforms/web/entry-compiler.ts
index 679ccfaeb..659766493 100644
--- a/src/platforms/web/entry-compiler.ts
+++ b/src/platforms/web/entry-compiler.ts
@@ -1,4 +1,4 @@
-export { parseComponent } from 'sfc/parser'
+export { parseComponent } from 'sfc/parseComponent'
 export { compile, compileToFunctions } from './compiler/index'
 export { ssrCompile, ssrCompileToFunctions } from 'server/compiler'
 export { generateCodeFrame } from 'compiler/codeframe'
diff --git a/src/types/compiler.ts b/src/types/compiler.ts
index fdb0aced8..639809ed2 100644
--- a/src/types/compiler.ts
+++ b/src/types/compiler.ts
@@ -199,26 +199,3 @@ export type ASTText = {
   start?: number
   end?: number
 }
-
-// SFC-parser related declarations
-
-// an object format describing a single-file component
-export type SFCDescriptor = {
-  template: SFCBlock | null
-  script: SFCBlock | null
-  styles: Array<SFCBlock>
-  customBlocks: Array<SFCBlock>
-  errors: Array<string | WarningMessage>
-}
-
-export type SFCBlock = {
-  type: string
-  content: string
-  attrs: { [attribute: string]: string }
-  start?: number
-  end?: number
-  lang?: string
-  src?: string
-  scoped?: boolean
-  module?: string | boolean
-}