@vue/compiler-sfc 2.7.0-alpha.9 → 2.7.0-beta.3

package/dist/compiler-sfc.d.ts

@@ -200,7 +200,7 @@ declare type CompiledResult = {
     tips?: Array<string | WarningMessage>;
 };
 
-declare type CompilerOptions = {
+export declare type CompilerOptions = {
     warn?: Function;
     modules?: Array<ModuleOptions>;
     directives?: {
@@ -234,13 +234,13 @@ declare type CompilerOptions = {
  * It requires the whole SFC descriptor because we need to handle and merge
  * normal `<script>` + `<script setup>` if both are present.
  */
-export declare function compileScript(sfc: SFCDescriptor, options?: ScriptCompileOptions): SFCScriptBlock;
+export declare function compileScript(sfc: SFCDescriptor, options?: SFCScriptCompileOptions): SFCScriptBlock;
 
-export declare function compileStyle(options: StyleCompileOptions): StyleCompileResults;
+export declare function compileStyle(options: SFCStyleCompileOptions): SFCStyleCompileResults;
 
-export declare function compileStyleAsync(options: StyleCompileOptions): Promise<StyleCompileResults>;
+export declare function compileStyleAsync(options: SFCStyleCompileOptions): Promise<SFCStyleCompileResults>;
 
-export declare function compileTemplate(options: TemplateCompileOptions): TemplateCompileResult;
+export declare function compileTemplate(options: SFCTemplateCompileOptions): SFCTemplateCompileResults;
 
 export declare function generateCodeFrame(source: string, start?: number, end?: number): string;
 
@@ -261,16 +261,7 @@ declare type ModuleOptions = {
     staticKeys?: Array<string>;
 };
 
-export declare function parse(options: ParseOptions): SFCDescriptor;
-
-declare interface ParseOptions {
-    source: string;
-    filename?: string;
-    compiler?: VueTemplateCompiler;
-    compilerParseOptions?: VueTemplateCompilerParseOptions;
-    sourceRoot?: string;
-    needMap?: boolean;
-}
+export declare function parse(options: SFCParseOptions): SFCDescriptor;
 
 declare interface RawSourceMap extends StartOfSourceMap {
     version: string;
@@ -280,24 +271,14 @@ declare interface RawSourceMap extends StartOfSourceMap {
     mappings: string;
 }
 
-export declare interface ScriptCompileOptions {
-    /**
-     * Production mode. Used to determine whether to generate hashed CSS variables
-     */
-    isProd?: boolean;
-    /**
-     * Enable/disable source map. Defaults to true.
-     */
-    sourceMap?: boolean;
-    /**
-     * https://babeljs.io/docs/en/babel-parser#plugins
-     */
-    babelParserPlugins?: ParserPlugin[];
-}
+/**
+ * Utility for rewriting `export default` in a script block into a variable
+ * declaration so that we can inject things into it
+ */
+export declare function rewriteDefault(input: string, as: string, parserPlugins?: ParserPlugin[]): string;
 
 export declare interface SFCBlock extends SFCCustomBlock {
     lang?: string;
-    src?: string;
     scoped?: boolean;
     module?: string | boolean;
 }
@@ -310,6 +291,7 @@ export declare interface SFCCustomBlock {
     };
     start: number;
     end: number;
+    src?: string;
     map?: RawSourceMap;
 }
 
@@ -321,7 +303,8 @@ export declare interface SFCDescriptor {
     scriptSetup: SFCScriptBlock | null;
     styles: SFCBlock[];
     customBlocks: SFCCustomBlock[];
-    errors: WarningMessage[];
+    cssVars: string[];
+    errors: (string | WarningMessage)[];
     /**
      * compare with an existing descriptor to determine whether HMR should perform
      * a reload vs. re-render.
@@ -333,7 +316,20 @@ export declare interface SFCDescriptor {
     shouldForceReload: (prevImports: Record<string, ImportBinding>) => boolean;
 }
 
-declare interface SFCScriptBlock extends SFCBlock {
+export declare interface SFCParseOptions {
+    source: string;
+    filename?: string;
+    compiler?: TemplateCompiler;
+    compilerParseOptions?: VueTemplateCompilerParseOptions;
+    sourceRoot?: string;
+    sourceMap?: boolean;
+    /**
+     * @deprecated use `sourceMap` instead.
+     */
+    needMap?: boolean;
+}
+
+export declare interface SFCScriptBlock extends SFCBlock {
     type: 'script';
     setup?: string | boolean;
     bindings?: BindingMetadata;
@@ -348,12 +344,27 @@ declare interface SFCScriptBlock extends SFCBlock {
     scriptSetupAst?: any[];
 }
 
-declare interface StartOfSourceMap {
-    file?: string;
-    sourceRoot?: string;
+export declare interface SFCScriptCompileOptions {
+    /**
+     * Scope ID for prefixing injected CSS variables.
+     * This must be consistent with the `id` passed to `compileStyle`.
+     */
+    id: string;
+    /**
+     * Production mode. Used to determine whether to generate hashed CSS variables
+     */
+    isProd?: boolean;
+    /**
+     * Enable/disable source map. Defaults to true.
+     */
+    sourceMap?: boolean;
+    /**
+     * https://babeljs.io/docs/en/babel-parser#plugins
+     */
+    babelParserPlugins?: ParserPlugin[];
 }
 
-export declare interface StyleCompileOptions {
+export declare interface SFCStyleCompileOptions {
     source: string;
     filename: string;
     id: string;
@@ -364,20 +375,21 @@ export declare interface StyleCompileOptions {
     preprocessOptions?: any;
     postcssOptions?: any;
     postcssPlugins?: any[];
+    isProd?: boolean;
 }
 
-export declare interface StyleCompileResults {
+export declare interface SFCStyleCompileResults {
     code: string;
     map: any | void;
     rawResult: LazyResult | void;
     errors: string[];
 }
 
-export declare interface TemplateCompileOptions {
+export declare interface SFCTemplateCompileOptions {
     source: string;
     filename: string;
-    compiler?: VueTemplateCompiler;
-    compilerOptions?: VueTemplateCompilerOptions;
+    compiler?: TemplateCompiler;
+    compilerOptions?: CompilerOptions;
     transformAssetUrls?: AssetURLOptions | boolean;
     transformAssetUrlsOptions?: TransformAssetUrlsOptions;
     preprocessLang?: string;
@@ -391,7 +403,7 @@ export declare interface TemplateCompileOptions {
     bindings?: BindingMetadata;
 }
 
-export declare interface TemplateCompileResult {
+export declare interface SFCTemplateCompileResults {
     ast: Object | undefined;
     code: string;
     source: string;
@@ -399,31 +411,36 @@ export declare interface TemplateCompileResult {
     errors: (string | WarningMessage)[];
 }
 
+declare interface StartOfSourceMap {
+    file?: string;
+    sourceRoot?: string;
+}
+
+export declare interface TemplateCompiler {
+    parseComponent(source: string, options?: any): SFCDescriptor;
+    compile(template: string, options: CompilerOptions): CompiledResult;
+    ssrCompile(template: string, options: CompilerOptions): CompiledResult;
+}
+
 declare interface TransformAssetUrlsOptions {
     /**
      * If base is provided, instead of transforming relative asset urls into
      * imports, they will be directly rewritten to absolute urls.
      */
     base?: string;
+    /**
+     * If true, also processes absolute urls.
+     */
+    includeAbsolute?: boolean;
 }
 
-declare interface VueTemplateCompiler {
-    parseComponent(source: string, options?: any): SFCDescriptor;
-    compile(template: string, options: VueTemplateCompilerOptions): VueTemplateCompilerResults;
-    ssrCompile(template: string, options: VueTemplateCompilerOptions): VueTemplateCompilerResults;
-}
-
-declare type VueTemplateCompilerOptions = CompilerOptions;
-
 declare interface VueTemplateCompilerParseOptions {
     pad?: 'line' | 'space' | boolean;
     deindent?: boolean;
     outputSourceRange?: boolean;
 }
 
-declare type VueTemplateCompilerResults = CompiledResult;
-
-declare type WarningMessage = {
+export declare type WarningMessage = {
     msg: string;
     start?: number;
     end?: number;

package/dist/compiler-sfc.js

@@ -658,6 +658,7 @@ function parseComponent(source, options = {}) {
         scriptSetup: null,
         styles: [],
         customBlocks: [],
+        cssVars: [],
         errors: [],
         shouldForceReload: null // attached in parse() by compiler-sfc
     };
@@ -690,6 +691,9 @@ function parseComponent(source, options = {}) {
                     return cumulated;
                 }, {})
             };
+            if (typeof currentBlock.attrs.src === 'string') {
+                currentBlock.src = currentBlock.attrs.src;
+            }
             if (isSpecialTag(tag)) {
                 checkAttrs(currentBlock, attrs);
                 if (tag === 'script') {
@@ -730,9 +734,6 @@ function parseComponent(source, options = {}) {
             if (attr.name === 'module') {
                 block.module = attr.value || true;
             }
-            if (attr.name === 'src') {
-                block.src = attr.value;
-            }
         }
     }
     function end(tag, start) {
@@ -7959,6 +7960,268 @@ function warn(msg) {
     console.warn(`\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`);
 }
 
+const doNotPrefix = makeMap('Infinity,undefined,NaN,isFinite,isNaN,' +
+    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
+    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
+    'require,' + // for webpack
+    'arguments,' + // parsed as identifier but is a special keyword...
+    '_c' // cached to save property access
+);
+/**
+ * The input is expected to be a valid expression.
+ */
+function prefixIdentifiers(source, isFunctional = false, isTS = false, babelOptions = {}, bindings) {
+    const s = new MagicString(source);
+    const plugins = [
+        ...(isTS ? ['typescript'] : []),
+        ...((babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [])
+    ];
+    const ast = parser$1.parseExpression(source, Object.assign(Object.assign({}, babelOptions), { plugins }));
+    const isScriptSetup = bindings && bindings.__isScriptSetup !== false;
+    walkIdentifiers(ast, ident => {
+        const { name } = ident;
+        if (doNotPrefix(name)) {
+            return;
+        }
+        if (!isScriptSetup) {
+            s.prependRight(ident.start, '_vm.');
+            return;
+        }
+        s.overwrite(ident.start, ident.end, rewriteIdentifier(name, bindings));
+    }, node => {
+        if (node.type === 'WithStatement') {
+            s.remove(node.start, node.body.start + 1);
+            s.remove(node.end - 1, node.end);
+            if (!isFunctional) {
+                s.prependRight(node.start, `var _vm=this,_c=_vm._self._c${isScriptSetup ? `,_setup=_vm._self._setupProxy;` : `;`}`);
+            }
+        }
+    });
+    return s.toString();
+}
+function rewriteIdentifier(name, bindings) {
+    const type = bindings[name];
+    if (type && type.startsWith('setup')) {
+        return `_setup.${name}`;
+    }
+    else {
+        return `_vm.${name}`;
+    }
+}
+
+const CSS_VARS_HELPER = `useCssVars`;
+function genCssVarsFromList(vars, id, isProd, isSSR = false) {
+    return `{\n  ${vars
+        .map(key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`)
+        .join(',\n  ')}\n}`;
+}
+function genVarName(id, raw, isProd) {
+    if (isProd) {
+        return hashSum(id + raw);
+    }
+    else {
+        return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
+    }
+}
+function normalizeExpression(exp) {
+    exp = exp.trim();
+    if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
+        (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
+        return exp.slice(1, -1);
+    }
+    return exp;
+}
+const vBindRE = /v-bind\s*\(/g;
+function parseCssVars(sfc) {
+    const vars = [];
+    sfc.styles.forEach(style => {
+        let match;
+        // ignore v-bind() in comments /* ... */
+        const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
+        while ((match = vBindRE.exec(content))) {
+            const start = match.index + match[0].length;
+            const end = lexBinding(content, start);
+            if (end !== null) {
+                const variable = normalizeExpression(content.slice(start, end));
+                if (!vars.includes(variable)) {
+                    vars.push(variable);
+                }
+            }
+        }
+    });
+    return vars;
+}
+function lexBinding(content, start) {
+    let state = 0 /* LexerState.inParens */;
+    let parenDepth = 0;
+    for (let i = start; i < content.length; i++) {
+        const char = content.charAt(i);
+        switch (state) {
+            case 0 /* LexerState.inParens */:
+                if (char === `'`) {
+                    state = 1 /* LexerState.inSingleQuoteString */;
+                }
+                else if (char === `"`) {
+                    state = 2 /* LexerState.inDoubleQuoteString */;
+                }
+                else if (char === `(`) {
+                    parenDepth++;
+                }
+                else if (char === `)`) {
+                    if (parenDepth > 0) {
+                        parenDepth--;
+                    }
+                    else {
+                        return i;
+                    }
+                }
+                break;
+            case 1 /* LexerState.inSingleQuoteString */:
+                if (char === `'`) {
+                    state = 0 /* LexerState.inParens */;
+                }
+                break;
+            case 2 /* LexerState.inDoubleQuoteString */:
+                if (char === `"`) {
+                    state = 0 /* LexerState.inParens */;
+                }
+                break;
+        }
+    }
+    return null;
+}
+const cssVarsPlugin = opts => {
+    const { id, isProd } = opts;
+    return {
+        postcssPlugin: 'vue-sfc-vars',
+        Declaration(decl) {
+            // rewrite CSS variables
+            const value = decl.value;
+            if (vBindRE.test(value)) {
+                vBindRE.lastIndex = 0;
+                let transformed = '';
+                let lastIndex = 0;
+                let match;
+                while ((match = vBindRE.exec(value))) {
+                    const start = match.index + match[0].length;
+                    const end = lexBinding(value, start);
+                    if (end !== null) {
+                        const variable = normalizeExpression(value.slice(start, end));
+                        transformed +=
+                            value.slice(lastIndex, match.index) +
+                                `var(--${genVarName(id, variable, isProd)})`;
+                        lastIndex = end + 1;
+                    }
+                }
+                decl.value = transformed + value.slice(lastIndex);
+            }
+        }
+    };
+};
+cssVarsPlugin.postcss = true;
+function genCssVarsCode(vars, bindings, id, isProd) {
+    const varsExp = genCssVarsFromList(vars, id, isProd);
+    return `_${CSS_VARS_HELPER}((_vm, _setup) => ${prefixIdentifiers(`(${varsExp})`, false, false, undefined, bindings)})`;
+}
+// <script setup> already gets the calls injected as part of the transform
+// this is only for single normal <script>
+function genNormalScriptCssVarsCode(cssVars, bindings, id, isProd) {
+    return (`\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
+        `const __injectCSSVars__ = () => {\n${genCssVarsCode(cssVars, bindings, id, isProd)}}\n` +
+        `const __setup__ = __default__.setup\n` +
+        `__default__.setup = __setup__\n` +
+        `  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }\n` +
+        `  : __injectCSSVars__\n`);
+}
+
+const defaultExportRE = /((?:^|\n|;)\s*)export(\s*)default/;
+const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)(?:as)?(\s*)default/s;
+const exportDefaultClassRE = /((?:^|\n|;)\s*)export\s+default\s+class\s+([\w$]+)/;
+/**
+ * Utility for rewriting `export default` in a script block into a variable
+ * declaration so that we can inject things into it
+ */
+function rewriteDefault(input, as, parserPlugins) {
+    if (!hasDefaultExport(input)) {
+        return input + `\nconst ${as} = {}`;
+    }
+    let replaced;
+    const classMatch = input.match(exportDefaultClassRE);
+    if (classMatch) {
+        replaced =
+            input.replace(exportDefaultClassRE, '$1class $2') +
+                `\nconst ${as} = ${classMatch[2]}`;
+    }
+    else {
+        replaced = input.replace(defaultExportRE, `$1const ${as} =`);
+    }
+    if (!hasDefaultExport(replaced)) {
+        return replaced;
+    }
+    // if the script somehow still contains `default export`, it probably has
+    // multi-line comments or template strings. fallback to a full parse.
+    const s = new MagicString(input);
+    const ast = parser$1.parse(input, {
+        sourceType: 'module',
+        plugins: parserPlugins
+    }).program.body;
+    ast.forEach(node => {
+        if (node.type === 'ExportDefaultDeclaration') {
+            s.overwrite(node.start, node.declaration.start, `const ${as} = `);
+        }
+        if (node.type === 'ExportNamedDeclaration') {
+            for (const specifier of node.specifiers) {
+                if (specifier.type === 'ExportSpecifier' &&
+                    specifier.exported.type === 'Identifier' &&
+                    specifier.exported.name === 'default') {
+                    if (node.source) {
+                        if (specifier.local.name === 'default') {
+                            const end = specifierEnd(input, specifier.local.end, node.end);
+                            s.prepend(`import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`);
+                            s.overwrite(specifier.start, end, ``);
+                            s.append(`\nconst ${as} = __VUE_DEFAULT__`);
+                            continue;
+                        }
+                        else {
+                            const end = specifierEnd(input, specifier.exported.end, node.end);
+                            s.prepend(`import { ${input.slice(specifier.local.start, specifier.local.end)} } from '${node.source.value}'\n`);
+                            s.overwrite(specifier.start, end, ``);
+                            s.append(`\nconst ${as} = ${specifier.local.name}`);
+                            continue;
+                        }
+                    }
+                    const end = specifierEnd(input, specifier.end, node.end);
+                    s.overwrite(specifier.start, end, ``);
+                    s.append(`\nconst ${as} = ${specifier.local.name}`);
+                }
+            }
+        }
+    });
+    return s.toString();
+}
+function hasDefaultExport(input) {
+    return defaultExportRE.test(input) || namedDefaultExportRE.test(input);
+}
+function specifierEnd(input, end, nodeEnd) {
+    // export { default   , foo } ...
+    let hasCommas = false;
+    let oldEnd = end;
+    while (end < nodeEnd) {
+        if (/\s/.test(input.charAt(end))) {
+            end++;
+        }
+        else if (input.charAt(end) === ',') {
+            end++;
+            hasCommas = true;
+            break;
+        }
+        else if (input.charAt(end) === '}') {
+            break;
+        }
+    }
+    return hasCommas ? end : oldEnd;
+}
+
 // Special compiler macros
 const DEFINE_PROPS = 'defineProps';
 const DEFINE_EMITS = 'defineEmits';
@@ -7972,11 +8235,12 @@ const isBuiltInDir$1 = makeMap(`once,memo,if,for,else,else-if,slot,text,html,on,
  * It requires the whole SFC descriptor because we need to handle and merge
  * normal `<script>` + `<script setup>` if both are present.
  */
-function compileScript(sfc, options = {}) {
+function compileScript(sfc, options = { id: '' }) {
     let { filename, script, scriptSetup, source } = sfc;
     const isProd = !!options.isProd;
     const genSourceMap = options.sourceMap !== false;
-    // const cssVars = sfc.cssVars
+    const cssVars = sfc.cssVars;
+    const scopeId = options.id ? options.id.replace(/^data-v-/, '') : '';
     const scriptLang = script && script.lang;
     const scriptSetupLang = scriptSetup && scriptSetup.lang;
     const isTS = scriptLang === 'ts' ||
@@ -8013,6 +8277,11 @@ function compileScript(sfc, options = {}) {
                 sourceType: 'module'
             }).program;
             const bindings = analyzeScriptBindings(scriptAst.body);
+            if (cssVars.length) {
+                content = rewriteDefault(content, DEFAULT_VAR, plugins);
+                content += genNormalScriptCssVarsCode(cssVars, bindings, scopeId, isProd);
+                content += `\nexport default ${DEFAULT_VAR}`;
+            }
             return Object.assign(Object.assign({}, script), { content,
                 map,
                 bindings, scriptAst: scriptAst.body });
@@ -8053,7 +8322,6 @@ function compileScript(sfc, options = {}) {
     let emitsTypeDecl;
     let emitsTypeDeclRaw;
     let emitIdentifier;
-    let hasAwait = false;
     // props/emits declared via types
     const typeDeclaredProps = {};
     const typeDeclaredEmits = new Set();
@@ -8233,33 +8501,6 @@ function compileScript(sfc, options = {}) {
             }
         });
     }
-    /**
-     * await foo()
-     * -->
-     * ;(
-     *   ([__temp,__restore] = withAsyncContext(() => foo())),
-     *   await __temp,
-     *   __restore()
-     * )
-     *
-     * const a = await foo()
-     * -->
-     * const a = (
-     *   ([__temp, __restore] = withAsyncContext(() => foo())),
-     *   __temp = await __temp,
-     *   __restore(),
-     *   __temp
-     * )
-     */
-    function processAwait(node, needSemi, isStatement) {
-        const argumentStart = node.argument.extra && node.argument.extra.parenthesized
-            ? node.argument.extra.parenStart
-            : node.argument.start;
-        const argumentStr = source.slice(argumentStart + startOffset, node.argument.end + startOffset);
-        const containsNestedAwait = /\bawait\b/.test(argumentStr);
-        s.overwrite(node.start + startOffset, argumentStart + startOffset, `${needSemi ? `;` : ``}(\n  ([__temp,__restore] = ${helper(`withAsyncContext`)}(${containsNestedAwait ? `async ` : ``}() => `);
-        s.appendLeft(node.end + startOffset, `)),\n  ${isStatement ? `` : `__temp = `}await __temp,\n  __restore()${isStatement ? `` : `,\n  __temp`}\n)`);
-    }
     /**
      * check defaults. If the default object is an object literal with only
      * static properties, we can directly generate more optimized default
@@ -8614,18 +8855,7 @@ function compileScript(sfc, options = {}) {
                         scope.push(child.body);
                     }
                     if (child.type === 'AwaitExpression') {
-                        hasAwait = true;
-                        // if the await expression is an expression statement and
-                        // - is in the root scope
-                        // - or is not the first statement in a nested block scope
-                        // then it needs a semicolon before the generated code.
-                        const currentScope = scope[scope.length - 1];
-                        const needsSemi = currentScope.some((n, i) => {
-                            return ((scope.length === 1 || i > 0) &&
-                                n.type === 'ExpressionStatement' &&
-                                n.start === child.start);
-                        });
-                        processAwait(child, needsSemi, parent.type === 'ExpressionStatement');
+                        error(`Vue 2 does not support top level await in <script setup>.`, child);
                     }
                 },
                 exit(node) {
@@ -8752,7 +8982,10 @@ function compileScript(sfc, options = {}) {
         bindingMetadata[key] = setupBindings[key];
     }
     // 8. inject `useCssVars` calls
-    // Not backported in Vue 2
+    if (cssVars.length) {
+        helperImports.add(CSS_VARS_HELPER);
+        s.prependRight(startOffset, `\n${genCssVarsCode(cssVars, bindingMetadata, scopeId, isProd)}\n`);
+    }
     // 9. finalize setup() argument signature
     let args = `__props`;
     if (propsTypeDecl) {
@@ -8767,11 +9000,6 @@ function compileScript(sfc, options = {}) {
     if (propsIdentifier) {
         s.prependLeft(startOffset, `\nconst ${propsIdentifier} = __props${propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``}\n`);
     }
-    // inject temp variables for async context preservation
-    if (hasAwait) {
-        const any = isTS ? `: any` : ``;
-        s.prependLeft(startOffset, `\nlet __temp${any}, __restore${any}\n`);
-    }
     const destructureElements = hasDefineExposeCall ? [`expose`] : [];
     if (emitIdentifier) {
         destructureElements.push(emitIdentifier === `emit` ? `emit` : `emit: ${emitIdentifier}`);
@@ -8826,7 +9054,7 @@ function compileScript(sfc, options = {}) {
         // user's TS setting should compile it down to proper targets
         // export default defineComponent({ ...__default__, ... })
         const def = defaultExport ? `\n  ...${DEFAULT_VAR},` : ``;
-        s.prependLeft(startOffset, `\nexport default /*#__PURE__*/${helper(`defineComponent`)}({${def}${runtimeOptions}\n  ${hasAwait ? `async ` : ``}setup(${args}) {\n`);
+        s.prependLeft(startOffset, `\nexport default /*#__PURE__*/${helper(`defineComponent`)}({${def}${runtimeOptions}\n  setup(${args}) {\n`);
         s.appendRight(endOffset, `})`);
     }
     else {
@@ -8834,12 +9062,11 @@ function compileScript(sfc, options = {}) {
             // without TS, can't rely on rest spread, so we use Object.assign
             // export default Object.assign(__default__, { ... })
             s.prependLeft(startOffset, `\nexport default /*#__PURE__*/Object.assign(${DEFAULT_VAR}, {${runtimeOptions}\n  ` +
-                `${hasAwait ? `async ` : ``}setup(${args}) {\n`);
+                `setup(${args}) {\n`);
             s.appendRight(endOffset, `})`);
         }
         else {
-            s.prependLeft(startOffset, `\nexport default {${runtimeOptions}\n  ` +
-                `${hasAwait ? `async ` : ``}setup(${args}) {\n`);
+            s.prependLeft(startOffset, `\nexport default {${runtimeOptions}\n  setup(${args}) {\n`);
             s.appendRight(endOffset, `}`);
         }
     }
@@ -9377,7 +9604,7 @@ const cache = new lruCache(100);
 const splitRE = /\r?\n/g;
 const emptyRE = /^(?:\/\/)?\s*$/;
 function parse(options) {
-    const { source, filename = DEFAULT_FILENAME, compiler, compilerParseOptions = { pad: false }, sourceRoot = '', needMap = true } = options;
+    const { source, filename = DEFAULT_FILENAME, compiler, compilerParseOptions = { pad: false }, sourceRoot = '', needMap = true, sourceMap = needMap } = options;
     const cacheKey = hashSum(filename + source + JSON.stringify(compilerParseOptions));
     let output = cache.get(cacheKey);
     if (output) {
@@ -9392,8 +9619,10 @@ function parse(options) {
         output = parseComponent(source, compilerParseOptions);
     }
     output.filename = filename;
+    // parse CSS vars
+    output.cssVars = parseCssVars(output);
     output.shouldForceReload = prevImports => hmrShouldReload(prevImports, output);
-    if (needMap) {
+    if (sourceMap) {
         if (output.script && !output.script.src) {
             output.script.map = generateSourceMap(filename, source, output.script.content, sourceRoot, compilerParseOptions.pad);
         }
@@ -9444,6 +9673,9 @@ function urlToRequire(url, transformAssetUrlsOption = {}) {
         const secondChar = url.charAt(1);
         url = url.slice(secondChar === '/' ? 2 : 1);
     }
+    if (isExternalUrl(url) || isDataUrl(url) || firstChar === '#') {
+        return returnValue;
+    }
     const uriParts = parseUriParts(url);
     if (transformAssetUrlsOption.base) {
         // explicit base - directly rewrite the url into absolute url
@@ -9456,7 +9688,10 @@ function urlToRequire(url, transformAssetUrlsOption = {}) {
         }
         return returnValue;
     }
-    if (firstChar === '.' || firstChar === '~' || firstChar === '@') {
+    if (transformAssetUrlsOption.includeAbsolute ||
+        firstChar === '.' ||
+        firstChar === '~' ||
+        firstChar === '@') {
         if (!uriParts.hash) {
             return `require("${url}")`;
         }
@@ -9486,6 +9721,14 @@ function parseUriParts(urlString) {
         }
     }
     return returnValue;
+}
+const externalRE = /^(https?:)?\/\//;
+function isExternalUrl(url) {
+    return externalRE.test(url);
+}
+const dataUrlRE = /^\s*data:/i;
+function isDataUrl(url) {
+    return dataUrlRE.test(url);
 }
 
 // vue compiler module for transforming `<tag>:<attribute>` to `require`
@@ -12912,57 +13155,6 @@ var _compiler = /*#__PURE__*/Object.freeze({
 	generateCodeFrame: generateCodeFrame
 });
 
-const doNotPrefix = makeMap('Infinity,undefined,NaN,isFinite,isNaN,' +
-    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
-    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
-    'require,' + // for webpack
-    'arguments,' + // parsed as identifier but is a special keyword...
-    '_c' // cached to save property access
-);
-/**
- * The input is expected to be the render function code directly returned from
- * `compile()` calls, e.g. `with(this){return ...}`
- */
-function prefixIdentifiers(source, fnName = '', isFunctional = false, isTS = false, babelOptions = {}, bindings) {
-    source = `function ${fnName}(${isFunctional ? `_c,_vm` : ``}){${source}\n}`;
-    const s = new MagicString(source);
-    const plugins = [
-        ...(isTS ? ['typescript'] : []),
-        ...((babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [])
-    ];
-    const ast = parser$1.parseExpression(source, Object.assign(Object.assign({}, babelOptions), { plugins }));
-    const isScriptSetup = bindings && bindings.__isScriptSetup !== false;
-    walkIdentifiers(ast, ident => {
-        const { name } = ident;
-        if (doNotPrefix(name)) {
-            return;
-        }
-        if (!isScriptSetup) {
-            s.prependRight(ident.start, '_vm.');
-            return;
-        }
-        s.overwrite(ident.start, ident.end, rewriteIdentifier(name, bindings));
-    }, node => {
-        if (node.type === 'WithStatement') {
-            s.remove(node.start, node.body.start + 1);
-            s.remove(node.end - 1, node.end);
-            if (!isFunctional) {
-                s.prependRight(node.start, `var _vm=this,_c=_vm._self._c${isScriptSetup ? `,_setup=_vm._setupProxy;` : `;`}`);
-            }
-        }
-    });
-    return s.toString();
-}
-function rewriteIdentifier(name, bindings) {
-    const type = bindings[name];
-    if (type && type.startsWith('setup')) {
-        return `_setup.${name}`;
-    }
-    else {
-        return `_vm.${name}`;
-    }
-}
-
 function compileTemplate(options) {
     const { preprocessLang } = options;
     const preprocessor = preprocessLang && consolidate[preprocessLang];
@@ -13037,8 +13229,8 @@ function actuallyCompile(options) {
     else {
         // transpile code with vue-template-es2015-compiler, which is a forked
         // version of Buble that applies ES2015 transforms + stripping `with` usage
-        let code = `var __render__ = ${prefixIdentifiers(render, `render`, isFunctional, isTS, transpileOptions, bindings)}\n` +
-            `var __staticRenderFns__ = [${staticRenderFns.map(code => prefixIdentifiers(code, ``, isFunctional, isTS, transpileOptions, bindings))}]` +
+        let code = `var __render__ = ${prefixIdentifiers(`function render(${isFunctional ? `_c,_vm` : ``}){${render}\n}`, isFunctional, isTS, transpileOptions, bindings)}\n` +
+            `var __staticRenderFns__ = [${staticRenderFns.map(code => prefixIdentifiers(`function (${isFunctional ? `_c,_vm` : ``}){${code}\n}`, isFunctional, isTS, transpileOptions, bindings))}]` +
             `\n`;
         // #23 we use __render__ to avoid `render` not being prefixed by the
         // transpiler when stripping with, but revert it back to `render` to
@@ -17310,9 +17502,8 @@ function processRule(id, rule) {
         });
     }).processSync(rule.selector);
 }
-function rewriteSelector(id, selector, selectorRoot, slotted = false) {
+function rewriteSelector(id, selector, selectorRoot) {
     let node = null;
-    let shouldInject = true;
     // find the last child node to insert attribute selector
     selector.each(n => {
         // DEPRECATED ">>>" and "/deep/" combinator
@@ -17359,23 +17550,22 @@ function rewriteSelector(id, selector, selectorRoot, slotted = false) {
                 }
                 return false;
             }
-            // slot: use selector inside `::v-slotted` and inject [id + '-s']
-            // instead.
+            // !!! Vue 2 does not have :slotted support
             // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
-            if (value === ':slotted' || value === '::v-slotted') {
-                rewriteSelector(id, n.nodes[0], selectorRoot, true /* slotted */);
-                let last = 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;
-            }
+            // 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') {
@@ -17397,14 +17587,13 @@ function rewriteSelector(id, selector, selectorRoot, slotted = false) {
         // 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, selectorParser.attribute({
-            attribute: idToAdd,
-            value: idToAdd,
+            attribute: id,
+            value: id,
             raws: {},
             quoteMark: `"`
         }));
@@ -17577,12 +17766,13 @@ function compileStyleAsync(options) {
     return Promise.resolve(doCompileStyle(Object.assign(Object.assign({}, options), { isAsync: true })));
 }
 function doCompileStyle(options) {
-    const { filename, id, scoped = true, trim = true, preprocessLang, postcssOptions, postcssPlugins } = options;
+    const { filename, id, scoped = true, trim = true, isProd = false, 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();
+    plugins.unshift(cssVarsPlugin({ id: id.replace(/^data-v-/, ''), isProd }));
     if (trim) {
         plugins.push(trimPlugin());
     }
@@ -17646,3 +17836,4 @@ exports.compileStyleAsync = compileStyleAsync;
 exports.compileTemplate = compileTemplate;
 exports.generateCodeFrame = generateCodeFrame;
 exports.parse = parse;
+exports.rewriteDefault = rewriteDefault;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.0-alpha.9",
+  "version": "2.7.0-beta.3",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",