chore: Merge branch 'master' of github.com:vuejs/vue-next into akryum/on-server-prefetch

Author: Akryum

.github/contributing.md

@@ -6,6 +6,7 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 - [Issue Reporting Guidelines](#issue-reporting-guidelines)
 - [Pull Request Guidelines](#pull-request-guidelines)
 - [Development Setup](#development-setup)
+- [Scripts](#scripts)
 - [Project Structure](#project-structure)
 - [Contributing Tests](#contributing-tests)
 - [Financial Contribution](#financial-contribution)

README.md

@@ -28,7 +28,7 @@ Please consult the [Migration Guide](https://v3.vuejs.org/guide/migration/introd
 
 ## Supporting Libraries
 
-All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the `next` dist tag on NPM. **We are planning to stabilize and switch all projects to use the `latest` dist tag by end of 2020.**
+All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the `next` dist tag on NPM. **We are planning to stabilize and switch all projects to use the `latest` dist tag in early 2021.**
 
 ### Vue CLI
 

packages/compiler-sfc/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap

@@ -16,6 +16,10 @@ const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + '2x'
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(\\"img\\", {
+      src: \\"./logo.png\\",
+      srcset: \\"\\"
+    }),
     _createVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_1
@@ -69,6 +73,10 @@ exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = `
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(\\"img\\", {
+      src: \\"./logo.png\\",
+      srcset: \\"\\"
+    }),
     _createVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: \\"/foo/logo.png\\"
@@ -137,6 +145,10 @@ const _hoisted_11 = \\"data:image/png;base64,i\\" + '1x, ' + \\"data:image/png;b
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(_Fragment, null, [
+    _createVNode(\\"img\\", {
+      src: \\"./logo.png\\",
+      srcset: \\"\\"
+    }),
     _createVNode(\\"img\\", {
       src: \\"./logo.png\\",
       srcset: _hoisted_1

packages/compiler-sfc/__tests__/parse.spec.ts

@@ -139,6 +139,15 @@ h1 { color: red }
     expect(descriptor.template!.content).toBe(content)
   })
 
+  test('treat empty lang attribute as the html', () => {
+    const content = `<div><template v-if="ok">ok</template></div>`
+    const { descriptor, errors } = parse(
+      `<template lang="">${content}</template>`
+    )
+    expect(descriptor.template!.content).toBe(content)
+    expect(errors.length).toBe(0)
+  })
+
   // #1120
   test('alternative template lang should be treated as plain text', () => {
     const content = `p(v-if="1 < 2") test`

packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts

@@ -25,6 +25,7 @@ function compileWithSrcset(template: string, options?: AssetURLOptions) {
 }
 
 const src = `
+<img src="./logo.png" srcset=""/>
 <img src="./logo.png" srcset="./logo.png"/>
 <img src="./logo.png" srcset="./logo.png 2x"/>
 <img src="./logo.png" srcset="./logo.png 2x"/>

packages/compiler-sfc/package.json

@@ -46,8 +46,8 @@
     "lru-cache": "^5.1.1",
     "magic-string": "^0.25.7",
     "merge-source-map": "^1.1.0",
-    "postcss": "^7.0.32",
-    "postcss-modules": "^3.2.2",
+    "postcss": "^8.1.10",
+    "postcss-modules": "^4.0.0",
     "postcss-selector-parser": "^6.0.4",
     "source-map": "^0.6.1"
   },

packages/compiler-sfc/src/compileStyle.ts

@@ -1,9 +1,9 @@
 import postcss, {
   ProcessOptions,
-  LazyResult,
   Result,
-  ResultMap,
-  ResultMessage
+  SourceMap,
+  Message,
+  LazyResult
 } from 'postcss'
 import trimPlugin from './stylePluginTrim'
 import scopedPlugin from './stylePluginScoped'
@@ -35,28 +35,33 @@ export interface SFCStyleCompileOptions {
   map?: RawSourceMap
 }
 
+/**
+ * Aligns with postcss-modules
+ * https://github.com/css-modules/postcss-modules
+ */
+export interface CSSModulesOptions {
+  scopeBehaviour?: 'global' | 'local'
+  generateScopedName?:
+    | string
+    | ((name: string, filename: string, css: string) => string)
+  hashPrefix?: string
+  localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
+  exportGlobals?: boolean
+  globalModulePaths?: string[]
+}
+
 export interface SFCAsyncStyleCompileOptions extends SFCStyleCompileOptions {
   isAsync?: boolean
   // css modules support, note this requires async so that we can get the
   // resulting json
   modules?: boolean
-  // maps to postcss-modules options
-  // https://github.com/css-modules/postcss-modules
-  modulesOptions?: {
-    scopeBehaviour?: 'global' | 'local'
-    globalModulePaths?: string[]
-    generateScopedName?:
-      | string
-      | ((name: string, filename: string, css: string) => string)
-    hashPrefix?: string
-    localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
-  }
+  modulesOptions?: CSSModulesOptions
 }
 
 export interface SFCStyleCompileResults {
   code: string
   map: RawSourceMap | undefined
-  rawResult: LazyResult | Result | undefined
+  rawResult: Result | LazyResult | undefined
   errors: Error[]
   modules?: Record<string, string>
   dependencies: Set<string>
@@ -149,7 +154,7 @@ export function doCompileStyle(
 
   let result: LazyResult | undefined
   let code: string | undefined
-  let outMap: ResultMap | undefined
+  let outMap: SourceMap | undefined
   // stylus output include plain css. so need remove the repeat item
   const dependencies = new Set(
     preProcessedSource ? preProcessedSource.dependencies : []
@@ -162,7 +167,7 @@ export function doCompileStyle(
     errors.push(...preProcessedSource.errors)
   }
 
-  const recordPlainCssDependencies = (messages: ResultMessage[]) => {
+  const recordPlainCssDependencies = (messages: Message[]) => {
     messages.forEach(msg => {
       if (msg.type === 'dependency') {
         // postcss output path is absolute position path
@@ -226,7 +231,7 @@ function preprocess(
 
   return preprocessor(
     options.source,
-    options.map,
+    options.inMap || options.map,
     {
       filename: options.filename,
       ...options.preprocessOptions

packages/compiler-sfc/src/cssVars.ts

@@ -8,7 +8,7 @@ import {
   BindingMetadata
 } from '@vue/compiler-dom'
 import { SFCDescriptor } from './parse'
-import postcss, { Root } from 'postcss'
+import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
@@ -49,20 +49,21 @@ export interface CssVarsPluginOptions {
   isProd: boolean
 }
 
-export const cssVarsPlugin = postcss.plugin<CssVarsPluginOptions>(
-  'vue-scoped',
-  opts => (root: Root) => {
-    const { id, isProd } = opts!
-    root.walkDecls(decl => {
+export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
+  const { id, isProd } = opts!
+  return {
+    postcssPlugin: 'vue-sfc-vars',
+    Declaration(decl) {
       // rewrite CSS variables
       if (cssVarRE.test(decl.value)) {
         decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
           return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`
         })
       }
-    })
+    }
   }
-)
+}
+cssVarsPlugin.postcss = true
 
 export function genCssVarsCode(
   vars: string[],

packages/compiler-sfc/src/parse.ts

@@ -121,6 +121,7 @@ export function parse(
               p.type === NodeTypes.ATTRIBUTE &&
               p.name === 'lang' &&
               p.value &&
+              p.value.content &&
               p.value.content !== 'html'
           ))
       ) {