diff --git a/README.md b/README.md
index 1741faa5..73831c41 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,7 @@ For example:
         "vueFeatures": {
             "filter": true,
             "interpolationAsNonHTML": false,
+            "styleCSSVariableInjection": true,
         }
     }
 }
@@ -189,6 +190,12 @@ The following template can be parsed well.
 
 But, it cannot be parsed with Vue 2.
 
+### parserOptions.vueFeatures.styleCSSVariableInjection
+
+If set to `true`, to parse expressions in `v-bind` CSS functions inside `<style>` tags. `v-bind()` is parsed into the `VExpressionContainer` AST node and held in the `VElement` of `<style>`. Default is `true`.
+
+See also to [here](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md).
+
 ## 🎇 Usage for custom rules / plugins
 
 - This parser provides `parserServices` to traverse `<template>`.
diff --git a/docs/ast.md b/docs/ast.md
index ae175e2d..df6f8480 100644
--- a/docs/ast.md
+++ b/docs/ast.md
@@ -124,7 +124,7 @@ interface VFilter <: Node {
 }
 ```
 
-- This is mustaches or directive values.
+- This is mustaches, directive values, or `v-bind()` in `<style>`.
 - If syntax errors exist, `VExpressionContainer#expression` is `null`.
 - If it's an empty mustache, `VExpressionContainer#expression` is `null`. (e.g., `{{ /* a comment */ }}`)
 - `Reference` is objects but not `Node`. Those are external references which are in the expression.
diff --git a/scripts/update-fixtures-document-fragment.js b/scripts/update-fixtures-document-fragment.js
index c9122c26..605c3d45 100644
--- a/scripts/update-fixtures-document-fragment.js
+++ b/scripts/update-fixtures-document-fragment.js
@@ -34,7 +34,7 @@ function replacer(key, value) {
         return undefined
     }
     if (key === "errors" && Array.isArray(value)) {
-        return value.map(e => ({
+        return value.map((e) => ({
             message: e.message,
             index: e.index,
             lineNumber: e.lineNumber,
@@ -51,13 +51,18 @@ function replacer(key, value) {
 for (const name of TARGETS) {
     const sourceFileName = fs
         .readdirSync(path.join(ROOT, name))
-        .find(f => f.startsWith("source."))
+        .find((f) => f.startsWith("source."))
     const sourcePath = path.join(ROOT, `${name}/${sourceFileName}`)
+    const optionsPath = path.join(ROOT, `${name}/parser-options.json`)
     const source = fs.readFileSync(sourcePath, "utf8")
-    const result = parser.parseForESLint(
-        source,
-        Object.assign({ filePath: sourcePath }, PARSER_OPTIONS)
+    const options = Object.assign(
+        { filePath: sourcePath },
+        PARSER_OPTIONS,
+        fs.existsSync(optionsPath)
+            ? JSON.parse(fs.readFileSync(optionsPath, "utf8"))
+            : {}
     )
+    const result = parser.parseForESLint(source, options)
     const actual = result.services.getDocumentFragment()
 
     const resultPath = path.join(ROOT, `${name}/document-fragment.json`)
@@ -66,7 +71,7 @@ for (const name of TARGETS) {
 
     console.log("Update:", name)
 
-    const tokenRanges = getAllTokens(actual).map(t =>
+    const tokenRanges = getAllTokens(actual).map((t) =>
         source.slice(t.range[0], t.range[1])
     )
     const tree = getTree(source, actual)
diff --git a/src/ast/nodes.ts b/src/ast/nodes.ts
index 96c0fad9..a6c1c647 100644
--- a/src/ast/nodes.ts
+++ b/src/ast/nodes.ts
@@ -859,5 +859,15 @@ export interface VDocumentFragment
         HasConcreteInfo {
     type: "VDocumentFragment"
     parent: null
-    children: (VElement | VText | VExpressionContainer)[]
+    children: (VElement | VText | VExpressionContainer | VStyleElement)[]
+}
+
+/**
+ * Style element nodes.
+ */
+export interface VStyleElement extends VElement {
+    type: "VElement"
+    name: "style"
+    style: true
+    children: (VText | VExpressionContainer)[]
 }
diff --git a/src/common/ast-utils.ts b/src/common/ast-utils.ts
index 1768d44a..a97a1970 100644
--- a/src/common/ast-utils.ts
+++ b/src/common/ast-utils.ts
@@ -1,4 +1,10 @@
-import type { VAttribute, VDirective, VElement, VNode } from "../ast"
+import type {
+    VAttribute,
+    VDirective,
+    VDocumentFragment,
+    VElement,
+    VNode,
+} from "../ast"
 
 /**
  * Check whether the node is a `<script>` element.
@@ -30,6 +36,28 @@ export function isTemplateElement(node: VNode): node is VElement {
     return node.type === "VElement" && node.name === "template"
 }
 
+/**
+ * Check whether the node is a `<style>` element.
+ * @param node The node to check.
+ * @returns `true` if the node is a `<style>` element.
+ */
+export function isStyleElement(node: VNode): node is VElement {
+    return node.type === "VElement" && node.name === "style"
+}
+
+/**
+ * Get the belonging document of the given node.
+ * @param leafNode The node to get.
+ * @returns The belonging document.
+ */
+export function getOwnerDocument(leafNode: VNode): VDocumentFragment | null {
+    let node: VNode | null = leafNode
+    while (node != null && node.type !== "VDocumentFragment") {
+        node = node.parent
+    }
+    return node
+}
+
 /**
  * Check whether the attribute node is a `lang` attribute.
  * @param attribute The attribute node to check.
diff --git a/src/common/error-utils.ts b/src/common/error-utils.ts
new file mode 100644
index 00000000..2aad6de4
--- /dev/null
+++ b/src/common/error-utils.ts
@@ -0,0 +1,27 @@
+import type { ParseError, VDocumentFragment } from "../ast"
+import sortedIndexBy from "lodash/sortedIndexBy"
+/**
+ * Insert the given error.
+ * @param document The document that the node is belonging to.
+ * @param error The error to insert.
+ */
+export function insertError(
+    document: VDocumentFragment | null,
+    error: ParseError,
+): void {
+    if (document == null) {
+        return
+    }
+
+    const index = sortedIndexBy(document.errors, error, byIndex)
+    document.errors.splice(index, 0, error)
+}
+
+/**
+ * Get `x.pos`.
+ * @param x The object to get.
+ * @returns `x.pos`.
+ */
+function byIndex(x: ParseError): number {
+    return x.index
+}
diff --git a/src/common/location-calculator.ts b/src/common/location-calculator.ts
index ee2be166..987d5bf4 100644
--- a/src/common/location-calculator.ts
+++ b/src/common/location-calculator.ts
@@ -121,7 +121,7 @@ export class LocationCalculatorForHtml
      * @returns The location of the index.
      */
     public getLocation(index: number): Location {
-        return this.getLocFromIndex(this.baseOffset + index + this.shiftOffset)
+        return this.getLocFromIndex(this.getOffsetWithGap(index))
     }
 
     /**
@@ -130,13 +130,7 @@ export class LocationCalculatorForHtml
      * @returns The offset of the index.
      */
     public getOffsetWithGap(index: number): number {
-        const shiftOffset = this.shiftOffset
-        return (
-            this.baseOffset +
-            index +
-            shiftOffset +
-            this._getGap(index + shiftOffset)
-        )
+        return index + this.getFixOffset(index)
     }
 
     /**
@@ -146,6 +140,6 @@ export class LocationCalculatorForHtml
     public getFixOffset(offset: number): number {
         const shiftOffset = this.shiftOffset
         const gap = this._getGap(offset + shiftOffset)
-        return this.baseOffset + Math.max(0, gap) + shiftOffset
+        return this.baseOffset + gap + shiftOffset
     }
 }
diff --git a/src/common/parser-options.ts b/src/common/parser-options.ts
index 554a13f5..48613210 100644
--- a/src/common/parser-options.ts
+++ b/src/common/parser-options.ts
@@ -8,6 +8,7 @@ export interface ParserOptions {
     vueFeatures?: {
         interpolationAsNonHTML?: boolean // default false
         filter?: boolean // default true
+        styleCSSVariableInjection?: boolean // default true
     }
 
     // espree options
diff --git a/src/common/token-utils.ts b/src/common/token-utils.ts
new file mode 100644
index 00000000..4ce11d19
--- /dev/null
+++ b/src/common/token-utils.ts
@@ -0,0 +1,159 @@
+import sortedIndexBy from "lodash/sortedIndexBy"
+import sortedLastIndexBy from "lodash/sortedLastIndexBy"
+import type { LocationRange, Token, VDocumentFragment } from "../ast"
+import type { LinesAndColumns } from "./lines-and-columns"
+
+interface HasRange {
+    range: [number, number]
+}
+/**
+ * Replace the tokens in the given range.
+ * @param document The document that the node is belonging to.
+ * @param node The node to specify the range of replacement.
+ * @param newTokens The new tokens.
+ */
+export function replaceTokens(
+    document: VDocumentFragment | null,
+    node: HasRange,
+    newTokens: Token[],
+): void {
+    if (document == null) {
+        return
+    }
+
+    const index = sortedIndexBy(document.tokens, node, byRange0)
+    const count = sortedLastIndexBy(document.tokens, node, byRange1) - index
+    document.tokens.splice(index, count, ...newTokens)
+}
+
+/**
+ * Replace and split the tokens in the given range.
+ * @param document The document that the node is belonging to.
+ * @param node The node to specify the range of replacement.
+ * @param newTokens The new tokens.
+ */
+export function replaceAndSplitTokens(
+    document: VDocumentFragment | null,
+    node: HasRange & {
+        loc: LocationRange
+    },
+    newTokens: Token[],
+): void {
+    if (document == null) {
+        return
+    }
+
+    const index = sortedIndexBy(document.tokens, node, byRange0)
+    if (
+        document.tokens.length === index ||
+        node.range[0] < document.tokens[index].range[0]
+    ) {
+        // split
+        const beforeToken = document.tokens[index - 1]
+        const value = beforeToken.value
+        const splitOffset = node.range[0] - beforeToken.range[0]
+        const afterToken: Token = {
+            type: beforeToken.type,
+            range: [node.range[0], beforeToken.range[1]],
+            loc: {
+                start: { ...node.loc.start },
+                end: { ...beforeToken.loc.end },
+            },
+            value: value.slice(splitOffset),
+        }
+        beforeToken.range[1] = node.range[0]
+        beforeToken.loc.end = { ...node.loc.start }
+        beforeToken.value = value.slice(0, splitOffset)
+        document.tokens.splice(index, 0, afterToken)
+    }
+    let lastIndex = sortedLastIndexBy(document.tokens, node, byRange1)
+    if (
+        lastIndex === 0 ||
+        node.range[1] < document.tokens[lastIndex].range[1]
+    ) {
+        // split
+        const beforeToken = document.tokens[lastIndex]
+        const value = beforeToken.value
+        const splitOffset =
+            beforeToken.range[1] -
+            beforeToken.range[0] -
+            (beforeToken.range[1] - node.range[1])
+        const afterToken: Token = {
+            type: beforeToken.type,
+            range: [node.range[1], beforeToken.range[1]],
+            loc: {
+                start: { ...node.loc.end },
+                end: { ...beforeToken.loc.end },
+            },
+            value: value.slice(splitOffset),
+        }
+        beforeToken.range[1] = node.range[1]
+        beforeToken.loc.end = { ...node.loc.end }
+        beforeToken.value = value.slice(0, splitOffset)
+        document.tokens.splice(lastIndex + 1, 0, afterToken)
+        lastIndex++
+    }
+    const count = lastIndex - index
+    document.tokens.splice(index, count, ...newTokens)
+}
+
+/**
+ * Insert the given comment tokens.
+ * @param document The document that the node is belonging to.
+ * @param newComments The comments to insert.
+ */
+export function insertComments(
+    document: VDocumentFragment | null,
+    newComments: Token[],
+): void {
+    if (document == null || newComments.length === 0) {
+        return
+    }
+
+    const index = sortedIndexBy(document.comments, newComments[0], byRange0)
+    document.comments.splice(index, 0, ...newComments)
+}
+
+/**
+ * Create a simple token.
+ * @param type The type of new token.
+ * @param start The offset of the start position of new token.
+ * @param end The offset of the end position of new token.
+ * @param value The value of new token.
+ * @returns The new token.
+ */
+export function createSimpleToken(
+    type: string,
+    start: number,
+    end: number,
+    value: string,
+    linesAndColumns: LinesAndColumns,
+): Token {
+    return {
+        type,
+        range: [start, end],
+        loc: {
+            start: linesAndColumns.getLocFromIndex(start),
+            end: linesAndColumns.getLocFromIndex(end),
+        },
+        value,
+    }
+}
+
+/**
+ * Get `x.range[0]`.
+ * @param x The object to get.
+ * @returns `x.range[0]`.
+ */
+function byRange0(x: HasRange): number {
+    return x.range[0]
+}
+
+/**
+ * Get `x.range[1]`.
+ * @param x The object to get.
+ * @returns `x.range[1]`.
+ */
+function byRange1(x: HasRange): number {
+    return x.range[1]
+}
diff --git a/src/index.ts b/src/index.ts
index 2b03e1e1..2001860d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,8 +19,10 @@ import {
     getLang,
     isScriptElement,
     isScriptSetupElement,
+    isStyleElement,
     isTemplateElement,
 } from "./common/ast-utils"
+import { parseStyleElements } from "./style"
 
 const STARTS_WITH_LT = /^\s*</u
 
@@ -120,6 +122,14 @@ export function parseForESLint(
             })
         }
 
+        if (options.vueFeatures?.styleCSSVariableInjection ?? true) {
+            const styles = rootAST.children.filter(isStyleElement)
+            parseStyleElements(styles, locationCalculator, {
+                ...options,
+                parser: getScriptParser(options.parser, rootAST, "template"),
+            })
+        }
+
         result.ast.templateBody = templateBody
         document = rootAST
     }
diff --git a/src/parser-services.ts b/src/parser-services.ts
index 33d8900d..845201c7 100644
--- a/src/parser-services.ts
+++ b/src/parser-services.ts
@@ -22,11 +22,11 @@ import type {
 import {
     createCustomBlockSharedContext,
     getCustomBlocks,
-    getLang,
     parseCustomBlockElement,
 } from "./sfc/custom-block"
 import type { ParserOptions } from "./common/parser-options"
 import { isSFCFile } from "./common/parser-options"
+import { getLang } from "./common/ast-utils"
 
 //------------------------------------------------------------------------------
 // Helpers
diff --git a/src/sfc/custom-block/index.ts b/src/sfc/custom-block/index.ts
index 542f2ad0..dc7153c2 100644
--- a/src/sfc/custom-block/index.ts
+++ b/src/sfc/custom-block/index.ts
@@ -4,7 +4,6 @@ import type {
     ESLintExtendedProgram,
     Node,
     OffsetRange,
-    VAttribute,
     VDocumentFragment,
     VElement,
     VExpressionContainer,
@@ -69,15 +68,6 @@ export function getCustomBlocks(
         : []
 }
 
-export function getLang(customBlock: VElement) {
-    return (
-        customBlock.startTag.attributes.find(
-            (attr): attr is VAttribute =>
-                !attr.directive && attr.key.name === "lang",
-        )?.value?.value || null
-    )
-}
-
 /**
  * Parse the source code of the given custom block element.
  * @param node The custom block element to parse.
diff --git a/src/style/index.ts b/src/style/index.ts
new file mode 100644
index 00000000..4c7ff08f
--- /dev/null
+++ b/src/style/index.ts
@@ -0,0 +1,427 @@
+import type {
+    OffsetRange,
+    Token,
+    VDocumentFragment,
+    VElement,
+    VExpressionContainer,
+    VStyleElement,
+    VText,
+} from "../ast"
+import { ParseError } from "../ast"
+import { getLang, getOwnerDocument } from "../common/ast-utils"
+import { debug } from "../common/debug"
+import { insertError } from "../common/error-utils"
+import type { LocationCalculatorForHtml } from "../common/location-calculator"
+import type { ParserOptions } from "../common/parser-options"
+import {
+    createSimpleToken,
+    insertComments,
+    replaceAndSplitTokens,
+} from "../common/token-utils"
+import { parseExpression } from "../script"
+import { DEFAULT_ECMA_VERSION } from "../script-setup/parser-options"
+import { resolveReferences } from "../template"
+
+type CSSParseOption = { inlineComment?: boolean }
+
+/**
+ * Parse the source code of the given `<style>` elements.
+ * @param elements The `<style>` elements to parse.
+ * @param globalLocationCalculator The location calculator for fixLocations.
+ * @param parserOptions The parser options.
+ * @returns The result of parsing.
+ */
+export function parseStyleElements(
+    elements: VElement[],
+    globalLocationCalculator: LocationCalculatorForHtml,
+    originalParserOptions: ParserOptions,
+): void {
+    const parserOptions: ParserOptions = {
+        ...originalParserOptions,
+        ecmaVersion: originalParserOptions.ecmaVersion || DEFAULT_ECMA_VERSION,
+    }
+
+    for (const style of elements) {
+        ;(style as VStyleElement).style = true
+        parseStyleElement(
+            style as VStyleElement,
+            globalLocationCalculator,
+            parserOptions,
+            {
+                inlineComment: (getLang(style) || "css") !== "css",
+            },
+        )
+    }
+}
+
+function parseStyleElement(
+    style: VStyleElement,
+    globalLocationCalculator: LocationCalculatorForHtml,
+    parserOptions: ParserOptions,
+    cssOptions: CSSParseOption,
+) {
+    if (style.children.length !== 1) {
+        return
+    }
+    const textNode = style.children[0]
+    if (textNode.type !== "VText") {
+        return
+    }
+    const code = textNode.value
+    // short circuit
+    if (!code.includes("v-bind(")) {
+        return
+    }
+
+    const locationCalculator = globalLocationCalculator.getSubCalculatorAfter(
+        textNode.range[0],
+    )
+    const document = getOwnerDocument(style)
+    parseStyle(
+        document,
+        style,
+        code,
+        locationCalculator,
+        parserOptions,
+        cssOptions,
+    )
+}
+
+function parseStyle(
+    document: VDocumentFragment | null,
+    style: VStyleElement,
+    code: string,
+    locationCalculator: LocationCalculatorForHtml,
+    parserOptions: ParserOptions,
+    cssOptions: CSSParseOption,
+) {
+    let textStart = 0
+    for (const { range, expr, exprOffset, quote, comments } of iterateVBind(
+        code,
+        cssOptions,
+    )) {
+        insertComments(
+            document,
+            comments.map((c) =>
+                createSimpleToken(
+                    c.type,
+                    locationCalculator.getOffsetWithGap(c.range[0]),
+                    locationCalculator.getOffsetWithGap(c.range[1]),
+                    c.value,
+                    locationCalculator,
+                ),
+            ),
+        )
+
+        const container: VExpressionContainer = {
+            type: "VExpressionContainer",
+            range: [
+                locationCalculator.getOffsetWithGap(range[0]),
+                locationCalculator.getOffsetWithGap(range[1]),
+            ],
+            loc: {
+                start: locationCalculator.getLocation(range[0]),
+                end: locationCalculator.getLocation(range[1]),
+            },
+            parent: style,
+            expression: null,
+            references: [],
+        }
+
+        const beforeTokens: Token[] = [
+            createSimpleToken(
+                "HTMLText",
+                container.range[0],
+                container.range[0] + 6 /* v-bind */,
+                "v-bind",
+                locationCalculator,
+            ),
+            createSimpleToken(
+                "Punctuator",
+                container.range[0] + 6 /* v-bind */,
+                container.range[0] + 7,
+                "(",
+                locationCalculator,
+            ),
+        ]
+        const afterTokens: Token[] = [
+            createSimpleToken(
+                "Punctuator",
+                container.range[1] - 1,
+                container.range[1],
+                ")",
+                locationCalculator,
+            ),
+        ]
+        if (quote) {
+            const openStart = locationCalculator.getOffsetWithGap(
+                exprOffset - 1,
+            )
+            beforeTokens.push(
+                createSimpleToken(
+                    "Punctuator",
+                    openStart,
+                    openStart + 1,
+                    quote,
+                    locationCalculator,
+                ),
+            )
+            const closeStart = locationCalculator.getOffsetWithGap(
+                exprOffset + expr.length,
+            )
+            afterTokens.unshift(
+                createSimpleToken(
+                    "Punctuator",
+                    closeStart,
+                    closeStart + 1,
+                    quote,
+                    locationCalculator,
+                ),
+            )
+        }
+        const beforeLast = beforeTokens[beforeTokens.length - 1]
+        replaceAndSplitTokens(
+            document,
+            {
+                range: [container.range[0], beforeLast.range[1]],
+                loc: { start: container.loc.start, end: beforeLast.loc.end },
+            },
+            beforeTokens,
+        )
+        const afterFirst = afterTokens[0]
+        replaceAndSplitTokens(
+            document,
+            {
+                range: [afterFirst.range[0], container.range[1]],
+                loc: { start: afterFirst.loc.start, end: container.loc.end },
+            },
+            afterTokens,
+        )
+
+        const lastChild = style.children[style.children.length - 1]
+        style.children.push(container)
+        if (lastChild.type === "VText") {
+            const newTextNode: VText = {
+                type: "VText",
+                range: [container.range[1], lastChild.range[1]],
+                loc: {
+                    start: { ...container.loc.end },
+                    end: { ...lastChild.loc.end },
+                },
+                parent: style,
+                value: code.slice(range[1]),
+            }
+            style.children.push(newTextNode)
+
+            lastChild.range[1] = container.range[0]
+            lastChild.loc.end = { ...container.loc.start }
+            lastChild.value = code.slice(textStart, range[0])
+            textStart = range[1]
+        }
+        try {
+            const ret = parseExpression(
+                expr,
+                locationCalculator.getSubCalculatorShift(exprOffset),
+                parserOptions,
+                { allowEmpty: false, allowFilters: false },
+            )
+            if (ret.expression) {
+                ret.expression.parent = container
+                container.expression = ret.expression
+                container.references = ret.references
+            }
+            replaceAndSplitTokens(
+                document,
+                {
+                    range: [beforeLast.range[1], afterFirst.range[0]],
+                    loc: {
+                        start: beforeLast.loc.end,
+                        end: afterFirst.loc.start,
+                    },
+                },
+                ret.tokens,
+            )
+            insertComments(document, ret.comments)
+
+            for (const variable of ret.variables) {
+                style.variables.push(variable)
+            }
+            resolveReferences(container)
+        } catch (err) {
+            debug("[style] Parse error: %s", err)
+
+            if (ParseError.isParseError(err)) {
+                insertError(document, err)
+            } else {
+                throw err
+            }
+        }
+    }
+}
+
+type VBindLocations = {
+    range: OffsetRange
+    expr: string
+    exprOffset: number
+    quote: '"' | "'" | null
+    comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[]
+}
+
+/**
+ * Iterate the `v-bind()` information.
+ */
+function* iterateVBind(
+    code: string,
+    cssOptions: CSSParseOption,
+): IterableIterator<VBindLocations> {
+    const re = cssOptions.inlineComment
+        ? /"|'|\/[*/]|\bv-bind\(/gu
+        : /"|'|\/\*|\bv-bind\(/gu
+    let match
+    while ((match = re.exec(code))) {
+        const startOrVBind = match[0]
+        if (startOrVBind === '"' || startOrVBind === "'") {
+            // skip string
+            re.lastIndex = skipString(code, startOrVBind, re.lastIndex)
+        } else if (startOrVBind === "/*" || startOrVBind === "//") {
+            // skip comment
+            re.lastIndex = skipComment(
+                code,
+                startOrVBind === "/*" ? "block" : "line",
+                re.lastIndex,
+            )
+        } else {
+            // v-bind
+            const start = match.index
+            const arg = parseVBindArg(code, re.lastIndex, cssOptions)
+            if (!arg) {
+                continue
+            }
+            yield {
+                range: [start, arg.end],
+                expr: arg.expr,
+                exprOffset: arg.exprOffset,
+                quote: arg.quote,
+                comments: arg.comments,
+            }
+            re.lastIndex = arg.end
+        }
+    }
+}
+
+function parseVBindArg(
+    code: string,
+    nextIndex: number,
+    cssOptions: CSSParseOption,
+): {
+    expr: string
+    exprOffset: number
+    quote: '"' | "'" | null
+    end: number
+    comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[]
+} | null {
+    const re = cssOptions.inlineComment ? /"|'|\/[*/]|\)/gu : /"|'|\/\*|\)/gu
+    const startTokenIndex = (re.lastIndex = skipSpaces(code, nextIndex))
+    let match
+    const stringRanges: OffsetRange[] = []
+    const comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[] = []
+    while ((match = re.exec(code))) {
+        const startOrVBind = match[0]
+        if (startOrVBind === '"' || startOrVBind === "'") {
+            const start = match.index
+            const end = (re.lastIndex = skipString(
+                code,
+                startOrVBind,
+                re.lastIndex,
+            ))
+            stringRanges.push([start, end])
+        } else if (startOrVBind === "/*" || startOrVBind === "//") {
+            const block = startOrVBind === "/*"
+            const start = match.index
+            const end = (re.lastIndex = skipComment(
+                code,
+                block ? "block" : "line",
+                re.lastIndex,
+            ))
+            comments.push({
+                type: block ? "Block" : "Line",
+                range: [start, end],
+                value: block
+                    ? code.slice(start + 2, end - 2)
+                    : code.slice(start + 2, end - 1),
+            })
+        } else {
+            // closing paren
+            if (stringRanges.length === 1) {
+                // for v-bind( 'expr' ), and v-bind( /**/ 'expr' /**/ )
+                const range = stringRanges[0]
+                const exprRange: OffsetRange = [range[0] + 1, range[1] - 1]
+                return {
+                    expr: code.slice(...exprRange),
+                    exprOffset: exprRange[0],
+                    quote: code[range[0]] as '"' | "'",
+                    end: re.lastIndex,
+                    comments,
+                }
+            }
+
+            return {
+                expr: code.slice(startTokenIndex, match.index).trim(),
+                exprOffset: startTokenIndex,
+                quote: null,
+                end: re.lastIndex,
+                comments: [],
+            }
+        }
+    }
+    return null
+}
+
+function skipString(code: string, quote: '"' | "'", nextIndex: number): number {
+    for (let index = nextIndex; index < code.length; index++) {
+        const c = code[index]
+        if (c === "\\") {
+            index++ // escaping
+            continue
+        }
+        if (c === quote) {
+            return index + 1
+        }
+    }
+    return code.length
+}
+
+function skipComment(
+    code: string,
+    kind: "block" | "line",
+    nextIndex: number,
+): number {
+    const closing = kind === "block" ? "*/" : "\n"
+    const index = code.indexOf(closing, nextIndex)
+    if (index >= nextIndex) {
+        return index + closing.length
+    }
+    return code.length
+}
+
+function skipSpaces(code: string, nextIndex: number): number {
+    for (let index = nextIndex; index < code.length; index++) {
+        const c = code[index]
+        if (c.trim()) {
+            return index
+        }
+    }
+    return code.length
+}
diff --git a/src/template/index.ts b/src/template/index.ts
index 11703605..9c2b5a9a 100644
--- a/src/template/index.ts
+++ b/src/template/index.ts
@@ -3,8 +3,6 @@
  * @copyright 2017 Toru Nagashima. All rights reserved.
  * See LICENSE file in root directory for full license.
  */
-import sortedIndexBy from "lodash/sortedIndexBy"
-import sortedLastIndexBy from "lodash/sortedLastIndexBy"
 import type { ParserOptions } from "../common/parser-options"
 import { isSFCFile } from "../common/parser-options"
 import type {
@@ -35,6 +33,13 @@ import {
     parseVOnExpression,
     parseSlotScopeExpression,
 } from "../script"
+import {
+    createSimpleToken,
+    insertComments,
+    replaceTokens,
+} from "../common/token-utils"
+import { getOwnerDocument } from "../common/ast-utils"
+import { insertError } from "../common/error-utils"
 
 const shorthandSign = /^[.:@#]/u
 const shorthandNameMap = { ":": "bind", ".": "bind", "@": "on", "#": "slot" }
@@ -51,45 +56,6 @@ function getTagName(
     return isSFC ? startTagOrElement.rawName : startTagOrElement.name
 }
 
-/**
- * Get the belonging document of the given node.
- * @param leafNode The node to get.
- * @returns The belonging document.
- */
-function getOwnerDocument(leafNode: VNode): VDocumentFragment | null {
-    let node: VNode | null = leafNode
-    while (node != null && node.type !== "VDocumentFragment") {
-        node = node.parent
-    }
-    return node
-}
-
-/**
- * Create a simple token.
- * @param type The type of new token.
- * @param start The offset of the start position of new token.
- * @param end The offset of the end position of new token.
- * @param value The value of new token.
- * @returns The new token.
- */
-function createSimpleToken(
-    type: string,
-    start: number,
-    end: number,
-    value: string,
-    globalLocationCalculator: LocationCalculatorForHtml,
-): Token {
-    return {
-        type,
-        range: [start, end],
-        loc: {
-            start: globalLocationCalculator.getLocation(start),
-            end: globalLocationCalculator.getLocation(end),
-        },
-        value,
-    }
-}
-
 /**
  * Parse the given attribute name as a directive key.
  * @param node The identifier node to parse.
@@ -424,91 +390,6 @@ function createDirectiveKey(
     return directiveKey
 }
 
-interface HasRange {
-    range: [number, number]
-}
-
-/**
- * Get `x.range[0]`.
- * @param x The object to get.
- * @returns `x.range[0]`.
- */
-function byRange0(x: HasRange): number {
-    return x.range[0]
-}
-
-/**
- * Get `x.range[1]`.
- * @param x The object to get.
- * @returns `x.range[1]`.
- */
-function byRange1(x: HasRange): number {
-    return x.range[1]
-}
-
-/**
- * Get `x.pos`.
- * @param x The object to get.
- * @returns `x.pos`.
- */
-function byIndex(x: ParseError): number {
-    return x.index
-}
-
-/**
- * Replace the tokens in the given range.
- * @param document The document that the node is belonging to.
- * @param node The node to specify the range of replacement.
- * @param newTokens The new tokens.
- */
-function replaceTokens(
-    document: VDocumentFragment | null,
-    node: HasRange,
-    newTokens: Token[],
-): void {
-    if (document == null) {
-        return
-    }
-
-    const index = sortedIndexBy(document.tokens, node, byRange0)
-    const count = sortedLastIndexBy(document.tokens, node, byRange1) - index
-    document.tokens.splice(index, count, ...newTokens)
-}
-
-/**
- * Insert the given comment tokens.
- * @param document The document that the node is belonging to.
- * @param newComments The comments to insert.
- */
-function insertComments(
-    document: VDocumentFragment | null,
-    newComments: Token[],
-): void {
-    if (document == null || newComments.length === 0) {
-        return
-    }
-
-    const index = sortedIndexBy(document.comments, newComments[0], byRange0)
-    document.comments.splice(index, 0, ...newComments)
-}
-
-/**
- * Insert the given error.
- * @param document The document that the node is belonging to.
- * @param error The error to insert.
- */
-function insertError(
-    document: VDocumentFragment | null,
-    error: ParseError,
-): void {
-    if (document == null) {
-        return
-    }
-
-    const index = sortedIndexBy(document.errors, error, byIndex)
-    document.errors.splice(index, 0, error)
-}
-
 /**
  * Parse the given attribute value as an expression.
  * @param code Whole source code text.
diff --git a/test/document-fragment.js b/test/document-fragment.js
index 5f80facf..124ae2bc 100644
--- a/test/document-fragment.js
+++ b/test/document-fragment.js
@@ -55,11 +55,17 @@ describe("services.getDocumentFragment", () => {
             .readdirSync(path.join(ROOT, name))
             .find((f) => f.startsWith("source."))
         const sourcePath = path.join(ROOT, `${name}/${sourceFileName}`)
+        const optionsPath = path.join(ROOT, `${name}/parser-options.json`)
         const source = fs.readFileSync(sourcePath, "utf8")
-        const result = parser.parseForESLint(
-            source,
-            Object.assign({ filePath: sourcePath }, PARSER_OPTIONS)
+        const parserOptions = fs.existsSync(optionsPath)
+            ? JSON.parse(fs.readFileSync(optionsPath, "utf8"))
+            : {}
+        const options = Object.assign(
+            { filePath: sourcePath },
+            PARSER_OPTIONS,
+            parserOptions
         )
+        const result = parser.parseForESLint(source, options)
         const actual = result.services.getDocumentFragment()
 
         describe(`'test/fixtures/document-fragment/${name}/${sourceFileName}'`, () => {
diff --git a/test/fixtures/ast/mustache-with-space/ast.json b/test/fixtures/ast/mustache-with-space/ast.json
new file mode 100644
index 00000000..91a6594e
--- /dev/null
+++ b/test/fixtures/ast/mustache-with-space/ast.json
@@ -0,0 +1,366 @@
+{
+    "type": "Program",
+    "start": 0,
+    "end": 0,
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 1,
+            "column": 0
+        }
+    },
+    "range": [
+        0,
+        0
+    ],
+    "body": [],
+    "sourceType": "script",
+    "comments": [],
+    "tokens": [],
+    "templateBody": {
+        "type": "VElement",
+        "range": [
+            0,
+            36
+        ],
+        "loc": {
+            "start": {
+                "line": 1,
+                "column": 0
+            },
+            "end": {
+                "line": 3,
+                "column": 11
+            }
+        },
+        "name": "template",
+        "rawName": "template",
+        "namespace": "http://www.w3.org/1999/xhtml",
+        "startTag": {
+            "type": "VStartTag",
+            "range": [
+                0,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 10
+                }
+            },
+            "selfClosing": false,
+            "attributes": []
+        },
+        "children": [
+            {
+                "type": "VText",
+                "range": [
+                    10,
+                    15
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 10
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 4
+                    }
+                },
+                "value": "\n    "
+            },
+            {
+                "type": "VExpressionContainer",
+                "range": [
+                    15,
+                    24
+                ],
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 4
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 13
+                    }
+                },
+                "expression": {
+                    "type": "Identifier",
+                    "start": 19,
+                    "end": 20,
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 9
+                        }
+                    },
+                    "range": [
+                        19,
+                        20
+                    ],
+                    "name": "a"
+                },
+                "references": [
+                    {
+                        "id": {
+                            "type": "Identifier",
+                            "start": 19,
+                            "end": 20,
+                            "loc": {
+                                "start": {
+                                    "line": 2,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 2,
+                                    "column": 9
+                                }
+                            },
+                            "range": [
+                                19,
+                                20
+                            ],
+                            "name": "a"
+                        },
+                        "mode": "r"
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "range": [
+                    24,
+                    25
+                ],
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 13
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 0
+                    }
+                },
+                "value": "\n"
+            }
+        ],
+        "endTag": {
+            "type": "VEndTag",
+            "range": [
+                25,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            }
+        },
+        "variables": [],
+        "tokens": [
+            {
+                "type": "HTMLTagOpen",
+                "range": [
+                    0,
+                    9
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 9
+                    }
+                },
+                "value": "template"
+            },
+            {
+                "type": "HTMLTagClose",
+                "range": [
+                    9,
+                    10
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 9
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 10
+                    }
+                },
+                "value": ""
+            },
+            {
+                "type": "HTMLWhitespace",
+                "range": [
+                    10,
+                    15
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 10
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 4
+                    }
+                },
+                "value": "\n    "
+            },
+            {
+                "type": "VExpressionStart",
+                "range": [
+                    15,
+                    17
+                ],
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 4
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 6
+                    }
+                },
+                "value": "{{"
+            },
+            {
+                "type": "Identifier",
+                "value": "a",
+                "start": 19,
+                "end": 20,
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 8
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 9
+                    }
+                },
+                "range": [
+                    19,
+                    20
+                ]
+            },
+            {
+                "type": "VExpressionEnd",
+                "range": [
+                    22,
+                    24
+                ],
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 11
+                    },
+                    "end": {
+                        "line": 2,
+                        "column": 13
+                    }
+                },
+                "value": "}}"
+            },
+            {
+                "type": "HTMLWhitespace",
+                "range": [
+                    24,
+                    25
+                ],
+                "loc": {
+                    "start": {
+                        "line": 2,
+                        "column": 13
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 0
+                    }
+                },
+                "value": "\n"
+            },
+            {
+                "type": "HTMLEndTagOpen",
+                "range": [
+                    25,
+                    35
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 10
+                    }
+                },
+                "value": "template"
+            },
+            {
+                "type": "HTMLTagClose",
+                "range": [
+                    35,
+                    36
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 10
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 11
+                    }
+                },
+                "value": ""
+            },
+            {
+                "type": "HTMLWhitespace",
+                "range": [
+                    36,
+                    37
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 11
+                    },
+                    "end": {
+                        "line": 4,
+                        "column": 0
+                    }
+                },
+                "value": "\n"
+            }
+        ],
+        "comments": [],
+        "errors": []
+    }
+}
\ No newline at end of file
diff --git a/test/fixtures/ast/mustache-with-space/source.vue b/test/fixtures/ast/mustache-with-space/source.vue
new file mode 100644
index 00000000..b662d38d
--- /dev/null
+++ b/test/fixtures/ast/mustache-with-space/source.vue
@@ -0,0 +1,3 @@
+<template>
+    {{  a  }}
+</template>
diff --git a/test/fixtures/ast/mustache-with-space/token-ranges.json b/test/fixtures/ast/mustache-with-space/token-ranges.json
new file mode 100644
index 00000000..29dffb82
--- /dev/null
+++ b/test/fixtures/ast/mustache-with-space/token-ranges.json
@@ -0,0 +1,12 @@
+[
+    "<template",
+    ">",
+    "\n    ",
+    "{{",
+    "a",
+    "}}",
+    "\n",
+    "</template",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/ast/mustache-with-space/tree.json b/test/fixtures/ast/mustache-with-space/tree.json
new file mode 100644
index 00000000..c65f265f
--- /dev/null
+++ b/test/fixtures/ast/mustache-with-space/tree.json
@@ -0,0 +1,39 @@
+[
+    {
+        "type": "VElement",
+        "text": "<template>\n    {{  a  }}\n</template>",
+        "children": [
+            {
+                "type": "VStartTag",
+                "text": "<template>",
+                "children": []
+            },
+            {
+                "type": "VText",
+                "text": "\n    ",
+                "children": []
+            },
+            {
+                "type": "VExpressionContainer",
+                "text": "{{  a  }}",
+                "children": [
+                    {
+                        "type": "Identifier",
+                        "text": "a",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            },
+            {
+                "type": "VEndTag",
+                "text": "</template>",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json b/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
new file mode 100644
index 00000000..a71d5817
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
@@ -0,0 +1,1978 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        324
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 11,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                323
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        28
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        59
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 42
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 37,
+                        "end": 42,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 20
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 25
+                            }
+                        },
+                        "range": [
+                            37,
+                            42
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 37,
+                                "end": 42,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 20
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 25
+                                    }
+                                },
+                                "range": [
+                                    37,
+                                    42
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        59,
+                        76
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 42
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 15
+                        }
+                    },
+                    "value": ";\n    font-size: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        76,
+                        128
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 67
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 100,
+                        "end": 109,
+                        "loc": {
+                            "start": {
+                                "line": 4,
+                                "column": 39
+                            },
+                            "end": {
+                                "line": 4,
+                                "column": 48
+                            }
+                        },
+                        "range": [
+                            100,
+                            109
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 100,
+                            "end": 104,
+                            "loc": {
+                                "start": {
+                                    "line": 4,
+                                    "column": 39
+                                },
+                                "end": {
+                                    "line": 4,
+                                    "column": 43
+                                }
+                            },
+                            "range": [
+                                100,
+                                104
+                            ],
+                            "name": "font"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 105,
+                            "end": 109,
+                            "loc": {
+                                "start": {
+                                    "line": 4,
+                                    "column": 44
+                                },
+                                "end": {
+                                    "line": 4,
+                                    "column": 48
+                                }
+                            },
+                            "range": [
+                                105,
+                                109
+                            ],
+                            "name": "size"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 100,
+                                "end": 104,
+                                "loc": {
+                                    "start": {
+                                        "line": 4,
+                                        "column": 39
+                                    },
+                                    "end": {
+                                        "line": 4,
+                                        "column": 43
+                                    }
+                                },
+                                "range": [
+                                    100,
+                                    104
+                                ],
+                                "name": "font"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        128,
+                        181
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 67
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 18
+                        }
+                    },
+                    "value": "; /* vue 3.1 may not work well. */\n    border-color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        181,
+                        224
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 6
+                        }
+                    },
+                    "expression": {
+                        "type": "CallExpression",
+                        "start": 191,
+                        "end": 206,
+                        "loc": {
+                            "start": {
+                                "line": 5,
+                                "column": 28
+                            },
+                            "end": {
+                                "line": 5,
+                                "column": 43
+                            }
+                        },
+                        "range": [
+                            191,
+                            206
+                        ],
+                        "callee": {
+                            "type": "Identifier",
+                            "start": 191,
+                            "end": 197,
+                            "loc": {
+                                "start": {
+                                    "line": 5,
+                                    "column": 28
+                                },
+                                "end": {
+                                    "line": 5,
+                                    "column": 34
+                                }
+                            },
+                            "range": [
+                                191,
+                                197
+                            ],
+                            "name": "border"
+                        },
+                        "arguments": [
+                            {
+                                "type": "Literal",
+                                "start": 198,
+                                "end": 205,
+                                "loc": {
+                                    "start": {
+                                        "line": 5,
+                                        "column": 35
+                                    },
+                                    "end": {
+                                        "line": 5,
+                                        "column": 42
+                                    }
+                                },
+                                "range": [
+                                    198,
+                                    205
+                                ],
+                                "value": "color",
+                                "raw": "'color'"
+                            }
+                        ]
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 191,
+                                "end": 197,
+                                "loc": {
+                                    "start": {
+                                        "line": 5,
+                                        "column": 28
+                                    },
+                                    "end": {
+                                        "line": 5,
+                                        "column": 34
+                                    }
+                                },
+                                "range": [
+                                    191,
+                                    197
+                                ],
+                                "name": "border"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        224,
+                        248
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 22
+                        }
+                    },
+                    "value": ";\n    background-color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        248,
+                        309
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 5
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 258,
+                        "end": 288,
+                        "loc": {
+                            "start": {
+                                "line": 7,
+                                "column": 32
+                            },
+                            "end": {
+                                "line": 7,
+                                "column": 62
+                            }
+                        },
+                        "range": [
+                            258,
+                            288
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 258,
+                            "end": 268,
+                            "loc": {
+                                "start": {
+                                    "line": 7,
+                                    "column": 32
+                                },
+                                "end": {
+                                    "line": 7,
+                                    "column": 42
+                                }
+                            },
+                            "range": [
+                                258,
+                                268
+                            ],
+                            "name": "background"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 283,
+                            "end": 288,
+                            "loc": {
+                                "start": {
+                                    "line": 7,
+                                    "column": 57
+                                },
+                                "end": {
+                                    "line": 7,
+                                    "column": 62
+                                }
+                            },
+                            "range": [
+                                283,
+                                288
+                            ],
+                            "name": "color"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 258,
+                                "end": 268,
+                                "loc": {
+                                    "start": {
+                                        "line": 7,
+                                        "column": 32
+                                    },
+                                    "end": {
+                                        "line": 7,
+                                        "column": 42
+                                    }
+                                },
+                                "range": [
+                                    258,
+                                    268
+                                ],
+                                "name": "background"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        309,
+                        315
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 5
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    315,
+                    323
+                ],
+                "loc": {
+                    "start": {
+                        "line": 10,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 10,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                323,
+                324
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 8
+                },
+                "end": {
+                    "line": 11,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                16,
+                21
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                21,
+                27
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                27,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                34,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 37,
+            "end": 42,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 20
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "range": [
+                37,
+                42
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                58,
+                59
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 41
+                },
+                "end": {
+                    "line": 3,
+                    "column": 42
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                59,
+                60
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 42
+                },
+                "end": {
+                    "line": 3,
+                    "column": 43
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                60,
+                65
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 43
+                },
+                "end": {
+                    "line": 4,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                65,
+                75
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 4
+                },
+                "end": {
+                    "line": 4,
+                    "column": 14
+                }
+            },
+            "value": "font-size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                75,
+                76
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 14
+                },
+                "end": {
+                    "line": 4,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                76,
+                82
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 15
+                },
+                "end": {
+                    "line": 4,
+                    "column": 21
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                82,
+                83
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 21
+                },
+                "end": {
+                    "line": 4,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                99,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 38
+                },
+                "end": {
+                    "line": 4,
+                    "column": 39
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Identifier",
+            "value": "font",
+            "start": 100,
+            "end": 104,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 39
+                },
+                "end": {
+                    "line": 4,
+                    "column": 43
+                }
+            },
+            "range": [
+                100,
+                104
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 104,
+            "end": 105,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 43
+                },
+                "end": {
+                    "line": 4,
+                    "column": 44
+                }
+            },
+            "range": [
+                104,
+                105
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "size",
+            "start": 105,
+            "end": 109,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 44
+                },
+                "end": {
+                    "line": 4,
+                    "column": 48
+                }
+            },
+            "range": [
+                105,
+                109
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                109,
+                110
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 48
+                },
+                "end": {
+                    "line": 4,
+                    "column": 49
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                127,
+                128
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 66
+                },
+                "end": {
+                    "line": 4,
+                    "column": 67
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                128,
+                129
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 67
+                },
+                "end": {
+                    "line": 4,
+                    "column": 68
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                129,
+                130
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 68
+                },
+                "end": {
+                    "line": 4,
+                    "column": 69
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                130,
+                132
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 69
+                },
+                "end": {
+                    "line": 4,
+                    "column": 71
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                132,
+                133
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 71
+                },
+                "end": {
+                    "line": 4,
+                    "column": 72
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                133,
+                136
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 72
+                },
+                "end": {
+                    "line": 4,
+                    "column": 75
+                }
+            },
+            "value": "vue"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                136,
+                137
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 75
+                },
+                "end": {
+                    "line": 4,
+                    "column": 76
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                137,
+                140
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 76
+                },
+                "end": {
+                    "line": 4,
+                    "column": 79
+                }
+            },
+            "value": "3.1"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                140,
+                141
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 79
+                },
+                "end": {
+                    "line": 4,
+                    "column": 80
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                141,
+                144
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 80
+                },
+                "end": {
+                    "line": 4,
+                    "column": 83
+                }
+            },
+            "value": "may"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                144,
+                145
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 83
+                },
+                "end": {
+                    "line": 4,
+                    "column": 84
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                145,
+                148
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 84
+                },
+                "end": {
+                    "line": 4,
+                    "column": 87
+                }
+            },
+            "value": "not"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                148,
+                149
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 87
+                },
+                "end": {
+                    "line": 4,
+                    "column": 88
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                149,
+                153
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 88
+                },
+                "end": {
+                    "line": 4,
+                    "column": 92
+                }
+            },
+            "value": "work"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                153,
+                154
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 92
+                },
+                "end": {
+                    "line": 4,
+                    "column": 93
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                154,
+                159
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 93
+                },
+                "end": {
+                    "line": 4,
+                    "column": 98
+                }
+            },
+            "value": "well."
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                159,
+                160
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 98
+                },
+                "end": {
+                    "line": 4,
+                    "column": 99
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                160,
+                162
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 99
+                },
+                "end": {
+                    "line": 4,
+                    "column": 101
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                162,
+                167
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 101
+                },
+                "end": {
+                    "line": 5,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                167,
+                180
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 4
+                },
+                "end": {
+                    "line": 5,
+                    "column": 17
+                }
+            },
+            "value": "border-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                180,
+                181
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 17
+                },
+                "end": {
+                    "line": 5,
+                    "column": 18
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                181,
+                187
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 18
+                },
+                "end": {
+                    "line": 5,
+                    "column": 24
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                187,
+                188
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 24
+                },
+                "end": {
+                    "line": 5,
+                    "column": 25
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                190,
+                191
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 27
+                },
+                "end": {
+                    "line": 5,
+                    "column": 28
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Identifier",
+            "value": "border",
+            "start": 191,
+            "end": 197,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 28
+                },
+                "end": {
+                    "line": 5,
+                    "column": 34
+                }
+            },
+            "range": [
+                191,
+                197
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 197,
+            "end": 198,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 34
+                },
+                "end": {
+                    "line": 5,
+                    "column": 35
+                }
+            },
+            "range": [
+                197,
+                198
+            ]
+        },
+        {
+            "type": "String",
+            "value": "'color'",
+            "start": 198,
+            "end": 205,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 35
+                },
+                "end": {
+                    "line": 5,
+                    "column": 42
+                }
+            },
+            "range": [
+                198,
+                205
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 205,
+            "end": 206,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 42
+                },
+                "end": {
+                    "line": 5,
+                    "column": 43
+                }
+            },
+            "range": [
+                205,
+                206
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                222,
+                223
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 4
+                },
+                "end": {
+                    "line": 6,
+                    "column": 5
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                223,
+                224
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 5
+                },
+                "end": {
+                    "line": 6,
+                    "column": 6
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                224,
+                225
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 6
+                },
+                "end": {
+                    "line": 6,
+                    "column": 7
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                225,
+                230
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 7
+                },
+                "end": {
+                    "line": 7,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                230,
+                247
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 4
+                },
+                "end": {
+                    "line": 7,
+                    "column": 21
+                }
+            },
+            "value": "background-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                247,
+                248
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 21
+                },
+                "end": {
+                    "line": 7,
+                    "column": 22
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                248,
+                254
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 22
+                },
+                "end": {
+                    "line": 7,
+                    "column": 28
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                254,
+                255
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 28
+                },
+                "end": {
+                    "line": 7,
+                    "column": 29
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                257,
+                258
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 31
+                },
+                "end": {
+                    "line": 7,
+                    "column": 32
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Identifier",
+            "value": "background",
+            "start": 258,
+            "end": 268,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 32
+                },
+                "end": {
+                    "line": 7,
+                    "column": 42
+                }
+            },
+            "range": [
+                258,
+                268
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 268,
+            "end": 269,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 42
+                },
+                "end": {
+                    "line": 7,
+                    "column": 43
+                }
+            },
+            "range": [
+                268,
+                269
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 283,
+            "end": 288,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 57
+                },
+                "end": {
+                    "line": 7,
+                    "column": 62
+                }
+            },
+            "range": [
+                283,
+                288
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                302,
+                303
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 76
+                },
+                "end": {
+                    "line": 7,
+                    "column": 77
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                308,
+                309
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 4
+                },
+                "end": {
+                    "line": 8,
+                    "column": 5
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                309,
+                310
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 5
+                },
+                "end": {
+                    "line": 8,
+                    "column": 6
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                310,
+                313
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 6
+                },
+                "end": {
+                    "line": 9,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                313,
+                314
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 2
+                },
+                "end": {
+                    "line": 9,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                314,
+                315
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 3
+                },
+                "end": {
+                    "line": 10,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                315,
+                322
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 0
+                },
+                "end": {
+                    "line": 10,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                322,
+                323
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 7
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                323,
+                324
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 8
+                },
+                "end": {
+                    "line": 11,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [
+        {
+            "type": "Block",
+            "value": " comment1 ",
+            "start": 43,
+            "end": 57,
+            "range": [
+                43,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 26
+                },
+                "end": {
+                    "line": 3,
+                    "column": 40
+                }
+            }
+        },
+        {
+            "type": "Block",
+            "range": [
+                84,
+                98
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 23
+                },
+                "end": {
+                    "line": 4,
+                    "column": 37
+                }
+            },
+            "value": " comment2 "
+        },
+        {
+            "type": "Block",
+            "range": [
+                112,
+                126
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 51
+                },
+                "end": {
+                    "line": 4,
+                    "column": 65
+                }
+            },
+            "value": " comment3 "
+        },
+        {
+            "type": "Line",
+            "value": " comment4",
+            "start": 206,
+            "end": 217,
+            "range": [
+                206,
+                217
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 43
+                },
+                "end": {
+                    "line": 5,
+                    "column": 54
+                }
+            }
+        },
+        {
+            "type": "Block",
+            "value": "comment5",
+            "start": 270,
+            "end": 282,
+            "range": [
+                270,
+                282
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 44
+                },
+                "end": {
+                    "line": 7,
+                    "column": 56
+                }
+            }
+        },
+        {
+            "type": "Block",
+            "value": "comment6",
+            "start": 289,
+            "end": 301,
+            "range": [
+                289,
+                301
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 63
+                },
+                "end": {
+                    "line": 7,
+                    "column": 75
+                }
+            }
+        }
+    ],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/source.vue b/test/fixtures/document-fragment/style-variables-edge-cases/source.vue
new file mode 100644
index 00000000..e7a0b9a4
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/source.vue
@@ -0,0 +1,10 @@
+<style>
+  .text{
+    color: v-bind(  color /* comment1 */ );
+    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */
+    border-color: v-bind(  "border('color')// comment4
+    ");
+    background-color: v-bind(  "background. /*comment5*/ color /*comment6*/ "
+    );
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json b/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
new file mode 100644
index 00000000..07dcd8ca
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
@@ -0,0 +1,79 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n    ",
+    "font-size:",
+    " ",
+    "v-bind",
+    "(",
+    "'",
+    "font",
+    ".",
+    "size",
+    "'",
+    ")",
+    ";",
+    " ",
+    "/*",
+    " ",
+    "vue",
+    " ",
+    "3.1",
+    " ",
+    "may",
+    " ",
+    "not",
+    " ",
+    "work",
+    " ",
+    "well.",
+    " ",
+    "*/",
+    "\n    ",
+    "border-color:",
+    " ",
+    "v-bind",
+    "(",
+    "\"",
+    "border",
+    "(",
+    "'color'",
+    ")",
+    "\"",
+    ")",
+    ";",
+    "\n    ",
+    "background-color:",
+    " ",
+    "v-bind",
+    "(",
+    "\"",
+    "background",
+    ".",
+    "color",
+    "\"",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n",
+    "/* comment1 */",
+    "/* comment2 */",
+    "/* comment3 */",
+    "// comment4",
+    "/*comment5*/",
+    "/*comment6*/"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/tree.json b/test/fixtures/document-fragment/style-variables-edge-cases/tree.json
new file mode 100644
index 00000000..3c4ffbe6
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/tree.json
@@ -0,0 +1,131 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  color /* comment1 */ )",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n    font-size: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind( /* comment2 */ 'font.size'  /* comment3 */ )",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "font.size",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "font",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "size",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "; /* vue 3.1 may not work well. */\n    border-color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  \"border('color')// comment4\n    \")",
+                        "children": [
+                            {
+                                "type": "CallExpression",
+                                "text": "border('color')",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "border",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'color'",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n    background-color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    )",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "background. /*comment5*/ color",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "background",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "color",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json b/test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json
new file mode 100644
index 00000000..ff952fa5
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json
@@ -0,0 +1,1209 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        208
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 13,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "name": "script",
+            "rawName": "script",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    14
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 14
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            8,
+                            13
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 1,
+                                "column": 8
+                            },
+                            "end": {
+                                "line": 1,
+                                "column": 13
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                8,
+                                13
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 1,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 1,
+                                    "column": 13
+                                }
+                            },
+                            "name": "setup",
+                            "rawName": "setup"
+                        },
+                        "value": null
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        14,
+                        37
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  const color = 'red'\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    37,
+                    46
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 9
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                46,
+                48
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                48,
+                207
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    48,
+                    67
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 19
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            55,
+                            66
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 5,
+                                "column": 7
+                            },
+                            "end": {
+                                "line": 5,
+                                "column": 18
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                55,
+                                59
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 5,
+                                    "column": 7
+                                },
+                                "end": {
+                                    "line": 5,
+                                    "column": 11
+                                }
+                            },
+                            "name": "lang",
+                            "rawName": "lang"
+                        },
+                        "value": {
+                            "type": "VLiteral",
+                            "range": [
+                                60,
+                                66
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 5,
+                                    "column": 12
+                                },
+                                "end": {
+                                    "line": 5,
+                                    "column": 18
+                                }
+                            },
+                            "value": "scss"
+                        }
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        67,
+                        199
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  .v-bind .color {\n    color: 'v-bind(color)';\n    background-color: 'v-bind(color)';\n  }\n  /* v-bind(color) */\n  // v-bind(color)\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    199,
+                    207
+                ],
+                "loc": {
+                    "start": {
+                        "line": 12,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 12,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                207,
+                208
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 13,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                8,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 8
+                },
+                "end": {
+                    "line": 1,
+                    "column": 13
+                }
+            },
+            "value": "setup"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                13,
+                14
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 13
+                },
+                "end": {
+                    "line": 1,
+                    "column": 14
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                14,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 14
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                17,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 7
+                }
+            },
+            "value": "const"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                22,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                23,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 2,
+                    "column": 13
+                }
+            },
+            "value": "color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                28,
+                29
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 13
+                },
+                "end": {
+                    "line": 2,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                29,
+                30
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 14
+                },
+                "end": {
+                    "line": 2,
+                    "column": 15
+                }
+            },
+            "value": "="
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                30,
+                31
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 15
+                },
+                "end": {
+                    "line": 2,
+                    "column": 16
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                31,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 16
+                },
+                "end": {
+                    "line": 2,
+                    "column": 21
+                }
+            },
+            "value": "'red'"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                36,
+                37
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 21
+                },
+                "end": {
+                    "line": 3,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                37,
+                45
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 8
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                45,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                46,
+                48
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                48,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                55,
+                59
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 11
+                }
+            },
+            "value": "lang"
+        },
+        {
+            "type": "HTMLAssociation",
+            "range": [
+                59,
+                60
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 11
+                },
+                "end": {
+                    "line": 5,
+                    "column": 12
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLLiteral",
+            "range": [
+                60,
+                66
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 12
+                },
+                "end": {
+                    "line": 5,
+                    "column": 18
+                }
+            },
+            "value": "scss"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                66,
+                67
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 18
+                },
+                "end": {
+                    "line": 5,
+                    "column": 19
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                67,
+                70
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 19
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                70,
+                77
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 9
+                }
+            },
+            "value": ".v-bind"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                77,
+                78
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 10
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                78,
+                84
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 10
+                },
+                "end": {
+                    "line": 6,
+                    "column": 16
+                }
+            },
+            "value": ".color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                84,
+                85
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 16
+                },
+                "end": {
+                    "line": 6,
+                    "column": 17
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                85,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 17
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                86,
+                91
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 7,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                91,
+                97
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 4
+                },
+                "end": {
+                    "line": 7,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                97,
+                98
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 10
+                },
+                "end": {
+                    "line": 7,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                98,
+                114
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 11
+                },
+                "end": {
+                    "line": 7,
+                    "column": 27
+                }
+            },
+            "value": "'v-bind(color)';"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                114,
+                119
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 27
+                },
+                "end": {
+                    "line": 8,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                119,
+                136
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 4
+                },
+                "end": {
+                    "line": 8,
+                    "column": 21
+                }
+            },
+            "value": "background-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                136,
+                137
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 21
+                },
+                "end": {
+                    "line": 8,
+                    "column": 22
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                137,
+                153
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 22
+                },
+                "end": {
+                    "line": 8,
+                    "column": 38
+                }
+            },
+            "value": "'v-bind(color)';"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                153,
+                156
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 38
+                },
+                "end": {
+                    "line": 9,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                156,
+                157
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 2
+                },
+                "end": {
+                    "line": 9,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                157,
+                160
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 3
+                },
+                "end": {
+                    "line": 10,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                160,
+                162
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 2
+                },
+                "end": {
+                    "line": 10,
+                    "column": 4
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                162,
+                163
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 4
+                },
+                "end": {
+                    "line": 10,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                163,
+                176
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 5
+                },
+                "end": {
+                    "line": 10,
+                    "column": 18
+                }
+            },
+            "value": "v-bind(color)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                176,
+                177
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 18
+                },
+                "end": {
+                    "line": 10,
+                    "column": 19
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                177,
+                179
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 19
+                },
+                "end": {
+                    "line": 10,
+                    "column": 21
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                179,
+                182
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 21
+                },
+                "end": {
+                    "line": 11,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                182,
+                184
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 2
+                },
+                "end": {
+                    "line": 11,
+                    "column": 4
+                }
+            },
+            "value": "//"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                184,
+                185
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 4
+                },
+                "end": {
+                    "line": 11,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                185,
+                198
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 5
+                },
+                "end": {
+                    "line": 11,
+                    "column": 18
+                }
+            },
+            "value": "v-bind(color)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                198,
+                199
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 18
+                },
+                "end": {
+                    "line": 12,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                199,
+                206
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 0
+                },
+                "end": {
+                    "line": 12,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                206,
+                207
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 7
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                207,
+                208
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 13,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores01/source.vue b/test/fixtures/document-fragment/style-variables-ignores01/source.vue
new file mode 100644
index 00000000..ac9b8e4b
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores01/source.vue
@@ -0,0 +1,12 @@
+<script setup>
+  const color = 'red'
+</script>
+
+<style lang="scss">
+  .v-bind .color {
+    color: 'v-bind(color)';
+    background-color: 'v-bind(color)';
+  }
+  /* v-bind(color) */
+  // v-bind(color)
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json b/test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json
new file mode 100644
index 00000000..353a19fb
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json
@@ -0,0 +1,52 @@
+[
+    "<script",
+    "setup",
+    ">",
+    "\n  ",
+    "const",
+    " ",
+    "color",
+    " ",
+    "=",
+    " ",
+    "'red'",
+    "\n",
+    "</script",
+    ">",
+    "\n\n",
+    "<style",
+    "lang",
+    "=",
+    "\"scss\"",
+    ">",
+    "\n  ",
+    ".v-bind",
+    " ",
+    ".color",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "'v-bind(color)';",
+    "\n    ",
+    "background-color:",
+    " ",
+    "'v-bind(color)';",
+    "\n  ",
+    "}",
+    "\n  ",
+    "/*",
+    " ",
+    "v-bind(color)",
+    " ",
+    "*/",
+    "\n  ",
+    "//",
+    " ",
+    "v-bind(color)",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores01/tree.json b/test/fixtures/document-fragment/style-variables-ignores01/tree.json
new file mode 100644
index 00000000..e64cf346
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores01/tree.json
@@ -0,0 +1,89 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<script setup>\n  const color = 'red'\n</script>\n\n<style lang=\"scss\">\n  .v-bind .color {\n    color: 'v-bind(color)';\n    background-color: 'v-bind(color)';\n  }\n  /* v-bind(color) */\n  // v-bind(color)\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<script setup>\n  const color = 'red'\n</script>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<script setup>",
+                        "children": [
+                            {
+                                "type": "VAttribute",
+                                "text": "setup",
+                                "children": [
+                                    {
+                                        "type": "VIdentifier",
+                                        "text": "setup",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  const color = 'red'\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</script>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<style lang=\"scss\">\n  .v-bind .color {\n    color: 'v-bind(color)';\n    background-color: 'v-bind(color)';\n  }\n  /* v-bind(color) */\n  // v-bind(color)\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style lang=\"scss\">",
+                        "children": [
+                            {
+                                "type": "VAttribute",
+                                "text": "lang=\"scss\"",
+                                "children": [
+                                    {
+                                        "type": "VIdentifier",
+                                        "text": "lang",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "VLiteral",
+                                        "text": "\"scss\"",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .v-bind .color {\n    color: 'v-bind(color)';\n    background-color: 'v-bind(color)';\n  }\n  /* v-bind(color) */\n  // v-bind(color)\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json b/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
new file mode 100644
index 00000000..91952fba
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
@@ -0,0 +1,2176 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        365
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 19,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                364
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 18,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    19
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 19
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            7,
+                            18
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 1,
+                                "column": 7
+                            },
+                            "end": {
+                                "line": 1,
+                                "column": 18
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                7,
+                                11
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 1,
+                                    "column": 7
+                                },
+                                "end": {
+                                    "line": 1,
+                                    "column": 11
+                                }
+                            },
+                            "name": "lang",
+                            "rawName": "lang"
+                        },
+                        "value": {
+                            "type": "VLiteral",
+                            "range": [
+                                12,
+                                18
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 1,
+                                    "column": 12
+                                },
+                                "end": {
+                                    "line": 1,
+                                    "column": 18
+                                }
+                            },
+                            "value": "scss"
+                        }
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        19,
+                        40
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        40,
+                        53
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 24
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 47,
+                        "end": 52,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 18
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 23
+                            }
+                        },
+                        "range": [
+                            47,
+                            52
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 47,
+                                "end": 52,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    47,
+                                    52
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        53,
+                        79
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 11
+                        }
+                    },
+                    "value": ";\n  }\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        79,
+                        99
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 31
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 87,
+                        "end": 97,
+                        "loc": {
+                            "start": {
+                                "line": 6,
+                                "column": 19
+                            },
+                            "end": {
+                                "line": 6,
+                                "column": 29
+                            }
+                        },
+                        "range": [
+                            87,
+                            97
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 87,
+                            "end": 93,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 19
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 25
+                                }
+                            },
+                            "range": [
+                                87,
+                                93
+                            ],
+                            "name": "colors"
+                        },
+                        "property": {
+                            "type": "Literal",
+                            "start": 94,
+                            "end": 96,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 26
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 28
+                                }
+                            },
+                            "range": [
+                                94,
+                                96
+                            ],
+                            "value": 42,
+                            "raw": "42"
+                        },
+                        "computed": true
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 87,
+                                "end": 93,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 19
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 25
+                                    }
+                                },
+                                "range": [
+                                    87,
+                                    93
+                                ],
+                                "name": "colors"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        99,
+                        125
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 11
+                        }
+                    },
+                    "value": ";\n  }\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        125,
+                        145
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 31
+                        }
+                    },
+                    "expression": {
+                        "type": "CallExpression",
+                        "start": 133,
+                        "end": 143,
+                        "loc": {
+                            "start": {
+                                "line": 9,
+                                "column": 19
+                            },
+                            "end": {
+                                "line": 9,
+                                "column": 29
+                            }
+                        },
+                        "range": [
+                            133,
+                            143
+                        ],
+                        "callee": {
+                            "type": "Identifier",
+                            "start": 133,
+                            "end": 141,
+                            "loc": {
+                                "start": {
+                                    "line": 9,
+                                    "column": 19
+                                },
+                                "end": {
+                                    "line": 9,
+                                    "column": 27
+                                }
+                            },
+                            "range": [
+                                133,
+                                141
+                            ],
+                            "name": "getColor"
+                        },
+                        "arguments": []
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 133,
+                                "end": 141,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 19
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    133,
+                                    141
+                                ],
+                                "name": "getColor"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        145,
+                        337
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 15
+                        }
+                    },
+                    "value": ";\n  }\n  .str-and-comments{\n    content: \"v-bind('getColor()')\";\n    content: \"v-bind('getColor()')\\\"v-bind(color)\";\n    // color: v-bind(color);\n    /* color: v-bind(color); */\n    color: /**/"
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        337,
+                        350
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 28
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 344,
+                        "end": 349,
+                        "loc": {
+                            "start": {
+                                "line": 16,
+                                "column": 22
+                            },
+                            "end": {
+                                "line": 16,
+                                "column": 27
+                            }
+                        },
+                        "range": [
+                            344,
+                            349
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 344,
+                                "end": 349,
+                                "loc": {
+                                    "start": {
+                                        "line": 16,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 16,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    344,
+                                    349
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        350,
+                        356
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    356,
+                    364
+                ],
+                "loc": {
+                    "start": {
+                        "line": 18,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 18,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                364,
+                365
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 8
+                },
+                "end": {
+                    "line": 19,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                7,
+                11
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 1,
+                    "column": 11
+                }
+            },
+            "value": "lang"
+        },
+        {
+            "type": "HTMLAssociation",
+            "range": [
+                11,
+                12
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 11
+                },
+                "end": {
+                    "line": 1,
+                    "column": 12
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLLiteral",
+            "range": [
+                12,
+                18
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 12
+                },
+                "end": {
+                    "line": 1,
+                    "column": 18
+                }
+            },
+            "value": "scss"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                18,
+                19
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 18
+                },
+                "end": {
+                    "line": 1,
+                    "column": 19
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                19,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 19
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                22,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                28,
+                33
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                33,
+                39
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                39,
+                40
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                40,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                46,
+                47
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 47,
+            "end": 52,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 18
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "range": [
+                47,
+                52
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                52,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 23
+                },
+                "end": {
+                    "line": 3,
+                    "column": 24
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                53,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                54,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 25
+                },
+                "end": {
+                    "line": 4,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                57,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 2
+                },
+                "end": {
+                    "line": 4,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                58,
+                61
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 3
+                },
+                "end": {
+                    "line": 5,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                61,
+                67
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 2
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                67,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                72,
+                78
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 4
+                },
+                "end": {
+                    "line": 6,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                78,
+                79
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 10
+                },
+                "end": {
+                    "line": 6,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                79,
+                85
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 11
+                },
+                "end": {
+                    "line": 6,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                85,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 17
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                86,
+                87
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 6,
+                    "column": 19
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Identifier",
+            "value": "colors",
+            "start": 87,
+            "end": 93,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 19
+                },
+                "end": {
+                    "line": 6,
+                    "column": 25
+                }
+            },
+            "range": [
+                87,
+                93
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "[",
+            "start": 93,
+            "end": 94,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 25
+                },
+                "end": {
+                    "line": 6,
+                    "column": 26
+                }
+            },
+            "range": [
+                93,
+                94
+            ]
+        },
+        {
+            "type": "Numeric",
+            "value": "42",
+            "start": 94,
+            "end": 96,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 26
+                },
+                "end": {
+                    "line": 6,
+                    "column": 28
+                }
+            },
+            "range": [
+                94,
+                96
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "]",
+            "start": 96,
+            "end": 97,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 28
+                },
+                "end": {
+                    "line": 6,
+                    "column": 29
+                }
+            },
+            "range": [
+                96,
+                97
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                97,
+                98
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 29
+                },
+                "end": {
+                    "line": 6,
+                    "column": 30
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                98,
+                99
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 30
+                },
+                "end": {
+                    "line": 6,
+                    "column": 31
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                99,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 31
+                },
+                "end": {
+                    "line": 6,
+                    "column": 32
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                100,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 32
+                },
+                "end": {
+                    "line": 7,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                103,
+                104
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 2
+                },
+                "end": {
+                    "line": 7,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                104,
+                107
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 3
+                },
+                "end": {
+                    "line": 8,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                107,
+                113
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 2
+                },
+                "end": {
+                    "line": 8,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                113,
+                118
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                118,
+                124
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 4
+                },
+                "end": {
+                    "line": 9,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                124,
+                125
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 10
+                },
+                "end": {
+                    "line": 9,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                125,
+                131
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 11
+                },
+                "end": {
+                    "line": 9,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                131,
+                132
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 17
+                },
+                "end": {
+                    "line": 9,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                132,
+                133
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 18
+                },
+                "end": {
+                    "line": 9,
+                    "column": 19
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Identifier",
+            "value": "getColor",
+            "start": 133,
+            "end": 141,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 19
+                },
+                "end": {
+                    "line": 9,
+                    "column": 27
+                }
+            },
+            "range": [
+                133,
+                141
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 141,
+            "end": 142,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 27
+                },
+                "end": {
+                    "line": 9,
+                    "column": 28
+                }
+            },
+            "range": [
+                141,
+                142
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 142,
+            "end": 143,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 28
+                },
+                "end": {
+                    "line": 9,
+                    "column": 29
+                }
+            },
+            "range": [
+                142,
+                143
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                143,
+                144
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 29
+                },
+                "end": {
+                    "line": 9,
+                    "column": 30
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                144,
+                145
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 30
+                },
+                "end": {
+                    "line": 9,
+                    "column": 31
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                145,
+                146
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 31
+                },
+                "end": {
+                    "line": 9,
+                    "column": 32
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                146,
+                149
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 32
+                },
+                "end": {
+                    "line": 10,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                149,
+                150
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 2
+                },
+                "end": {
+                    "line": 10,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                150,
+                153
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 3
+                },
+                "end": {
+                    "line": 11,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                153,
+                171
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 2
+                },
+                "end": {
+                    "line": 11,
+                    "column": 20
+                }
+            },
+            "value": ".str-and-comments{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                171,
+                176
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 20
+                },
+                "end": {
+                    "line": 12,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                176,
+                184
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 4
+                },
+                "end": {
+                    "line": 12,
+                    "column": 12
+                }
+            },
+            "value": "content:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                184,
+                185
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 12
+                },
+                "end": {
+                    "line": 12,
+                    "column": 13
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                185,
+                208
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 13
+                },
+                "end": {
+                    "line": 12,
+                    "column": 36
+                }
+            },
+            "value": "\"v-bind('getColor()')\";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                208,
+                213
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 36
+                },
+                "end": {
+                    "line": 13,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                213,
+                221
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 4
+                },
+                "end": {
+                    "line": 13,
+                    "column": 12
+                }
+            },
+            "value": "content:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                221,
+                222
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 12
+                },
+                "end": {
+                    "line": 13,
+                    "column": 13
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                222,
+                260
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 13
+                },
+                "end": {
+                    "line": 13,
+                    "column": 51
+                }
+            },
+            "value": "\"v-bind('getColor()')\\\"v-bind(color)\";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                260,
+                265
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 51
+                },
+                "end": {
+                    "line": 14,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                265,
+                267
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 4
+                },
+                "end": {
+                    "line": 14,
+                    "column": 6
+                }
+            },
+            "value": "//"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                267,
+                268
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 6
+                },
+                "end": {
+                    "line": 14,
+                    "column": 7
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                268,
+                274
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 7
+                },
+                "end": {
+                    "line": 14,
+                    "column": 13
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                274,
+                275
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 13
+                },
+                "end": {
+                    "line": 14,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                275,
+                289
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 14
+                },
+                "end": {
+                    "line": 14,
+                    "column": 28
+                }
+            },
+            "value": "v-bind(color);"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                289,
+                294
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 28
+                },
+                "end": {
+                    "line": 15,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                294,
+                296
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 4
+                },
+                "end": {
+                    "line": 15,
+                    "column": 6
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                296,
+                297
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 6
+                },
+                "end": {
+                    "line": 15,
+                    "column": 7
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                297,
+                303
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 7
+                },
+                "end": {
+                    "line": 15,
+                    "column": 13
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                303,
+                304
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 13
+                },
+                "end": {
+                    "line": 15,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                304,
+                318
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 14
+                },
+                "end": {
+                    "line": 15,
+                    "column": 28
+                }
+            },
+            "value": "v-bind(color);"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                318,
+                319
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 28
+                },
+                "end": {
+                    "line": 15,
+                    "column": 29
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                319,
+                321
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 29
+                },
+                "end": {
+                    "line": 15,
+                    "column": 31
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                321,
+                326
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 31
+                },
+                "end": {
+                    "line": 16,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                326,
+                332
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 4
+                },
+                "end": {
+                    "line": 16,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                332,
+                333
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 10
+                },
+                "end": {
+                    "line": 16,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                333,
+                337
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 11
+                },
+                "end": {
+                    "line": 16,
+                    "column": 15
+                }
+            },
+            "value": "/**/"
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                337,
+                343
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 15
+                },
+                "end": {
+                    "line": 16,
+                    "column": 21
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                343,
+                344
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 21
+                },
+                "end": {
+                    "line": 16,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 344,
+            "end": 349,
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 22
+                },
+                "end": {
+                    "line": 16,
+                    "column": 27
+                }
+            },
+            "range": [
+                344,
+                349
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                349,
+                350
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 27
+                },
+                "end": {
+                    "line": 16,
+                    "column": 28
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                350,
+                351
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 28
+                },
+                "end": {
+                    "line": 16,
+                    "column": 29
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                351,
+                354
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 29
+                },
+                "end": {
+                    "line": 17,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                354,
+                355
+            ],
+            "loc": {
+                "start": {
+                    "line": 17,
+                    "column": 2
+                },
+                "end": {
+                    "line": 17,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                355,
+                356
+            ],
+            "loc": {
+                "start": {
+                    "line": 17,
+                    "column": 3
+                },
+                "end": {
+                    "line": 18,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                356,
+                363
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 0
+                },
+                "end": {
+                    "line": 18,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                363,
+                364
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 7
+                },
+                "end": {
+                    "line": 18,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                364,
+                365
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 8
+                },
+                "end": {
+                    "line": 19,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores02/source.vue b/test/fixtures/document-fragment/style-variables-ignores02/source.vue
new file mode 100644
index 00000000..70c9f9fd
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores02/source.vue
@@ -0,0 +1,18 @@
+<style lang="scss">
+  .text{
+    color: v-bind(color);
+  }
+  .text{
+    color: v-bind("colors[42]");
+  }
+  .text{
+    color: v-bind('getColor()');
+  }
+  .str-and-comments{
+    content: "v-bind('getColor()')";
+    content: "v-bind('getColor()')\"v-bind(color)";
+    // color: v-bind(color);
+    /* color: v-bind(color); */
+    color: /**/v-bind(color);
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-ignores02/token-ranges.json b/test/fixtures/document-fragment/style-variables-ignores02/token-ranges.json
new file mode 100644
index 00000000..2faa5238
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores02/token-ranges.json
@@ -0,0 +1,91 @@
+[
+    "<style",
+    "lang",
+    "=",
+    "\"scss\"",
+    ">",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "\"",
+    "colors",
+    "[",
+    "42",
+    "]",
+    "\"",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "'",
+    "getColor",
+    "(",
+    ")",
+    "'",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n  ",
+    ".str-and-comments{",
+    "\n    ",
+    "content:",
+    " ",
+    "\"v-bind('getColor()')\";",
+    "\n    ",
+    "content:",
+    " ",
+    "\"v-bind('getColor()')\\\"v-bind(color)\";",
+    "\n    ",
+    "//",
+    " ",
+    "color:",
+    " ",
+    "v-bind(color);",
+    "\n    ",
+    "/*",
+    " ",
+    "color:",
+    " ",
+    "v-bind(color);",
+    " ",
+    "*/",
+    "\n    ",
+    "color:",
+    " ",
+    "/**/",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-ignores02/tree.json b/test/fixtures/document-fragment/style-variables-ignores02/tree.json
new file mode 100644
index 00000000..58e58424
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-ignores02/tree.json
@@ -0,0 +1,132 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style lang=\"scss\">\n  .text{\n    color: v-bind(color);\n  }\n  .text{\n    color: v-bind(\"colors[42]\");\n  }\n  .text{\n    color: v-bind('getColor()');\n  }\n  .str-and-comments{\n    content: \"v-bind('getColor()')\";\n    content: \"v-bind('getColor()')\\\"v-bind(color)\";\n    // color: v-bind(color);\n    /* color: v-bind(color); */\n    color: /**/v-bind(color);\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style lang=\"scss\">\n  .text{\n    color: v-bind(color);\n  }\n  .text{\n    color: v-bind(\"colors[42]\");\n  }\n  .text{\n    color: v-bind('getColor()');\n  }\n  .str-and-comments{\n    content: \"v-bind('getColor()')\";\n    content: \"v-bind('getColor()')\\\"v-bind(color)\";\n    // color: v-bind(color);\n    /* color: v-bind(color); */\n    color: /**/v-bind(color);\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style lang=\"scss\">",
+                        "children": [
+                            {
+                                "type": "VAttribute",
+                                "text": "lang=\"scss\"",
+                                "children": [
+                                    {
+                                        "type": "VIdentifier",
+                                        "text": "lang",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "VLiteral",
+                                        "text": "\"scss\"",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(\"colors[42]\")",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "colors[42]",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "colors",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "42",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind('getColor()')",
+                        "children": [
+                            {
+                                "type": "CallExpression",
+                                "text": "getColor()",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "getColor",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n  .str-and-comments{\n    content: \"v-bind('getColor()')\";\n    content: \"v-bind('getColor()')\\\"v-bind(color)\";\n    // color: v-bind(color);\n    /* color: v-bind(color); */\n    color: /**/",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json b/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
new file mode 100644
index 00000000..c9f02bee
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
@@ -0,0 +1,1037 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        117
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 10,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "name": "script",
+            "rawName": "script",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    14
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 14
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            8,
+                            13
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 1,
+                                "column": 8
+                            },
+                            "end": {
+                                "line": 1,
+                                "column": 13
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                8,
+                                13
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 1,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 1,
+                                    "column": 13
+                                }
+                            },
+                            "name": "setup",
+                            "rawName": "setup"
+                        },
+                        "value": null
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        14,
+                        37
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  const color = 'red'\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    37,
+                    46
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 9
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                46,
+                48
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                48,
+                116
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    48,
+                    55
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        55,
+                        89
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 14
+                        }
+                    },
+                    "value": "\n  .v-bind .color {\n    color: // "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        89,
+                        102
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 27
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 96,
+                        "end": 101,
+                        "loc": {
+                            "start": {
+                                "line": 7,
+                                "column": 21
+                            },
+                            "end": {
+                                "line": 7,
+                                "column": 26
+                            }
+                        },
+                        "range": [
+                            96,
+                            101
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 96,
+                                "end": 101,
+                                "loc": {
+                                    "start": {
+                                        "line": 7,
+                                        "column": 21
+                                    },
+                                    "end": {
+                                        "line": 7,
+                                        "column": 26
+                                    }
+                                },
+                                "range": [
+                                    96,
+                                    101
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        102,
+                        108
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 27
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    108,
+                    116
+                ],
+                "loc": {
+                    "start": {
+                        "line": 9,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 9,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                116,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 10,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                8,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 8
+                },
+                "end": {
+                    "line": 1,
+                    "column": 13
+                }
+            },
+            "value": "setup"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                13,
+                14
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 13
+                },
+                "end": {
+                    "line": 1,
+                    "column": 14
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                14,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 14
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                17,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 7
+                }
+            },
+            "value": "const"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                22,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                23,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 2,
+                    "column": 13
+                }
+            },
+            "value": "color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                28,
+                29
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 13
+                },
+                "end": {
+                    "line": 2,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                29,
+                30
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 14
+                },
+                "end": {
+                    "line": 2,
+                    "column": 15
+                }
+            },
+            "value": "="
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                30,
+                31
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 15
+                },
+                "end": {
+                    "line": 2,
+                    "column": 16
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                31,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 16
+                },
+                "end": {
+                    "line": 2,
+                    "column": 21
+                }
+            },
+            "value": "'red'"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                36,
+                37
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 21
+                },
+                "end": {
+                    "line": 3,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                37,
+                45
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 8
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                45,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                46,
+                48
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                48,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                54,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 6
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                55,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                58,
+                65
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 9
+                }
+            },
+            "value": ".v-bind"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                65,
+                66
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 10
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                66,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 10
+                },
+                "end": {
+                    "line": 6,
+                    "column": 16
+                }
+            },
+            "value": ".color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                72,
+                73
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 16
+                },
+                "end": {
+                    "line": 6,
+                    "column": 17
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                73,
+                74
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 17
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                74,
+                79
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 7,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                79,
+                85
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 4
+                },
+                "end": {
+                    "line": 7,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                85,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 10
+                },
+                "end": {
+                    "line": 7,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                86,
+                88
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 11
+                },
+                "end": {
+                    "line": 7,
+                    "column": 13
+                }
+            },
+            "value": "//"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                88,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 13
+                },
+                "end": {
+                    "line": 7,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                89,
+                95
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 14
+                },
+                "end": {
+                    "line": 7,
+                    "column": 20
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                95,
+                96
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 20
+                },
+                "end": {
+                    "line": 7,
+                    "column": 21
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 96,
+            "end": 101,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 21
+                },
+                "end": {
+                    "line": 7,
+                    "column": 26
+                }
+            },
+            "range": [
+                96,
+                101
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                101,
+                102
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 26
+                },
+                "end": {
+                    "line": 7,
+                    "column": 27
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                102,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 27
+                },
+                "end": {
+                    "line": 7,
+                    "column": 28
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                103,
+                106
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 28
+                },
+                "end": {
+                    "line": 8,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                106,
+                107
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 2
+                },
+                "end": {
+                    "line": 8,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                107,
+                108
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 3
+                },
+                "end": {
+                    "line": 9,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                108,
+                115
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 0
+                },
+                "end": {
+                    "line": 9,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                115,
+                116
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 7
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                116,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 10,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-inline-comment-like/source.vue b/test/fixtures/document-fragment/style-variables-inline-comment-like/source.vue
new file mode 100644
index 00000000..d2278e0e
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-inline-comment-like/source.vue
@@ -0,0 +1,9 @@
+<script setup>
+  const color = 'red'
+</script>
+
+<style>
+  .v-bind .color {
+    color: // v-bind(color);
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-inline-comment-like/token-ranges.json b/test/fixtures/document-fragment/style-variables-inline-comment-like/token-ranges.json
new file mode 100644
index 00000000..c4a25866
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-inline-comment-like/token-ranges.json
@@ -0,0 +1,41 @@
+[
+    "<script",
+    "setup",
+    ">",
+    "\n  ",
+    "const",
+    " ",
+    "color",
+    " ",
+    "=",
+    " ",
+    "'red'",
+    "\n",
+    "</script",
+    ">",
+    "\n\n",
+    "<style",
+    ">",
+    "\n  ",
+    ".v-bind",
+    " ",
+    ".color",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "//",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-inline-comment-like/tree.json b/test/fixtures/document-fragment/style-variables-inline-comment-like/tree.json
new file mode 100644
index 00000000..bf090868
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-inline-comment-like/tree.json
@@ -0,0 +1,88 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<script setup>\n  const color = 'red'\n</script>\n\n<style>\n  .v-bind .color {\n    color: // v-bind(color);\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<script setup>\n  const color = 'red'\n</script>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<script setup>",
+                        "children": [
+                            {
+                                "type": "VAttribute",
+                                "text": "setup",
+                                "children": [
+                                    {
+                                        "type": "VIdentifier",
+                                        "text": "setup",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  const color = 'red'\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</script>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<style>\n  .v-bind .color {\n    color: // v-bind(color);\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .v-bind .color {\n    color: // ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
new file mode 100644
index 00000000..6df073da
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
@@ -0,0 +1,523 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        62
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 6,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                61
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        28
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        47
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 30
+                        }
+                    },
+                    "expression": null,
+                    "references": []
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        47,
+                        53
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 30
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    53,
+                    61
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                61,
+                62
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                16,
+                21
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                21,
+                27
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                27,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                34,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                35,
+                40
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 18
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "value": "color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                40,
+                41
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 23
+                },
+                "end": {
+                    "line": 3,
+                    "column": 24
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                41,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 3,
+                    "column": 29
+                }
+            },
+            "value": "error"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                46,
+                47
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 29
+                },
+                "end": {
+                    "line": 3,
+                    "column": 30
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                47,
+                48
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 30
+                },
+                "end": {
+                    "line": 3,
+                    "column": 31
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                48,
+                51
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 31
+                },
+                "end": {
+                    "line": 4,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                51,
+                52
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 2
+                },
+                "end": {
+                    "line": 4,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                52,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 3
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                53,
+                60
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                60,
+                61
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                61,
+                62
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": [
+        {
+            "message": "Unexpected token error",
+            "index": 41,
+            "lineNumber": 3,
+            "column": 24
+        }
+    ]
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-error/source.vue b/test/fixtures/document-fragment/style-variables-with-error/source.vue
new file mode 100644
index 00000000..de3885e9
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/source.vue
@@ -0,0 +1,5 @@
+<style>
+  .text{
+    color: v-bind(color error);
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json b/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
new file mode 100644
index 00000000..6cbaa046
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
@@ -0,0 +1,22 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    " ",
+    "error",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-error/tree.json b/test/fixtures/document-fragment/style-variables-with-error/tree.json
new file mode 100644
index 00000000..c71c59a5
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/tree.json
@@ -0,0 +1,44 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text{\n    color: v-bind(color error);\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text{\n    color: v-bind(color error);\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color error)",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-option-false/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-option-false/document-fragment.json
new file mode 100644
index 00000000..77177ca6
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-option-false/document-fragment.json
@@ -0,0 +1,3595 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        347
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 26,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "name": "template",
+            "rawName": "template",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    10
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 10
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        10,
+                        13
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "VElement",
+                    "range": [
+                        13,
+                        42
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 31
+                        }
+                    },
+                    "name": "div",
+                    "rawName": "div",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "startTag": {
+                        "type": "VStartTag",
+                        "range": [
+                            13,
+                            31
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 2,
+                                "column": 2
+                            },
+                            "end": {
+                                "line": 2,
+                                "column": 20
+                            }
+                        },
+                        "selfClosing": false,
+                        "attributes": [
+                            {
+                                "type": "VAttribute",
+                                "range": [
+                                    18,
+                                    30
+                                ],
+                                "loc": {
+                                    "start": {
+                                        "line": 2,
+                                        "column": 7
+                                    },
+                                    "end": {
+                                        "line": 2,
+                                        "column": 19
+                                    }
+                                },
+                                "directive": false,
+                                "key": {
+                                    "type": "VIdentifier",
+                                    "range": [
+                                        18,
+                                        23
+                                    ],
+                                    "loc": {
+                                        "start": {
+                                            "line": 2,
+                                            "column": 7
+                                        },
+                                        "end": {
+                                            "line": 2,
+                                            "column": 12
+                                        }
+                                    },
+                                    "name": "class",
+                                    "rawName": "class"
+                                },
+                                "value": {
+                                    "type": "VLiteral",
+                                    "range": [
+                                        24,
+                                        30
+                                    ],
+                                    "loc": {
+                                        "start": {
+                                            "line": 2,
+                                            "column": 13
+                                        },
+                                        "end": {
+                                            "line": 2,
+                                            "column": 19
+                                        }
+                                    },
+                                    "value": "text"
+                                }
+                            }
+                        ]
+                    },
+                    "children": [
+                        {
+                            "type": "VText",
+                            "range": [
+                                31,
+                                36
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 2,
+                                    "column": 20
+                                },
+                                "end": {
+                                    "line": 2,
+                                    "column": 25
+                                }
+                            },
+                            "value": "hello"
+                        }
+                    ],
+                    "endTag": {
+                        "type": "VEndTag",
+                        "range": [
+                            36,
+                            42
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 2,
+                                "column": 25
+                            },
+                            "end": {
+                                "line": 2,
+                                "column": 31
+                            }
+                        }
+                    },
+                    "variables": []
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        42,
+                        43
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    43,
+                    54
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 11
+                    }
+                }
+            },
+            "variables": [],
+            "tokens": [
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        0,
+                        9
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 9
+                        }
+                    },
+                    "value": "template"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        9,
+                        10
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 10
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        10,
+                        13
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        13,
+                        17
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 6
+                        }
+                    },
+                    "value": "div"
+                },
+                {
+                    "type": "HTMLIdentifier",
+                    "range": [
+                        18,
+                        23
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 12
+                        }
+                    },
+                    "value": "class"
+                },
+                {
+                    "type": "HTMLAssociation",
+                    "range": [
+                        23,
+                        24
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 13
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLLiteral",
+                    "range": [
+                        24,
+                        30
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 19
+                        }
+                    },
+                    "value": "text"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        30,
+                        31
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 20
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLText",
+                    "range": [
+                        31,
+                        36
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 20
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 25
+                        }
+                    },
+                    "value": "hello"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        36,
+                        41
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 30
+                        }
+                    },
+                    "value": "div"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        41,
+                        42
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 30
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 31
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        42,
+                        43
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        43,
+                        53
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 10
+                        }
+                    },
+                    "value": "template"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        53,
+                        54
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        54,
+                        56
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n\n"
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        56,
+                        63
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 7
+                        }
+                    },
+                    "value": "script"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        63,
+                        64
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 8
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        64,
+                        67
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        67,
+                        73
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 8
+                        }
+                    },
+                    "value": "export"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        73,
+                        74
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 9
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        74,
+                        81
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 16
+                        }
+                    },
+                    "value": "default"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        81,
+                        82
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 16
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 17
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        82,
+                        83
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 17
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 18
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        83,
+                        88
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        88,
+                        94
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 10
+                        }
+                    },
+                    "value": "data()"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        94,
+                        95
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 11
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        95,
+                        96
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 12
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        96,
+                        103
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 6
+                        }
+                    },
+                    "value": "\n      "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        103,
+                        109
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 12
+                        }
+                    },
+                    "value": "return"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        109,
+                        110
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 13
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        110,
+                        111
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 14
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        111,
+                        120
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        120,
+                        126
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 14
+                        }
+                    },
+                    "value": "color:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        126,
+                        127
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 15
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        127,
+                        133
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 21
+                        }
+                    },
+                    "value": "'red',"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        133,
+                        142
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 21
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        142,
+                        147
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 13
+                        }
+                    },
+                    "value": "font:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        147,
+                        148
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 14
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        148,
+                        149
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 15
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        149,
+                        160
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 10
+                        }
+                    },
+                    "value": "\n          "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        160,
+                        165
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 15
+                        }
+                    },
+                    "value": "size:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        165,
+                        166
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 16
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        166,
+                        172
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 16
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 22
+                        }
+                    },
+                    "value": "'2em',"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        172,
+                        181
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        181,
+                        183
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 12,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 10
+                        }
+                    },
+                    "value": "},"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        183,
+                        190
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 12,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 13,
+                            "column": 6
+                        }
+                    },
+                    "value": "\n      "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        190,
+                        191
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 13,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 13,
+                            "column": 7
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        191,
+                        196
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 13,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 14,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        196,
+                        198
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 14,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 14,
+                            "column": 6
+                        }
+                    },
+                    "value": "},"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        198,
+                        201
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 14,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 15,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        201,
+                        202
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 15,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 15,
+                            "column": 3
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        202,
+                        203
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 15,
+                            "column": 3
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        203,
+                        211
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 8
+                        }
+                    },
+                    "value": "script"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        211,
+                        212
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 9
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        212,
+                        214
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n\n"
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        214,
+                        220
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 6
+                        }
+                    },
+                    "value": "style"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        220,
+                        221
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 7
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        221,
+                        224
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        224,
+                        229
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 7
+                        }
+                    },
+                    "value": ".text"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        229,
+                        230
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 8
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        230,
+                        231
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 9
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        231,
+                        236
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        236,
+                        242
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 10
+                        }
+                    },
+                    "value": "color:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        242,
+                        243
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 11
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        243,
+                        257
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 25
+                        }
+                    },
+                    "value": "v-bind(color);"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        257,
+                        263
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        263,
+                        265
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 6
+                        }
+                    },
+                    "value": "/*"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        265,
+                        266
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 7
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        266,
+                        277
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 18
+                        }
+                    },
+                    "value": "expressions"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        277,
+                        278
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 19
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        278,
+                        283
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 24
+                        }
+                    },
+                    "value": "(wrap"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        283,
+                        284
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 25
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        284,
+                        286
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 27
+                        }
+                    },
+                    "value": "in"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        286,
+                        287
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 27
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 28
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        287,
+                        294
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 35
+                        }
+                    },
+                    "value": "quotes)"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        294,
+                        295
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 35
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 36
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        295,
+                        297
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 36
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 38
+                        }
+                    },
+                    "value": "*/"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        297,
+                        302
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 38
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        302,
+                        312
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 14
+                        }
+                    },
+                    "value": "font-size:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        312,
+                        313
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 15
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        313,
+                        333
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 35
+                        }
+                    },
+                    "value": "v-bind('font.size');"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        333,
+                        336
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 35
+                        },
+                        "end": {
+                            "line": 24,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        336,
+                        337
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 24,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 24,
+                            "column": 3
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        337,
+                        338
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 24,
+                            "column": 3
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        338,
+                        345
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 7
+                        }
+                    },
+                    "value": "style"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        345,
+                        346
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 8
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        346,
+                        347
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 26,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                }
+            ],
+            "comments": [],
+            "errors": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                54,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                56,
+                212
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 16,
+                    "column": 9
+                }
+            },
+            "name": "script",
+            "rawName": "script",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    56,
+                    64
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 8
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        64,
+                        203
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    203,
+                    212
+                ],
+                "loc": {
+                    "start": {
+                        "line": 16,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 16,
+                        "column": 9
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                212,
+                214
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 9
+                },
+                "end": {
+                    "line": 18,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                214,
+                346
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 0
+                },
+                "end": {
+                    "line": 25,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    214,
+                    221
+                ],
+                "loc": {
+                    "start": {
+                        "line": 18,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 18,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        221,
+                        338
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    338,
+                    346
+                ],
+                "loc": {
+                    "start": {
+                        "line": 25,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 25,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                346,
+                347
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 8
+                },
+                "end": {
+                    "line": 26,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                9
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 9
+                }
+            },
+            "value": "template"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                9,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 9
+                },
+                "end": {
+                    "line": 1,
+                    "column": 10
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                10,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 10
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                13,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 6
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                18,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 12
+                }
+            },
+            "value": "class"
+        },
+        {
+            "type": "HTMLAssociation",
+            "range": [
+                23,
+                24
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 12
+                },
+                "end": {
+                    "line": 2,
+                    "column": 13
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLLiteral",
+            "range": [
+                24,
+                30
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 13
+                },
+                "end": {
+                    "line": 2,
+                    "column": 19
+                }
+            },
+            "value": "text"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                30,
+                31
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 19
+                },
+                "end": {
+                    "line": 2,
+                    "column": 20
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                31,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 20
+                },
+                "end": {
+                    "line": 2,
+                    "column": 25
+                }
+            },
+            "value": "hello"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                36,
+                41
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 25
+                },
+                "end": {
+                    "line": 2,
+                    "column": 30
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                41,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 30
+                },
+                "end": {
+                    "line": 2,
+                    "column": 31
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                42,
+                43
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 31
+                },
+                "end": {
+                    "line": 3,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                43,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "template"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                53,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                54,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                56,
+                63
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                63,
+                64
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                64,
+                67
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                67,
+                73
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 8
+                }
+            },
+            "value": "export"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                73,
+                74
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                74,
+                81
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 16
+                }
+            },
+            "value": "default"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                81,
+                82
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 16
+                },
+                "end": {
+                    "line": 6,
+                    "column": 17
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                82,
+                83
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 17
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                83,
+                88
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 7,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                88,
+                94
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 4
+                },
+                "end": {
+                    "line": 7,
+                    "column": 10
+                }
+            },
+            "value": "data()"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                94,
+                95
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 10
+                },
+                "end": {
+                    "line": 7,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                95,
+                96
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 11
+                },
+                "end": {
+                    "line": 7,
+                    "column": 12
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                96,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 12
+                },
+                "end": {
+                    "line": 8,
+                    "column": 6
+                }
+            },
+            "value": "\n      "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                103,
+                109
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 6
+                },
+                "end": {
+                    "line": 8,
+                    "column": 12
+                }
+            },
+            "value": "return"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                109,
+                110
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 12
+                },
+                "end": {
+                    "line": 8,
+                    "column": 13
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                110,
+                111
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 13
+                },
+                "end": {
+                    "line": 8,
+                    "column": 14
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                111,
+                120
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 14
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                120,
+                126
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 14
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                126,
+                127
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 14
+                },
+                "end": {
+                    "line": 9,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                127,
+                133
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 15
+                },
+                "end": {
+                    "line": 9,
+                    "column": 21
+                }
+            },
+            "value": "'red',"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                133,
+                142
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 21
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                142,
+                147
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 8
+                },
+                "end": {
+                    "line": 10,
+                    "column": 13
+                }
+            },
+            "value": "font:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                147,
+                148
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 13
+                },
+                "end": {
+                    "line": 10,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                148,
+                149
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 14
+                },
+                "end": {
+                    "line": 10,
+                    "column": 15
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                149,
+                160
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 15
+                },
+                "end": {
+                    "line": 11,
+                    "column": 10
+                }
+            },
+            "value": "\n          "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                160,
+                165
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 10
+                },
+                "end": {
+                    "line": 11,
+                    "column": 15
+                }
+            },
+            "value": "size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                165,
+                166
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 15
+                },
+                "end": {
+                    "line": 11,
+                    "column": 16
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                166,
+                172
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 16
+                },
+                "end": {
+                    "line": 11,
+                    "column": 22
+                }
+            },
+            "value": "'2em',"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                172,
+                181
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 22
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                181,
+                183
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 12,
+                    "column": 10
+                }
+            },
+            "value": "},"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                183,
+                190
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 10
+                },
+                "end": {
+                    "line": 13,
+                    "column": 6
+                }
+            },
+            "value": "\n      "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                190,
+                191
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 6
+                },
+                "end": {
+                    "line": 13,
+                    "column": 7
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                191,
+                196
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 7
+                },
+                "end": {
+                    "line": 14,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                196,
+                198
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 4
+                },
+                "end": {
+                    "line": 14,
+                    "column": 6
+                }
+            },
+            "value": "},"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                198,
+                201
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 6
+                },
+                "end": {
+                    "line": 15,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                201,
+                202
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 2
+                },
+                "end": {
+                    "line": 15,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                202,
+                203
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 3
+                },
+                "end": {
+                    "line": 16,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                203,
+                211
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 0
+                },
+                "end": {
+                    "line": 16,
+                    "column": 8
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                211,
+                212
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 8
+                },
+                "end": {
+                    "line": 16,
+                    "column": 9
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                212,
+                214
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 9
+                },
+                "end": {
+                    "line": 18,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                214,
+                220
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 0
+                },
+                "end": {
+                    "line": 18,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                220,
+                221
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 6
+                },
+                "end": {
+                    "line": 18,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                221,
+                224
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 7
+                },
+                "end": {
+                    "line": 19,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                224,
+                229
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 2
+                },
+                "end": {
+                    "line": 19,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                229,
+                230
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 7
+                },
+                "end": {
+                    "line": 19,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                230,
+                231
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 8
+                },
+                "end": {
+                    "line": 19,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                231,
+                236
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 9
+                },
+                "end": {
+                    "line": 20,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                236,
+                242
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 4
+                },
+                "end": {
+                    "line": 20,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                242,
+                243
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 10
+                },
+                "end": {
+                    "line": 20,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                243,
+                257
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 11
+                },
+                "end": {
+                    "line": 20,
+                    "column": 25
+                }
+            },
+            "value": "v-bind(color);"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                257,
+                263
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 25
+                },
+                "end": {
+                    "line": 22,
+                    "column": 4
+                }
+            },
+            "value": "\n\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                263,
+                265
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 4
+                },
+                "end": {
+                    "line": 22,
+                    "column": 6
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                265,
+                266
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 6
+                },
+                "end": {
+                    "line": 22,
+                    "column": 7
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                266,
+                277
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 7
+                },
+                "end": {
+                    "line": 22,
+                    "column": 18
+                }
+            },
+            "value": "expressions"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                277,
+                278
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 18
+                },
+                "end": {
+                    "line": 22,
+                    "column": 19
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                278,
+                283
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 19
+                },
+                "end": {
+                    "line": 22,
+                    "column": 24
+                }
+            },
+            "value": "(wrap"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                283,
+                284
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 24
+                },
+                "end": {
+                    "line": 22,
+                    "column": 25
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                284,
+                286
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 25
+                },
+                "end": {
+                    "line": 22,
+                    "column": 27
+                }
+            },
+            "value": "in"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                286,
+                287
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 27
+                },
+                "end": {
+                    "line": 22,
+                    "column": 28
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                287,
+                294
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 28
+                },
+                "end": {
+                    "line": 22,
+                    "column": 35
+                }
+            },
+            "value": "quotes)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                294,
+                295
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 35
+                },
+                "end": {
+                    "line": 22,
+                    "column": 36
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                295,
+                297
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 36
+                },
+                "end": {
+                    "line": 22,
+                    "column": 38
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                297,
+                302
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 38
+                },
+                "end": {
+                    "line": 23,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                302,
+                312
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 4
+                },
+                "end": {
+                    "line": 23,
+                    "column": 14
+                }
+            },
+            "value": "font-size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                312,
+                313
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 14
+                },
+                "end": {
+                    "line": 23,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                313,
+                333
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 15
+                },
+                "end": {
+                    "line": 23,
+                    "column": 35
+                }
+            },
+            "value": "v-bind('font.size');"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                333,
+                336
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 35
+                },
+                "end": {
+                    "line": 24,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                336,
+                337
+            ],
+            "loc": {
+                "start": {
+                    "line": 24,
+                    "column": 2
+                },
+                "end": {
+                    "line": 24,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                337,
+                338
+            ],
+            "loc": {
+                "start": {
+                    "line": 24,
+                    "column": 3
+                },
+                "end": {
+                    "line": 25,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                338,
+                345
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 0
+                },
+                "end": {
+                    "line": 25,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                345,
+                346
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 7
+                },
+                "end": {
+                    "line": 25,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                346,
+                347
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 8
+                },
+                "end": {
+                    "line": 26,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-option-false/parser-options.json b/test/fixtures/document-fragment/style-variables-with-option-false/parser-options.json
new file mode 100644
index 00000000..90a0eb01
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-option-false/parser-options.json
@@ -0,0 +1,5 @@
+{
+  "vueFeatures": {
+    "styleCSSVariableInjection": false
+  }
+}
diff --git a/test/fixtures/document-fragment/style-variables-with-option-false/source.vue b/test/fixtures/document-fragment/style-variables-with-option-false/source.vue
new file mode 100644
index 00000000..d151be23
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-option-false/source.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="text">hello</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: 'red',
+        font: {
+          size: '2em',
+        },
+      }
+    },
+  }
+</script>
+
+<style>
+  .text {
+    color: v-bind(color);
+
+    /* expressions (wrap in quotes) */
+    font-size: v-bind('font.size');
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-with-option-false/token-ranges.json b/test/fixtures/document-fragment/style-variables-with-option-false/token-ranges.json
new file mode 100644
index 00000000..ac5d560e
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-option-false/token-ranges.json
@@ -0,0 +1,89 @@
+[
+    "<template",
+    ">",
+    "\n  ",
+    "<div",
+    "class",
+    "=",
+    "\"text\"",
+    ">",
+    "hello",
+    "</div",
+    ">",
+    "\n",
+    "</template",
+    ">",
+    "\n\n",
+    "<script",
+    ">",
+    "\n  ",
+    "export",
+    " ",
+    "default",
+    " ",
+    "{",
+    "\n    ",
+    "data()",
+    " ",
+    "{",
+    "\n      ",
+    "return",
+    " ",
+    "{",
+    "\n        ",
+    "color:",
+    " ",
+    "'red',",
+    "\n        ",
+    "font:",
+    " ",
+    "{",
+    "\n          ",
+    "size:",
+    " ",
+    "'2em',",
+    "\n        ",
+    "},",
+    "\n      ",
+    "}",
+    "\n    ",
+    "},",
+    "\n  ",
+    "}",
+    "\n",
+    "</script",
+    ">",
+    "\n\n",
+    "<style",
+    ">",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind(color);",
+    "\n\n    ",
+    "/*",
+    " ",
+    "expressions",
+    " ",
+    "(wrap",
+    " ",
+    "in",
+    " ",
+    "quotes)",
+    " ",
+    "*/",
+    "\n    ",
+    "font-size:",
+    " ",
+    "v-bind('font.size');",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-option-false/tree.json b/test/fixtures/document-fragment/style-variables-with-option-false/tree.json
new file mode 100644
index 00000000..3badd1c0
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-option-false/tree.json
@@ -0,0 +1,129 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<template>\n  <div class=\"text\">hello</div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n</script>\n\n<style>\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<template>\n  <div class=\"text\">hello</div>\n</template>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<template>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  ",
+                        "children": []
+                    },
+                    {
+                        "type": "VElement",
+                        "text": "<div class=\"text\">hello</div>",
+                        "children": [
+                            {
+                                "type": "VStartTag",
+                                "text": "<div class=\"text\">",
+                                "children": [
+                                    {
+                                        "type": "VAttribute",
+                                        "text": "class=\"text\"",
+                                        "children": [
+                                            {
+                                                "type": "VIdentifier",
+                                                "text": "class",
+                                                "children": []
+                                            },
+                                            {
+                                                "type": "VLiteral",
+                                                "text": "\"text\"",
+                                                "children": []
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "type": "VText",
+                                "text": "hello",
+                                "children": []
+                            },
+                            {
+                                "type": "VEndTag",
+                                "text": "</div>",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</template>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<script>\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n</script>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<script>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</script>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables01/document-fragment.json b/test/fixtures/document-fragment/style-variables01/document-fragment.json
new file mode 100644
index 00000000..ad788a15
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables01/document-fragment.json
@@ -0,0 +1,4244 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        347
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 26,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "name": "template",
+            "rawName": "template",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    10
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 10
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        10,
+                        13
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "VElement",
+                    "range": [
+                        13,
+                        42
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 31
+                        }
+                    },
+                    "name": "div",
+                    "rawName": "div",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "startTag": {
+                        "type": "VStartTag",
+                        "range": [
+                            13,
+                            31
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 2,
+                                "column": 2
+                            },
+                            "end": {
+                                "line": 2,
+                                "column": 20
+                            }
+                        },
+                        "selfClosing": false,
+                        "attributes": [
+                            {
+                                "type": "VAttribute",
+                                "range": [
+                                    18,
+                                    30
+                                ],
+                                "loc": {
+                                    "start": {
+                                        "line": 2,
+                                        "column": 7
+                                    },
+                                    "end": {
+                                        "line": 2,
+                                        "column": 19
+                                    }
+                                },
+                                "directive": false,
+                                "key": {
+                                    "type": "VIdentifier",
+                                    "range": [
+                                        18,
+                                        23
+                                    ],
+                                    "loc": {
+                                        "start": {
+                                            "line": 2,
+                                            "column": 7
+                                        },
+                                        "end": {
+                                            "line": 2,
+                                            "column": 12
+                                        }
+                                    },
+                                    "name": "class",
+                                    "rawName": "class"
+                                },
+                                "value": {
+                                    "type": "VLiteral",
+                                    "range": [
+                                        24,
+                                        30
+                                    ],
+                                    "loc": {
+                                        "start": {
+                                            "line": 2,
+                                            "column": 13
+                                        },
+                                        "end": {
+                                            "line": 2,
+                                            "column": 19
+                                        }
+                                    },
+                                    "value": "text"
+                                }
+                            }
+                        ]
+                    },
+                    "children": [
+                        {
+                            "type": "VText",
+                            "range": [
+                                31,
+                                36
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 2,
+                                    "column": 20
+                                },
+                                "end": {
+                                    "line": 2,
+                                    "column": 25
+                                }
+                            },
+                            "value": "hello"
+                        }
+                    ],
+                    "endTag": {
+                        "type": "VEndTag",
+                        "range": [
+                            36,
+                            42
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 2,
+                                "column": 25
+                            },
+                            "end": {
+                                "line": 2,
+                                "column": 31
+                            }
+                        }
+                    },
+                    "variables": []
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        42,
+                        43
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    43,
+                    54
+                ],
+                "loc": {
+                    "start": {
+                        "line": 3,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 3,
+                        "column": 11
+                    }
+                }
+            },
+            "variables": [],
+            "tokens": [
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        0,
+                        9
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 9
+                        }
+                    },
+                    "value": "template"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        9,
+                        10
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 10
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        10,
+                        13
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        13,
+                        17
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 6
+                        }
+                    },
+                    "value": "div"
+                },
+                {
+                    "type": "HTMLIdentifier",
+                    "range": [
+                        18,
+                        23
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 12
+                        }
+                    },
+                    "value": "class"
+                },
+                {
+                    "type": "HTMLAssociation",
+                    "range": [
+                        23,
+                        24
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 13
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLLiteral",
+                    "range": [
+                        24,
+                        30
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 19
+                        }
+                    },
+                    "value": "text"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        30,
+                        31
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 20
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLText",
+                    "range": [
+                        31,
+                        36
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 20
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 25
+                        }
+                    },
+                    "value": "hello"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        36,
+                        41
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 30
+                        }
+                    },
+                    "value": "div"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        41,
+                        42
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 30
+                        },
+                        "end": {
+                            "line": 2,
+                            "column": 31
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        42,
+                        43
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 2,
+                            "column": 31
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        43,
+                        53
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 10
+                        }
+                    },
+                    "value": "template"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        53,
+                        54
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        54,
+                        56
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n\n"
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        56,
+                        63
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 7
+                        }
+                    },
+                    "value": "script"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        63,
+                        64
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 8
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        64,
+                        67
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        67,
+                        73
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 8
+                        }
+                    },
+                    "value": "export"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        73,
+                        74
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 9
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        74,
+                        81
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 16
+                        }
+                    },
+                    "value": "default"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        81,
+                        82
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 16
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 17
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        82,
+                        83
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 17
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 18
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        83,
+                        88
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        88,
+                        94
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 10
+                        }
+                    },
+                    "value": "data()"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        94,
+                        95
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 11
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        95,
+                        96
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 7,
+                            "column": 12
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        96,
+                        103
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 6
+                        }
+                    },
+                    "value": "\n      "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        103,
+                        109
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 12
+                        }
+                    },
+                    "value": "return"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        109,
+                        110
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 12
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 13
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        110,
+                        111
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 14
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        111,
+                        120
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 8,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        120,
+                        126
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 14
+                        }
+                    },
+                    "value": "color:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        126,
+                        127
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 15
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        127,
+                        133
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 21
+                        }
+                    },
+                    "value": "'red',"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        133,
+                        142
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 21
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        142,
+                        147
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 13
+                        }
+                    },
+                    "value": "font:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        147,
+                        148
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 13
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 14
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        148,
+                        149
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 15
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        149,
+                        160
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 10
+                        }
+                    },
+                    "value": "\n          "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        160,
+                        165
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 15
+                        }
+                    },
+                    "value": "size:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        165,
+                        166
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 16
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        166,
+                        172
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 16
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 22
+                        }
+                    },
+                    "value": "'2em',"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        172,
+                        181
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 11,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 8
+                        }
+                    },
+                    "value": "\n        "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        181,
+                        183
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 12,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 10
+                        }
+                    },
+                    "value": "},"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        183,
+                        190
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 12,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 13,
+                            "column": 6
+                        }
+                    },
+                    "value": "\n      "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        190,
+                        191
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 13,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 13,
+                            "column": 7
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        191,
+                        196
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 13,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 14,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        196,
+                        198
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 14,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 14,
+                            "column": 6
+                        }
+                    },
+                    "value": "},"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        198,
+                        201
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 14,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 15,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        201,
+                        202
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 15,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 15,
+                            "column": 3
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        202,
+                        203
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 15,
+                            "column": 3
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        203,
+                        211
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 8
+                        }
+                    },
+                    "value": "script"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        211,
+                        212
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 9
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        212,
+                        214
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 16,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n\n"
+                },
+                {
+                    "type": "HTMLTagOpen",
+                    "range": [
+                        214,
+                        220
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 6
+                        }
+                    },
+                    "value": "style"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        220,
+                        221
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 18,
+                            "column": 7
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        221,
+                        224
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        224,
+                        229
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 7
+                        }
+                    },
+                    "value": ".text"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        229,
+                        230
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 8
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        230,
+                        231
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 19,
+                            "column": 9
+                        }
+                    },
+                    "value": "{"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        231,
+                        236
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 19,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        236,
+                        242
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 10
+                        }
+                    },
+                    "value": "color:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        242,
+                        243
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 11
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLText",
+                    "range": [
+                        243,
+                        249
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 17
+                        }
+                    },
+                    "value": "v-bind"
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        249,
+                        250
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 17
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 18
+                        }
+                    },
+                    "value": "("
+                },
+                {
+                    "type": "Identifier",
+                    "value": "color",
+                    "start": 250,
+                    "end": 255,
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 23
+                        }
+                    },
+                    "range": [
+                        250,
+                        255
+                    ]
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        255,
+                        256
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 23
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 24
+                        }
+                    },
+                    "value": ")"
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        256,
+                        257
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 25
+                        }
+                    },
+                    "value": ";"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        257,
+                        263
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        263,
+                        265
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 6
+                        }
+                    },
+                    "value": "/*"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        265,
+                        266
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 6
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 7
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        266,
+                        277
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 18
+                        }
+                    },
+                    "value": "expressions"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        277,
+                        278
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 18
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 19
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        278,
+                        283
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 24
+                        }
+                    },
+                    "value": "(wrap"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        283,
+                        284
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 25
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        284,
+                        286
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 25
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 27
+                        }
+                    },
+                    "value": "in"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        286,
+                        287
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 27
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 28
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        287,
+                        294
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 35
+                        }
+                    },
+                    "value": "quotes)"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        294,
+                        295
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 35
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 36
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        295,
+                        297
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 36
+                        },
+                        "end": {
+                            "line": 22,
+                            "column": 38
+                        }
+                    },
+                    "value": "*/"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        297,
+                        302
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 22,
+                            "column": 38
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 4
+                        }
+                    },
+                    "value": "\n    "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        302,
+                        312
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 4
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 14
+                        }
+                    },
+                    "value": "font-size:"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        312,
+                        313
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 15
+                        }
+                    },
+                    "value": " "
+                },
+                {
+                    "type": "HTMLText",
+                    "range": [
+                        313,
+                        319
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 21
+                        }
+                    },
+                    "value": "v-bind"
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        319,
+                        320
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 21
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 22
+                        }
+                    },
+                    "value": "("
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        320,
+                        321
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 23
+                        }
+                    },
+                    "value": "'"
+                },
+                {
+                    "type": "Identifier",
+                    "value": "font",
+                    "start": 321,
+                    "end": 325,
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 23
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 27
+                        }
+                    },
+                    "range": [
+                        321,
+                        325
+                    ]
+                },
+                {
+                    "type": "Punctuator",
+                    "value": ".",
+                    "start": 325,
+                    "end": 326,
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 27
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 28
+                        }
+                    },
+                    "range": [
+                        325,
+                        326
+                    ]
+                },
+                {
+                    "type": "Identifier",
+                    "value": "size",
+                    "start": 326,
+                    "end": 330,
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 32
+                        }
+                    },
+                    "range": [
+                        326,
+                        330
+                    ]
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        330,
+                        331
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 32
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 33
+                        }
+                    },
+                    "value": "'"
+                },
+                {
+                    "type": "Punctuator",
+                    "range": [
+                        331,
+                        332
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 33
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 34
+                        }
+                    },
+                    "value": ")"
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        332,
+                        333
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 34
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 35
+                        }
+                    },
+                    "value": ";"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        333,
+                        336
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 35
+                        },
+                        "end": {
+                            "line": 24,
+                            "column": 2
+                        }
+                    },
+                    "value": "\n  "
+                },
+                {
+                    "type": "HTMLRawText",
+                    "range": [
+                        336,
+                        337
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 24,
+                            "column": 2
+                        },
+                        "end": {
+                            "line": 24,
+                            "column": 3
+                        }
+                    },
+                    "value": "}"
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        337,
+                        338
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 24,
+                            "column": 3
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                },
+                {
+                    "type": "HTMLEndTagOpen",
+                    "range": [
+                        338,
+                        345
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 0
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 7
+                        }
+                    },
+                    "value": "style"
+                },
+                {
+                    "type": "HTMLTagClose",
+                    "range": [
+                        345,
+                        346
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 8
+                        }
+                    },
+                    "value": ""
+                },
+                {
+                    "type": "HTMLWhitespace",
+                    "range": [
+                        346,
+                        347
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 25,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 26,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n"
+                }
+            ],
+            "comments": [],
+            "errors": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                54,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                56,
+                212
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 16,
+                    "column": 9
+                }
+            },
+            "name": "script",
+            "rawName": "script",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    56,
+                    64
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 8
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        64,
+                        203
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 8
+                        },
+                        "end": {
+                            "line": 16,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    203,
+                    212
+                ],
+                "loc": {
+                    "start": {
+                        "line": 16,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 16,
+                        "column": 9
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                212,
+                214
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 9
+                },
+                "end": {
+                    "line": 18,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                214,
+                346
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 0
+                },
+                "end": {
+                    "line": 25,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    214,
+                    221
+                ],
+                "loc": {
+                    "start": {
+                        "line": 18,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 18,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        221,
+                        243
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 18,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text {\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        243,
+                        256
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 20,
+                            "column": 24
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 250,
+                        "end": 255,
+                        "loc": {
+                            "start": {
+                                "line": 20,
+                                "column": 18
+                            },
+                            "end": {
+                                "line": 20,
+                                "column": 23
+                            }
+                        },
+                        "range": [
+                            250,
+                            255
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 250,
+                                "end": 255,
+                                "loc": {
+                                    "start": {
+                                        "line": 20,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 20,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    250,
+                                    255
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        256,
+                        313
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 20,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 15
+                        }
+                    },
+                    "value": ";\n\n    /* expressions (wrap in quotes) */\n    font-size: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        313,
+                        332
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 23,
+                            "column": 34
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 321,
+                        "end": 330,
+                        "loc": {
+                            "start": {
+                                "line": 23,
+                                "column": 23
+                            },
+                            "end": {
+                                "line": 23,
+                                "column": 32
+                            }
+                        },
+                        "range": [
+                            321,
+                            330
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 321,
+                            "end": 325,
+                            "loc": {
+                                "start": {
+                                    "line": 23,
+                                    "column": 23
+                                },
+                                "end": {
+                                    "line": 23,
+                                    "column": 27
+                                }
+                            },
+                            "range": [
+                                321,
+                                325
+                            ],
+                            "name": "font"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 326,
+                            "end": 330,
+                            "loc": {
+                                "start": {
+                                    "line": 23,
+                                    "column": 28
+                                },
+                                "end": {
+                                    "line": 23,
+                                    "column": 32
+                                }
+                            },
+                            "range": [
+                                326,
+                                330
+                            ],
+                            "name": "size"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 321,
+                                "end": 325,
+                                "loc": {
+                                    "start": {
+                                        "line": 23,
+                                        "column": 23
+                                    },
+                                    "end": {
+                                        "line": 23,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    321,
+                                    325
+                                ],
+                                "name": "font"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        332,
+                        338
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 23,
+                            "column": 34
+                        },
+                        "end": {
+                            "line": 25,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    338,
+                    346
+                ],
+                "loc": {
+                    "start": {
+                        "line": 25,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 25,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                346,
+                347
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 8
+                },
+                "end": {
+                    "line": 26,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                9
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 9
+                }
+            },
+            "value": "template"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                9,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 9
+                },
+                "end": {
+                    "line": 1,
+                    "column": 10
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                10,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 10
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                13,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 6
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                18,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 12
+                }
+            },
+            "value": "class"
+        },
+        {
+            "type": "HTMLAssociation",
+            "range": [
+                23,
+                24
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 12
+                },
+                "end": {
+                    "line": 2,
+                    "column": 13
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLLiteral",
+            "range": [
+                24,
+                30
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 13
+                },
+                "end": {
+                    "line": 2,
+                    "column": 19
+                }
+            },
+            "value": "text"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                30,
+                31
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 19
+                },
+                "end": {
+                    "line": 2,
+                    "column": 20
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                31,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 20
+                },
+                "end": {
+                    "line": 2,
+                    "column": 25
+                }
+            },
+            "value": "hello"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                36,
+                41
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 25
+                },
+                "end": {
+                    "line": 2,
+                    "column": 30
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                41,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 30
+                },
+                "end": {
+                    "line": 2,
+                    "column": 31
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                42,
+                43
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 31
+                },
+                "end": {
+                    "line": 3,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                43,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 0
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "template"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                53,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                54,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                56,
+                63
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                63,
+                64
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                64,
+                67
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                67,
+                73
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 8
+                }
+            },
+            "value": "export"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                73,
+                74
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                74,
+                81
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 16
+                }
+            },
+            "value": "default"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                81,
+                82
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 16
+                },
+                "end": {
+                    "line": 6,
+                    "column": 17
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                82,
+                83
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 17
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                83,
+                88
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 7,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                88,
+                94
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 4
+                },
+                "end": {
+                    "line": 7,
+                    "column": 10
+                }
+            },
+            "value": "data()"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                94,
+                95
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 10
+                },
+                "end": {
+                    "line": 7,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                95,
+                96
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 11
+                },
+                "end": {
+                    "line": 7,
+                    "column": 12
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                96,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 12
+                },
+                "end": {
+                    "line": 8,
+                    "column": 6
+                }
+            },
+            "value": "\n      "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                103,
+                109
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 6
+                },
+                "end": {
+                    "line": 8,
+                    "column": 12
+                }
+            },
+            "value": "return"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                109,
+                110
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 12
+                },
+                "end": {
+                    "line": 8,
+                    "column": 13
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                110,
+                111
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 13
+                },
+                "end": {
+                    "line": 8,
+                    "column": 14
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                111,
+                120
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 14
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                120,
+                126
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 14
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                126,
+                127
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 14
+                },
+                "end": {
+                    "line": 9,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                127,
+                133
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 15
+                },
+                "end": {
+                    "line": 9,
+                    "column": 21
+                }
+            },
+            "value": "'red',"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                133,
+                142
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 21
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                142,
+                147
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 8
+                },
+                "end": {
+                    "line": 10,
+                    "column": 13
+                }
+            },
+            "value": "font:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                147,
+                148
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 13
+                },
+                "end": {
+                    "line": 10,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                148,
+                149
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 14
+                },
+                "end": {
+                    "line": 10,
+                    "column": 15
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                149,
+                160
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 15
+                },
+                "end": {
+                    "line": 11,
+                    "column": 10
+                }
+            },
+            "value": "\n          "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                160,
+                165
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 10
+                },
+                "end": {
+                    "line": 11,
+                    "column": 15
+                }
+            },
+            "value": "size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                165,
+                166
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 15
+                },
+                "end": {
+                    "line": 11,
+                    "column": 16
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                166,
+                172
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 16
+                },
+                "end": {
+                    "line": 11,
+                    "column": 22
+                }
+            },
+            "value": "'2em',"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                172,
+                181
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 22
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "value": "\n        "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                181,
+                183
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 12,
+                    "column": 10
+                }
+            },
+            "value": "},"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                183,
+                190
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 10
+                },
+                "end": {
+                    "line": 13,
+                    "column": 6
+                }
+            },
+            "value": "\n      "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                190,
+                191
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 6
+                },
+                "end": {
+                    "line": 13,
+                    "column": 7
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                191,
+                196
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 7
+                },
+                "end": {
+                    "line": 14,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                196,
+                198
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 4
+                },
+                "end": {
+                    "line": 14,
+                    "column": 6
+                }
+            },
+            "value": "},"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                198,
+                201
+            ],
+            "loc": {
+                "start": {
+                    "line": 14,
+                    "column": 6
+                },
+                "end": {
+                    "line": 15,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                201,
+                202
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 2
+                },
+                "end": {
+                    "line": 15,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                202,
+                203
+            ],
+            "loc": {
+                "start": {
+                    "line": 15,
+                    "column": 3
+                },
+                "end": {
+                    "line": 16,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                203,
+                211
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 0
+                },
+                "end": {
+                    "line": 16,
+                    "column": 8
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                211,
+                212
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 8
+                },
+                "end": {
+                    "line": 16,
+                    "column": 9
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                212,
+                214
+            ],
+            "loc": {
+                "start": {
+                    "line": 16,
+                    "column": 9
+                },
+                "end": {
+                    "line": 18,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                214,
+                220
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 0
+                },
+                "end": {
+                    "line": 18,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                220,
+                221
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 6
+                },
+                "end": {
+                    "line": 18,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                221,
+                224
+            ],
+            "loc": {
+                "start": {
+                    "line": 18,
+                    "column": 7
+                },
+                "end": {
+                    "line": 19,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                224,
+                229
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 2
+                },
+                "end": {
+                    "line": 19,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                229,
+                230
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 7
+                },
+                "end": {
+                    "line": 19,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                230,
+                231
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 8
+                },
+                "end": {
+                    "line": 19,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                231,
+                236
+            ],
+            "loc": {
+                "start": {
+                    "line": 19,
+                    "column": 9
+                },
+                "end": {
+                    "line": 20,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                236,
+                242
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 4
+                },
+                "end": {
+                    "line": 20,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                242,
+                243
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 10
+                },
+                "end": {
+                    "line": 20,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                243,
+                249
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 11
+                },
+                "end": {
+                    "line": 20,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                249,
+                250
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 17
+                },
+                "end": {
+                    "line": 20,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 250,
+            "end": 255,
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 18
+                },
+                "end": {
+                    "line": 20,
+                    "column": 23
+                }
+            },
+            "range": [
+                250,
+                255
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                255,
+                256
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 23
+                },
+                "end": {
+                    "line": 20,
+                    "column": 24
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                256,
+                257
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 24
+                },
+                "end": {
+                    "line": 20,
+                    "column": 25
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                257,
+                263
+            ],
+            "loc": {
+                "start": {
+                    "line": 20,
+                    "column": 25
+                },
+                "end": {
+                    "line": 22,
+                    "column": 4
+                }
+            },
+            "value": "\n\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                263,
+                265
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 4
+                },
+                "end": {
+                    "line": 22,
+                    "column": 6
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                265,
+                266
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 6
+                },
+                "end": {
+                    "line": 22,
+                    "column": 7
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                266,
+                277
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 7
+                },
+                "end": {
+                    "line": 22,
+                    "column": 18
+                }
+            },
+            "value": "expressions"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                277,
+                278
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 18
+                },
+                "end": {
+                    "line": 22,
+                    "column": 19
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                278,
+                283
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 19
+                },
+                "end": {
+                    "line": 22,
+                    "column": 24
+                }
+            },
+            "value": "(wrap"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                283,
+                284
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 24
+                },
+                "end": {
+                    "line": 22,
+                    "column": 25
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                284,
+                286
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 25
+                },
+                "end": {
+                    "line": 22,
+                    "column": 27
+                }
+            },
+            "value": "in"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                286,
+                287
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 27
+                },
+                "end": {
+                    "line": 22,
+                    "column": 28
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                287,
+                294
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 28
+                },
+                "end": {
+                    "line": 22,
+                    "column": 35
+                }
+            },
+            "value": "quotes)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                294,
+                295
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 35
+                },
+                "end": {
+                    "line": 22,
+                    "column": 36
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                295,
+                297
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 36
+                },
+                "end": {
+                    "line": 22,
+                    "column": 38
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                297,
+                302
+            ],
+            "loc": {
+                "start": {
+                    "line": 22,
+                    "column": 38
+                },
+                "end": {
+                    "line": 23,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                302,
+                312
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 4
+                },
+                "end": {
+                    "line": 23,
+                    "column": 14
+                }
+            },
+            "value": "font-size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                312,
+                313
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 14
+                },
+                "end": {
+                    "line": 23,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                313,
+                319
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 15
+                },
+                "end": {
+                    "line": 23,
+                    "column": 21
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                319,
+                320
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 21
+                },
+                "end": {
+                    "line": 23,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                320,
+                321
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 22
+                },
+                "end": {
+                    "line": 23,
+                    "column": 23
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Identifier",
+            "value": "font",
+            "start": 321,
+            "end": 325,
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 23
+                },
+                "end": {
+                    "line": 23,
+                    "column": 27
+                }
+            },
+            "range": [
+                321,
+                325
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 325,
+            "end": 326,
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 27
+                },
+                "end": {
+                    "line": 23,
+                    "column": 28
+                }
+            },
+            "range": [
+                325,
+                326
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "size",
+            "start": 326,
+            "end": 330,
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 28
+                },
+                "end": {
+                    "line": 23,
+                    "column": 32
+                }
+            },
+            "range": [
+                326,
+                330
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                330,
+                331
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 32
+                },
+                "end": {
+                    "line": 23,
+                    "column": 33
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                331,
+                332
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 33
+                },
+                "end": {
+                    "line": 23,
+                    "column": 34
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                332,
+                333
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 34
+                },
+                "end": {
+                    "line": 23,
+                    "column": 35
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                333,
+                336
+            ],
+            "loc": {
+                "start": {
+                    "line": 23,
+                    "column": 35
+                },
+                "end": {
+                    "line": 24,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                336,
+                337
+            ],
+            "loc": {
+                "start": {
+                    "line": 24,
+                    "column": 2
+                },
+                "end": {
+                    "line": 24,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                337,
+                338
+            ],
+            "loc": {
+                "start": {
+                    "line": 24,
+                    "column": 3
+                },
+                "end": {
+                    "line": 25,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                338,
+                345
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 0
+                },
+                "end": {
+                    "line": 25,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                345,
+                346
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 7
+                },
+                "end": {
+                    "line": 25,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                346,
+                347
+            ],
+            "loc": {
+                "start": {
+                    "line": 25,
+                    "column": 8
+                },
+                "end": {
+                    "line": 26,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables01/source.vue b/test/fixtures/document-fragment/style-variables01/source.vue
new file mode 100644
index 00000000..d151be23
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables01/source.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="text">hello</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: 'red',
+        font: {
+          size: '2em',
+        },
+      }
+    },
+  }
+</script>
+
+<style>
+  .text {
+    color: v-bind(color);
+
+    /* expressions (wrap in quotes) */
+    font-size: v-bind('font.size');
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables01/token-ranges.json b/test/fixtures/document-fragment/style-variables01/token-ranges.json
new file mode 100644
index 00000000..413e4922
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables01/token-ranges.json
@@ -0,0 +1,101 @@
+[
+    "<template",
+    ">",
+    "\n  ",
+    "<div",
+    "class",
+    "=",
+    "\"text\"",
+    ">",
+    "hello",
+    "</div",
+    ">",
+    "\n",
+    "</template",
+    ">",
+    "\n\n",
+    "<script",
+    ">",
+    "\n  ",
+    "export",
+    " ",
+    "default",
+    " ",
+    "{",
+    "\n    ",
+    "data()",
+    " ",
+    "{",
+    "\n      ",
+    "return",
+    " ",
+    "{",
+    "\n        ",
+    "color:",
+    " ",
+    "'red',",
+    "\n        ",
+    "font:",
+    " ",
+    "{",
+    "\n          ",
+    "size:",
+    " ",
+    "'2em',",
+    "\n        ",
+    "},",
+    "\n      ",
+    "}",
+    "\n    ",
+    "},",
+    "\n  ",
+    "}",
+    "\n",
+    "</script",
+    ">",
+    "\n\n",
+    "<style",
+    ">",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n\n    ",
+    "/*",
+    " ",
+    "expressions",
+    " ",
+    "(wrap",
+    " ",
+    "in",
+    " ",
+    "quotes)",
+    " ",
+    "*/",
+    "\n    ",
+    "font-size:",
+    " ",
+    "v-bind",
+    "(",
+    "'",
+    "font",
+    ".",
+    "size",
+    "'",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables01/tree.json b/test/fixtures/document-fragment/style-variables01/tree.json
new file mode 100644
index 00000000..0e52c1c6
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables01/tree.json
@@ -0,0 +1,172 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<template>\n  <div class=\"text\">hello</div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n</script>\n\n<style>\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<template>\n  <div class=\"text\">hello</div>\n</template>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<template>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  ",
+                        "children": []
+                    },
+                    {
+                        "type": "VElement",
+                        "text": "<div class=\"text\">hello</div>",
+                        "children": [
+                            {
+                                "type": "VStartTag",
+                                "text": "<div class=\"text\">",
+                                "children": [
+                                    {
+                                        "type": "VAttribute",
+                                        "text": "class=\"text\"",
+                                        "children": [
+                                            {
+                                                "type": "VIdentifier",
+                                                "text": "class",
+                                                "children": []
+                                            },
+                                            {
+                                                "type": "VLiteral",
+                                                "text": "\"text\"",
+                                                "children": []
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "type": "VText",
+                                "text": "hello",
+                                "children": []
+                            },
+                            {
+                                "type": "VEndTag",
+                                "text": "</div>",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</template>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<script>\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n</script>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<script>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  export default {\n    data() {\n      return {\n        color: 'red',\n        font: {\n          size: '2em',\n        },\n      }\n    },\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</script>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text {\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n\n    /* expressions (wrap in quotes) */\n    font-size: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind('font.size')",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "font.size",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "font",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "size",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables02/document-fragment.json b/test/fixtures/document-fragment/style-variables02/document-fragment.json
new file mode 100644
index 00000000..3ea5850b
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables02/document-fragment.json
@@ -0,0 +1,1091 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        113
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 9,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                112
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 8,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        29
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text {\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        29,
+                        42
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 24
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 36,
+                        "end": 41,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 18
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 23
+                            }
+                        },
+                        "range": [
+                            36,
+                            41
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 36,
+                                "end": 41,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    36,
+                                    41
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        42,
+                        73
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 15
+                        }
+                    },
+                    "value": ";\n  }\n  .text {\n    font-size: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        73,
+                        98
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 40
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 81,
+                        "end": 96,
+                        "loc": {
+                            "start": {
+                                "line": 6,
+                                "column": 23
+                            },
+                            "end": {
+                                "line": 6,
+                                "column": 38
+                            }
+                        },
+                        "range": [
+                            81,
+                            96
+                        ],
+                        "object": {
+                            "type": "MemberExpression",
+                            "start": 81,
+                            "end": 91,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 23
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 33
+                                }
+                            },
+                            "range": [
+                                81,
+                                91
+                            ],
+                            "object": {
+                                "type": "Identifier",
+                                "start": 81,
+                                "end": 86,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 23
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 28
+                                    }
+                                },
+                                "range": [
+                                    81,
+                                    86
+                                ],
+                                "name": "theme"
+                            },
+                            "property": {
+                                "type": "Identifier",
+                                "start": 87,
+                                "end": 91,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 29
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 33
+                                    }
+                                },
+                                "range": [
+                                    87,
+                                    91
+                                ],
+                                "name": "font"
+                            },
+                            "computed": false
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 92,
+                            "end": 96,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 34
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 38
+                                }
+                            },
+                            "range": [
+                                92,
+                                96
+                            ],
+                            "name": "size"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 81,
+                                "end": 86,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 23
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 28
+                                    }
+                                },
+                                "range": [
+                                    81,
+                                    86
+                                ],
+                                "name": "theme"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        98,
+                        104
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 40
+                        },
+                        "end": {
+                            "line": 8,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    104,
+                    112
+                ],
+                "loc": {
+                    "start": {
+                        "line": 8,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 8,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                112,
+                113
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                15
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                15,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                16,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 2,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                17,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 9
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                22,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                28,
+                29
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                29,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                35,
+                36
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 36,
+            "end": 41,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 18
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "range": [
+                36,
+                41
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                41,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 23
+                },
+                "end": {
+                    "line": 3,
+                    "column": 24
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                42,
+                43
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                43,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 25
+                },
+                "end": {
+                    "line": 4,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                46,
+                47
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 2
+                },
+                "end": {
+                    "line": 4,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                47,
+                50
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 3
+                },
+                "end": {
+                    "line": 5,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                50,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 2
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                55,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                56,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 5,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                57,
+                62
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                62,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 4
+                },
+                "end": {
+                    "line": 6,
+                    "column": 14
+                }
+            },
+            "value": "font-size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                72,
+                73
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 14
+                },
+                "end": {
+                    "line": 6,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                73,
+                79
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 15
+                },
+                "end": {
+                    "line": 6,
+                    "column": 21
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                79,
+                80
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 21
+                },
+                "end": {
+                    "line": 6,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                80,
+                81
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 22
+                },
+                "end": {
+                    "line": 6,
+                    "column": 23
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Identifier",
+            "value": "theme",
+            "start": 81,
+            "end": 86,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 23
+                },
+                "end": {
+                    "line": 6,
+                    "column": 28
+                }
+            },
+            "range": [
+                81,
+                86
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 86,
+            "end": 87,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 28
+                },
+                "end": {
+                    "line": 6,
+                    "column": 29
+                }
+            },
+            "range": [
+                86,
+                87
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "font",
+            "start": 87,
+            "end": 91,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 29
+                },
+                "end": {
+                    "line": 6,
+                    "column": 33
+                }
+            },
+            "range": [
+                87,
+                91
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 91,
+            "end": 92,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 33
+                },
+                "end": {
+                    "line": 6,
+                    "column": 34
+                }
+            },
+            "range": [
+                91,
+                92
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "size",
+            "start": 92,
+            "end": 96,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 34
+                },
+                "end": {
+                    "line": 6,
+                    "column": 38
+                }
+            },
+            "range": [
+                92,
+                96
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                96,
+                97
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 38
+                },
+                "end": {
+                    "line": 6,
+                    "column": 39
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                97,
+                98
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 39
+                },
+                "end": {
+                    "line": 6,
+                    "column": 40
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                98,
+                99
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 40
+                },
+                "end": {
+                    "line": 6,
+                    "column": 41
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                99,
+                102
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 41
+                },
+                "end": {
+                    "line": 7,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                102,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 2
+                },
+                "end": {
+                    "line": 7,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                103,
+                104
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 3
+                },
+                "end": {
+                    "line": 8,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                104,
+                111
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 0
+                },
+                "end": {
+                    "line": 8,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                111,
+                112
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 7
+                },
+                "end": {
+                    "line": 8,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                112,
+                113
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables02/source.vue b/test/fixtures/document-fragment/style-variables02/source.vue
new file mode 100644
index 00000000..f8bce52f
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables02/source.vue
@@ -0,0 +1,8 @@
+<style>
+  .text {
+    color: v-bind(color);
+  }
+  .text {
+    font-size: v-bind('theme.font.size');
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables02/token-ranges.json b/test/fixtures/document-fragment/style-variables02/token-ranges.json
new file mode 100644
index 00000000..eafcce25
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables02/token-ranges.json
@@ -0,0 +1,42 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "font-size:",
+    " ",
+    "v-bind",
+    "(",
+    "'",
+    "theme",
+    ".",
+    "font",
+    ".",
+    "size",
+    "'",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables02/tree.json b/test/fixtures/document-fragment/style-variables02/tree.json
new file mode 100644
index 00000000..2a7d9e06
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables02/tree.json
@@ -0,0 +1,88 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text {\n    color: v-bind(color);\n  }\n  .text {\n    font-size: v-bind('theme.font.size');\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text {\n    color: v-bind(color);\n  }\n  .text {\n    font-size: v-bind('theme.font.size');\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text {\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n  .text {\n    font-size: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind('theme.font.size')",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "theme.font.size",
+                                "children": [
+                                    {
+                                        "type": "MemberExpression",
+                                        "text": "theme.font",
+                                        "children": [
+                                            {
+                                                "type": "Identifier",
+                                                "text": "theme",
+                                                "children": []
+                                            },
+                                            {
+                                                "type": "Identifier",
+                                                "text": "font",
+                                                "children": []
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "size",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables03/document-fragment.json b/test/fixtures/document-fragment/style-variables03/document-fragment.json
new file mode 100644
index 00000000..8f6b3606
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables03/document-fragment.json
@@ -0,0 +1,1066 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        117
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 10,
+            "column": 8
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        28
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 10
+                        }
+                    },
+                    "value": "\n  .text {\n    color:"
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        41
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 10
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 23
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 35,
+                        "end": 40,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 17
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 22
+                            }
+                        },
+                        "range": [
+                            35,
+                            40
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 35,
+                                "end": 40,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 17
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 22
+                                    }
+                                },
+                                "range": [
+                                    35,
+                                    40
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        41,
+                        47
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 23
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    47,
+                    55
+                ],
+                "loc": {
+                    "start": {
+                        "line": 5,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 5,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                55,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                57,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 0
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    57,
+                    71
+                ],
+                "loc": {
+                    "start": {
+                        "line": 7,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 7,
+                        "column": 14
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            64,
+                            70
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 7,
+                                "column": 7
+                            },
+                            "end": {
+                                "line": 7,
+                                "column": 13
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                64,
+                                70
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 7,
+                                    "column": 7
+                                },
+                                "end": {
+                                    "line": 7,
+                                    "column": 13
+                                }
+                            },
+                            "name": "scoped",
+                            "rawName": "scoped"
+                        },
+                        "value": null
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        71,
+                        93
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 7,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text {\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        93,
+                        106
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 24
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 100,
+                        "end": 105,
+                        "loc": {
+                            "start": {
+                                "line": 9,
+                                "column": 18
+                            },
+                            "end": {
+                                "line": 9,
+                                "column": 23
+                            }
+                        },
+                        "range": [
+                            100,
+                            105
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 100,
+                                "end": 105,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    100,
+                                    105
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        106,
+                        109
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 24
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 0
+                        }
+                    },
+                    "value": ";}\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    109,
+                    117
+                ],
+                "loc": {
+                    "start": {
+                        "line": 10,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 10,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                15
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                15,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                16,
+                17
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 2,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                17,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 9
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                22,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 16
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                34,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 16
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 35,
+            "end": 40,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 22
+                }
+            },
+            "range": [
+                35,
+                40
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                40,
+                41
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 22
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                41,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 23
+                },
+                "end": {
+                    "line": 3,
+                    "column": 24
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                42,
+                45
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 4,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                45,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 2
+                },
+                "end": {
+                    "line": 4,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                46,
+                47
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 3
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                47,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                54,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 7
+                },
+                "end": {
+                    "line": 5,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                55,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                57,
+                63
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 0
+                },
+                "end": {
+                    "line": 7,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                64,
+                70
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 7
+                },
+                "end": {
+                    "line": 7,
+                    "column": 13
+                }
+            },
+            "value": "scoped"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                70,
+                71
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 13
+                },
+                "end": {
+                    "line": 7,
+                    "column": 14
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                71,
+                74
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 14
+                },
+                "end": {
+                    "line": 8,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                74,
+                79
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 2
+                },
+                "end": {
+                    "line": 8,
+                    "column": 7
+                }
+            },
+            "value": ".text"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                79,
+                80
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 7
+                },
+                "end": {
+                    "line": 8,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                80,
+                81
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 8
+                },
+                "end": {
+                    "line": 8,
+                    "column": 9
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                81,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 9
+                },
+                "end": {
+                    "line": 9,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                86,
+                92
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 4
+                },
+                "end": {
+                    "line": 9,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                92,
+                93
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 10
+                },
+                "end": {
+                    "line": 9,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                93,
+                99
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 11
+                },
+                "end": {
+                    "line": 9,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                99,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 17
+                },
+                "end": {
+                    "line": 9,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 100,
+            "end": 105,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 18
+                },
+                "end": {
+                    "line": 9,
+                    "column": 23
+                }
+            },
+            "range": [
+                100,
+                105
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                105,
+                106
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 23
+                },
+                "end": {
+                    "line": 9,
+                    "column": 24
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                106,
+                108
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 24
+                },
+                "end": {
+                    "line": 9,
+                    "column": 26
+                }
+            },
+            "value": ";}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                108,
+                109
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 26
+                },
+                "end": {
+                    "line": 10,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                109,
+                116
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 0
+                },
+                "end": {
+                    "line": 10,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                116,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 7
+                },
+                "end": {
+                    "line": 10,
+                    "column": 8
+                }
+            },
+            "value": ""
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables03/source.vue b/test/fixtures/document-fragment/style-variables03/source.vue
new file mode 100644
index 00000000..2ed3c09d
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables03/source.vue
@@ -0,0 +1,10 @@
+<style>
+  .text {
+    color:v-bind(color);
+  }
+</style>
+
+<style scoped>
+  .text {
+    color: v-bind(color);}
+</style>
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables03/token-ranges.json b/test/fixtures/document-fragment/style-variables03/token-ranges.json
new file mode 100644
index 00000000..40e5942a
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables03/token-ranges.json
@@ -0,0 +1,39 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n\n",
+    "<style",
+    "scoped",
+    ">",
+    "\n  ",
+    ".text",
+    " ",
+    "{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";}",
+    "\n",
+    "</style",
+    ">"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables03/tree.json b/test/fixtures/document-fragment/style-variables03/tree.json
new file mode 100644
index 00000000..83907c09
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables03/tree.json
@@ -0,0 +1,99 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text {\n    color:v-bind(color);\n  }\n</style>\n\n<style scoped>\n  .text {\n    color: v-bind(color);}\n</style>",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text {\n    color:v-bind(color);\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text {\n    color:",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n\n",
+                "children": []
+            },
+            {
+                "type": "VElement",
+                "text": "<style scoped>\n  .text {\n    color: v-bind(color);}\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style scoped>",
+                        "children": [
+                            {
+                                "type": "VAttribute",
+                                "text": "scoped",
+                                "children": [
+                                    {
+                                        "type": "VIdentifier",
+                                        "text": "scoped",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text {\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";}\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables04/document-fragment.json b/test/fixtures/document-fragment/style-variables04/document-fragment.json
new file mode 100644
index 00000000..e9beb1c0
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables04/document-fragment.json
@@ -0,0 +1,399 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        43
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 2,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 42
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        19
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 19
+                        }
+                    },
+                    "value": ".text{color:"
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        19,
+                        32
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 32
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 26,
+                        "end": 31,
+                        "loc": {
+                            "start": {
+                                "line": 1,
+                                "column": 26
+                            },
+                            "end": {
+                                "line": 1,
+                                "column": 31
+                            }
+                        },
+                        "range": [
+                            26,
+                            31
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 26,
+                                "end": 31,
+                                "loc": {
+                                    "start": {
+                                        "line": 1,
+                                        "column": 26
+                                    },
+                                    "end": {
+                                        "line": 1,
+                                        "column": 31
+                                    }
+                                },
+                                "range": [
+                                    26,
+                                    31
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        32,
+                        34
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 32
+                        },
+                        "end": {
+                            "line": 1,
+                            "column": 34
+                        }
+                    },
+                    "value": ";}"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    34,
+                    42
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 34
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 42
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                42,
+                43
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 42
+                },
+                "end": {
+                    "line": 2,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                7,
+                19
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 1,
+                    "column": 19
+                }
+            },
+            "value": ".text{color:"
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                19,
+                25
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 19
+                },
+                "end": {
+                    "line": 1,
+                    "column": 25
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                25,
+                26
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 25
+                },
+                "end": {
+                    "line": 1,
+                    "column": 26
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 26,
+            "end": 31,
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 26
+                },
+                "end": {
+                    "line": 1,
+                    "column": 31
+                }
+            },
+            "range": [
+                26,
+                31
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                31,
+                32
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 31
+                },
+                "end": {
+                    "line": 1,
+                    "column": 32
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                32,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 32
+                },
+                "end": {
+                    "line": 1,
+                    "column": 34
+                }
+            },
+            "value": ";}"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                34,
+                41
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 34
+                },
+                "end": {
+                    "line": 1,
+                    "column": 41
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                41,
+                42
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 41
+                },
+                "end": {
+                    "line": 1,
+                    "column": 42
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                42,
+                43
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 42
+                },
+                "end": {
+                    "line": 2,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables04/source.vue b/test/fixtures/document-fragment/style-variables04/source.vue
new file mode 100644
index 00000000..71127427
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables04/source.vue
@@ -0,0 +1 @@
+<style>.text{color:v-bind(color);}</style>
diff --git a/test/fixtures/document-fragment/style-variables04/token-ranges.json b/test/fixtures/document-fragment/style-variables04/token-ranges.json
new file mode 100644
index 00000000..9068022d
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables04/token-ranges.json
@@ -0,0 +1,13 @@
+[
+    "<style",
+    ">",
+    ".text{color:",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";}",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables04/tree.json b/test/fixtures/document-fragment/style-variables04/tree.json
new file mode 100644
index 00000000..de0f73bd
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables04/tree.json
@@ -0,0 +1,50 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>.text{color:v-bind(color);}</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>.text{color:v-bind(color);}</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": ".text{color:",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";}",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables05/document-fragment.json b/test/fixtures/document-fragment/style-variables05/document-fragment.json
new file mode 100644
index 00000000..f14b915c
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/document-fragment.json
@@ -0,0 +1,1555 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        246
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 13,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                245
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        28
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        45
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 28
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 37,
+                        "end": 42,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 20
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 25
+                            }
+                        },
+                        "range": [
+                            37,
+                            42
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 37,
+                                "end": 42,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 20
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 25
+                                    }
+                                },
+                                "range": [
+                                    37,
+                                    42
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        45,
+                        62
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 15
+                        }
+                    },
+                    "value": ";\n    font-size: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        62,
+                        89
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 15
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 42
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 74,
+                        "end": 83,
+                        "loc": {
+                            "start": {
+                                "line": 4,
+                                "column": 27
+                            },
+                            "end": {
+                                "line": 4,
+                                "column": 36
+                            }
+                        },
+                        "range": [
+                            74,
+                            83
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 74,
+                            "end": 78,
+                            "loc": {
+                                "start": {
+                                    "line": 4,
+                                    "column": 27
+                                },
+                                "end": {
+                                    "line": 4,
+                                    "column": 31
+                                }
+                            },
+                            "range": [
+                                74,
+                                78
+                            ],
+                            "name": "font"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 79,
+                            "end": 83,
+                            "loc": {
+                                "start": {
+                                    "line": 4,
+                                    "column": 32
+                                },
+                                "end": {
+                                    "line": 4,
+                                    "column": 36
+                                }
+                            },
+                            "range": [
+                                79,
+                                83
+                            ],
+                            "name": "size"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 74,
+                                "end": 78,
+                                "loc": {
+                                    "start": {
+                                        "line": 4,
+                                        "column": 27
+                                    },
+                                    "end": {
+                                        "line": 4,
+                                        "column": 31
+                                    }
+                                },
+                                "range": [
+                                    74,
+                                    78
+                                ],
+                                "name": "font"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        89,
+                        113
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 42
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 22
+                        }
+                    },
+                    "value": ";\n    border-color: /**/"
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        113,
+                        148
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 5,
+                            "column": 57
+                        }
+                    },
+                    "expression": {
+                        "type": "CallExpression",
+                        "start": 125,
+                        "end": 143,
+                        "loc": {
+                            "start": {
+                                "line": 5,
+                                "column": 34
+                            },
+                            "end": {
+                                "line": 5,
+                                "column": 52
+                            }
+                        },
+                        "range": [
+                            125,
+                            143
+                        ],
+                        "callee": {
+                            "type": "Identifier",
+                            "start": 125,
+                            "end": 131,
+                            "loc": {
+                                "start": {
+                                    "line": 5,
+                                    "column": 34
+                                },
+                                "end": {
+                                    "line": 5,
+                                    "column": 40
+                                }
+                            },
+                            "range": [
+                                125,
+                                131
+                            ],
+                            "name": "border"
+                        },
+                        "arguments": [
+                            {
+                                "type": "Literal",
+                                "start": 134,
+                                "end": 141,
+                                "loc": {
+                                    "start": {
+                                        "line": 5,
+                                        "column": 43
+                                    },
+                                    "end": {
+                                        "line": 5,
+                                        "column": 50
+                                    }
+                                },
+                                "range": [
+                                    134,
+                                    141
+                                ],
+                                "value": "color",
+                                "raw": "'color'"
+                            }
+                        ]
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 125,
+                                "end": 131,
+                                "loc": {
+                                    "start": {
+                                        "line": 5,
+                                        "column": 34
+                                    },
+                                    "end": {
+                                        "line": 5,
+                                        "column": 40
+                                    }
+                                },
+                                "range": [
+                                    125,
+                                    131
+                                ],
+                                "name": "border"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        148,
+                        173
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 5,
+                            "column": 57
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 22
+                        }
+                    },
+                    "value": ";;\n    background-color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        173,
+                        231
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 22
+                        },
+                        "end": {
+                            "line": 10,
+                            "column": 5
+                        }
+                    },
+                    "expression": {
+                        "type": "MemberExpression",
+                        "start": 191,
+                        "end": 225,
+                        "loc": {
+                            "start": {
+                                "line": 7,
+                                "column": 8
+                            },
+                            "end": {
+                                "line": 9,
+                                "column": 13
+                            }
+                        },
+                        "range": [
+                            191,
+                            225
+                        ],
+                        "object": {
+                            "type": "Identifier",
+                            "start": 191,
+                            "end": 201,
+                            "loc": {
+                                "start": {
+                                    "line": 7,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 7,
+                                    "column": 18
+                                }
+                            },
+                            "range": [
+                                191,
+                                201
+                            ],
+                            "name": "background"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 220,
+                            "end": 225,
+                            "loc": {
+                                "start": {
+                                    "line": 9,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 9,
+                                    "column": 13
+                                }
+                            },
+                            "range": [
+                                220,
+                                225
+                            ],
+                            "name": "color"
+                        },
+                        "computed": false
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 191,
+                                "end": 201,
+                                "loc": {
+                                    "start": {
+                                        "line": 7,
+                                        "column": 8
+                                    },
+                                    "end": {
+                                        "line": 7,
+                                        "column": 18
+                                    }
+                                },
+                                "range": [
+                                    191,
+                                    201
+                                ],
+                                "name": "background"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        231,
+                        237
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 10,
+                            "column": 5
+                        },
+                        "end": {
+                            "line": 12,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    237,
+                    245
+                ],
+                "loc": {
+                    "start": {
+                        "line": 12,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 12,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                245,
+                246
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 13,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                16,
+                21
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                21,
+                27
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                27,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                34,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 37,
+            "end": 42,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 20
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "range": [
+                37,
+                42
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                44,
+                45
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 27
+                },
+                "end": {
+                    "line": 3,
+                    "column": 28
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                45,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 28
+                },
+                "end": {
+                    "line": 3,
+                    "column": 29
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                46,
+                51
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 29
+                },
+                "end": {
+                    "line": 4,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                51,
+                61
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 4
+                },
+                "end": {
+                    "line": 4,
+                    "column": 14
+                }
+            },
+            "value": "font-size:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                61,
+                62
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 14
+                },
+                "end": {
+                    "line": 4,
+                    "column": 15
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                62,
+                68
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 15
+                },
+                "end": {
+                    "line": 4,
+                    "column": 21
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                68,
+                69
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 21
+                },
+                "end": {
+                    "line": 4,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                71,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 24
+                },
+                "end": {
+                    "line": 4,
+                    "column": 25
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Identifier",
+            "value": "font",
+            "start": 74,
+            "end": 78,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 27
+                },
+                "end": {
+                    "line": 4,
+                    "column": 31
+                }
+            },
+            "range": [
+                74,
+                78
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 78,
+            "end": 79,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 31
+                },
+                "end": {
+                    "line": 4,
+                    "column": 32
+                }
+            },
+            "range": [
+                78,
+                79
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "size",
+            "start": 79,
+            "end": 83,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 32
+                },
+                "end": {
+                    "line": 4,
+                    "column": 36
+                }
+            },
+            "range": [
+                79,
+                83
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                85,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 38
+                },
+                "end": {
+                    "line": 4,
+                    "column": 39
+                }
+            },
+            "value": "'"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                88,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 41
+                },
+                "end": {
+                    "line": 4,
+                    "column": 42
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                89,
+                90
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 42
+                },
+                "end": {
+                    "line": 4,
+                    "column": 43
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                90,
+                95
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 43
+                },
+                "end": {
+                    "line": 5,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                95,
+                108
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 4
+                },
+                "end": {
+                    "line": 5,
+                    "column": 17
+                }
+            },
+            "value": "border-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                108,
+                109
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 17
+                },
+                "end": {
+                    "line": 5,
+                    "column": 18
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                109,
+                113
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 18
+                },
+                "end": {
+                    "line": 5,
+                    "column": 22
+                }
+            },
+            "value": "/**/"
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                113,
+                119
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 22
+                },
+                "end": {
+                    "line": 5,
+                    "column": 28
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                119,
+                120
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 28
+                },
+                "end": {
+                    "line": 5,
+                    "column": 29
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                122,
+                123
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 31
+                },
+                "end": {
+                    "line": 5,
+                    "column": 32
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Identifier",
+            "value": "border",
+            "start": 125,
+            "end": 131,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 34
+                },
+                "end": {
+                    "line": 5,
+                    "column": 40
+                }
+            },
+            "range": [
+                125,
+                131
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 132,
+            "end": 133,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 41
+                },
+                "end": {
+                    "line": 5,
+                    "column": 42
+                }
+            },
+            "range": [
+                132,
+                133
+            ]
+        },
+        {
+            "type": "String",
+            "value": "'color'",
+            "start": 134,
+            "end": 141,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 43
+                },
+                "end": {
+                    "line": 5,
+                    "column": 50
+                }
+            },
+            "range": [
+                134,
+                141
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 142,
+            "end": 143,
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 51
+                },
+                "end": {
+                    "line": 5,
+                    "column": 52
+                }
+            },
+            "range": [
+                142,
+                143
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                144,
+                145
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 53
+                },
+                "end": {
+                    "line": 5,
+                    "column": 54
+                }
+            },
+            "value": "\""
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                147,
+                148
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 56
+                },
+                "end": {
+                    "line": 5,
+                    "column": 57
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                148,
+                150
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 57
+                },
+                "end": {
+                    "line": 5,
+                    "column": 59
+                }
+            },
+            "value": ";;"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                150,
+                155
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 59
+                },
+                "end": {
+                    "line": 6,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                155,
+                172
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 4
+                },
+                "end": {
+                    "line": 6,
+                    "column": 21
+                }
+            },
+            "value": "background-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                172,
+                173
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 21
+                },
+                "end": {
+                    "line": 6,
+                    "column": 22
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                173,
+                179
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 22
+                },
+                "end": {
+                    "line": 6,
+                    "column": 28
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                179,
+                180
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 28
+                },
+                "end": {
+                    "line": 6,
+                    "column": 29
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "background",
+            "start": 191,
+            "end": 201,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 18
+                }
+            },
+            "range": [
+                191,
+                201
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 210,
+            "end": 211,
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 8
+                },
+                "end": {
+                    "line": 8,
+                    "column": 9
+                }
+            },
+            "range": [
+                210,
+                211
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 220,
+            "end": 225,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 13
+                }
+            },
+            "range": [
+                220,
+                225
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                230,
+                231
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 4
+                },
+                "end": {
+                    "line": 10,
+                    "column": 5
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                231,
+                232
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 5
+                },
+                "end": {
+                    "line": 10,
+                    "column": 6
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                232,
+                235
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 6
+                },
+                "end": {
+                    "line": 11,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                235,
+                236
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 2
+                },
+                "end": {
+                    "line": 11,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                236,
+                237
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 3
+                },
+                "end": {
+                    "line": 12,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                237,
+                244
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 0
+                },
+                "end": {
+                    "line": 12,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                244,
+                245
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 7
+                },
+                "end": {
+                    "line": 12,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                245,
+                246
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 8
+                },
+                "end": {
+                    "line": 13,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables05/source.vue b/test/fixtures/document-fragment/style-variables05/source.vue
new file mode 100644
index 00000000..c62a7b36
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/source.vue
@@ -0,0 +1,12 @@
+<style>
+  .text{
+    color: v-bind(  color  );
+    font-size: v-bind(  '  font.size  '  );
+    border-color: /**/v-bind(  "  border ( 'color' ) "  );;
+    background-color: v-bind(  
+        background
+        .
+        color
+    );
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables05/token-ranges.json b/test/fixtures/document-fragment/style-variables05/token-ranges.json
new file mode 100644
index 00000000..c61ec5cd
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/token-ranges.json
@@ -0,0 +1,56 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n    ",
+    "font-size:",
+    " ",
+    "v-bind",
+    "(",
+    "'",
+    "font",
+    ".",
+    "size",
+    "'",
+    ")",
+    ";",
+    "\n    ",
+    "border-color:",
+    " ",
+    "/**/",
+    "v-bind",
+    "(",
+    "\"",
+    "border",
+    "(",
+    "'color'",
+    ")",
+    "\"",
+    ")",
+    ";;",
+    "\n    ",
+    "background-color:",
+    " ",
+    "v-bind",
+    "(",
+    "background",
+    ".",
+    "color",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables05/tree.json b/test/fixtures/document-fragment/style-variables05/tree.json
new file mode 100644
index 00000000..1fbd3b38
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/tree.json
@@ -0,0 +1,131 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text{\n    color: v-bind(  color  );\n    font-size: v-bind(  '  font.size  '  );\n    border-color: /**/v-bind(  \"  border ( 'color' ) \"  );;\n    background-color: v-bind(  \n        background\n        .\n        color\n    );\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text{\n    color: v-bind(  color  );\n    font-size: v-bind(  '  font.size  '  );\n    border-color: /**/v-bind(  \"  border ( 'color' ) \"  );;\n    background-color: v-bind(  \n        background\n        .\n        color\n    );\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  color  )",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n    font-size: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  '  font.size  '  )",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "font.size",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "font",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "size",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n    border-color: /**/",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  \"  border ( 'color' ) \"  )",
+                        "children": [
+                            {
+                                "type": "CallExpression",
+                                "text": "border ( 'color' )",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "border",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'color'",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";;\n    background-color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(  \n        background\n        .\n        color\n    )",
+                        "children": [
+                            {
+                                "type": "MemberExpression",
+                                "text": "background\n        .\n        color",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "background",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "color",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/template-tag-is-absent/document-fragment.json b/test/fixtures/document-fragment/template-tag-is-absent/document-fragment.json
index 66170fd2..f51aedc7 100644
--- a/test/fixtures/document-fragment/template-tag-is-absent/document-fragment.json
+++ b/test/fixtures/document-fragment/template-tag-is-absent/document-fragment.json
@@ -1152,7 +1152,8 @@
                     }
                 }
             },
-            "variables": []
+            "variables": [],
+            "style": true
         }
     ],
     "tokens": [
diff --git a/test/fixtures/document-fragment/template-tag-is-present/document-fragment.json b/test/fixtures/document-fragment/template-tag-is-present/document-fragment.json
index 52c22960..6a148a10 100644
--- a/test/fixtures/document-fragment/template-tag-is-present/document-fragment.json
+++ b/test/fixtures/document-fragment/template-tag-is-present/document-fragment.json
@@ -280,7 +280,8 @@
                     }
                 }
             },
-            "variables": []
+            "variables": [],
+            "style": true
         }
     ],
     "tokens": [