From 9ab4ff9832983ca67abcb0dc622ef22b78886101 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 13:55:08 +0900
Subject: [PATCH 01/10] Change to parse expressions in style vars

Also added an option to decide whether to enable this feature. The default is enable.
See also to [here](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md).

I tried to handle this feature with a check rule instead of a parser, but it was difficult to get the correct location, so I implement it in the parser.
---
 README.md                                     |    7 +
 docs/ast.md                                   |    2 +-
 src/ast/nodes.ts                              |   12 +-
 src/common/ast-utils.ts                       |   30 +-
 src/common/error-utils.ts                     |   27 +
 src/common/parser-options.ts                  |    1 +
 src/common/token-utils.ts                     |  159 +
 src/index.ts                                  |   10 +
 src/style/index.ts                            |  262 +
 src/template/index.ts                         |  133 +-
 .../style-variables01/document-fragment.json  | 4244 +++++++++++++++++
 .../style-variables01/source.vue              |   25 +
 .../style-variables01/token-ranges.json       |  101 +
 .../style-variables01/tree.json               |  172 +
 .../style-variables02/document-fragment.json  | 1091 +++++
 .../style-variables02/source.vue              |    8 +
 .../style-variables02/token-ranges.json       |   42 +
 .../style-variables02/tree.json               |   88 +
 .../style-variables03/document-fragment.json  | 1066 +++++
 .../style-variables03/source.vue              |   10 +
 .../style-variables03/token-ranges.json       |   39 +
 .../style-variables03/tree.json               |   99 +
 .../style-variables04/document-fragment.json  |  399 ++
 .../style-variables04/source.vue              |    1 +
 .../style-variables04/token-ranges.json       |   13 +
 .../style-variables04/tree.json               |   50 +
 .../document-fragment.json                    |    3 +-
 .../document-fragment.json                    |    3 +-
 28 files changed, 7966 insertions(+), 131 deletions(-)
 create mode 100644 src/common/error-utils.ts
 create mode 100644 src/common/token-utils.ts
 create mode 100644 src/style/index.ts
 create mode 100644 test/fixtures/document-fragment/style-variables01/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables01/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables01/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables01/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables02/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables02/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables02/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables02/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables03/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables03/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables03/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables03/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables04/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables04/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables04/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables04/tree.json

diff --git a/README.md b/README.md
index 1741faa5..0a19c556 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,7 @@ For example:
         "vueFeatures": {
             "filter": true,
             "interpolationAsNonHTML": false,
+            "styleVariables": true,
         }
     }
 }
@@ -189,6 +190,12 @@ The following template can be parsed well.
 
 But, it cannot be parsed with Vue 2.
 
+### parserOptions.vueFeatures.styleVariables
+
+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..a7dab8c2 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 or directive values or style variables.
 - 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/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/parser-options.ts b/src/common/parser-options.ts
index 554a13f5..ebfb3316 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
+        styleVariables?: 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..87a9d441 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?.styleVariables ?? 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/style/index.ts b/src/style/index.ts
new file mode 100644
index 00000000..f938d5d0
--- /dev/null
+++ b/src/style/index.ts
@@ -0,0 +1,262 @@
+import type {
+    OffsetRange,
+    VElement,
+    VExpressionContainer,
+    VStyleElement,
+    VText,
+} from "../ast"
+import { ParseError } from "../ast"
+import { 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"
+
+/**
+ * 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
+        parseStyle(
+            style as VStyleElement,
+            globalLocationCalculator,
+            parserOptions,
+        )
+    }
+}
+
+function parseStyle(
+    style: VStyleElement,
+    locationCalculator: LocationCalculatorForHtml,
+    parserOptions: ParserOptions,
+) {
+    if (style.children.length !== 1) {
+        return
+    }
+    const textNode = style.children[0]
+    if (textNode.type !== "VText") {
+        return
+    }
+    const text = textNode.value
+    if (!text.includes("v-bind(")) {
+        return
+    }
+
+    const document = getOwnerDocument(style)
+
+    let textStart = 0
+    for (const { range, expr, exprOffset, quote } of iterateVBind(
+        textNode.range[0],
+        text,
+    )) {
+        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: [],
+        }
+        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
+                ret.tokens.unshift(
+                    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,
+                    ),
+                    ...(quote
+                        ? [
+                              (() => {
+                                  const start =
+                                      locationCalculator.getOffsetWithGap(
+                                          exprOffset - 1,
+                                      )
+                                  return createSimpleToken(
+                                      "Punctuator",
+                                      start,
+                                      start + 1,
+                                      quote,
+                                      locationCalculator,
+                                  )
+                              })(),
+                          ]
+                        : []),
+                )
+                ret.tokens.push(
+                    ...(quote
+                        ? [
+                              (() => {
+                                  const start =
+                                      locationCalculator.getOffsetWithGap(
+                                          exprOffset + expr.length,
+                                      )
+                                  return createSimpleToken(
+                                      "Punctuator",
+                                      start,
+                                      start + 1,
+                                      quote,
+                                      locationCalculator,
+                                  )
+                              })(),
+                          ]
+                        : []),
+                    createSimpleToken(
+                        "Punctuator",
+                        container.range[1] - 1,
+                        container.range[1],
+                        ")",
+                        locationCalculator,
+                    ),
+                )
+
+                replaceAndSplitTokens(document, container, ret.tokens)
+            }
+
+            insertComments(document, ret.comments)
+
+            const lastChild = style.children[style.children.length - 1]
+            style.children.push(container)
+
+            for (const variable of ret.variables) {
+                style.variables.push(variable)
+            }
+            resolveReferences(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: text.slice(range[1]),
+                }
+                style.children.push(newTextNode)
+
+                lastChild.range[1] = container.range[0]
+                lastChild.loc.end = { ...container.loc.start }
+                lastChild.value = text.slice(textStart, range[0])
+                textStart = range[1]
+            }
+        } 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
+}
+
+// eslint-disable-next-line complexity
+function* iterateVBind(
+    offset: number,
+    text: string,
+): IterableIterator<VBindLocations> {
+    const re =
+        /"|'|\/\*|\/\/|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
+    let match
+    while ((match = re.exec(text))) {
+        const startOrVBind = match[0]
+        if (startOrVBind === '"' || startOrVBind === '"') {
+            // skip string
+            for (let index = re.lastIndex; index < text.length; index++) {
+                const c = text[index]
+                if (c === "\\") {
+                    continue
+                } // escaping
+                if (c === startOrVBind) {
+                    re.lastIndex = index + 1
+                    break
+                }
+            }
+        } else if (startOrVBind === "/*") {
+            // skip comment
+            const index = text.indexOf("*/", re.lastIndex)
+            if (index >= re.lastIndex) {
+                re.lastIndex = index
+            }
+        } else if (startOrVBind === "//") {
+            // skip inline comment
+            const index = text.indexOf("\n", re.lastIndex)
+            if (index >= re.lastIndex) {
+                re.lastIndex = index
+            }
+        } else {
+            // v-bind
+            const vBind = startOrVBind
+            const quote = match[1] ? "'" : match[2] ? '"' : null
+            const expr = match[1] || match[2] || match[3]
+            const start = match.index + offset
+            const end = re.lastIndex + offset
+            const exprOffset =
+                start +
+                vBind.indexOf(quote || match[3], 7 /* v-bind( */) +
+                (quote ? 1 /* quote */ : 0)
+            yield {
+                range: [start, end],
+                expr,
+                exprOffset,
+                quote,
+            }
+        }
+    }
+}
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/fixtures/document-fragment/style-variables01/document-fragment.json b/test/fixtures/document-fragment/style-variables01/document-fragment.json
new file mode 100644
index 00000000..63a437af
--- /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: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n"
+                },
+                {
+                    "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": ""
+                },
+                {
+                    "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": ""
+                }
+            ],
+            "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..ab1fa7d0
--- /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: v-bind("
+                },
+                {
+                    "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": " .text {\n    font-size: v-bind("
+                },
+                {
+                    "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": ""
+                }
+            ],
+            "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..7fa26d8c
--- /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:v-bind("
+                },
+                {
+                    "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": ""
+                }
+            ],
+            "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: v-bind(color);}\n"
+                },
+                {
+                    "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": ""
+                }
+            ],
+            "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..9acecb95
--- /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:v-bind("
+                },
+                {
+                    "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/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": [

From 8298f2679506c7490c1a438def3463e03fe3b98a Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 14:26:22 +0900
Subject: [PATCH 02/10] fix

---
 src/style/index.ts                            |  179 +-
 .../document-fragment.json                    |  487 ++++
 .../style-variables-with-error/source.vue     |    5 +
 .../token-ranges.json                         |   20 +
 .../style-variables-with-error/tree.json      |   44 +
 .../style-variables01/document-fragment.json  |    6 +-
 .../style-variables02/document-fragment.json  |    6 +-
 .../style-variables03/document-fragment.json  |    8 +-
 .../style-variables04/document-fragment.json  |    4 +-
 .../style-variables05/document-fragment.json  | 2176 +++++++++++++++++
 .../style-variables05/source.vue              |   18 +
 .../style-variables05/token-ranges.json       |   91 +
 .../style-variables05/tree.json               |  132 +
 13 files changed, 3080 insertions(+), 96 deletions(-)
 create mode 100644 test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-error/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-error/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables05/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables05/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables05/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables05/tree.json

diff --git a/src/style/index.ts b/src/style/index.ts
index f938d5d0..998398c7 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -1,5 +1,6 @@
 import type {
     OffsetRange,
+    Token,
     VElement,
     VExpressionContainer,
     VStyleElement,
@@ -85,6 +86,82 @@ function parseStyle(
             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 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: text.slice(range[1] - textNode.range[0]),
+            }
+            style.children.push(newTextNode)
+
+            lastChild.range[1] = container.range[0]
+            lastChild.loc.end = { ...container.loc.start }
+            lastChild.value = text.slice(
+                textStart,
+                range[0] - textNode.range[0],
+            )
+            textStart = range[1] - textNode.range[0]
+        }
         try {
             const ret = parseExpression(
                 expr,
@@ -96,98 +173,31 @@ function parseStyle(
                 ret.expression.parent = container
                 container.expression = ret.expression
                 container.references = ret.references
-                ret.tokens.unshift(
-                    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,
-                    ),
-                    ...(quote
-                        ? [
-                              (() => {
-                                  const start =
-                                      locationCalculator.getOffsetWithGap(
-                                          exprOffset - 1,
-                                      )
-                                  return createSimpleToken(
-                                      "Punctuator",
-                                      start,
-                                      start + 1,
-                                      quote,
-                                      locationCalculator,
-                                  )
-                              })(),
-                          ]
-                        : []),
-                )
-                ret.tokens.push(
-                    ...(quote
-                        ? [
-                              (() => {
-                                  const start =
-                                      locationCalculator.getOffsetWithGap(
-                                          exprOffset + expr.length,
-                                      )
-                                  return createSimpleToken(
-                                      "Punctuator",
-                                      start,
-                                      start + 1,
-                                      quote,
-                                      locationCalculator,
-                                  )
-                              })(),
-                          ]
-                        : []),
-                    createSimpleToken(
-                        "Punctuator",
-                        container.range[1] - 1,
-                        container.range[1],
-                        ")",
-                        locationCalculator,
-                    ),
-                )
-
-                replaceAndSplitTokens(document, container, ret.tokens)
             }
+            replaceAndSplitTokens(document, container, [
+                ...beforeTokens,
+                ...ret.tokens,
+                ...afterTokens,
+            ])
 
             insertComments(document, ret.comments)
 
-            const lastChild = style.children[style.children.length - 1]
-            style.children.push(container)
-
             for (const variable of ret.variables) {
                 style.variables.push(variable)
             }
             resolveReferences(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: text.slice(range[1]),
-                }
-                style.children.push(newTextNode)
-
-                lastChild.range[1] = container.range[0]
-                lastChild.loc.end = { ...container.loc.start }
-                lastChild.value = text.slice(textStart, range[0])
-                textStart = range[1]
-            }
         } catch (err) {
+            replaceAndSplitTokens(document, container, [
+                ...beforeTokens,
+                createSimpleToken(
+                    "HTMLText",
+                    beforeTokens[beforeTokens.length - 1].range[1],
+                    afterTokens[0].range[0],
+                    expr,
+                    locationCalculator,
+                ),
+                ...afterTokens,
+            ])
             debug("[style] Parse error: %s", err)
 
             if (ParseError.isParseError(err)) {
@@ -221,8 +231,9 @@ function* iterateVBind(
             for (let index = re.lastIndex; index < text.length; index++) {
                 const c = text[index]
                 if (c === "\\") {
+                    index++ // escaping
                     continue
-                } // escaping
+                }
                 if (c === startOrVBind) {
                     re.lastIndex = index + 1
                     break
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..fe1b83b4
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
@@ -0,0 +1,487 @@
+{
+    "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": "HTMLText",
+            "range": [
+                35,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 18
+                },
+                "end": {
+                    "line": 3,
+                    "column": 29
+                }
+            },
+            "value": "color 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..54e21f0d
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
@@ -0,0 +1,20 @@
+[
+    "<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-variables01/document-fragment.json b/test/fixtures/document-fragment/style-variables01/document-fragment.json
index 63a437af..ad788a15 100644
--- a/test/fixtures/document-fragment/style-variables01/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables01/document-fragment.json
@@ -2205,7 +2205,7 @@
                             "column": 11
                         }
                     },
-                    "value": "\n  .text {\n    color: v-bind(color);\n\n    /* expressions (wrap in quotes) */\n    font-size: v-bind('font.size');\n  }\n"
+                    "value": "\n  .text {\n    color: "
                 },
                 {
                     "type": "VExpressionContainer",
@@ -2285,7 +2285,7 @@
                             "column": 15
                         }
                     },
-                    "value": ""
+                    "value": ";\n\n    /* expressions (wrap in quotes) */\n    font-size: "
                 },
                 {
                     "type": "VExpressionContainer",
@@ -2405,7 +2405,7 @@
                             "column": 0
                         }
                     },
-                    "value": ""
+                    "value": ";\n  }\n"
                 }
             ],
             "endTag": {
diff --git a/test/fixtures/document-fragment/style-variables02/document-fragment.json b/test/fixtures/document-fragment/style-variables02/document-fragment.json
index ab1fa7d0..3ea5850b 100644
--- a/test/fixtures/document-fragment/style-variables02/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables02/document-fragment.json
@@ -70,7 +70,7 @@
                             "column": 11
                         }
                     },
-                    "value": "\n  .text {\n    color: v-bind("
+                    "value": "\n  .text {\n    color: "
                 },
                 {
                     "type": "VExpressionContainer",
@@ -150,7 +150,7 @@
                             "column": 15
                         }
                     },
-                    "value": " .text {\n    font-size: v-bind("
+                    "value": ";\n  }\n  .text {\n    font-size: "
                 },
                 {
                     "type": "VExpressionContainer",
@@ -310,7 +310,7 @@
                             "column": 0
                         }
                     },
-                    "value": ""
+                    "value": ";\n  }\n"
                 }
             ],
             "endTag": {
diff --git a/test/fixtures/document-fragment/style-variables03/document-fragment.json b/test/fixtures/document-fragment/style-variables03/document-fragment.json
index 7fa26d8c..8f6b3606 100644
--- a/test/fixtures/document-fragment/style-variables03/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables03/document-fragment.json
@@ -70,7 +70,7 @@
                             "column": 10
                         }
                     },
-                    "value": "\n  .text {\n    color:v-bind("
+                    "value": "\n  .text {\n    color:"
                 },
                 {
                     "type": "VExpressionContainer",
@@ -150,7 +150,7 @@
                             "column": 0
                         }
                     },
-                    "value": ""
+                    "value": ";\n  }\n"
                 }
             ],
             "endTag": {
@@ -285,7 +285,7 @@
                             "column": 11
                         }
                     },
-                    "value": "\n  .text {\n    color: v-bind(color);}\n"
+                    "value": "\n  .text {\n    color: "
                 },
                 {
                     "type": "VExpressionContainer",
@@ -365,7 +365,7 @@
                             "column": 0
                         }
                     },
-                    "value": ""
+                    "value": ";}\n"
                 }
             ],
             "endTag": {
diff --git a/test/fixtures/document-fragment/style-variables04/document-fragment.json b/test/fixtures/document-fragment/style-variables04/document-fragment.json
index 9acecb95..e9beb1c0 100644
--- a/test/fixtures/document-fragment/style-variables04/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables04/document-fragment.json
@@ -70,7 +70,7 @@
                             "column": 19
                         }
                     },
-                    "value": ".text{color:v-bind("
+                    "value": ".text{color:"
                 },
                 {
                     "type": "VExpressionContainer",
@@ -150,7 +150,7 @@
                             "column": 34
                         }
                     },
-                    "value": ""
+                    "value": ";}"
                 }
             ],
             "endTag": {
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..91952fba
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/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-variables05/source.vue b/test/fixtures/document-fragment/style-variables05/source.vue
new file mode 100644
index 00000000..70c9f9fd
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/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-variables05/token-ranges.json b/test/fixtures/document-fragment/style-variables05/token-ranges.json
new file mode 100644
index 00000000..2faa5238
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/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-variables05/tree.json b/test/fixtures/document-fragment/style-variables05/tree.json
new file mode 100644
index 00000000..58e58424
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables05/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

From df729cc29cc08d5686a75955d665b0d25a0a0c91 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 14:50:33 +0900
Subject: [PATCH 03/10] fix

---
 src/style/index.ts                            |    2 +-
 .../style-variables06/document-fragment.json  | 1389 +++++++++++++++++
 .../style-variables06/source.vue              |   13 +
 .../style-variables06/token-ranges.json       |   62 +
 .../style-variables06/tree.json               |   89 ++
 5 files changed, 1554 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/document-fragment/style-variables06/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables06/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables06/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables06/tree.json

diff --git a/src/style/index.ts b/src/style/index.ts
index 998398c7..945f8fa5 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -226,7 +226,7 @@ function* iterateVBind(
     let match
     while ((match = re.exec(text))) {
         const startOrVBind = match[0]
-        if (startOrVBind === '"' || startOrVBind === '"') {
+        if (startOrVBind === '"' || startOrVBind === "'") {
             // skip string
             for (let index = re.lastIndex; index < text.length; index++) {
                 const c = text[index]
diff --git a/test/fixtures/document-fragment/style-variables06/document-fragment.json b/test/fixtures/document-fragment/style-variables06/document-fragment.json
new file mode 100644
index 00000000..dbcc5ea7
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables06/document-fragment.json
@@ -0,0 +1,1389 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        249
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 14,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                87
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 4,
+                    "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,
+                        78
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 0
+                        }
+                    },
+                    "value": "\n  /* eslint script-setup-uses-vars: 1 */\n  const color = 'red'\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    78,
+                    87
+                ],
+                "loc": {
+                    "start": {
+                        "line": 4,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 4,
+                        "column": 9
+                    }
+                }
+            },
+            "variables": []
+        },
+        {
+            "type": "VText",
+            "range": [
+                87,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "VElement",
+            "range": [
+                89,
+                248
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 0
+                },
+                "end": {
+                    "line": 13,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    89,
+                    108
+                ],
+                "loc": {
+                    "start": {
+                        "line": 6,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 6,
+                        "column": 19
+                    }
+                },
+                "selfClosing": false,
+                "attributes": [
+                    {
+                        "type": "VAttribute",
+                        "range": [
+                            96,
+                            107
+                        ],
+                        "loc": {
+                            "start": {
+                                "line": 6,
+                                "column": 7
+                            },
+                            "end": {
+                                "line": 6,
+                                "column": 18
+                            }
+                        },
+                        "directive": false,
+                        "key": {
+                            "type": "VIdentifier",
+                            "range": [
+                                96,
+                                100
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 7
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 11
+                                }
+                            },
+                            "name": "lang",
+                            "rawName": "lang"
+                        },
+                        "value": {
+                            "type": "VLiteral",
+                            "range": [
+                                101,
+                                107
+                            ],
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 12
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 18
+                                }
+                            },
+                            "value": "scss"
+                        }
+                    }
+                ]
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        108,
+                        240
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 19
+                        },
+                        "end": {
+                            "line": 13,
+                            "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": [
+                    240,
+                    248
+                ],
+                "loc": {
+                    "start": {
+                        "line": 13,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 13,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                248,
+                249
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 8
+                },
+                "end": {
+                    "line": 14,
+                    "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,
+                19
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 4
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                19,
+                20
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 4
+                },
+                "end": {
+                    "line": 2,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                20,
+                26
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 5
+                },
+                "end": {
+                    "line": 2,
+                    "column": 11
+                }
+            },
+            "value": "eslint"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                26,
+                27
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 11
+                },
+                "end": {
+                    "line": 2,
+                    "column": 12
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                27,
+                50
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 12
+                },
+                "end": {
+                    "line": 2,
+                    "column": 35
+                }
+            },
+            "value": "script-setup-uses-vars:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                50,
+                51
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 35
+                },
+                "end": {
+                    "line": 2,
+                    "column": 36
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                51,
+                52
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 36
+                },
+                "end": {
+                    "line": 2,
+                    "column": 37
+                }
+            },
+            "value": "1"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                52,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 37
+                },
+                "end": {
+                    "line": 2,
+                    "column": 38
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                53,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 38
+                },
+                "end": {
+                    "line": 2,
+                    "column": 40
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                55,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 40
+                },
+                "end": {
+                    "line": 3,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                58,
+                63
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 2
+                },
+                "end": {
+                    "line": 3,
+                    "column": 7
+                }
+            },
+            "value": "const"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                63,
+                64
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 7
+                },
+                "end": {
+                    "line": 3,
+                    "column": 8
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                64,
+                69
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 13
+                }
+            },
+            "value": "color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                69,
+                70
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 13
+                },
+                "end": {
+                    "line": 3,
+                    "column": 14
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                70,
+                71
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 14
+                },
+                "end": {
+                    "line": 3,
+                    "column": 15
+                }
+            },
+            "value": "="
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                71,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 15
+                },
+                "end": {
+                    "line": 3,
+                    "column": 16
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                72,
+                77
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 16
+                },
+                "end": {
+                    "line": 3,
+                    "column": 21
+                }
+            },
+            "value": "'red'"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                77,
+                78
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 21
+                },
+                "end": {
+                    "line": 4,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                78,
+                86
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 0
+                },
+                "end": {
+                    "line": 4,
+                    "column": 8
+                }
+            },
+            "value": "script"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                86,
+                87
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 8
+                },
+                "end": {
+                    "line": 4,
+                    "column": 9
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                87,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 0
+                }
+            },
+            "value": "\n\n"
+        },
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                89,
+                95
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 0
+                },
+                "end": {
+                    "line": 6,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLIdentifier",
+            "range": [
+                96,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 7
+                },
+                "end": {
+                    "line": 6,
+                    "column": 11
+                }
+            },
+            "value": "lang"
+        },
+        {
+            "type": "HTMLAssociation",
+            "range": [
+                100,
+                101
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 11
+                },
+                "end": {
+                    "line": 6,
+                    "column": 12
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLLiteral",
+            "range": [
+                101,
+                107
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 12
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "scss"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                107,
+                108
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 6,
+                    "column": 19
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                108,
+                111
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 19
+                },
+                "end": {
+                    "line": 7,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                111,
+                118
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 2
+                },
+                "end": {
+                    "line": 7,
+                    "column": 9
+                }
+            },
+            "value": ".v-bind"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                118,
+                119
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 9
+                },
+                "end": {
+                    "line": 7,
+                    "column": 10
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                119,
+                125
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 10
+                },
+                "end": {
+                    "line": 7,
+                    "column": 16
+                }
+            },
+            "value": ".color"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                125,
+                126
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 16
+                },
+                "end": {
+                    "line": 7,
+                    "column": 17
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                126,
+                127
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 17
+                },
+                "end": {
+                    "line": 7,
+                    "column": 18
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                127,
+                132
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 18
+                },
+                "end": {
+                    "line": 8,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                132,
+                138
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 4
+                },
+                "end": {
+                    "line": 8,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                138,
+                139
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 10
+                },
+                "end": {
+                    "line": 8,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                139,
+                155
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 11
+                },
+                "end": {
+                    "line": 8,
+                    "column": 27
+                }
+            },
+            "value": "'v-bind(color)';"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                155,
+                160
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 27
+                },
+                "end": {
+                    "line": 9,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                160,
+                177
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 4
+                },
+                "end": {
+                    "line": 9,
+                    "column": 21
+                }
+            },
+            "value": "background-color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                177,
+                178
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 21
+                },
+                "end": {
+                    "line": 9,
+                    "column": 22
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                178,
+                194
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 22
+                },
+                "end": {
+                    "line": 9,
+                    "column": 38
+                }
+            },
+            "value": "'v-bind(color)';"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                194,
+                197
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 38
+                },
+                "end": {
+                    "line": 10,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                197,
+                198
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 2
+                },
+                "end": {
+                    "line": 10,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                198,
+                201
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 3
+                },
+                "end": {
+                    "line": 11,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                201,
+                203
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 2
+                },
+                "end": {
+                    "line": 11,
+                    "column": 4
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                203,
+                204
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 4
+                },
+                "end": {
+                    "line": 11,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                204,
+                217
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 5
+                },
+                "end": {
+                    "line": 11,
+                    "column": 18
+                }
+            },
+            "value": "v-bind(color)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                217,
+                218
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 18
+                },
+                "end": {
+                    "line": 11,
+                    "column": 19
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                218,
+                220
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 19
+                },
+                "end": {
+                    "line": 11,
+                    "column": 21
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                220,
+                223
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 21
+                },
+                "end": {
+                    "line": 12,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                223,
+                225
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 2
+                },
+                "end": {
+                    "line": 12,
+                    "column": 4
+                }
+            },
+            "value": "//"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                225,
+                226
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 4
+                },
+                "end": {
+                    "line": 12,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                226,
+                239
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 5
+                },
+                "end": {
+                    "line": 12,
+                    "column": 18
+                }
+            },
+            "value": "v-bind(color)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                239,
+                240
+            ],
+            "loc": {
+                "start": {
+                    "line": 12,
+                    "column": 18
+                },
+                "end": {
+                    "line": 13,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                240,
+                247
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 0
+                },
+                "end": {
+                    "line": 13,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                247,
+                248
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 7
+                },
+                "end": {
+                    "line": 13,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                248,
+                249
+            ],
+            "loc": {
+                "start": {
+                    "line": 13,
+                    "column": 8
+                },
+                "end": {
+                    "line": 14,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables06/source.vue b/test/fixtures/document-fragment/style-variables06/source.vue
new file mode 100644
index 00000000..d1b4dcff
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables06/source.vue
@@ -0,0 +1,13 @@
+<script setup>
+  /* eslint script-setup-uses-vars: 1 */
+  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-variables06/token-ranges.json b/test/fixtures/document-fragment/style-variables06/token-ranges.json
new file mode 100644
index 00000000..c88e791b
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables06/token-ranges.json
@@ -0,0 +1,62 @@
+[
+    "<script",
+    "setup",
+    ">",
+    "\n  ",
+    "/*",
+    " ",
+    "eslint",
+    " ",
+    "script-setup-uses-vars:",
+    " ",
+    "1",
+    " ",
+    "*/",
+    "\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-variables06/tree.json b/test/fixtures/document-fragment/style-variables06/tree.json
new file mode 100644
index 00000000..df932eb9
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables06/tree.json
@@ -0,0 +1,89 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<script setup>\n  /* eslint script-setup-uses-vars: 1 */\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  /* eslint script-setup-uses-vars: 1 */\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  /* eslint script-setup-uses-vars: 1 */\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

From 099e95a7ec3bd163716ffbade32bc13b58fca7aa Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 17:15:56 +0900
Subject: [PATCH 04/10] Add test cases

---
 src/parser-services.ts                        |    2 +-
 src/sfc/custom-block/index.ts                 |   10 -
 src/style/index.ts                            |   65 +-
 .../document-fragment.json                    |  636 ++---
 .../source.vue                                |    1 -
 .../token-ranges.json                         |   10 -
 .../tree.json                                 |    6 +-
 .../document-fragment.json                    | 2176 +++++++++++++++++
 .../style-variables-ignores02/source.vue      |   18 +
 .../token-ranges.json                         |   91 +
 .../style-variables-ignores02/tree.json       |  132 +
 .../document-fragment.json                    | 1037 ++++++++
 .../source.vue                                |    9 +
 .../token-ranges.json                         |   41 +
 .../tree.json                                 |   88 +
 .../style-variables05/document-fragment.json  | 1777 +++++---------
 .../style-variables05/source.vue              |   24 +-
 .../style-variables05/token-ranges.json       |   66 +-
 .../style-variables05/tree.json               |   73 +-
 19 files changed, 4491 insertions(+), 1771 deletions(-)
 rename test/fixtures/document-fragment/{style-variables06 => style-variables-ignores01}/document-fragment.json (77%)
 rename test/fixtures/document-fragment/{style-variables06 => style-variables-ignores01}/source.vue (83%)
 rename test/fixtures/document-fragment/{style-variables06 => style-variables-ignores01}/token-ranges.json (83%)
 rename test/fixtures/document-fragment/{style-variables06 => style-variables-ignores01}/tree.json (86%)
 create mode 100644 test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-ignores02/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-ignores02/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-ignores02/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-inline-comment-like/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-inline-comment-like/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-inline-comment-like/tree.json

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
index 945f8fa5..bfe565c6 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -7,7 +7,7 @@ import type {
     VText,
 } from "../ast"
 import { ParseError } from "../ast"
-import { getOwnerDocument } from "../common/ast-utils"
+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"
@@ -44,6 +44,9 @@ export function parseStyleElements(
             style as VStyleElement,
             globalLocationCalculator,
             parserOptions,
+            {
+                inlineComment: (getLang(style) || "css") !== "css",
+            },
         )
     }
 }
@@ -52,6 +55,7 @@ function parseStyle(
     style: VStyleElement,
     locationCalculator: LocationCalculatorForHtml,
     parserOptions: ParserOptions,
+    cssOptions: { inlineComment?: boolean },
 ) {
     if (style.children.length !== 1) {
         return
@@ -71,6 +75,7 @@ function parseStyle(
     for (const { range, expr, exprOffset, quote } of iterateVBind(
         textNode.range[0],
         text,
+        cssOptions,
     )) {
         const container: VExpressionContainer = {
             type: "VExpressionContainer",
@@ -179,7 +184,6 @@ function parseStyle(
                 ...ret.tokens,
                 ...afterTokens,
             ])
-
             insertComments(document, ret.comments)
 
             for (const variable of ret.variables) {
@@ -216,41 +220,29 @@ type VBindLocations = {
     quote: '"' | "'" | null
 }
 
-// eslint-disable-next-line complexity
+/**
+ * Iterate the `v-bind()` information.
+ */
 function* iterateVBind(
     offset: number,
     text: string,
+    cssOptions: { inlineComment?: boolean },
 ): IterableIterator<VBindLocations> {
-    const re =
-        /"|'|\/\*|\/\/|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
+    const re = cssOptions.inlineComment
+        ? /"|'|\/\*|\/\/|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
+        : /"|'|\/\*|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
     let match
     while ((match = re.exec(text))) {
         const startOrVBind = match[0]
         if (startOrVBind === '"' || startOrVBind === "'") {
             // skip string
-            for (let index = re.lastIndex; index < text.length; index++) {
-                const c = text[index]
-                if (c === "\\") {
-                    index++ // escaping
-                    continue
-                }
-                if (c === startOrVBind) {
-                    re.lastIndex = index + 1
-                    break
-                }
-            }
-        } else if (startOrVBind === "/*") {
+            re.lastIndex = skipString(startOrVBind, re.lastIndex)
+        } else if (startOrVBind === "/*" || startOrVBind === "//") {
             // skip comment
-            const index = text.indexOf("*/", re.lastIndex)
-            if (index >= re.lastIndex) {
-                re.lastIndex = index
-            }
-        } else if (startOrVBind === "//") {
-            // skip inline comment
-            const index = text.indexOf("\n", re.lastIndex)
-            if (index >= re.lastIndex) {
-                re.lastIndex = index
-            }
+            re.lastIndex = skipComment(
+                startOrVBind === "/*" ? "block" : "line",
+                re.lastIndex,
+            )
         } else {
             // v-bind
             const vBind = startOrVBind
@@ -270,4 +262,23 @@ function* iterateVBind(
             }
         }
     }
+
+    function skipString(quote: string, nextIndex: number): number {
+        for (let index = nextIndex; index < text.length; index++) {
+            const c = text[index]
+            if (c === "\\") {
+                index++ // escaping
+                continue
+            }
+            if (c === quote) {
+                return index + 1
+            }
+        }
+        return nextIndex
+    }
+
+    function skipComment(kind: "block" | "line", nextIndex: number): number {
+        const index = text.indexOf(kind === "block" ? "*/" : "\n", nextIndex)
+        return Math.max(index, nextIndex)
+    }
 }
diff --git a/test/fixtures/document-fragment/style-variables06/document-fragment.json b/test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json
similarity index 77%
rename from test/fixtures/document-fragment/style-variables06/document-fragment.json
rename to test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json
index dbcc5ea7..ff952fa5 100644
--- a/test/fixtures/document-fragment/style-variables06/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-ignores01/document-fragment.json
@@ -2,7 +2,7 @@
     "type": "VDocumentFragment",
     "range": [
         0,
-        249
+        208
     ],
     "loc": {
         "start": {
@@ -10,7 +10,7 @@
             "column": 0
         },
         "end": {
-            "line": 14,
+            "line": 13,
             "column": 0
         }
     },
@@ -19,7 +19,7 @@
             "type": "VElement",
             "range": [
                 0,
-                87
+                46
             ],
             "loc": {
                 "start": {
@@ -27,7 +27,7 @@
                     "column": 0
                 },
                 "end": {
-                    "line": 4,
+                    "line": 3,
                     "column": 9
                 }
             },
@@ -97,7 +97,7 @@
                     "type": "VText",
                     "range": [
                         14,
-                        78
+                        37
                     ],
                     "loc": {
                         "start": {
@@ -105,26 +105,26 @@
                             "column": 14
                         },
                         "end": {
-                            "line": 4,
+                            "line": 3,
                             "column": 0
                         }
                     },
-                    "value": "\n  /* eslint script-setup-uses-vars: 1 */\n  const color = 'red'\n"
+                    "value": "\n  const color = 'red'\n"
                 }
             ],
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    78,
-                    87
+                    37,
+                    46
                 ],
                 "loc": {
                     "start": {
-                        "line": 4,
+                        "line": 3,
                         "column": 0
                     },
                     "end": {
-                        "line": 4,
+                        "line": 3,
                         "column": 9
                     }
                 }
@@ -134,16 +134,16 @@
         {
             "type": "VText",
             "range": [
-                87,
-                89
+                46,
+                48
             ],
             "loc": {
                 "start": {
-                    "line": 4,
+                    "line": 3,
                     "column": 9
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 0
                 }
             },
@@ -152,16 +152,16 @@
         {
             "type": "VElement",
             "range": [
-                89,
-                248
+                48,
+                207
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 0
                 },
                 "end": {
-                    "line": 13,
+                    "line": 12,
                     "column": 8
                 }
             },
@@ -171,16 +171,16 @@
             "startTag": {
                 "type": "VStartTag",
                 "range": [
-                    89,
-                    108
+                    48,
+                    67
                 ],
                 "loc": {
                     "start": {
-                        "line": 6,
+                        "line": 5,
                         "column": 0
                     },
                     "end": {
-                        "line": 6,
+                        "line": 5,
                         "column": 19
                     }
                 },
@@ -189,16 +189,16 @@
                     {
                         "type": "VAttribute",
                         "range": [
-                            96,
-                            107
+                            55,
+                            66
                         ],
                         "loc": {
                             "start": {
-                                "line": 6,
+                                "line": 5,
                                 "column": 7
                             },
                             "end": {
-                                "line": 6,
+                                "line": 5,
                                 "column": 18
                             }
                         },
@@ -206,16 +206,16 @@
                         "key": {
                             "type": "VIdentifier",
                             "range": [
-                                96,
-                                100
+                                55,
+                                59
                             ],
                             "loc": {
                                 "start": {
-                                    "line": 6,
+                                    "line": 5,
                                     "column": 7
                                 },
                                 "end": {
-                                    "line": 6,
+                                    "line": 5,
                                     "column": 11
                                 }
                             },
@@ -225,16 +225,16 @@
                         "value": {
                             "type": "VLiteral",
                             "range": [
-                                101,
-                                107
+                                60,
+                                66
                             ],
                             "loc": {
                                 "start": {
-                                    "line": 6,
+                                    "line": 5,
                                     "column": 12
                                 },
                                 "end": {
-                                    "line": 6,
+                                    "line": 5,
                                     "column": 18
                                 }
                             },
@@ -247,16 +247,16 @@
                 {
                     "type": "VText",
                     "range": [
-                        108,
-                        240
+                        67,
+                        199
                     ],
                     "loc": {
                         "start": {
-                            "line": 6,
+                            "line": 5,
                             "column": 19
                         },
                         "end": {
-                            "line": 13,
+                            "line": 12,
                             "column": 0
                         }
                     },
@@ -266,16 +266,16 @@
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    240,
-                    248
+                    199,
+                    207
                 ],
                 "loc": {
                     "start": {
-                        "line": 13,
+                        "line": 12,
                         "column": 0
                     },
                     "end": {
-                        "line": 13,
+                        "line": 12,
                         "column": 8
                     }
                 }
@@ -286,16 +286,16 @@
         {
             "type": "VText",
             "range": [
-                248,
-                249
+                207,
+                208
             ],
             "loc": {
                 "start": {
-                    "line": 13,
+                    "line": 12,
                     "column": 8
                 },
                 "end": {
-                    "line": 14,
+                    "line": 13,
                     "column": 0
                 }
             },
@@ -379,7 +379,7 @@
             "type": "HTMLRawText",
             "range": [
                 17,
-                19
+                22
             ],
             "loc": {
                 "start": {
@@ -388,186 +388,6 @@
                 },
                 "end": {
                     "line": 2,
-                    "column": 4
-                }
-            },
-            "value": "/*"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                19,
-                20
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 4
-                },
-                "end": {
-                    "line": 2,
-                    "column": 5
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                20,
-                26
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 5
-                },
-                "end": {
-                    "line": 2,
-                    "column": 11
-                }
-            },
-            "value": "eslint"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                26,
-                27
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 11
-                },
-                "end": {
-                    "line": 2,
-                    "column": 12
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                27,
-                50
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 12
-                },
-                "end": {
-                    "line": 2,
-                    "column": 35
-                }
-            },
-            "value": "script-setup-uses-vars:"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                50,
-                51
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 35
-                },
-                "end": {
-                    "line": 2,
-                    "column": 36
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                51,
-                52
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 36
-                },
-                "end": {
-                    "line": 2,
-                    "column": 37
-                }
-            },
-            "value": "1"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                52,
-                53
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 37
-                },
-                "end": {
-                    "line": 2,
-                    "column": 38
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                53,
-                55
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 38
-                },
-                "end": {
-                    "line": 2,
-                    "column": 40
-                }
-            },
-            "value": "*/"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                55,
-                58
-            ],
-            "loc": {
-                "start": {
-                    "line": 2,
-                    "column": 40
-                },
-                "end": {
-                    "line": 3,
-                    "column": 2
-                }
-            },
-            "value": "\n  "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                58,
-                63
-            ],
-            "loc": {
-                "start": {
-                    "line": 3,
-                    "column": 2
-                },
-                "end": {
-                    "line": 3,
                     "column": 7
                 }
             },
@@ -576,16 +396,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                63,
-                64
+                22,
+                23
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 7
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 8
                 }
             },
@@ -594,16 +414,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                64,
-                69
+                23,
+                28
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 8
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 13
                 }
             },
@@ -612,16 +432,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                69,
-                70
+                28,
+                29
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 13
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 14
                 }
             },
@@ -630,16 +450,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                70,
-                71
+                29,
+                30
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 14
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 15
                 }
             },
@@ -648,16 +468,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                71,
-                72
+                30,
+                31
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 15
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 16
                 }
             },
@@ -666,16 +486,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                72,
-                77
+                31,
+                36
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 16
                 },
                 "end": {
-                    "line": 3,
+                    "line": 2,
                     "column": 21
                 }
             },
@@ -684,16 +504,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                77,
-                78
+                36,
+                37
             ],
             "loc": {
                 "start": {
-                    "line": 3,
+                    "line": 2,
                     "column": 21
                 },
                 "end": {
-                    "line": 4,
+                    "line": 3,
                     "column": 0
                 }
             },
@@ -702,16 +522,16 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                78,
-                86
+                37,
+                45
             ],
             "loc": {
                 "start": {
-                    "line": 4,
+                    "line": 3,
                     "column": 0
                 },
                 "end": {
-                    "line": 4,
+                    "line": 3,
                     "column": 8
                 }
             },
@@ -720,16 +540,16 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                86,
-                87
+                45,
+                46
             ],
             "loc": {
                 "start": {
-                    "line": 4,
+                    "line": 3,
                     "column": 8
                 },
                 "end": {
-                    "line": 4,
+                    "line": 3,
                     "column": 9
                 }
             },
@@ -738,16 +558,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                87,
-                89
+                46,
+                48
             ],
             "loc": {
                 "start": {
-                    "line": 4,
+                    "line": 3,
                     "column": 9
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 0
                 }
             },
@@ -756,16 +576,16 @@
         {
             "type": "HTMLTagOpen",
             "range": [
-                89,
-                95
+                48,
+                54
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 0
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 6
                 }
             },
@@ -774,16 +594,16 @@
         {
             "type": "HTMLIdentifier",
             "range": [
-                96,
-                100
+                55,
+                59
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 7
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 11
                 }
             },
@@ -792,16 +612,16 @@
         {
             "type": "HTMLAssociation",
             "range": [
-                100,
-                101
+                59,
+                60
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 11
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 12
                 }
             },
@@ -810,16 +630,16 @@
         {
             "type": "HTMLLiteral",
             "range": [
-                101,
-                107
+                60,
+                66
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 12
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 18
                 }
             },
@@ -828,16 +648,16 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                107,
-                108
+                66,
+                67
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 18
                 },
                 "end": {
-                    "line": 6,
+                    "line": 5,
                     "column": 19
                 }
             },
@@ -846,16 +666,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                108,
-                111
+                67,
+                70
             ],
             "loc": {
                 "start": {
-                    "line": 6,
+                    "line": 5,
                     "column": 19
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 2
                 }
             },
@@ -864,16 +684,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                111,
-                118
+                70,
+                77
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 2
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 9
                 }
             },
@@ -882,16 +702,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                118,
-                119
+                77,
+                78
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 9
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 10
                 }
             },
@@ -900,16 +720,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                119,
-                125
+                78,
+                84
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 10
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 16
                 }
             },
@@ -918,16 +738,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                125,
-                126
+                84,
+                85
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 16
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 17
                 }
             },
@@ -936,16 +756,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                126,
-                127
+                85,
+                86
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 17
                 },
                 "end": {
-                    "line": 7,
+                    "line": 6,
                     "column": 18
                 }
             },
@@ -954,16 +774,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                127,
-                132
+                86,
+                91
             ],
             "loc": {
                 "start": {
-                    "line": 7,
+                    "line": 6,
                     "column": 18
                 },
                 "end": {
-                    "line": 8,
+                    "line": 7,
                     "column": 4
                 }
             },
@@ -972,16 +792,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                132,
-                138
+                91,
+                97
             ],
             "loc": {
                 "start": {
-                    "line": 8,
+                    "line": 7,
                     "column": 4
                 },
                 "end": {
-                    "line": 8,
+                    "line": 7,
                     "column": 10
                 }
             },
@@ -990,16 +810,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                138,
-                139
+                97,
+                98
             ],
             "loc": {
                 "start": {
-                    "line": 8,
+                    "line": 7,
                     "column": 10
                 },
                 "end": {
-                    "line": 8,
+                    "line": 7,
                     "column": 11
                 }
             },
@@ -1008,16 +828,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                139,
-                155
+                98,
+                114
             ],
             "loc": {
                 "start": {
-                    "line": 8,
+                    "line": 7,
                     "column": 11
                 },
                 "end": {
-                    "line": 8,
+                    "line": 7,
                     "column": 27
                 }
             },
@@ -1026,16 +846,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                155,
-                160
+                114,
+                119
             ],
             "loc": {
                 "start": {
-                    "line": 8,
+                    "line": 7,
                     "column": 27
                 },
                 "end": {
-                    "line": 9,
+                    "line": 8,
                     "column": 4
                 }
             },
@@ -1044,16 +864,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                160,
-                177
+                119,
+                136
             ],
             "loc": {
                 "start": {
-                    "line": 9,
+                    "line": 8,
                     "column": 4
                 },
                 "end": {
-                    "line": 9,
+                    "line": 8,
                     "column": 21
                 }
             },
@@ -1062,16 +882,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                177,
-                178
+                136,
+                137
             ],
             "loc": {
                 "start": {
-                    "line": 9,
+                    "line": 8,
                     "column": 21
                 },
                 "end": {
-                    "line": 9,
+                    "line": 8,
                     "column": 22
                 }
             },
@@ -1080,16 +900,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                178,
-                194
+                137,
+                153
             ],
             "loc": {
                 "start": {
-                    "line": 9,
+                    "line": 8,
                     "column": 22
                 },
                 "end": {
-                    "line": 9,
+                    "line": 8,
                     "column": 38
                 }
             },
@@ -1098,16 +918,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                194,
-                197
+                153,
+                156
             ],
             "loc": {
                 "start": {
-                    "line": 9,
+                    "line": 8,
                     "column": 38
                 },
                 "end": {
-                    "line": 10,
+                    "line": 9,
                     "column": 2
                 }
             },
@@ -1116,16 +936,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                197,
-                198
+                156,
+                157
             ],
             "loc": {
                 "start": {
-                    "line": 10,
+                    "line": 9,
                     "column": 2
                 },
                 "end": {
-                    "line": 10,
+                    "line": 9,
                     "column": 3
                 }
             },
@@ -1134,16 +954,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                198,
-                201
+                157,
+                160
             ],
             "loc": {
                 "start": {
-                    "line": 10,
+                    "line": 9,
                     "column": 3
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 2
                 }
             },
@@ -1152,16 +972,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                201,
-                203
+                160,
+                162
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 2
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 4
                 }
             },
@@ -1170,16 +990,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                203,
-                204
+                162,
+                163
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 4
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 5
                 }
             },
@@ -1188,16 +1008,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                204,
-                217
+                163,
+                176
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 5
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 18
                 }
             },
@@ -1206,16 +1026,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                217,
-                218
+                176,
+                177
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 18
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 19
                 }
             },
@@ -1224,16 +1044,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                218,
-                220
+                177,
+                179
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 19
                 },
                 "end": {
-                    "line": 11,
+                    "line": 10,
                     "column": 21
                 }
             },
@@ -1242,16 +1062,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                220,
-                223
+                179,
+                182
             ],
             "loc": {
                 "start": {
-                    "line": 11,
+                    "line": 10,
                     "column": 21
                 },
                 "end": {
-                    "line": 12,
+                    "line": 11,
                     "column": 2
                 }
             },
@@ -1260,16 +1080,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                223,
-                225
+                182,
+                184
             ],
             "loc": {
                 "start": {
-                    "line": 12,
+                    "line": 11,
                     "column": 2
                 },
                 "end": {
-                    "line": 12,
+                    "line": 11,
                     "column": 4
                 }
             },
@@ -1278,16 +1098,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                225,
-                226
+                184,
+                185
             ],
             "loc": {
                 "start": {
-                    "line": 12,
+                    "line": 11,
                     "column": 4
                 },
                 "end": {
-                    "line": 12,
+                    "line": 11,
                     "column": 5
                 }
             },
@@ -1296,16 +1116,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                226,
-                239
+                185,
+                198
             ],
             "loc": {
                 "start": {
-                    "line": 12,
+                    "line": 11,
                     "column": 5
                 },
                 "end": {
-                    "line": 12,
+                    "line": 11,
                     "column": 18
                 }
             },
@@ -1314,16 +1134,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                239,
-                240
+                198,
+                199
             ],
             "loc": {
                 "start": {
-                    "line": 12,
+                    "line": 11,
                     "column": 18
                 },
                 "end": {
-                    "line": 13,
+                    "line": 12,
                     "column": 0
                 }
             },
@@ -1332,16 +1152,16 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                240,
-                247
+                199,
+                206
             ],
             "loc": {
                 "start": {
-                    "line": 13,
+                    "line": 12,
                     "column": 0
                 },
                 "end": {
-                    "line": 13,
+                    "line": 12,
                     "column": 7
                 }
             },
@@ -1350,16 +1170,16 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                247,
-                248
+                206,
+                207
             ],
             "loc": {
                 "start": {
-                    "line": 13,
+                    "line": 12,
                     "column": 7
                 },
                 "end": {
-                    "line": 13,
+                    "line": 12,
                     "column": 8
                 }
             },
@@ -1368,16 +1188,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                248,
-                249
+                207,
+                208
             ],
             "loc": {
                 "start": {
-                    "line": 13,
+                    "line": 12,
                     "column": 8
                 },
                 "end": {
-                    "line": 14,
+                    "line": 13,
                     "column": 0
                 }
             },
diff --git a/test/fixtures/document-fragment/style-variables06/source.vue b/test/fixtures/document-fragment/style-variables-ignores01/source.vue
similarity index 83%
rename from test/fixtures/document-fragment/style-variables06/source.vue
rename to test/fixtures/document-fragment/style-variables-ignores01/source.vue
index d1b4dcff..ac9b8e4b 100644
--- a/test/fixtures/document-fragment/style-variables06/source.vue
+++ b/test/fixtures/document-fragment/style-variables-ignores01/source.vue
@@ -1,5 +1,4 @@
 <script setup>
-  /* eslint script-setup-uses-vars: 1 */
   const color = 'red'
 </script>
 
diff --git a/test/fixtures/document-fragment/style-variables06/token-ranges.json b/test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json
similarity index 83%
rename from test/fixtures/document-fragment/style-variables06/token-ranges.json
rename to test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json
index c88e791b..353a19fb 100644
--- a/test/fixtures/document-fragment/style-variables06/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables-ignores01/token-ranges.json
@@ -3,16 +3,6 @@
     "setup",
     ">",
     "\n  ",
-    "/*",
-    " ",
-    "eslint",
-    " ",
-    "script-setup-uses-vars:",
-    " ",
-    "1",
-    " ",
-    "*/",
-    "\n  ",
     "const",
     " ",
     "color",
diff --git a/test/fixtures/document-fragment/style-variables06/tree.json b/test/fixtures/document-fragment/style-variables-ignores01/tree.json
similarity index 86%
rename from test/fixtures/document-fragment/style-variables06/tree.json
rename to test/fixtures/document-fragment/style-variables-ignores01/tree.json
index df932eb9..e64cf346 100644
--- a/test/fixtures/document-fragment/style-variables06/tree.json
+++ b/test/fixtures/document-fragment/style-variables-ignores01/tree.json
@@ -1,11 +1,11 @@
 [
     {
         "type": "VDocumentFragment",
-        "text": "<script setup>\n  /* eslint script-setup-uses-vars: 1 */\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",
+        "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  /* eslint script-setup-uses-vars: 1 */\n  const color = 'red'\n</script>",
+                "text": "<script setup>\n  const color = 'red'\n</script>",
                 "children": [
                     {
                         "type": "VStartTag",
@@ -26,7 +26,7 @@
                     },
                     {
                         "type": "VText",
-                        "text": "\n  /* eslint script-setup-uses-vars: 1 */\n  const color = 'red'\n",
+                        "text": "\n  const color = 'red'\n",
                         "children": []
                     },
                     {
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-variables05/document-fragment.json b/test/fixtures/document-fragment/style-variables05/document-fragment.json
index 91952fba..76214b8f 100644
--- a/test/fixtures/document-fragment/style-variables05/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables05/document-fragment.json
@@ -2,7 +2,7 @@
     "type": "VDocumentFragment",
     "range": [
         0,
-        365
+        236
     ],
     "loc": {
         "start": {
@@ -10,7 +10,7 @@
             "column": 0
         },
         "end": {
-            "line": 19,
+            "line": 13,
             "column": 0
         }
     },
@@ -19,7 +19,7 @@
             "type": "VElement",
             "range": [
                 0,
-                364
+                235
             ],
             "loc": {
                 "start": {
@@ -27,7 +27,7 @@
                     "column": 0
                 },
                 "end": {
-                    "line": 18,
+                    "line": 12,
                     "column": 8
                 }
             },
@@ -38,7 +38,7 @@
                 "type": "VStartTag",
                 "range": [
                     0,
-                    19
+                    7
                 ],
                 "loc": {
                     "start": {
@@ -47,79 +47,23 @@
                     },
                     "end": {
                         "line": 1,
-                        "column": 19
+                        "column": 7
                     }
                 },
                 "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"
-                        }
-                    }
-                ]
+                "attributes": []
             },
             "children": [
                 {
                     "type": "VText",
                     "range": [
-                        19,
-                        40
+                        7,
+                        28
                     ],
                     "loc": {
                         "start": {
                             "line": 1,
-                            "column": 19
+                            "column": 7
                         },
                         "end": {
                             "line": 3,
@@ -131,8 +75,8 @@
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        40,
-                        53
+                        28,
+                        45
                     ],
                     "loc": {
                         "start": {
@@ -141,26 +85,26 @@
                         },
                         "end": {
                             "line": 3,
-                            "column": 24
+                            "column": 28
                         }
                     },
                     "expression": {
                         "type": "Identifier",
-                        "start": 47,
-                        "end": 52,
+                        "start": 37,
+                        "end": 42,
                         "loc": {
                             "start": {
                                 "line": 3,
-                                "column": 18
+                                "column": 20
                             },
                             "end": {
                                 "line": 3,
-                                "column": 23
+                                "column": 25
                             }
                         },
                         "range": [
-                            47,
-                            52
+                            37,
+                            42
                         ],
                         "name": "color"
                     },
@@ -168,21 +112,21 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 47,
-                                "end": 52,
+                                "start": 37,
+                                "end": 42,
                                 "loc": {
                                     "start": {
                                         "line": 3,
-                                        "column": 18
+                                        "column": 20
                                     },
                                     "end": {
                                         "line": 3,
-                                        "column": 23
+                                        "column": 25
                                     }
                                 },
                                 "range": [
-                                    47,
-                                    52
+                                    37,
+                                    42
                                 ],
                                 "name": "color"
                             },
@@ -193,119 +137,118 @@
                 {
                     "type": "VText",
                     "range": [
-                        53,
-                        79
+                        45,
+                        62
                     ],
                     "loc": {
                         "start": {
                             "line": 3,
-                            "column": 24
+                            "column": 28
                         },
                         "end": {
-                            "line": 6,
-                            "column": 11
+                            "line": 4,
+                            "column": 15
                         }
                     },
-                    "value": ";\n  }\n  .text{\n    color: "
+                    "value": ";\n    font-size: "
                 },
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        79,
-                        99
+                        62,
+                        85
                     ],
                     "loc": {
                         "start": {
-                            "line": 6,
-                            "column": 11
+                            "line": 4,
+                            "column": 15
                         },
                         "end": {
-                            "line": 6,
-                            "column": 31
+                            "line": 4,
+                            "column": 38
                         }
                     },
                     "expression": {
                         "type": "MemberExpression",
-                        "start": 87,
-                        "end": 97,
+                        "start": 72,
+                        "end": 81,
                         "loc": {
                             "start": {
-                                "line": 6,
-                                "column": 19
+                                "line": 4,
+                                "column": 25
                             },
                             "end": {
-                                "line": 6,
-                                "column": 29
+                                "line": 4,
+                                "column": 34
                             }
                         },
                         "range": [
-                            87,
-                            97
+                            72,
+                            81
                         ],
                         "object": {
                             "type": "Identifier",
-                            "start": 87,
-                            "end": 93,
+                            "start": 72,
+                            "end": 76,
                             "loc": {
                                 "start": {
-                                    "line": 6,
-                                    "column": 19
+                                    "line": 4,
+                                    "column": 25
                                 },
                                 "end": {
-                                    "line": 6,
-                                    "column": 25
+                                    "line": 4,
+                                    "column": 29
                                 }
                             },
                             "range": [
-                                87,
-                                93
+                                72,
+                                76
                             ],
-                            "name": "colors"
+                            "name": "font"
                         },
                         "property": {
-                            "type": "Literal",
-                            "start": 94,
-                            "end": 96,
+                            "type": "Identifier",
+                            "start": 77,
+                            "end": 81,
                             "loc": {
                                 "start": {
-                                    "line": 6,
-                                    "column": 26
+                                    "line": 4,
+                                    "column": 30
                                 },
                                 "end": {
-                                    "line": 6,
-                                    "column": 28
+                                    "line": 4,
+                                    "column": 34
                                 }
                             },
                             "range": [
-                                94,
-                                96
+                                77,
+                                81
                             ],
-                            "value": 42,
-                            "raw": "42"
+                            "name": "size"
                         },
-                        "computed": true
+                        "computed": false
                     },
                     "references": [
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 87,
-                                "end": 93,
+                                "start": 72,
+                                "end": 76,
                                 "loc": {
                                     "start": {
-                                        "line": 6,
-                                        "column": 19
+                                        "line": 4,
+                                        "column": 25
                                     },
                                     "end": {
-                                        "line": 6,
-                                        "column": 25
+                                        "line": 4,
+                                        "column": 29
                                     }
                                 },
                                 "range": [
-                                    87,
-                                    93
+                                    72,
+                                    76
                                 ],
-                                "name": "colors"
+                                "name": "font"
                             },
                             "mode": "r"
                         }
@@ -314,98 +257,120 @@
                 {
                     "type": "VText",
                     "range": [
-                        99,
-                        125
+                        85,
+                        105
                     ],
                     "loc": {
                         "start": {
-                            "line": 6,
-                            "column": 31
+                            "line": 4,
+                            "column": 38
                         },
                         "end": {
-                            "line": 9,
-                            "column": 11
+                            "line": 5,
+                            "column": 18
                         }
                     },
-                    "value": ";\n  }\n  .text{\n    color: "
+                    "value": ";\n    border-color: "
                 },
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        125,
-                        145
+                        105,
+                        138
                     ],
                     "loc": {
                         "start": {
-                            "line": 9,
-                            "column": 11
+                            "line": 5,
+                            "column": 18
                         },
                         "end": {
-                            "line": 9,
-                            "column": 31
+                            "line": 5,
+                            "column": 51
                         }
                     },
                     "expression": {
                         "type": "CallExpression",
-                        "start": 133,
-                        "end": 143,
+                        "start": 115,
+                        "end": 133,
                         "loc": {
                             "start": {
-                                "line": 9,
-                                "column": 19
+                                "line": 5,
+                                "column": 28
                             },
                             "end": {
-                                "line": 9,
-                                "column": 29
+                                "line": 5,
+                                "column": 46
                             }
                         },
                         "range": [
-                            133,
-                            143
+                            115,
+                            133
                         ],
                         "callee": {
                             "type": "Identifier",
-                            "start": 133,
-                            "end": 141,
+                            "start": 115,
+                            "end": 121,
                             "loc": {
                                 "start": {
-                                    "line": 9,
-                                    "column": 19
+                                    "line": 5,
+                                    "column": 28
                                 },
                                 "end": {
-                                    "line": 9,
-                                    "column": 27
+                                    "line": 5,
+                                    "column": 34
                                 }
                             },
                             "range": [
-                                133,
-                                141
+                                115,
+                                121
                             ],
-                            "name": "getColor"
+                            "name": "border"
                         },
-                        "arguments": []
+                        "arguments": [
+                            {
+                                "type": "Literal",
+                                "start": 124,
+                                "end": 131,
+                                "loc": {
+                                    "start": {
+                                        "line": 5,
+                                        "column": 37
+                                    },
+                                    "end": {
+                                        "line": 5,
+                                        "column": 44
+                                    }
+                                },
+                                "range": [
+                                    124,
+                                    131
+                                ],
+                                "value": "color",
+                                "raw": "'color'"
+                            }
+                        ]
                     },
                     "references": [
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 133,
-                                "end": 141,
+                                "start": 115,
+                                "end": 121,
                                 "loc": {
                                     "start": {
-                                        "line": 9,
-                                        "column": 19
+                                        "line": 5,
+                                        "column": 28
                                     },
                                     "end": {
-                                        "line": 9,
-                                        "column": 27
+                                        "line": 5,
+                                        "column": 34
                                     }
                                 },
                                 "range": [
-                                    133,
-                                    141
+                                    115,
+                                    121
                                 ],
-                                "name": "getColor"
+                                "name": "border"
                             },
                             "mode": "r"
                         }
@@ -414,78 +379,118 @@
                 {
                     "type": "VText",
                     "range": [
-                        145,
-                        337
+                        138,
+                        163
                     ],
                     "loc": {
                         "start": {
-                            "line": 9,
-                            "column": 31
+                            "line": 5,
+                            "column": 51
                         },
                         "end": {
-                            "line": 16,
-                            "column": 15
+                            "line": 6,
+                            "column": 22
                         }
                     },
-                    "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: /**/"
+                    "value": ";;\n    background-color: "
                 },
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        337,
-                        350
+                        163,
+                        221
                     ],
                     "loc": {
                         "start": {
-                            "line": 16,
-                            "column": 15
+                            "line": 6,
+                            "column": 22
                         },
                         "end": {
-                            "line": 16,
-                            "column": 28
+                            "line": 10,
+                            "column": 5
                         }
                     },
                     "expression": {
-                        "type": "Identifier",
-                        "start": 344,
-                        "end": 349,
+                        "type": "MemberExpression",
+                        "start": 181,
+                        "end": 215,
                         "loc": {
                             "start": {
-                                "line": 16,
-                                "column": 22
+                                "line": 7,
+                                "column": 8
                             },
                             "end": {
-                                "line": 16,
-                                "column": 27
+                                "line": 9,
+                                "column": 13
                             }
                         },
                         "range": [
-                            344,
-                            349
+                            181,
+                            215
                         ],
-                        "name": "color"
+                        "object": {
+                            "type": "Identifier",
+                            "start": 181,
+                            "end": 191,
+                            "loc": {
+                                "start": {
+                                    "line": 7,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 7,
+                                    "column": 18
+                                }
+                            },
+                            "range": [
+                                181,
+                                191
+                            ],
+                            "name": "background"
+                        },
+                        "property": {
+                            "type": "Identifier",
+                            "start": 210,
+                            "end": 215,
+                            "loc": {
+                                "start": {
+                                    "line": 9,
+                                    "column": 8
+                                },
+                                "end": {
+                                    "line": 9,
+                                    "column": 13
+                                }
+                            },
+                            "range": [
+                                210,
+                                215
+                            ],
+                            "name": "color"
+                        },
+                        "computed": false
                     },
                     "references": [
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 344,
-                                "end": 349,
+                                "start": 181,
+                                "end": 191,
                                 "loc": {
                                     "start": {
-                                        "line": 16,
-                                        "column": 22
+                                        "line": 7,
+                                        "column": 8
                                     },
                                     "end": {
-                                        "line": 16,
-                                        "column": 27
+                                        "line": 7,
+                                        "column": 18
                                     }
                                 },
                                 "range": [
-                                    344,
-                                    349
+                                    181,
+                                    191
                                 ],
-                                "name": "color"
+                                "name": "background"
                             },
                             "mode": "r"
                         }
@@ -494,16 +499,16 @@
                 {
                     "type": "VText",
                     "range": [
-                        350,
-                        356
+                        221,
+                        227
                     ],
                     "loc": {
                         "start": {
-                            "line": 16,
-                            "column": 28
+                            "line": 10,
+                            "column": 5
                         },
                         "end": {
-                            "line": 18,
+                            "line": 12,
                             "column": 0
                         }
                     },
@@ -513,16 +518,16 @@
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    356,
-                    364
+                    227,
+                    235
                 ],
                 "loc": {
                     "start": {
-                        "line": 18,
+                        "line": 12,
                         "column": 0
                     },
                     "end": {
-                        "line": 18,
+                        "line": 12,
                         "column": 8
                     }
                 }
@@ -533,16 +538,16 @@
         {
             "type": "VText",
             "range": [
-                364,
-                365
+                235,
+                236
             ],
             "loc": {
                 "start": {
-                    "line": 18,
+                    "line": 12,
                     "column": 8
                 },
                 "end": {
-                    "line": 19,
+                    "line": 13,
                     "column": 0
                 }
             },
@@ -568,74 +573,20 @@
             },
             "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
+                6,
+                7
             ],
             "loc": {
                 "start": {
                     "line": 1,
-                    "column": 18
+                    "column": 6
                 },
                 "end": {
                     "line": 1,
-                    "column": 19
+                    "column": 7
                 }
             },
             "value": ""
@@ -643,13 +594,13 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                19,
-                22
+                7,
+                10
             ],
             "loc": {
                 "start": {
                     "line": 1,
-                    "column": 19
+                    "column": 7
                 },
                 "end": {
                     "line": 2,
@@ -661,8 +612,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                22,
-                28
+                10,
+                16
             ],
             "loc": {
                 "start": {
@@ -679,8 +630,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                28,
-                33
+                16,
+                21
             ],
             "loc": {
                 "start": {
@@ -697,8 +648,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                33,
-                39
+                21,
+                27
             ],
             "loc": {
                 "start": {
@@ -715,8 +666,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                39,
-                40
+                27,
+                28
             ],
             "loc": {
                 "start": {
@@ -733,8 +684,8 @@
         {
             "type": "HTMLText",
             "range": [
-                40,
-                46
+                28,
+                34
             ],
             "loc": {
                 "start": {
@@ -751,8 +702,8 @@
         {
             "type": "Punctuator",
             "range": [
-                46,
-                47
+                34,
+                35
             ],
             "loc": {
                 "start": {
@@ -769,37 +720,37 @@
         {
             "type": "Identifier",
             "value": "color",
-            "start": 47,
-            "end": 52,
+            "start": 37,
+            "end": 42,
             "loc": {
                 "start": {
                     "line": 3,
-                    "column": 18
+                    "column": 20
                 },
                 "end": {
                     "line": 3,
-                    "column": 23
+                    "column": 25
                 }
             },
             "range": [
-                47,
-                52
+                37,
+                42
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                52,
-                53
+                44,
+                45
             ],
             "loc": {
                 "start": {
                     "line": 3,
-                    "column": 23
+                    "column": 27
                 },
                 "end": {
                     "line": 3,
-                    "column": 24
+                    "column": 28
                 }
             },
             "value": ")"
@@ -807,17 +758,17 @@
         {
             "type": "HTMLRawText",
             "range": [
-                53,
-                54
+                45,
+                46
             ],
             "loc": {
                 "start": {
                     "line": 3,
-                    "column": 24
+                    "column": 28
                 },
                 "end": {
                     "line": 3,
-                    "column": 25
+                    "column": 29
                 }
             },
             "value": ";"
@@ -825,840 +776,238 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                54,
-                57
+                46,
+                51
             ],
             "loc": {
                 "start": {
                     "line": 3,
-                    "column": 25
+                    "column": 29
                 },
                 "end": {
                     "line": 4,
-                    "column": 2
+                    "column": 4
                 }
             },
-            "value": "\n  "
+            "value": "\n    "
         },
         {
             "type": "HTMLRawText",
             "range": [
-                57,
-                58
+                51,
+                61
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 2
+                    "column": 4
                 },
                 "end": {
                     "line": 4,
-                    "column": 3
+                    "column": 14
                 }
             },
-            "value": "}"
+            "value": "font-size:"
         },
         {
             "type": "HTMLWhitespace",
             "range": [
-                58,
-                61
+                61,
+                62
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 3
+                    "column": 14
                 },
                 "end": {
-                    "line": 5,
-                    "column": 2
+                    "line": 4,
+                    "column": 15
                 }
             },
-            "value": "\n  "
+            "value": " "
         },
         {
-            "type": "HTMLRawText",
+            "type": "HTMLText",
             "range": [
-                61,
-                67
+                62,
+                68
             ],
             "loc": {
                 "start": {
-                    "line": 5,
-                    "column": 2
+                    "line": 4,
+                    "column": 15
                 },
                 "end": {
-                    "line": 5,
-                    "column": 8
+                    "line": 4,
+                    "column": 21
                 }
             },
-            "value": ".text{"
+            "value": "v-bind"
         },
         {
-            "type": "HTMLWhitespace",
+            "type": "Punctuator",
             "range": [
-                67,
-                72
+                68,
+                69
             ],
             "loc": {
                 "start": {
-                    "line": 5,
-                    "column": 8
+                    "line": 4,
+                    "column": 21
                 },
                 "end": {
-                    "line": 6,
-                    "column": 4
+                    "line": 4,
+                    "column": 22
                 }
             },
-            "value": "\n    "
+            "value": "("
         },
         {
-            "type": "HTMLRawText",
+            "type": "Punctuator",
             "range": [
-                72,
-                78
+                71,
+                72
             ],
             "loc": {
                 "start": {
-                    "line": 6,
-                    "column": 4
+                    "line": 4,
+                    "column": 24
                 },
                 "end": {
-                    "line": 6,
-                    "column": 10
+                    "line": 4,
+                    "column": 25
                 }
             },
-            "value": "color:"
+            "value": "'"
         },
         {
-            "type": "HTMLWhitespace",
-            "range": [
-                78,
-                79
-            ],
+            "type": "Identifier",
+            "value": "font",
+            "start": 72,
+            "end": 76,
             "loc": {
                 "start": {
-                    "line": 6,
-                    "column": 10
+                    "line": 4,
+                    "column": 25
                 },
                 "end": {
-                    "line": 6,
-                    "column": 11
+                    "line": 4,
+                    "column": 29
                 }
             },
-            "value": " "
+            "range": [
+                72,
+                76
+            ]
         },
         {
-            "type": "HTMLText",
-            "range": [
-                79,
-                85
-            ],
+            "type": "Punctuator",
+            "value": ".",
+            "start": 76,
+            "end": 77,
             "loc": {
                 "start": {
-                    "line": 6,
-                    "column": 11
+                    "line": 4,
+                    "column": 29
                 },
                 "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,
+                    "line": 4,
                     "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()')\";"
+                76,
+                77
+            ]
         },
         {
-            "type": "HTMLWhitespace",
-            "range": [
-                208,
-                213
-            ],
+            "type": "Identifier",
+            "value": "size",
+            "start": 77,
+            "end": 81,
             "loc": {
                 "start": {
-                    "line": 12,
-                    "column": 36
+                    "line": 4,
+                    "column": 30
                 },
                 "end": {
-                    "line": 13,
-                    "column": 4
+                    "line": 4,
+                    "column": 34
                 }
             },
-            "value": "\n    "
+            "range": [
+                77,
+                81
+            ]
         },
         {
-            "type": "HTMLRawText",
+            "type": "Punctuator",
             "range": [
-                213,
-                221
+                81,
+                82
             ],
             "loc": {
                 "start": {
-                    "line": 13,
-                    "column": 4
+                    "line": 4,
+                    "column": 34
                 },
                 "end": {
-                    "line": 13,
-                    "column": 12
+                    "line": 4,
+                    "column": 35
                 }
             },
-            "value": "content:"
+            "value": "'"
         },
         {
-            "type": "HTMLWhitespace",
+            "type": "Punctuator",
             "range": [
-                221,
-                222
+                84,
+                85
             ],
             "loc": {
                 "start": {
-                    "line": 13,
-                    "column": 12
+                    "line": 4,
+                    "column": 37
                 },
                 "end": {
-                    "line": 13,
-                    "column": 13
+                    "line": 4,
+                    "column": 38
                 }
             },
-            "value": " "
+            "value": ")"
         },
         {
             "type": "HTMLRawText",
             "range": [
-                222,
-                260
+                85,
+                86
             ],
             "loc": {
                 "start": {
-                    "line": 13,
-                    "column": 13
+                    "line": 4,
+                    "column": 38
                 },
                 "end": {
-                    "line": 13,
-                    "column": 51
+                    "line": 4,
+                    "column": 39
                 }
             },
-            "value": "\"v-bind('getColor()')\\\"v-bind(color)\";"
+            "value": ";"
         },
         {
             "type": "HTMLWhitespace",
             "range": [
-                260,
-                265
+                86,
+                91
             ],
             "loc": {
                 "start": {
-                    "line": 13,
-                    "column": 51
+                    "line": 4,
+                    "column": 39
                 },
                 "end": {
-                    "line": 14,
+                    "line": 5,
                     "column": 4
                 }
             },
@@ -1667,250 +1016,240 @@
         {
             "type": "HTMLRawText",
             "range": [
-                265,
-                267
+                91,
+                104
             ],
             "loc": {
                 "start": {
-                    "line": 14,
+                    "line": 5,
                     "column": 4
                 },
                 "end": {
-                    "line": 14,
-                    "column": 6
+                    "line": 5,
+                    "column": 17
                 }
             },
-            "value": "//"
+            "value": "border-color:"
         },
         {
             "type": "HTMLWhitespace",
             "range": [
-                267,
-                268
+                104,
+                105
             ],
             "loc": {
                 "start": {
-                    "line": 14,
-                    "column": 6
+                    "line": 5,
+                    "column": 17
                 },
                 "end": {
-                    "line": 14,
-                    "column": 7
+                    "line": 5,
+                    "column": 18
                 }
             },
             "value": " "
         },
         {
-            "type": "HTMLRawText",
+            "type": "HTMLText",
             "range": [
-                268,
-                274
+                105,
+                111
             ],
             "loc": {
                 "start": {
-                    "line": 14,
-                    "column": 7
+                    "line": 5,
+                    "column": 18
                 },
                 "end": {
-                    "line": 14,
-                    "column": 13
+                    "line": 5,
+                    "column": 24
                 }
             },
-            "value": "color:"
+            "value": "v-bind"
         },
         {
-            "type": "HTMLWhitespace",
+            "type": "Punctuator",
             "range": [
-                274,
-                275
+                111,
+                112
             ],
             "loc": {
                 "start": {
-                    "line": 14,
-                    "column": 13
+                    "line": 5,
+                    "column": 24
                 },
                 "end": {
-                    "line": 14,
-                    "column": 14
+                    "line": 5,
+                    "column": 25
                 }
             },
-            "value": " "
+            "value": "("
         },
         {
-            "type": "HTMLRawText",
+            "type": "Punctuator",
             "range": [
-                275,
-                289
+                114,
+                115
             ],
             "loc": {
                 "start": {
-                    "line": 14,
-                    "column": 14
+                    "line": 5,
+                    "column": 27
                 },
                 "end": {
-                    "line": 14,
+                    "line": 5,
                     "column": 28
                 }
             },
-            "value": "v-bind(color);"
+            "value": "\""
         },
         {
-            "type": "HTMLWhitespace",
-            "range": [
-                289,
-                294
-            ],
+            "type": "Identifier",
+            "value": "border",
+            "start": 115,
+            "end": 121,
             "loc": {
                 "start": {
-                    "line": 14,
+                    "line": 5,
                     "column": 28
                 },
                 "end": {
-                    "line": 15,
-                    "column": 4
+                    "line": 5,
+                    "column": 34
                 }
             },
-            "value": "\n    "
-        },
-        {
-            "type": "HTMLRawText",
             "range": [
-                294,
-                296
-            ],
-            "loc": {
-                "start": {
-                    "line": 15,
-                    "column": 4
-                },
-                "end": {
-                    "line": 15,
-                    "column": 6
-                }
-            },
-            "value": "/*"
+                115,
+                121
+            ]
         },
         {
-            "type": "HTMLWhitespace",
-            "range": [
-                296,
-                297
-            ],
+            "type": "Punctuator",
+            "value": "(",
+            "start": 122,
+            "end": 123,
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 6
+                    "line": 5,
+                    "column": 35
                 },
                 "end": {
-                    "line": 15,
-                    "column": 7
+                    "line": 5,
+                    "column": 36
                 }
             },
-            "value": " "
+            "range": [
+                122,
+                123
+            ]
         },
         {
-            "type": "HTMLRawText",
-            "range": [
-                297,
-                303
-            ],
+            "type": "String",
+            "value": "'color'",
+            "start": 124,
+            "end": 131,
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 7
+                    "line": 5,
+                    "column": 37
                 },
                 "end": {
-                    "line": 15,
-                    "column": 13
+                    "line": 5,
+                    "column": 44
                 }
             },
-            "value": "color:"
+            "range": [
+                124,
+                131
+            ]
         },
         {
-            "type": "HTMLWhitespace",
-            "range": [
-                303,
-                304
-            ],
+            "type": "Punctuator",
+            "value": ")",
+            "start": 132,
+            "end": 133,
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 13
+                    "line": 5,
+                    "column": 45
                 },
                 "end": {
-                    "line": 15,
-                    "column": 14
+                    "line": 5,
+                    "column": 46
                 }
             },
-            "value": " "
+            "range": [
+                132,
+                133
+            ]
         },
         {
-            "type": "HTMLRawText",
+            "type": "Punctuator",
             "range": [
-                304,
-                318
+                134,
+                135
             ],
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 14
+                    "line": 5,
+                    "column": 47
                 },
                 "end": {
-                    "line": 15,
-                    "column": 28
+                    "line": 5,
+                    "column": 48
                 }
             },
-            "value": "v-bind(color);"
+            "value": "\""
         },
         {
-            "type": "HTMLWhitespace",
+            "type": "Punctuator",
             "range": [
-                318,
-                319
+                137,
+                138
             ],
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 28
+                    "line": 5,
+                    "column": 50
                 },
                 "end": {
-                    "line": 15,
-                    "column": 29
+                    "line": 5,
+                    "column": 51
                 }
             },
-            "value": " "
+            "value": ")"
         },
         {
             "type": "HTMLRawText",
             "range": [
-                319,
-                321
+                138,
+                140
             ],
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 29
+                    "line": 5,
+                    "column": 51
                 },
                 "end": {
-                    "line": 15,
-                    "column": 31
+                    "line": 5,
+                    "column": 53
                 }
             },
-            "value": "*/"
+            "value": ";;"
         },
         {
             "type": "HTMLWhitespace",
             "range": [
-                321,
-                326
+                140,
+                145
             ],
             "loc": {
                 "start": {
-                    "line": 15,
-                    "column": 31
+                    "line": 5,
+                    "column": 53
                 },
                 "end": {
-                    "line": 16,
+                    "line": 6,
                     "column": 4
                 }
             },
@@ -1919,127 +1258,149 @@
         {
             "type": "HTMLRawText",
             "range": [
-                326,
-                332
+                145,
+                162
             ],
             "loc": {
                 "start": {
-                    "line": 16,
+                    "line": 6,
                     "column": 4
                 },
                 "end": {
-                    "line": 16,
-                    "column": 10
+                    "line": 6,
+                    "column": 21
                 }
             },
-            "value": "color:"
+            "value": "background-color:"
         },
         {
             "type": "HTMLWhitespace",
             "range": [
-                332,
-                333
+                162,
+                163
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 10
+                    "line": 6,
+                    "column": 21
                 },
                 "end": {
-                    "line": 16,
-                    "column": 11
+                    "line": 6,
+                    "column": 22
                 }
             },
             "value": " "
         },
         {
-            "type": "HTMLRawText",
+            "type": "HTMLText",
             "range": [
-                333,
-                337
+                163,
+                169
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 11
+                    "line": 6,
+                    "column": 22
                 },
                 "end": {
-                    "line": 16,
-                    "column": 15
+                    "line": 6,
+                    "column": 28
                 }
             },
-            "value": "/**/"
+            "value": "v-bind"
         },
         {
-            "type": "HTMLText",
+            "type": "Punctuator",
             "range": [
-                337,
-                343
+                169,
+                170
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 15
+                    "line": 6,
+                    "column": 28
                 },
                 "end": {
-                    "line": 16,
-                    "column": 21
+                    "line": 6,
+                    "column": 29
                 }
             },
-            "value": "v-bind"
+            "value": "("
         },
         {
-            "type": "Punctuator",
+            "type": "Identifier",
+            "value": "background",
+            "start": 181,
+            "end": 191,
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 18
+                }
+            },
             "range": [
-                343,
-                344
-            ],
+                181,
+                191
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ".",
+            "start": 200,
+            "end": 201,
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 21
+                    "line": 8,
+                    "column": 8
                 },
                 "end": {
-                    "line": 16,
-                    "column": 22
+                    "line": 8,
+                    "column": 9
                 }
             },
-            "value": "("
+            "range": [
+                200,
+                201
+            ]
         },
         {
             "type": "Identifier",
             "value": "color",
-            "start": 344,
-            "end": 349,
+            "start": 210,
+            "end": 215,
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 22
+                    "line": 9,
+                    "column": 8
                 },
                 "end": {
-                    "line": 16,
-                    "column": 27
+                    "line": 9,
+                    "column": 13
                 }
             },
             "range": [
-                344,
-                349
+                210,
+                215
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                349,
-                350
+                220,
+                221
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 27
+                    "line": 10,
+                    "column": 4
                 },
                 "end": {
-                    "line": 16,
-                    "column": 28
+                    "line": 10,
+                    "column": 5
                 }
             },
             "value": ")"
@@ -2047,17 +1408,17 @@
         {
             "type": "HTMLRawText",
             "range": [
-                350,
-                351
+                221,
+                222
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 28
+                    "line": 10,
+                    "column": 5
                 },
                 "end": {
-                    "line": 16,
-                    "column": 29
+                    "line": 10,
+                    "column": 6
                 }
             },
             "value": ";"
@@ -2065,16 +1426,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                351,
-                354
+                222,
+                225
             ],
             "loc": {
                 "start": {
-                    "line": 16,
-                    "column": 29
+                    "line": 10,
+                    "column": 6
                 },
                 "end": {
-                    "line": 17,
+                    "line": 11,
                     "column": 2
                 }
             },
@@ -2083,16 +1444,16 @@
         {
             "type": "HTMLRawText",
             "range": [
-                354,
-                355
+                225,
+                226
             ],
             "loc": {
                 "start": {
-                    "line": 17,
+                    "line": 11,
                     "column": 2
                 },
                 "end": {
-                    "line": 17,
+                    "line": 11,
                     "column": 3
                 }
             },
@@ -2101,16 +1462,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                355,
-                356
+                226,
+                227
             ],
             "loc": {
                 "start": {
-                    "line": 17,
+                    "line": 11,
                     "column": 3
                 },
                 "end": {
-                    "line": 18,
+                    "line": 12,
                     "column": 0
                 }
             },
@@ -2119,16 +1480,16 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                356,
-                363
+                227,
+                234
             ],
             "loc": {
                 "start": {
-                    "line": 18,
+                    "line": 12,
                     "column": 0
                 },
                 "end": {
-                    "line": 18,
+                    "line": 12,
                     "column": 7
                 }
             },
@@ -2137,16 +1498,16 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                363,
-                364
+                234,
+                235
             ],
             "loc": {
                 "start": {
-                    "line": 18,
+                    "line": 12,
                     "column": 7
                 },
                 "end": {
-                    "line": 18,
+                    "line": 12,
                     "column": 8
                 }
             },
@@ -2155,16 +1516,16 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                364,
-                365
+                235,
+                236
             ],
             "loc": {
                 "start": {
-                    "line": 18,
+                    "line": 12,
                     "column": 8
                 },
                 "end": {
-                    "line": 19,
+                    "line": 13,
                     "column": 0
                 }
             },
diff --git a/test/fixtures/document-fragment/style-variables05/source.vue b/test/fixtures/document-fragment/style-variables05/source.vue
index 70c9f9fd..3518cba8 100644
--- a/test/fixtures/document-fragment/style-variables05/source.vue
+++ b/test/fixtures/document-fragment/style-variables05/source.vue
@@ -1,18 +1,12 @@
-<style lang="scss">
+<style>
   .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);
+    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
index 2faa5238..1e9c52c5 100644
--- a/test/fixtures/document-fragment/style-variables05/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables05/token-ranges.json
@@ -1,8 +1,5 @@
 [
     "<style",
-    "lang",
-    "=",
-    "\"scss\"",
     ">",
     "\n  ",
     ".text{",
@@ -14,71 +11,38 @@
     "color",
     ")",
     ";",
-    "\n  ",
-    "}",
-    "\n  ",
-    ".text{",
     "\n    ",
-    "color:",
+    "font-size:",
     " ",
     "v-bind",
     "(",
-    "\"",
-    "colors",
-    "[",
-    "42",
-    "]",
-    "\"",
+    "'",
+    "font",
+    ".",
+    "size",
+    "'",
     ")",
     ";",
-    "\n  ",
-    "}",
-    "\n  ",
-    ".text{",
     "\n    ",
-    "color:",
+    "border-color:",
     " ",
     "v-bind",
     "(",
-    "'",
-    "getColor",
+    "\"",
+    "border",
     "(",
+    "'color'",
     ")",
-    "'",
+    "\"",
     ")",
-    ";",
-    "\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:",
+    "background-color:",
     " ",
-    "/**/",
     "v-bind",
     "(",
+    "background",
+    ".",
     "color",
     ")",
     ";",
diff --git a/test/fixtures/document-fragment/style-variables05/tree.json b/test/fixtures/document-fragment/style-variables05/tree.json
index 58e58424..4dce1239 100644
--- a/test/fixtures/document-fragment/style-variables05/tree.json
+++ b/test/fixtures/document-fragment/style-variables05/tree.json
@@ -1,33 +1,16 @@
 [
     {
         "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",
+        "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 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>",
+                "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 lang=\"scss\">",
-                        "children": [
-                            {
-                                "type": "VAttribute",
-                                "text": "lang=\"scss\"",
-                                "children": [
-                                    {
-                                        "type": "VIdentifier",
-                                        "text": "lang",
-                                        "children": []
-                                    },
-                                    {
-                                        "type": "VLiteral",
-                                        "text": "\"scss\"",
-                                        "children": []
-                                    }
-                                ]
-                            }
-                        ]
+                        "text": "<style>",
+                        "children": []
                     },
                     {
                         "type": "VText",
@@ -36,7 +19,7 @@
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind(color)",
+                        "text": "v-bind(  color  )",
                         "children": [
                             {
                                 "type": "Identifier",
@@ -47,25 +30,25 @@
                     },
                     {
                         "type": "VText",
-                        "text": ";\n  }\n  .text{\n    color: ",
+                        "text": ";\n    font-size: ",
                         "children": []
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind(\"colors[42]\")",
+                        "text": "v-bind(  'font.size'  )",
                         "children": [
                             {
                                 "type": "MemberExpression",
-                                "text": "colors[42]",
+                                "text": "font.size",
                                 "children": [
                                     {
                                         "type": "Identifier",
-                                        "text": "colors",
+                                        "text": "font",
                                         "children": []
                                     },
                                     {
-                                        "type": "Literal",
-                                        "text": "42",
+                                        "type": "Identifier",
+                                        "text": "size",
                                         "children": []
                                     }
                                 ]
@@ -74,20 +57,25 @@
                     },
                     {
                         "type": "VText",
-                        "text": ";\n  }\n  .text{\n    color: ",
+                        "text": ";\n    border-color: ",
                         "children": []
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind('getColor()')",
+                        "text": "v-bind(  \"border ( 'color' ) \"  )",
                         "children": [
                             {
                                 "type": "CallExpression",
-                                "text": "getColor()",
+                                "text": "border ( 'color' )",
                                 "children": [
                                     {
                                         "type": "Identifier",
-                                        "text": "getColor",
+                                        "text": "border",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'color'",
                                         "children": []
                                     }
                                 ]
@@ -96,17 +84,28 @@
                     },
                     {
                         "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: /**/",
+                        "text": ";;\n    background-color: ",
                         "children": []
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind(color)",
+                        "text": "v-bind(  \n        background\n        .\n        color\n    )",
                         "children": [
                             {
-                                "type": "Identifier",
-                                "text": "color",
-                                "children": []
+                                "type": "MemberExpression",
+                                "text": "background\n        .\n        color",
+                                "children": [
+                                    {
+                                        "type": "Identifier",
+                                        "text": "background",
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Identifier",
+                                        "text": "color",
+                                        "children": []
+                                    }
+                                ]
                             }
                         ]
                     },

From 068b1b94f6d53b740d9c46ba48b45d9a18bff7a5 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 17:19:16 +0900
Subject: [PATCH 05/10] update testcase

---
 .../style-variables05/document-fragment.json  | 406 +++++++++---------
 .../style-variables05/source.vue              |   4 +-
 .../style-variables05/tree.json               |   8 +-
 3 files changed, 209 insertions(+), 209 deletions(-)

diff --git a/test/fixtures/document-fragment/style-variables05/document-fragment.json b/test/fixtures/document-fragment/style-variables05/document-fragment.json
index 76214b8f..3ed663ed 100644
--- a/test/fixtures/document-fragment/style-variables05/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables05/document-fragment.json
@@ -2,7 +2,7 @@
     "type": "VDocumentFragment",
     "range": [
         0,
-        236
+        242
     ],
     "loc": {
         "start": {
@@ -19,7 +19,7 @@
             "type": "VElement",
             "range": [
                 0,
-                235
+                241
             ],
             "loc": {
                 "start": {
@@ -156,7 +156,7 @@
                     "type": "VExpressionContainer",
                     "range": [
                         62,
-                        85
+                        89
                     ],
                     "loc": {
                         "start": {
@@ -165,64 +165,64 @@
                         },
                         "end": {
                             "line": 4,
-                            "column": 38
+                            "column": 42
                         }
                     },
                     "expression": {
                         "type": "MemberExpression",
-                        "start": 72,
-                        "end": 81,
+                        "start": 74,
+                        "end": 83,
                         "loc": {
                             "start": {
                                 "line": 4,
-                                "column": 25
+                                "column": 27
                             },
                             "end": {
                                 "line": 4,
-                                "column": 34
+                                "column": 36
                             }
                         },
                         "range": [
-                            72,
-                            81
+                            74,
+                            83
                         ],
                         "object": {
                             "type": "Identifier",
-                            "start": 72,
-                            "end": 76,
+                            "start": 74,
+                            "end": 78,
                             "loc": {
                                 "start": {
                                     "line": 4,
-                                    "column": 25
+                                    "column": 27
                                 },
                                 "end": {
                                     "line": 4,
-                                    "column": 29
+                                    "column": 31
                                 }
                             },
                             "range": [
-                                72,
-                                76
+                                74,
+                                78
                             ],
                             "name": "font"
                         },
                         "property": {
                             "type": "Identifier",
-                            "start": 77,
-                            "end": 81,
+                            "start": 79,
+                            "end": 83,
                             "loc": {
                                 "start": {
                                     "line": 4,
-                                    "column": 30
+                                    "column": 32
                                 },
                                 "end": {
                                     "line": 4,
-                                    "column": 34
+                                    "column": 36
                                 }
                             },
                             "range": [
-                                77,
-                                81
+                                79,
+                                83
                             ],
                             "name": "size"
                         },
@@ -232,21 +232,21 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 72,
-                                "end": 76,
+                                "start": 74,
+                                "end": 78,
                                 "loc": {
                                     "start": {
                                         "line": 4,
-                                        "column": 25
+                                        "column": 27
                                     },
                                     "end": {
                                         "line": 4,
-                                        "column": 29
+                                        "column": 31
                                     }
                                 },
                                 "range": [
-                                    72,
-                                    76
+                                    74,
+                                    78
                                 ],
                                 "name": "font"
                             },
@@ -257,13 +257,13 @@
                 {
                     "type": "VText",
                     "range": [
-                        85,
-                        105
+                        89,
+                        109
                     ],
                     "loc": {
                         "start": {
                             "line": 4,
-                            "column": 38
+                            "column": 42
                         },
                         "end": {
                             "line": 5,
@@ -275,8 +275,8 @@
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        105,
-                        138
+                        109,
+                        144
                     ],
                     "loc": {
                         "start": {
@@ -285,65 +285,65 @@
                         },
                         "end": {
                             "line": 5,
-                            "column": 51
+                            "column": 53
                         }
                     },
                     "expression": {
                         "type": "CallExpression",
-                        "start": 115,
-                        "end": 133,
+                        "start": 121,
+                        "end": 139,
                         "loc": {
                             "start": {
                                 "line": 5,
-                                "column": 28
+                                "column": 30
                             },
                             "end": {
                                 "line": 5,
-                                "column": 46
+                                "column": 48
                             }
                         },
                         "range": [
-                            115,
-                            133
+                            121,
+                            139
                         ],
                         "callee": {
                             "type": "Identifier",
-                            "start": 115,
-                            "end": 121,
+                            "start": 121,
+                            "end": 127,
                             "loc": {
                                 "start": {
                                     "line": 5,
-                                    "column": 28
+                                    "column": 30
                                 },
                                 "end": {
                                     "line": 5,
-                                    "column": 34
+                                    "column": 36
                                 }
                             },
                             "range": [
-                                115,
-                                121
+                                121,
+                                127
                             ],
                             "name": "border"
                         },
                         "arguments": [
                             {
                                 "type": "Literal",
-                                "start": 124,
-                                "end": 131,
+                                "start": 130,
+                                "end": 137,
                                 "loc": {
                                     "start": {
                                         "line": 5,
-                                        "column": 37
+                                        "column": 39
                                     },
                                     "end": {
                                         "line": 5,
-                                        "column": 44
+                                        "column": 46
                                     }
                                 },
                                 "range": [
-                                    124,
-                                    131
+                                    130,
+                                    137
                                 ],
                                 "value": "color",
                                 "raw": "'color'"
@@ -354,21 +354,21 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 115,
-                                "end": 121,
+                                "start": 121,
+                                "end": 127,
                                 "loc": {
                                     "start": {
                                         "line": 5,
-                                        "column": 28
+                                        "column": 30
                                     },
                                     "end": {
                                         "line": 5,
-                                        "column": 34
+                                        "column": 36
                                     }
                                 },
                                 "range": [
-                                    115,
-                                    121
+                                    121,
+                                    127
                                 ],
                                 "name": "border"
                             },
@@ -379,13 +379,13 @@
                 {
                     "type": "VText",
                     "range": [
-                        138,
-                        163
+                        144,
+                        169
                     ],
                     "loc": {
                         "start": {
                             "line": 5,
-                            "column": 51
+                            "column": 53
                         },
                         "end": {
                             "line": 6,
@@ -397,8 +397,8 @@
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        163,
-                        221
+                        169,
+                        227
                     ],
                     "loc": {
                         "start": {
@@ -412,8 +412,8 @@
                     },
                     "expression": {
                         "type": "MemberExpression",
-                        "start": 181,
-                        "end": 215,
+                        "start": 187,
+                        "end": 221,
                         "loc": {
                             "start": {
                                 "line": 7,
@@ -425,13 +425,13 @@
                             }
                         },
                         "range": [
-                            181,
-                            215
+                            187,
+                            221
                         ],
                         "object": {
                             "type": "Identifier",
-                            "start": 181,
-                            "end": 191,
+                            "start": 187,
+                            "end": 197,
                             "loc": {
                                 "start": {
                                     "line": 7,
@@ -443,15 +443,15 @@
                                 }
                             },
                             "range": [
-                                181,
-                                191
+                                187,
+                                197
                             ],
                             "name": "background"
                         },
                         "property": {
                             "type": "Identifier",
-                            "start": 210,
-                            "end": 215,
+                            "start": 216,
+                            "end": 221,
                             "loc": {
                                 "start": {
                                     "line": 9,
@@ -463,8 +463,8 @@
                                 }
                             },
                             "range": [
-                                210,
-                                215
+                                216,
+                                221
                             ],
                             "name": "color"
                         },
@@ -474,8 +474,8 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 181,
-                                "end": 191,
+                                "start": 187,
+                                "end": 197,
                                 "loc": {
                                     "start": {
                                         "line": 7,
@@ -487,8 +487,8 @@
                                     }
                                 },
                                 "range": [
-                                    181,
-                                    191
+                                    187,
+                                    197
                                 ],
                                 "name": "background"
                             },
@@ -499,8 +499,8 @@
                 {
                     "type": "VText",
                     "range": [
-                        221,
-                        227
+                        227,
+                        233
                     ],
                     "loc": {
                         "start": {
@@ -518,8 +518,8 @@
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    227,
-                    235
+                    233,
+                    241
                 ],
                 "loc": {
                     "start": {
@@ -538,8 +538,8 @@
         {
             "type": "VText",
             "range": [
-                235,
-                236
+                241,
+                242
             ],
             "loc": {
                 "start": {
@@ -884,77 +884,77 @@
         {
             "type": "Identifier",
             "value": "font",
-            "start": 72,
-            "end": 76,
+            "start": 74,
+            "end": 78,
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 25
+                    "column": 27
                 },
                 "end": {
                     "line": 4,
-                    "column": 29
+                    "column": 31
                 }
             },
             "range": [
-                72,
-                76
+                74,
+                78
             ]
         },
         {
             "type": "Punctuator",
             "value": ".",
-            "start": 76,
-            "end": 77,
+            "start": 78,
+            "end": 79,
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 29
+                    "column": 31
                 },
                 "end": {
                     "line": 4,
-                    "column": 30
+                    "column": 32
                 }
             },
             "range": [
-                76,
-                77
+                78,
+                79
             ]
         },
         {
             "type": "Identifier",
             "value": "size",
-            "start": 77,
-            "end": 81,
+            "start": 79,
+            "end": 83,
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 30
+                    "column": 32
                 },
                 "end": {
                     "line": 4,
-                    "column": 34
+                    "column": 36
                 }
             },
             "range": [
-                77,
-                81
+                79,
+                83
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                81,
-                82
+                85,
+                86
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 34
+                    "column": 38
                 },
                 "end": {
                     "line": 4,
-                    "column": 35
+                    "column": 39
                 }
             },
             "value": "'"
@@ -962,17 +962,17 @@
         {
             "type": "Punctuator",
             "range": [
-                84,
-                85
+                88,
+                89
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 37
+                    "column": 41
                 },
                 "end": {
                     "line": 4,
-                    "column": 38
+                    "column": 42
                 }
             },
             "value": ")"
@@ -980,17 +980,17 @@
         {
             "type": "HTMLRawText",
             "range": [
-                85,
-                86
+                89,
+                90
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 38
+                    "column": 42
                 },
                 "end": {
                     "line": 4,
-                    "column": 39
+                    "column": 43
                 }
             },
             "value": ";"
@@ -998,13 +998,13 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                86,
-                91
+                90,
+                95
             ],
             "loc": {
                 "start": {
                     "line": 4,
-                    "column": 39
+                    "column": 43
                 },
                 "end": {
                     "line": 5,
@@ -1016,8 +1016,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                91,
-                104
+                95,
+                108
             ],
             "loc": {
                 "start": {
@@ -1034,8 +1034,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                104,
-                105
+                108,
+                109
             ],
             "loc": {
                 "start": {
@@ -1052,8 +1052,8 @@
         {
             "type": "HTMLText",
             "range": [
-                105,
-                111
+                109,
+                115
             ],
             "loc": {
                 "start": {
@@ -1070,8 +1070,8 @@
         {
             "type": "Punctuator",
             "range": [
-                111,
-                112
+                115,
+                116
             ],
             "loc": {
                 "start": {
@@ -1088,8 +1088,8 @@
         {
             "type": "Punctuator",
             "range": [
-                114,
-                115
+                118,
+                119
             ],
             "loc": {
                 "start": {
@@ -1106,97 +1106,97 @@
         {
             "type": "Identifier",
             "value": "border",
-            "start": 115,
-            "end": 121,
+            "start": 121,
+            "end": 127,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 28
+                    "column": 30
                 },
                 "end": {
                     "line": 5,
-                    "column": 34
+                    "column": 36
                 }
             },
             "range": [
-                115,
-                121
+                121,
+                127
             ]
         },
         {
             "type": "Punctuator",
             "value": "(",
-            "start": 122,
-            "end": 123,
+            "start": 128,
+            "end": 129,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 35
+                    "column": 37
                 },
                 "end": {
                     "line": 5,
-                    "column": 36
+                    "column": 38
                 }
             },
             "range": [
-                122,
-                123
+                128,
+                129
             ]
         },
         {
             "type": "String",
             "value": "'color'",
-            "start": 124,
-            "end": 131,
+            "start": 130,
+            "end": 137,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 37
+                    "column": 39
                 },
                 "end": {
                     "line": 5,
-                    "column": 44
+                    "column": 46
                 }
             },
             "range": [
-                124,
-                131
+                130,
+                137
             ]
         },
         {
             "type": "Punctuator",
             "value": ")",
-            "start": 132,
-            "end": 133,
+            "start": 138,
+            "end": 139,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 45
+                    "column": 47
                 },
                 "end": {
                     "line": 5,
-                    "column": 46
+                    "column": 48
                 }
             },
             "range": [
-                132,
-                133
+                138,
+                139
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                134,
-                135
+                140,
+                141
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 47
+                    "column": 49
                 },
                 "end": {
                     "line": 5,
-                    "column": 48
+                    "column": 50
                 }
             },
             "value": "\""
@@ -1204,17 +1204,17 @@
         {
             "type": "Punctuator",
             "range": [
-                137,
-                138
+                143,
+                144
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 50
+                    "column": 52
                 },
                 "end": {
                     "line": 5,
-                    "column": 51
+                    "column": 53
                 }
             },
             "value": ")"
@@ -1222,17 +1222,17 @@
         {
             "type": "HTMLRawText",
             "range": [
-                138,
-                140
+                144,
+                146
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 51
+                    "column": 53
                 },
                 "end": {
                     "line": 5,
-                    "column": 53
+                    "column": 55
                 }
             },
             "value": ";;"
@@ -1240,13 +1240,13 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                140,
-                145
+                146,
+                151
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 53
+                    "column": 55
                 },
                 "end": {
                     "line": 6,
@@ -1258,8 +1258,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                145,
-                162
+                151,
+                168
             ],
             "loc": {
                 "start": {
@@ -1276,8 +1276,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                162,
-                163
+                168,
+                169
             ],
             "loc": {
                 "start": {
@@ -1294,8 +1294,8 @@
         {
             "type": "HTMLText",
             "range": [
-                163,
-                169
+                169,
+                175
             ],
             "loc": {
                 "start": {
@@ -1312,8 +1312,8 @@
         {
             "type": "Punctuator",
             "range": [
-                169,
-                170
+                175,
+                176
             ],
             "loc": {
                 "start": {
@@ -1330,8 +1330,8 @@
         {
             "type": "Identifier",
             "value": "background",
-            "start": 181,
-            "end": 191,
+            "start": 187,
+            "end": 197,
             "loc": {
                 "start": {
                     "line": 7,
@@ -1343,15 +1343,15 @@
                 }
             },
             "range": [
-                181,
-                191
+                187,
+                197
             ]
         },
         {
             "type": "Punctuator",
             "value": ".",
-            "start": 200,
-            "end": 201,
+            "start": 206,
+            "end": 207,
             "loc": {
                 "start": {
                     "line": 8,
@@ -1363,15 +1363,15 @@
                 }
             },
             "range": [
-                200,
-                201
+                206,
+                207
             ]
         },
         {
             "type": "Identifier",
             "value": "color",
-            "start": 210,
-            "end": 215,
+            "start": 216,
+            "end": 221,
             "loc": {
                 "start": {
                     "line": 9,
@@ -1383,15 +1383,15 @@
                 }
             },
             "range": [
-                210,
-                215
+                216,
+                221
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                220,
-                221
+                226,
+                227
             ],
             "loc": {
                 "start": {
@@ -1408,8 +1408,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                221,
-                222
+                227,
+                228
             ],
             "loc": {
                 "start": {
@@ -1426,8 +1426,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                222,
-                225
+                228,
+                231
             ],
             "loc": {
                 "start": {
@@ -1444,8 +1444,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                225,
-                226
+                231,
+                232
             ],
             "loc": {
                 "start": {
@@ -1462,8 +1462,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                226,
-                227
+                232,
+                233
             ],
             "loc": {
                 "start": {
@@ -1480,8 +1480,8 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                227,
-                234
+                233,
+                240
             ],
             "loc": {
                 "start": {
@@ -1498,8 +1498,8 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                234,
-                235
+                240,
+                241
             ],
             "loc": {
                 "start": {
@@ -1516,8 +1516,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                235,
-                236
+                241,
+                242
             ],
             "loc": {
                 "start": {
diff --git a/test/fixtures/document-fragment/style-variables05/source.vue b/test/fixtures/document-fragment/style-variables05/source.vue
index 3518cba8..3f38399e 100644
--- a/test/fixtures/document-fragment/style-variables05/source.vue
+++ b/test/fixtures/document-fragment/style-variables05/source.vue
@@ -1,8 +1,8 @@
 <style>
   .text{
     color: v-bind(  color  );
-    font-size: v-bind(  'font.size'  );
-    border-color: v-bind(  "border ( 'color' ) "  );;
+    font-size: v-bind(  '  font.size  '  );
+    border-color: v-bind(  "  border ( 'color' ) "  );;
     background-color: v-bind(  
         background
         .
diff --git a/test/fixtures/document-fragment/style-variables05/tree.json b/test/fixtures/document-fragment/style-variables05/tree.json
index 4dce1239..94f9ebe0 100644
--- a/test/fixtures/document-fragment/style-variables05/tree.json
+++ b/test/fixtures/document-fragment/style-variables05/tree.json
@@ -1,11 +1,11 @@
 [
     {
         "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",
+        "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>",
+                "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",
@@ -35,7 +35,7 @@
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind(  'font.size'  )",
+                        "text": "v-bind(  '  font.size  '  )",
                         "children": [
                             {
                                 "type": "MemberExpression",
@@ -62,7 +62,7 @@
                     },
                     {
                         "type": "VExpressionContainer",
-                        "text": "v-bind(  \"border ( 'color' ) \"  )",
+                        "text": "v-bind(  \"  border ( 'color' ) \"  )",
                         "children": [
                             {
                                 "type": "CallExpression",

From 6ae92594cdf0a859d82499c0a252ee74ff3827ca Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 17 Jul 2021 18:46:29 +0900
Subject: [PATCH 06/10] add testcases and upadte

---
 src/style/index.ts                            |  220 +-
 .../fixtures/ast/mustache-with-space/ast.json |  366 +++
 .../ast/mustache-with-space/source.vue        |    3 +
 .../ast/mustache-with-space/token-ranges.json |   12 +
 .../ast/mustache-with-space/tree.json         |   39 +
 .../document-fragment.json                    | 1978 +++++++++++++++++
 .../style-variables-edge-cases/source.vue     |   10 +
 .../token-ranges.json                         |   79 +
 .../style-variables-edge-cases/tree.json      |  131 ++
 .../document-fragment.json                    |   42 +-
 .../token-ranges.json                         |    4 +-
 11 files changed, 2834 insertions(+), 50 deletions(-)
 create mode 100644 test/fixtures/ast/mustache-with-space/ast.json
 create mode 100644 test/fixtures/ast/mustache-with-space/source.vue
 create mode 100644 test/fixtures/ast/mustache-with-space/token-ranges.json
 create mode 100644 test/fixtures/ast/mustache-with-space/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-edge-cases/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-edge-cases/tree.json

diff --git a/src/style/index.ts b/src/style/index.ts
index bfe565c6..0a5ceab9 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -21,6 +21,8 @@ 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.
@@ -55,7 +57,7 @@ function parseStyle(
     style: VStyleElement,
     locationCalculator: LocationCalculatorForHtml,
     parserOptions: ParserOptions,
-    cssOptions: { inlineComment?: boolean },
+    cssOptions: CSSParseOption,
 ) {
     if (style.children.length !== 1) {
         return
@@ -72,11 +74,27 @@ function parseStyle(
     const document = getOwnerDocument(style)
 
     let textStart = 0
-    for (const { range, expr, exprOffset, quote } of iterateVBind(
+    for (const { range, expr, exprOffset, quote, comments } of iterateVBind(
         textNode.range[0],
         text,
         cssOptions,
     )) {
+        insertComments(
+            document,
+            comments.map((c) => ({
+                type: c.type,
+                range: [
+                    locationCalculator.getOffsetWithGap(c.range[0]),
+                    locationCalculator.getOffsetWithGap(c.range[1]),
+                ],
+                loc: {
+                    start: locationCalculator.getLocation(c.range[0]),
+                    end: locationCalculator.getLocation(c.range[1]),
+                },
+                value: c.value,
+            })),
+        )
+
         const container: VExpressionContainer = {
             type: "VExpressionContainer",
             range: [
@@ -143,6 +161,24 @@ function parseStyle(
                 ),
             )
         }
+        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)
@@ -179,11 +215,17 @@ function parseStyle(
                 container.expression = ret.expression
                 container.references = ret.references
             }
-            replaceAndSplitTokens(document, container, [
-                ...beforeTokens,
-                ...ret.tokens,
-                ...afterTokens,
-            ])
+            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) {
@@ -191,17 +233,6 @@ function parseStyle(
             }
             resolveReferences(container)
         } catch (err) {
-            replaceAndSplitTokens(document, container, [
-                ...beforeTokens,
-                createSimpleToken(
-                    "HTMLText",
-                    beforeTokens[beforeTokens.length - 1].range[1],
-                    afterTokens[0].range[0],
-                    expr,
-                    locationCalculator,
-                ),
-                ...afterTokens,
-            ])
             debug("[style] Parse error: %s", err)
 
             if (ParseError.isParseError(err)) {
@@ -218,6 +249,11 @@ type VBindLocations = {
     expr: string
     exprOffset: number
     quote: '"' | "'" | null
+    comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[]
 }
 
 /**
@@ -226,59 +262,151 @@ type VBindLocations = {
 function* iterateVBind(
     offset: number,
     text: string,
-    cssOptions: { inlineComment?: boolean },
+    cssOptions: CSSParseOption,
 ): IterableIterator<VBindLocations> {
     const re = cssOptions.inlineComment
-        ? /"|'|\/\*|\/\/|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
-        : /"|'|\/\*|\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/gu
+        ? /"|'|\/\*|\/\/|\bv-bind\(/gu
+        : /"|'|\/\*|\bv-bind\(/gu
     let match
     while ((match = re.exec(text))) {
         const startOrVBind = match[0]
         if (startOrVBind === '"' || startOrVBind === "'") {
             // skip string
-            re.lastIndex = skipString(startOrVBind, re.lastIndex)
+            re.lastIndex = skipString(text, startOrVBind, re.lastIndex)
         } else if (startOrVBind === "/*" || startOrVBind === "//") {
             // skip comment
             re.lastIndex = skipComment(
+                text,
                 startOrVBind === "/*" ? "block" : "line",
                 re.lastIndex,
             )
         } else {
             // v-bind
-            const vBind = startOrVBind
-            const quote = match[1] ? "'" : match[2] ? '"' : null
-            const expr = match[1] || match[2] || match[3]
             const start = match.index + offset
-            const end = re.lastIndex + offset
-            const exprOffset =
-                start +
-                vBind.indexOf(quote || match[3], 7 /* v-bind( */) +
-                (quote ? 1 /* quote */ : 0)
+            const arg = extractArg(text, re.lastIndex, cssOptions)
+            if (!arg) {
+                continue
+            }
             yield {
-                range: [start, end],
-                expr,
-                exprOffset,
-                quote,
+                range: [start, arg.end + offset],
+                expr: arg.expr,
+                exprOffset: arg.exprOffset + offset,
+                quote: arg.quote,
+                comments: arg.comments.map((c) => ({
+                    ...c,
+                    range: [c.range[0] + offset, c.range[1] + offset],
+                })),
             }
+            re.lastIndex = arg.end
         }
     }
+}
 
-    function skipString(quote: string, nextIndex: number): number {
-        for (let index = nextIndex; index < text.length; index++) {
-            const c = text[index]
-            if (c === "\\") {
-                index++ // escaping
-                continue
+function extractArg(
+    text: string,
+    nextIndex: number,
+    cssOptions: CSSParseOption,
+): {
+    expr: string
+    exprOffset: number
+    quote: '"' | "'" | null
+    end: number
+    comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[]
+} | null {
+    ;/\S/gu.exec(text)
+    const re = cssOptions.inlineComment ? /"|'|\/\*|\/\/|\)/gu : /"|'|\/\*|\)/gu
+    const startTokenIndex = (re.lastIndex = skipSpaces(text, nextIndex))
+    let match
+    const stringRanges: OffsetRange[] = []
+    const comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[] = []
+    while ((match = re.exec(text))) {
+        const startOrVBind = match[0]
+        if (startOrVBind === '"' || startOrVBind === "'") {
+            const start = match.index
+            const end = (re.lastIndex = skipString(
+                text,
+                startOrVBind,
+                re.lastIndex,
+            ))
+            stringRanges.push([start, end])
+        } else if (startOrVBind === "/*" || startOrVBind === "//") {
+            const block = startOrVBind === "/*"
+            const start = match.index
+            const end = (re.lastIndex = skipComment(
+                text,
+                block ? "block" : "line",
+                re.lastIndex,
+            ))
+            comments.push({
+                type: block ? "Block" : "Line",
+                range: [start, end],
+                value: block
+                    ? text.slice(start + 2, end - 2)
+                    : text.slice(start + 2, end - 1),
+            })
+        } else {
+            // close paren
+            if (stringRanges.length === 1) {
+                const range = stringRanges[0]
+                const exprRange: OffsetRange = [range[0] + 1, range[1] - 1]
+                return {
+                    expr: text.slice(...exprRange),
+                    exprOffset: exprRange[0],
+                    quote: text[range[0]] as '"' | "'",
+                    end: re.lastIndex,
+                    comments,
+                }
             }
-            if (c === quote) {
-                return index + 1
+
+            return {
+                expr: text.slice(startTokenIndex, match.index).trim(),
+                exprOffset: startTokenIndex,
+                quote: null,
+                end: re.lastIndex,
+                comments: [],
             }
         }
-        return nextIndex
     }
+    return null
+}
 
-    function skipComment(kind: "block" | "line", nextIndex: number): number {
-        const index = text.indexOf(kind === "block" ? "*/" : "\n", nextIndex)
-        return Math.max(index, nextIndex)
+function skipString(text: string, quote: string, nextIndex: number): number {
+    for (let index = nextIndex; index < text.length; index++) {
+        const c = text[index]
+        if (c === "\\") {
+            index++ // escaping
+            continue
+        }
+        if (c === quote) {
+            return index + 1
+        }
+    }
+    return nextIndex
+}
+
+function skipComment(
+    text: string,
+    kind: "block" | "line",
+    nextIndex: number,
+): number {
+    const index = text.indexOf(kind === "block" ? "*/" : "\n", nextIndex)
+    return Math.max(index, nextIndex)
+}
+
+function skipSpaces(text: string, nextIndex: number): number {
+    for (let index = nextIndex; index < text.length; index++) {
+        const c = text[index]
+        if (c.trim()) {
+            return index
+        }
     }
+    return text.length
 }
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..a1180d37
--- /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,
+                96
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 23
+                },
+                "end": {
+                    "line": 4,
+                    "column": 35
+                }
+            },
+            "value": " comment"
+        },
+        {
+            "type": "Block",
+            "range": [
+                112,
+                124
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 51
+                },
+                "end": {
+                    "line": 4,
+                    "column": 63
+                }
+            },
+            "value": " comment"
+        },
+        {
+            "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..3dffb9c3
--- /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-with-error/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
index fe1b83b4..6df073da 100644
--- a/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
@@ -313,22 +313,58 @@
             "value": "("
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 35,
-                46
+                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": "color error"
+            "value": "error"
         },
         {
             "type": "Punctuator",
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
index 54e21f0d..6cbaa046 100644
--- a/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables-with-error/token-ranges.json
@@ -8,7 +8,9 @@
     " ",
     "v-bind",
     "(",
-    "color error",
+    "color",
+    " ",
+    "error",
     ")",
     ";",
     "\n  ",

From a6074ef56b3cba3332fa5f61c59f232adc29dac7 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 18 Jul 2021 08:25:36 +0900
Subject: [PATCH 07/10] Add test cases

---
 README.md                                     |    4 +-
 scripts/update-fixtures-document-fragment.js  |   17 +-
 src/common/parser-options.ts                  |    2 +-
 src/index.ts                                  |    2 +-
 test/document-fragment.js                     |   12 +-
 .../document-fragment.json                    | 3595 +++++++++++++++++
 .../parser-options.json                       |    5 +
 .../source.vue                                |   25 +
 .../token-ranges.json                         |   89 +
 .../tree.json                                 |  129 +
 10 files changed, 3867 insertions(+), 13 deletions(-)
 create mode 100644 test/fixtures/document-fragment/style-variables-with-option-false/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-option-false/parser-options.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-option-false/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-with-option-false/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-option-false/tree.json

diff --git a/README.md b/README.md
index 0a19c556..73831c41 100644
--- a/README.md
+++ b/README.md
@@ -124,7 +124,7 @@ For example:
         "vueFeatures": {
             "filter": true,
             "interpolationAsNonHTML": false,
-            "styleVariables": true,
+            "styleCSSVariableInjection": true,
         }
     }
 }
@@ -190,7 +190,7 @@ The following template can be parsed well.
 
 But, it cannot be parsed with Vue 2.
 
-### parserOptions.vueFeatures.styleVariables
+### 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`.
 
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/common/parser-options.ts b/src/common/parser-options.ts
index ebfb3316..48613210 100644
--- a/src/common/parser-options.ts
+++ b/src/common/parser-options.ts
@@ -8,7 +8,7 @@ export interface ParserOptions {
     vueFeatures?: {
         interpolationAsNonHTML?: boolean // default false
         filter?: boolean // default true
-        styleVariables?: boolean // default true
+        styleCSSVariableInjection?: boolean // default true
     }
 
     // espree options
diff --git a/src/index.ts b/src/index.ts
index 87a9d441..2001860d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -122,7 +122,7 @@ export function parseForESLint(
             })
         }
 
-        if (options.vueFeatures?.styleVariables ?? true) {
+        if (options.vueFeatures?.styleCSSVariableInjection ?? true) {
             const styles = rootAST.children.filter(isStyleElement)
             parseStyleElements(styles, locationCalculator, {
                 ...options,
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/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

From 281c8b6076ae47ecc5fa24a2d8867a7e978223ff Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 18 Jul 2021 08:29:59 +0900
Subject: [PATCH 08/10] update doc

---
 docs/ast.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ast.md b/docs/ast.md
index a7dab8c2..2960b051 100644
--- a/docs/ast.md
+++ b/docs/ast.md
@@ -124,7 +124,7 @@ interface VFilter <: Node {
 }
 ```
 
-- This is mustaches or directive values or style variables.
+- This is mustaches or 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.

From e20c253073d7ac01842c592487fc69efdb6ee2e7 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 18 Jul 2021 08:30:58 +0900
Subject: [PATCH 09/10] update doc

---
 docs/ast.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ast.md b/docs/ast.md
index 2960b051..df6f8480 100644
--- a/docs/ast.md
+++ b/docs/ast.md
@@ -124,7 +124,7 @@ interface VFilter <: Node {
 }
 ```
 
-- This is mustaches or directive values or `v-bind()` in `<style>`.
+- 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.

From 21a08df1ad758e259fc095be0b506a5f21e39f17 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 18 Jul 2021 09:07:45 +0900
Subject: [PATCH 10/10] refactor

---
 src/common/location-calculator.ts             |  12 +-
 src/style/index.ts                            | 139 ++++----
 .../document-fragment.json                    |  12 +-
 .../token-ranges.json                         |   4 +-
 .../style-variables05/document-fragment.json  | 310 +++++++++---------
 .../style-variables05/source.vue              |   2 +-
 .../style-variables05/token-ranges.json       |   1 +
 .../style-variables05/tree.json               |   6 +-
 8 files changed, 257 insertions(+), 229 deletions(-)

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/style/index.ts b/src/style/index.ts
index 0a5ceab9..4c7ff08f 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -1,6 +1,7 @@
 import type {
     OffsetRange,
     Token,
+    VDocumentFragment,
     VElement,
     VExpressionContainer,
     VStyleElement,
@@ -42,7 +43,7 @@ export function parseStyleElements(
 
     for (const style of elements) {
         ;(style as VStyleElement).style = true
-        parseStyle(
+        parseStyleElement(
             style as VStyleElement,
             globalLocationCalculator,
             parserOptions,
@@ -53,9 +54,9 @@ export function parseStyleElements(
     }
 }
 
-function parseStyle(
+function parseStyleElement(
     style: VStyleElement,
-    locationCalculator: LocationCalculatorForHtml,
+    globalLocationCalculator: LocationCalculatorForHtml,
     parserOptions: ParserOptions,
     cssOptions: CSSParseOption,
 ) {
@@ -66,33 +67,50 @@ function parseStyle(
     if (textNode.type !== "VText") {
         return
     }
-    const text = textNode.value
-    if (!text.includes("v-bind(")) {
+    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(
-        textNode.range[0],
-        text,
+        code,
         cssOptions,
     )) {
         insertComments(
             document,
-            comments.map((c) => ({
-                type: c.type,
-                range: [
+            comments.map((c) =>
+                createSimpleToken(
+                    c.type,
                     locationCalculator.getOffsetWithGap(c.range[0]),
                     locationCalculator.getOffsetWithGap(c.range[1]),
-                ],
-                loc: {
-                    start: locationCalculator.getLocation(c.range[0]),
-                    end: locationCalculator.getLocation(c.range[1]),
-                },
-                value: c.value,
-            })),
+                    c.value,
+                    locationCalculator,
+                ),
+            ),
         )
 
         const container: VExpressionContainer = {
@@ -191,17 +209,14 @@ function parseStyle(
                     end: { ...lastChild.loc.end },
                 },
                 parent: style,
-                value: text.slice(range[1] - textNode.range[0]),
+                value: code.slice(range[1]),
             }
             style.children.push(newTextNode)
 
             lastChild.range[1] = container.range[0]
             lastChild.loc.end = { ...container.loc.start }
-            lastChild.value = text.slice(
-                textStart,
-                range[0] - textNode.range[0],
-            )
-            textStart = range[1] - textNode.range[0]
+            lastChild.value = code.slice(textStart, range[0])
+            textStart = range[1]
         }
         try {
             const ret = parseExpression(
@@ -260,50 +275,46 @@ type VBindLocations = {
  * Iterate the `v-bind()` information.
  */
 function* iterateVBind(
-    offset: number,
-    text: string,
+    code: string,
     cssOptions: CSSParseOption,
 ): IterableIterator<VBindLocations> {
     const re = cssOptions.inlineComment
-        ? /"|'|\/\*|\/\/|\bv-bind\(/gu
+        ? /"|'|\/[*/]|\bv-bind\(/gu
         : /"|'|\/\*|\bv-bind\(/gu
     let match
-    while ((match = re.exec(text))) {
+    while ((match = re.exec(code))) {
         const startOrVBind = match[0]
         if (startOrVBind === '"' || startOrVBind === "'") {
             // skip string
-            re.lastIndex = skipString(text, startOrVBind, re.lastIndex)
+            re.lastIndex = skipString(code, startOrVBind, re.lastIndex)
         } else if (startOrVBind === "/*" || startOrVBind === "//") {
             // skip comment
             re.lastIndex = skipComment(
-                text,
+                code,
                 startOrVBind === "/*" ? "block" : "line",
                 re.lastIndex,
             )
         } else {
             // v-bind
-            const start = match.index + offset
-            const arg = extractArg(text, re.lastIndex, cssOptions)
+            const start = match.index
+            const arg = parseVBindArg(code, re.lastIndex, cssOptions)
             if (!arg) {
                 continue
             }
             yield {
-                range: [start, arg.end + offset],
+                range: [start, arg.end],
                 expr: arg.expr,
-                exprOffset: arg.exprOffset + offset,
+                exprOffset: arg.exprOffset,
                 quote: arg.quote,
-                comments: arg.comments.map((c) => ({
-                    ...c,
-                    range: [c.range[0] + offset, c.range[1] + offset],
-                })),
+                comments: arg.comments,
             }
             re.lastIndex = arg.end
         }
     }
 }
 
-function extractArg(
-    text: string,
+function parseVBindArg(
+    code: string,
     nextIndex: number,
     cssOptions: CSSParseOption,
 ): {
@@ -317,9 +328,8 @@ function extractArg(
         value: string
     }[]
 } | null {
-    ;/\S/gu.exec(text)
-    const re = cssOptions.inlineComment ? /"|'|\/\*|\/\/|\)/gu : /"|'|\/\*|\)/gu
-    const startTokenIndex = (re.lastIndex = skipSpaces(text, nextIndex))
+    const re = cssOptions.inlineComment ? /"|'|\/[*/]|\)/gu : /"|'|\/\*|\)/gu
+    const startTokenIndex = (re.lastIndex = skipSpaces(code, nextIndex))
     let match
     const stringRanges: OffsetRange[] = []
     const comments: {
@@ -327,12 +337,12 @@ function extractArg(
         range: OffsetRange
         value: string
     }[] = []
-    while ((match = re.exec(text))) {
+    while ((match = re.exec(code))) {
         const startOrVBind = match[0]
         if (startOrVBind === '"' || startOrVBind === "'") {
             const start = match.index
             const end = (re.lastIndex = skipString(
-                text,
+                code,
                 startOrVBind,
                 re.lastIndex,
             ))
@@ -341,7 +351,7 @@ function extractArg(
             const block = startOrVBind === "/*"
             const start = match.index
             const end = (re.lastIndex = skipComment(
-                text,
+                code,
                 block ? "block" : "line",
                 re.lastIndex,
             ))
@@ -349,25 +359,26 @@ function extractArg(
                 type: block ? "Block" : "Line",
                 range: [start, end],
                 value: block
-                    ? text.slice(start + 2, end - 2)
-                    : text.slice(start + 2, end - 1),
+                    ? code.slice(start + 2, end - 2)
+                    : code.slice(start + 2, end - 1),
             })
         } else {
-            // close paren
+            // 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: text.slice(...exprRange),
+                    expr: code.slice(...exprRange),
                     exprOffset: exprRange[0],
-                    quote: text[range[0]] as '"' | "'",
+                    quote: code[range[0]] as '"' | "'",
                     end: re.lastIndex,
                     comments,
                 }
             }
 
             return {
-                expr: text.slice(startTokenIndex, match.index).trim(),
+                expr: code.slice(startTokenIndex, match.index).trim(),
                 exprOffset: startTokenIndex,
                 quote: null,
                 end: re.lastIndex,
@@ -378,9 +389,9 @@ function extractArg(
     return null
 }
 
-function skipString(text: string, quote: string, nextIndex: number): number {
-    for (let index = nextIndex; index < text.length; index++) {
-        const c = text[index]
+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
@@ -389,24 +400,28 @@ function skipString(text: string, quote: string, nextIndex: number): number {
             return index + 1
         }
     }
-    return nextIndex
+    return code.length
 }
 
 function skipComment(
-    text: string,
+    code: string,
     kind: "block" | "line",
     nextIndex: number,
 ): number {
-    const index = text.indexOf(kind === "block" ? "*/" : "\n", nextIndex)
-    return Math.max(index, nextIndex)
+    const closing = kind === "block" ? "*/" : "\n"
+    const index = code.indexOf(closing, nextIndex)
+    if (index >= nextIndex) {
+        return index + closing.length
+    }
+    return code.length
 }
 
-function skipSpaces(text: string, nextIndex: number): number {
-    for (let index = nextIndex; index < text.length; index++) {
-        const c = text[index]
+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 text.length
+    return code.length
 }
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
index a1180d37..a71d5817 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
@@ -1881,7 +1881,7 @@
             "type": "Block",
             "range": [
                 84,
-                96
+                98
             ],
             "loc": {
                 "start": {
@@ -1890,16 +1890,16 @@
                 },
                 "end": {
                     "line": 4,
-                    "column": 35
+                    "column": 37
                 }
             },
-            "value": " comment"
+            "value": " comment2 "
         },
         {
             "type": "Block",
             "range": [
                 112,
-                124
+                126
             ],
             "loc": {
                 "start": {
@@ -1908,10 +1908,10 @@
                 },
                 "end": {
                     "line": 4,
-                    "column": 63
+                    "column": 65
                 }
             },
-            "value": " comment"
+            "value": " comment3 "
         },
         {
             "type": "Line",
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
index 3dffb9c3..07dcd8ca 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
@@ -71,8 +71,8 @@
     ">",
     "\n",
     "/* comment1 */",
-    "/* comment2 ",
-    "/* comment3 ",
+    "/* comment2 */",
+    "/* comment3 */",
     "// comment4",
     "/*comment5*/",
     "/*comment6*/"
diff --git a/test/fixtures/document-fragment/style-variables05/document-fragment.json b/test/fixtures/document-fragment/style-variables05/document-fragment.json
index 3ed663ed..f14b915c 100644
--- a/test/fixtures/document-fragment/style-variables05/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables05/document-fragment.json
@@ -2,7 +2,7 @@
     "type": "VDocumentFragment",
     "range": [
         0,
-        242
+        246
     ],
     "loc": {
         "start": {
@@ -19,7 +19,7 @@
             "type": "VElement",
             "range": [
                 0,
-                241
+                245
             ],
             "loc": {
                 "start": {
@@ -258,7 +258,7 @@
                     "type": "VText",
                     "range": [
                         89,
-                        109
+                        113
                     ],
                     "loc": {
                         "start": {
@@ -267,83 +267,83 @@
                         },
                         "end": {
                             "line": 5,
-                            "column": 18
+                            "column": 22
                         }
                     },
-                    "value": ";\n    border-color: "
+                    "value": ";\n    border-color: /**/"
                 },
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        109,
-                        144
+                        113,
+                        148
                     ],
                     "loc": {
                         "start": {
                             "line": 5,
-                            "column": 18
+                            "column": 22
                         },
                         "end": {
                             "line": 5,
-                            "column": 53
+                            "column": 57
                         }
                     },
                     "expression": {
                         "type": "CallExpression",
-                        "start": 121,
-                        "end": 139,
+                        "start": 125,
+                        "end": 143,
                         "loc": {
                             "start": {
                                 "line": 5,
-                                "column": 30
+                                "column": 34
                             },
                             "end": {
                                 "line": 5,
-                                "column": 48
+                                "column": 52
                             }
                         },
                         "range": [
-                            121,
-                            139
+                            125,
+                            143
                         ],
                         "callee": {
                             "type": "Identifier",
-                            "start": 121,
-                            "end": 127,
+                            "start": 125,
+                            "end": 131,
                             "loc": {
                                 "start": {
                                     "line": 5,
-                                    "column": 30
+                                    "column": 34
                                 },
                                 "end": {
                                     "line": 5,
-                                    "column": 36
+                                    "column": 40
                                 }
                             },
                             "range": [
-                                121,
-                                127
+                                125,
+                                131
                             ],
                             "name": "border"
                         },
                         "arguments": [
                             {
                                 "type": "Literal",
-                                "start": 130,
-                                "end": 137,
+                                "start": 134,
+                                "end": 141,
                                 "loc": {
                                     "start": {
                                         "line": 5,
-                                        "column": 39
+                                        "column": 43
                                     },
                                     "end": {
                                         "line": 5,
-                                        "column": 46
+                                        "column": 50
                                     }
                                 },
                                 "range": [
-                                    130,
-                                    137
+                                    134,
+                                    141
                                 ],
                                 "value": "color",
                                 "raw": "'color'"
@@ -354,21 +354,21 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 121,
-                                "end": 127,
+                                "start": 125,
+                                "end": 131,
                                 "loc": {
                                     "start": {
                                         "line": 5,
-                                        "column": 30
+                                        "column": 34
                                     },
                                     "end": {
                                         "line": 5,
-                                        "column": 36
+                                        "column": 40
                                     }
                                 },
                                 "range": [
-                                    121,
-                                    127
+                                    125,
+                                    131
                                 ],
                                 "name": "border"
                             },
@@ -379,13 +379,13 @@
                 {
                     "type": "VText",
                     "range": [
-                        144,
-                        169
+                        148,
+                        173
                     ],
                     "loc": {
                         "start": {
                             "line": 5,
-                            "column": 53
+                            "column": 57
                         },
                         "end": {
                             "line": 6,
@@ -397,8 +397,8 @@
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        169,
-                        227
+                        173,
+                        231
                     ],
                     "loc": {
                         "start": {
@@ -412,8 +412,8 @@
                     },
                     "expression": {
                         "type": "MemberExpression",
-                        "start": 187,
-                        "end": 221,
+                        "start": 191,
+                        "end": 225,
                         "loc": {
                             "start": {
                                 "line": 7,
@@ -425,13 +425,13 @@
                             }
                         },
                         "range": [
-                            187,
-                            221
+                            191,
+                            225
                         ],
                         "object": {
                             "type": "Identifier",
-                            "start": 187,
-                            "end": 197,
+                            "start": 191,
+                            "end": 201,
                             "loc": {
                                 "start": {
                                     "line": 7,
@@ -443,15 +443,15 @@
                                 }
                             },
                             "range": [
-                                187,
-                                197
+                                191,
+                                201
                             ],
                             "name": "background"
                         },
                         "property": {
                             "type": "Identifier",
-                            "start": 216,
-                            "end": 221,
+                            "start": 220,
+                            "end": 225,
                             "loc": {
                                 "start": {
                                     "line": 9,
@@ -463,8 +463,8 @@
                                 }
                             },
                             "range": [
-                                216,
-                                221
+                                220,
+                                225
                             ],
                             "name": "color"
                         },
@@ -474,8 +474,8 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 187,
-                                "end": 197,
+                                "start": 191,
+                                "end": 201,
                                 "loc": {
                                     "start": {
                                         "line": 7,
@@ -487,8 +487,8 @@
                                     }
                                 },
                                 "range": [
-                                    187,
-                                    197
+                                    191,
+                                    201
                                 ],
                                 "name": "background"
                             },
@@ -499,8 +499,8 @@
                 {
                     "type": "VText",
                     "range": [
-                        227,
-                        233
+                        231,
+                        237
                     ],
                     "loc": {
                         "start": {
@@ -518,8 +518,8 @@
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    233,
-                    241
+                    237,
+                    245
                 ],
                 "loc": {
                     "start": {
@@ -538,8 +538,8 @@
         {
             "type": "VText",
             "range": [
-                241,
-                242
+                245,
+                246
             ],
             "loc": {
                 "start": {
@@ -1050,10 +1050,10 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 109,
-                115
+                113
             ],
             "loc": {
                 "start": {
@@ -1062,7 +1062,25 @@
                 },
                 "end": {
                     "line": 5,
-                    "column": 24
+                    "column": 22
+                }
+            },
+            "value": "/**/"
+        },
+        {
+            "type": "HTMLText",
+            "range": [
+                113,
+                119
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 22
+                },
+                "end": {
+                    "line": 5,
+                    "column": 28
                 }
             },
             "value": "v-bind"
@@ -1070,17 +1088,17 @@
         {
             "type": "Punctuator",
             "range": [
-                115,
-                116
+                119,
+                120
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 24
+                    "column": 28
                 },
                 "end": {
                     "line": 5,
-                    "column": 25
+                    "column": 29
                 }
             },
             "value": "("
@@ -1088,17 +1106,17 @@
         {
             "type": "Punctuator",
             "range": [
-                118,
-                119
+                122,
+                123
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 27
+                    "column": 31
                 },
                 "end": {
                     "line": 5,
-                    "column": 28
+                    "column": 32
                 }
             },
             "value": "\""
@@ -1106,97 +1124,97 @@
         {
             "type": "Identifier",
             "value": "border",
-            "start": 121,
-            "end": 127,
+            "start": 125,
+            "end": 131,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 30
+                    "column": 34
                 },
                 "end": {
                     "line": 5,
-                    "column": 36
+                    "column": 40
                 }
             },
             "range": [
-                121,
-                127
+                125,
+                131
             ]
         },
         {
             "type": "Punctuator",
             "value": "(",
-            "start": 128,
-            "end": 129,
+            "start": 132,
+            "end": 133,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 37
+                    "column": 41
                 },
                 "end": {
                     "line": 5,
-                    "column": 38
+                    "column": 42
                 }
             },
             "range": [
-                128,
-                129
+                132,
+                133
             ]
         },
         {
             "type": "String",
             "value": "'color'",
-            "start": 130,
-            "end": 137,
+            "start": 134,
+            "end": 141,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 39
+                    "column": 43
                 },
                 "end": {
                     "line": 5,
-                    "column": 46
+                    "column": 50
                 }
             },
             "range": [
-                130,
-                137
+                134,
+                141
             ]
         },
         {
             "type": "Punctuator",
             "value": ")",
-            "start": 138,
-            "end": 139,
+            "start": 142,
+            "end": 143,
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 47
+                    "column": 51
                 },
                 "end": {
                     "line": 5,
-                    "column": 48
+                    "column": 52
                 }
             },
             "range": [
-                138,
-                139
+                142,
+                143
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                140,
-                141
+                144,
+                145
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 49
+                    "column": 53
                 },
                 "end": {
                     "line": 5,
-                    "column": 50
+                    "column": 54
                 }
             },
             "value": "\""
@@ -1204,17 +1222,17 @@
         {
             "type": "Punctuator",
             "range": [
-                143,
-                144
+                147,
+                148
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 52
+                    "column": 56
                 },
                 "end": {
                     "line": 5,
-                    "column": 53
+                    "column": 57
                 }
             },
             "value": ")"
@@ -1222,17 +1240,17 @@
         {
             "type": "HTMLRawText",
             "range": [
-                144,
-                146
+                148,
+                150
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 53
+                    "column": 57
                 },
                 "end": {
                     "line": 5,
-                    "column": 55
+                    "column": 59
                 }
             },
             "value": ";;"
@@ -1240,13 +1258,13 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                146,
-                151
+                150,
+                155
             ],
             "loc": {
                 "start": {
                     "line": 5,
-                    "column": 55
+                    "column": 59
                 },
                 "end": {
                     "line": 6,
@@ -1258,8 +1276,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                151,
-                168
+                155,
+                172
             ],
             "loc": {
                 "start": {
@@ -1276,8 +1294,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                168,
-                169
+                172,
+                173
             ],
             "loc": {
                 "start": {
@@ -1294,8 +1312,8 @@
         {
             "type": "HTMLText",
             "range": [
-                169,
-                175
+                173,
+                179
             ],
             "loc": {
                 "start": {
@@ -1312,8 +1330,8 @@
         {
             "type": "Punctuator",
             "range": [
-                175,
-                176
+                179,
+                180
             ],
             "loc": {
                 "start": {
@@ -1330,8 +1348,8 @@
         {
             "type": "Identifier",
             "value": "background",
-            "start": 187,
-            "end": 197,
+            "start": 191,
+            "end": 201,
             "loc": {
                 "start": {
                     "line": 7,
@@ -1343,15 +1361,15 @@
                 }
             },
             "range": [
-                187,
-                197
+                191,
+                201
             ]
         },
         {
             "type": "Punctuator",
             "value": ".",
-            "start": 206,
-            "end": 207,
+            "start": 210,
+            "end": 211,
             "loc": {
                 "start": {
                     "line": 8,
@@ -1363,15 +1381,15 @@
                 }
             },
             "range": [
-                206,
-                207
+                210,
+                211
             ]
         },
         {
             "type": "Identifier",
             "value": "color",
-            "start": 216,
-            "end": 221,
+            "start": 220,
+            "end": 225,
             "loc": {
                 "start": {
                     "line": 9,
@@ -1383,15 +1401,15 @@
                 }
             },
             "range": [
-                216,
-                221
+                220,
+                225
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                226,
-                227
+                230,
+                231
             ],
             "loc": {
                 "start": {
@@ -1408,8 +1426,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                227,
-                228
+                231,
+                232
             ],
             "loc": {
                 "start": {
@@ -1426,8 +1444,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                228,
-                231
+                232,
+                235
             ],
             "loc": {
                 "start": {
@@ -1444,8 +1462,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                231,
-                232
+                235,
+                236
             ],
             "loc": {
                 "start": {
@@ -1462,8 +1480,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                232,
-                233
+                236,
+                237
             ],
             "loc": {
                 "start": {
@@ -1480,8 +1498,8 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                233,
-                240
+                237,
+                244
             ],
             "loc": {
                 "start": {
@@ -1498,8 +1516,8 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                240,
-                241
+                244,
+                245
             ],
             "loc": {
                 "start": {
@@ -1516,8 +1534,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                241,
-                242
+                245,
+                246
             ],
             "loc": {
                 "start": {
diff --git a/test/fixtures/document-fragment/style-variables05/source.vue b/test/fixtures/document-fragment/style-variables05/source.vue
index 3f38399e..c62a7b36 100644
--- a/test/fixtures/document-fragment/style-variables05/source.vue
+++ b/test/fixtures/document-fragment/style-variables05/source.vue
@@ -2,7 +2,7 @@
   .text{
     color: v-bind(  color  );
     font-size: v-bind(  '  font.size  '  );
-    border-color: v-bind(  "  border ( 'color' ) "  );;
+    border-color: /**/v-bind(  "  border ( 'color' ) "  );;
     background-color: v-bind(  
         background
         .
diff --git a/test/fixtures/document-fragment/style-variables05/token-ranges.json b/test/fixtures/document-fragment/style-variables05/token-ranges.json
index 1e9c52c5..c61ec5cd 100644
--- a/test/fixtures/document-fragment/style-variables05/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables05/token-ranges.json
@@ -26,6 +26,7 @@
     "\n    ",
     "border-color:",
     " ",
+    "/**/",
     "v-bind",
     "(",
     "\"",
diff --git a/test/fixtures/document-fragment/style-variables05/tree.json b/test/fixtures/document-fragment/style-variables05/tree.json
index 94f9ebe0..1fbd3b38 100644
--- a/test/fixtures/document-fragment/style-variables05/tree.json
+++ b/test/fixtures/document-fragment/style-variables05/tree.json
@@ -1,11 +1,11 @@
 [
     {
         "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",
+        "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>",
+                "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",
@@ -57,7 +57,7 @@
                     },
                     {
                         "type": "VText",
-                        "text": ";\n    border-color: ",
+                        "text": ";\n    border-color: /**/",
                         "children": []
                     },
                     {