From f7abdd8e2c587c258a6fd54d620ed2dbefd20152 Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Sat, 22 Jan 2022 02:37:30 +0900
Subject: [PATCH 1/3] Support complex expression in CSS `v-bind()`

---
 .eslintrc.yml                                 |    2 +-
 src/html/util/unicode.ts                      |   15 +-
 src/style/index.ts                            |  316 +--
 src/style/tokenizer.ts                        |  335 +++
 .../document-fragment.json                    | 2246 +++++++++++++++++
 .../source.vue                                |   11 +
 .../token-ranges.json                         |   78 +
 .../tree.json                                 |  181 ++
 .../document-fragment.json                    | 1478 +++++++++++
 .../source.vue                                |    9 +
 .../token-ranges.json                         |   64 +
 .../tree.json                                 |   83 +
 12 files changed, 4599 insertions(+), 219 deletions(-)
 create mode 100644 src/style/tokenizer.ts
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression01/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression01/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression01/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression01/tree.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression02/document-fragment.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression02/source.vue
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression02/token-ranges.json
 create mode 100644 test/fixtures/document-fragment/style-variables-with-complex-expression02/tree.json

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 8c0cd09c..9a375797 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -514,7 +514,7 @@ overrides:
         - error
       no-sequences:
         - error
-      no-shadow:
+      "@typescript-eslint/no-shadow":
         - error
         - builtinGlobals: true
           hoist: functions
diff --git a/src/html/util/unicode.ts b/src/html/util/unicode.ts
index a628ab7c..21fd900a 100644
--- a/src/html/util/unicode.ts
+++ b/src/html/util/unicode.ts
@@ -12,14 +12,18 @@ export const LINE_FEED = 0x0A
 export const FORM_FEED = 0x0C
 export const SPACE = 0x20
 export const EXCLAMATION_MARK = 0x21
-export const QUOTATION_MARK = 0x22
+export const QUOTATION_MARK = 0x22 // "
 export const NUMBER_SIGN = 0x23
 export const AMPERSAND = 0x26
-export const APOSTROPHE = 0x27
+export const APOSTROPHE = 0x27 // '
+export const LEFT_PARENTHESIS = 0x28 // (
+export const RIGHT_PARENTHESIS = 0x29 // )
+export const ASTERISK = 0x2A // *
 export const HYPHEN_MINUS = 0x2D
-export const SOLIDUS = 0x2F
+export const SOLIDUS = 0x2F // /
 export const DIGIT_0 = 0x30
 export const DIGIT_9 = 0x39
+export const COLON = 0x3a
 export const SEMICOLON = 0x3B
 export const LESS_THAN_SIGN = 0x3C
 export const EQUALS_SIGN = 0x3D
@@ -31,14 +35,15 @@ export const LATIN_CAPITAL_F = 0x46
 export const LATIN_CAPITAL_X = 0x58
 export const LATIN_CAPITAL_Z = 0x5A
 export const LEFT_SQUARE_BRACKET = 0x5B
+export const REVERSE_SOLIDUS = 0x5C
 export const RIGHT_SQUARE_BRACKET = 0x5D
 export const GRAVE_ACCENT = 0x60
 export const LATIN_SMALL_A = 0x61
 export const LATIN_SMALL_F = 0x66
 export const LATIN_SMALL_X = 0x78
 export const LATIN_SMALL_Z = 0x7A
-export const LEFT_CURLY_BRACKET = 0x7B
-export const RIGHT_CURLY_BRACKET = 0x7D
+export const LEFT_CURLY_BRACKET = 0x7B // {
+export const RIGHT_CURLY_BRACKET = 0x7D // }
 export const NULL_REPLACEMENT = 0xFFFD
 
 /**
diff --git a/src/style/index.ts b/src/style/index.ts
index 33594963..e5739c99 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -21,8 +21,27 @@ import {
 import { parseExpression } from "../script"
 import { DEFAULT_ECMA_VERSION } from "../script-setup/parser-options"
 import { resolveReferences } from "../template"
+import type {
+    CSSCommentToken,
+    CSSParseOption,
+    CSSPunctuatorToken,
+    CSSToken,
+} from "./tokenizer"
+import { CSSTokenType, CSSTokenizer } from "./tokenizer"
 
-type CSSParseOption = { inlineComment?: boolean }
+class CSSTokenScanner {
+    private reconsuming: CSSToken[] = []
+    private tokenizer: CSSTokenizer
+    public constructor(text: string, parserOptions: CSSParseOption) {
+        this.tokenizer = new CSSTokenizer(text, 0, parserOptions)
+    }
+    public nextToken(): CSSToken | null {
+        return this.reconsuming.shift() || this.tokenizer.nextToken()
+    }
+    public reconsume(...tokens: CSSToken[]) {
+        this.reconsuming.push(...tokens)
+    }
+}
 
 /**
  * Parse the source code of the given `<style>` elements.
@@ -69,7 +88,7 @@ function parseStyleElement(
     }
     const code = textNode.value
     // short circuit
-    if (!/v-bind(?:\(|\/)/u.test(code)) {
+    if (!/v-bind\s*(?:\(|\/)/u.test(code)) {
         return
     }
 
@@ -98,8 +117,7 @@ function parseStyle(
     let textStart = 0
     for (const {
         range,
-        expr,
-        exprOffset,
+        exprRange,
         quote,
         openingParenOffset,
         comments,
@@ -161,7 +179,7 @@ function parseStyle(
         ]
         if (quote) {
             const openStart = locationCalculator.getOffsetWithGap(
-                exprOffset - 1,
+                exprRange[0] - 1,
             )
             beforeTokens.push(
                 createSimpleToken(
@@ -172,9 +190,7 @@ function parseStyle(
                     locationCalculator,
                 ),
             )
-            const closeStart = locationCalculator.getOffsetWithGap(
-                exprOffset + expr.length,
-            )
+            const closeStart = locationCalculator.getOffsetWithGap(exprRange[1])
             afterTokens.unshift(
                 createSimpleToken(
                     "Punctuator",
@@ -226,8 +242,8 @@ function parseStyle(
         }
         try {
             const ret = parseExpression(
-                expr,
-                locationCalculator.getSubCalculatorShift(exprOffset),
+                code.slice(...exprRange),
+                locationCalculator.getSubCalculatorShift(exprRange[0]),
                 parserOptions,
                 { allowEmpty: false, allowFilters: false },
             )
@@ -265,36 +281,12 @@ function parseStyle(
     }
 }
 
-function isQuote(c: string): c is '"' | "'" {
-    return c === '"' || c === "'"
-}
-
-function isCommentStart(c: string): c is "/*" | "//" {
-    return c === "/*" || c === "//"
-}
-
-const COMMENT = {
-    "/*": {
-        type: "Block" as const,
-        closing: "*/" as const,
-    },
-    "//": {
-        type: "Line" as const,
-        closing: "\n" as const,
-    },
-}
-
 type VBindLocations = {
     range: OffsetRange
-    expr: string
-    exprOffset: number
+    exprRange: OffsetRange
     quote: '"' | "'" | null
     openingParenOffset: number
-    comments: {
-        type: string
-        range: OffsetRange
-        value: string
-    }[]
+    comments: CSSCommentToken[]
 }
 
 /**
@@ -304,211 +296,109 @@ function* iterateVBind(
     code: string,
     cssOptions: CSSParseOption,
 ): IterableIterator<VBindLocations> {
-    const re = cssOptions.inlineComment
-        ? /"|'|\/[*/]|\bv-bind/gu
-        : /"|'|\/\*|\bv-bind/gu
-    let match
-    while ((match = re.exec(code))) {
-        const startToken = match[0]
-        if (isQuote(startToken)) {
-            // skip string
-            re.lastIndex = skipString(code, startToken, re.lastIndex)
-        } else if (isCommentStart(startToken)) {
-            // skip comment
-            re.lastIndex = skipComment(
-                code,
-                COMMENT[startToken].closing,
-                re.lastIndex,
-            )
-        } else {
-            // v-bind
-            const openingParen = findVBindOpeningParen(
-                code,
-                re.lastIndex,
-                cssOptions,
-            )
-            if (!openingParen) {
-                continue
-            }
-            const start = match.index
-            const arg = parseVBindArg(
-                code,
-                openingParen.openingParenOffset + 1,
-                cssOptions,
-            )
-            if (!arg) {
-                continue
-            }
-            yield {
-                range: [start, arg.end],
-                expr: arg.expr,
-                exprOffset: arg.exprOffset,
-                quote: arg.quote,
-                openingParenOffset: openingParen.openingParenOffset,
-                comments: [...openingParen.comments, ...arg.comments],
-            }
-            re.lastIndex = arg.end
+    const tokenizer = new CSSTokenScanner(code, cssOptions)
+
+    let token
+    while ((token = tokenizer.nextToken())) {
+        if (token.type !== CSSTokenType.Word || token.value !== "v-bind") {
+            continue
+        }
+        const openingParen = findVBindOpeningParen(tokenizer)
+        if (!openingParen) {
+            continue
+        }
+        const arg = parseVBindArg(tokenizer)
+        if (!arg) {
+            continue
+        }
+        yield {
+            range: [token.range[0], arg.closingParen.range[1]],
+            exprRange: arg.exprRange,
+            quote: arg.quote,
+            openingParenOffset: openingParen.openingParen.range[0],
+            comments: [...openingParen.comments, ...arg.comments],
         }
     }
 }
 
-function findVBindOpeningParen(
-    code: string,
-    nextIndex: number,
-    cssOptions: CSSParseOption,
-): {
-    openingParenOffset: number
-    comments: {
-        type: string
-        range: OffsetRange
-        value: string
-    }[]
+function findVBindOpeningParen(tokenizer: CSSTokenScanner): {
+    openingParen: CSSPunctuatorToken
+    comments: CSSCommentToken[]
 } | null {
-    const re = cssOptions.inlineComment ? /\/[*/]|[\s\S]/gu : /\/\*|[\s\S]/gu
-    re.lastIndex = nextIndex
-    let match
-    const comments: {
-        type: string
-        range: OffsetRange
-        value: string
-    }[] = []
-    while ((match = re.exec(code))) {
-        const token = match[0]
-        if (token === "(") {
+    const comments: CSSCommentToken[] = []
+    let token
+    while ((token = tokenizer.nextToken())) {
+        if (token.type === CSSTokenType.Punctuator && token.value === "(") {
             return {
-                openingParenOffset: match.index,
+                openingParen: token,
                 comments,
             }
-        } else if (isCommentStart(token)) {
+        } else if (isComment(token)) {
             // Comment between `v-bind` and opening paren.
-            const comment = COMMENT[token]
-            const start = match.index
-            const end = (re.lastIndex = skipComment(
-                code,
-                comment.closing,
-                re.lastIndex,
-            ))
-            comments.push({
-                type: comment.type,
-                range: [start, end],
-                value: code.slice(
-                    start + token.length,
-                    end - comment.closing.length,
-                ),
-            })
+            comments.push(token)
             continue
         }
+        tokenizer.reconsume(...comments, token)
         // There were no opening parens.
         return null
     }
     return null
 }
 
-function parseVBindArg(
-    code: string,
-    nextIndex: number,
-    cssOptions: CSSParseOption,
-): {
-    expr: string
-    exprOffset: number
+function parseVBindArg(tokenizer: CSSTokenScanner): {
+    exprRange: OffsetRange
     quote: '"' | "'" | null
-    end: number
-    comments: {
-        type: string
-        range: OffsetRange
-        value: string
-    }[]
+    closingParen: CSSPunctuatorToken
+    comments: CSSCommentToken[]
 } | null {
-    const re = cssOptions.inlineComment ? /"|'|\/[*/]|\)/gu : /"|'|\/\*|\)/gu
-    const startTokenIndex = (re.lastIndex = skipSpaces(code, nextIndex))
-    let match
-    const stringRanges: OffsetRange[] = []
-    const comments: {
-        type: string
-        range: OffsetRange
-        value: string
-    }[] = []
-    while ((match = re.exec(code))) {
-        const token = match[0]
-        if (isQuote(token)) {
-            const start = match.index
-            const end = (re.lastIndex = skipString(code, token, re.lastIndex))
-            stringRanges.push([start, end])
-        } else if (isCommentStart(token)) {
-            const comment = COMMENT[token]
-            const start = match.index
-            const end = (re.lastIndex = skipComment(
-                code,
-                comment.closing,
-                re.lastIndex,
-            ))
-            comments.push({
-                type: comment.type,
-                range: [start, end],
-                value: code.slice(
-                    start + token.length,
-                    end - comment.closing.length,
-                ),
-            })
-        } else {
-            // closing paren
-            if (stringRanges.length === 1) {
-                // for v-bind( 'expr' ), and v-bind( /**/ 'expr' /**/ )
-                const range = stringRanges[0]
-                const exprRange: OffsetRange = [range[0] + 1, range[1] - 1]
+    const tokensBuffer: CSSToken[] = []
+    const comments: CSSCommentToken[] = []
+    const tokens: CSSToken[] = []
+    const closeTokenStack: string[] = []
+    let token
+    while ((token = tokenizer.nextToken())) {
+        if (token.type === CSSTokenType.Punctuator) {
+            if (token.value === ")" && !closeTokenStack.length) {
+                if (
+                    tokens.length === 1 &&
+                    tokens[0].type === CSSTokenType.Quoted
+                ) {
+                    // for v-bind( 'expr' ), and v-bind( /**/ 'expr' /**/ )
+                    const quotedToken = tokens[0]
+                    return {
+                        exprRange: quotedToken.valueRange,
+                        quote: quotedToken.quote,
+                        closingParen: token,
+                        comments,
+                    }
+                }
+                const startToken = tokensBuffer[0] || token
                 return {
-                    expr: code.slice(...exprRange),
-                    exprOffset: exprRange[0],
-                    quote: code[range[0]] as '"' | "'",
-                    end: re.lastIndex,
-                    comments,
+                    exprRange: [startToken.range[0], token.range[0]],
+                    quote: null,
+                    closingParen: token,
+                    comments: [],
                 }
             }
 
-            return {
-                expr: code.slice(startTokenIndex, match.index).trim(),
-                exprOffset: startTokenIndex,
-                quote: null,
-                end: re.lastIndex,
-                comments: [],
+            if (token.value === closeTokenStack[0]) {
+                closeTokenStack.shift()
+            } else if (token.value === "(") {
+                closeTokenStack.unshift(")")
             }
         }
-    }
-    return null
-}
 
-function skipString(code: string, quote: '"' | "'", nextIndex: number): number {
-    for (let index = nextIndex; index < code.length; index++) {
-        const c = code[index]
-        if (c === "\\") {
-            index++ // escaping
-            continue
-        }
-        if (c === quote) {
-            return index + 1
+        tokensBuffer.push(token)
+        if (isComment(token)) {
+            comments.push(token)
+        } else {
+            tokens.push(token)
         }
     }
-    return code.length
-}
-
-function skipComment(
-    code: string,
-    closing: "*/" | "\n",
-    nextIndex: number,
-): number {
-    const index = code.indexOf(closing, nextIndex)
-    if (index >= nextIndex) {
-        return index + closing.length
-    }
-    return code.length
+    tokenizer.reconsume(...tokensBuffer)
+    return null
 }
 
-function skipSpaces(code: string, nextIndex: number): number {
-    for (let index = nextIndex; index < code.length; index++) {
-        const c = code[index]
-        if (c.trim()) {
-            return index
-        }
-    }
-    return code.length
+function isComment(token: CSSToken): token is CSSCommentToken {
+    return token.type === CSSTokenType.Block || token.type === CSSTokenType.Line
 }
diff --git a/src/style/tokenizer.ts b/src/style/tokenizer.ts
new file mode 100644
index 00000000..b01e9a38
--- /dev/null
+++ b/src/style/tokenizer.ts
@@ -0,0 +1,335 @@
+import { debug } from "../common/debug"
+import type { OffsetRange } from "../ast"
+import {
+    APOSTROPHE,
+    ASTERISK,
+    CARRIAGE_RETURN,
+    EOF,
+    isWhitespace,
+    LEFT_CURLY_BRACKET,
+    LEFT_PARENTHESIS,
+    LINE_FEED,
+    NULL,
+    QUOTATION_MARK,
+    REVERSE_SOLIDUS,
+    RIGHT_CURLY_BRACKET,
+    RIGHT_PARENTHESIS,
+    SOLIDUS,
+    COLON,
+    SEMICOLON,
+    LEFT_SQUARE_BRACKET,
+    RIGHT_SQUARE_BRACKET,
+} from "../html/util/unicode"
+
+export const enum CSSTokenType {
+    Quoted = "Quoted",
+    Block = "Block",
+    Line = "Line",
+    Word = "Word",
+    Punctuator = "Punctuator",
+}
+
+export interface CSSWordToken {
+    type: CSSTokenType.Word
+    value: string
+    range: OffsetRange
+}
+export interface CSSQuotedToken {
+    type: CSSTokenType.Quoted
+    valueRange: OffsetRange
+    value: string
+    range: OffsetRange
+    quote: '"' | "'"
+}
+export interface CSSPunctuatorToken {
+    type: CSSTokenType.Punctuator
+    value: string
+    range: OffsetRange
+}
+export interface CSSCommentToken {
+    type: CSSTokenType.Block | CSSTokenType.Line
+    valueRange: OffsetRange
+    value: string
+    range: OffsetRange
+}
+export type CSSToken =
+    | CSSWordToken
+    | CSSQuotedToken
+    | CSSPunctuatorToken
+    | CSSCommentToken
+
+export type CSSTokenizeOption = { inlineComment?: boolean }
+
+/**
+ * A simplified CSS tokenizer.
+ * The tokenizer is implemented with reference to the CSS specification,
+ * but it does not follow it. This tokenizer only does the tokenization needed to properly handle `v-bind()`.
+ * @see https://drafts.csswg.org/css-syntax/#tokenization
+ */
+export class CSSTokenizer {
+    // Reading
+    public readonly text: string
+    private readonly options: CSSTokenizeOption
+    private cp: number
+    private offset: number
+    private nextOffset: number
+
+    // Tokenizing
+    private reconsuming: boolean
+
+    /**
+     * Initialize this tokenizer.
+     * @param text The source code to tokenize.
+     * @param options The tokenizer options.
+     */
+    public constructor(
+        text: string,
+        startOffset: number,
+        options?: CSSTokenizeOption,
+    ) {
+        debug("[css] the source code length: %d", text.length)
+        this.text = text
+        this.options = {
+            inlineComment: options?.inlineComment ?? false,
+        }
+        this.cp = NULL
+        this.offset = startOffset - 1
+        this.nextOffset = startOffset
+        this.reconsuming = false
+    }
+
+    /**
+     * Get the next token.
+     * @returns The next token or null.
+     */
+    public nextToken(): CSSToken | null {
+        let cp
+        if (this.reconsuming) {
+            cp = this.cp
+            this.reconsuming = false
+        } else {
+            cp = this.consumeNextCodePoint()
+        }
+        // Skip whitespaces
+        while (isWhitespace(cp)) {
+            cp = this.consumeNextCodePoint()
+        }
+        if (cp === EOF) {
+            return null
+        }
+
+        const start = this.offset
+        return this.consumeNextToken(cp, start)
+    }
+
+    /**
+     * Get the next code point.
+     * @returns The code point.
+     */
+    private nextCodePoint(): number {
+        if (this.nextOffset >= this.text.length) {
+            return EOF
+        }
+        return this.text.codePointAt(this.nextOffset)!
+    }
+
+    /**
+     * Consume the next code point.
+     * @returns The consumed code point.
+     */
+    private consumeNextCodePoint(): number {
+        if (this.offset >= this.text.length) {
+            this.cp = EOF
+            return EOF
+        }
+
+        this.offset = this.nextOffset
+
+        if (this.offset >= this.text.length) {
+            this.cp = EOF
+            return EOF
+        }
+
+        let cp = this.text.codePointAt(this.offset)!
+        if (cp === CARRIAGE_RETURN) {
+            this.nextOffset = this.offset + 1
+            if (this.text.codePointAt(this.nextOffset)! === LINE_FEED) {
+                this.nextOffset++
+            }
+            cp = LINE_FEED
+        } else {
+            this.nextOffset = this.offset + (cp >= 0x10000 ? 2 : 1)
+        }
+
+        this.cp = cp
+
+        return cp
+    }
+
+    private consumeNextToken(cp: number, start: number): CSSToken | null {
+        if (cp === SOLIDUS) {
+            const nextCp = this.nextCodePoint()
+            if (nextCp === ASTERISK) {
+                return this.consumeComment(start)
+            }
+            if (nextCp === SOLIDUS && this.options.inlineComment) {
+                return this.consumeInlineComment(start)
+            }
+        }
+        if (isQuote(cp)) {
+            return this.consumeString(start, cp)
+        }
+        if (isPunctuator(cp)) {
+            return {
+                type: CSSTokenType.Punctuator,
+                range: [start, start + 1],
+                value: String.fromCodePoint(cp),
+            }
+        }
+        return this.consumeWord(start)
+    }
+
+    /**
+     * Consume word
+     */
+    private consumeWord(start: number): CSSToken {
+        let cp = this.consumeNextCodePoint()
+        while (!isWhitespace(cp) && !isPunctuator(cp) && !isQuote(cp)) {
+            cp = this.consumeNextCodePoint()
+        }
+        this.reconsuming = true
+        const range: OffsetRange = [start, this.offset]
+        const text = this.text
+        let value: string
+        return {
+            type: CSSTokenType.Word,
+            range,
+            get value() {
+                return (value ??= text.slice(...range))
+            },
+        }
+    }
+
+    /**
+     * https://drafts.csswg.org/css-syntax/#consume-string-token
+     */
+    private consumeString(start: number, quote: number): CSSToken {
+        let valueEndOffset: number | null = null
+        let cp = this.consumeNextCodePoint()
+        while (cp !== EOF) {
+            if (cp === quote) {
+                valueEndOffset = this.offset
+                break
+            }
+            // PostCSS seems to continue parsing.
+            // if (cp === LINE_FEED) {
+            //     // Bad string
+            //     this.reconsuming = true
+            //     valueEndOffset = this.offset
+            //     break
+            // }
+            if (cp === REVERSE_SOLIDUS) {
+                // Escape
+                this.consumeNextCodePoint()
+            }
+            cp = this.consumeNextCodePoint()
+        }
+        const text = this.text
+        let value: string
+        const valueRange: OffsetRange = [
+            start + 1,
+            valueEndOffset ?? this.nextOffset,
+        ]
+        return {
+            type: CSSTokenType.Quoted,
+            range: [start, this.nextOffset],
+            valueRange,
+            get value() {
+                return (value ??= text.slice(...valueRange))
+            },
+            quote: String.fromCodePoint(quote) as never,
+        }
+    }
+    /**
+     * https://drafts.csswg.org/css-syntax/#consume-comment
+     */
+    private consumeComment(start: number): CSSToken {
+        this.consumeNextCodePoint() // consume "*"
+        let valueEndOffset: number | null = null
+        let cp = this.consumeNextCodePoint()
+        while (cp !== EOF) {
+            if (cp === ASTERISK) {
+                cp = this.consumeNextCodePoint()
+                if (cp === SOLIDUS) {
+                    valueEndOffset = this.offset - 1
+                    break
+                }
+            }
+            cp = this.consumeNextCodePoint()
+        }
+        const valueRange: OffsetRange = [
+            start + 2,
+            valueEndOffset ?? this.nextOffset,
+        ]
+        const text = this.text
+        let value: string
+        return {
+            type: CSSTokenType.Block,
+            range: [start, this.nextOffset],
+            valueRange,
+            get value() {
+                return (value ??= text.slice(...valueRange))
+            },
+        }
+    }
+    /**
+     * Consume inline comment
+     */
+    private consumeInlineComment(start: number): CSSToken {
+        this.consumeNextCodePoint() // consume "/"
+        let valueEndOffset: number | null = null
+        let cp = this.consumeNextCodePoint()
+        while (cp !== EOF) {
+            if (cp === LINE_FEED) {
+                valueEndOffset = this.offset - 1
+                break
+            }
+            cp = this.consumeNextCodePoint()
+        }
+        const valueRange: OffsetRange = [
+            start + 2,
+            valueEndOffset ?? this.nextOffset,
+        ]
+        const text = this.text
+        let value: string
+        return {
+            type: CSSTokenType.Line,
+            range: [start, this.nextOffset],
+            valueRange,
+            get value() {
+                return (value ??= text.slice(...valueRange))
+            },
+        }
+    }
+}
+
+function isPunctuator(cp: number): boolean {
+    return (
+        cp === COLON ||
+        cp === SEMICOLON ||
+        // Brackets
+        cp === LEFT_PARENTHESIS ||
+        cp === RIGHT_PARENTHESIS ||
+        cp === LEFT_CURLY_BRACKET ||
+        cp === RIGHT_CURLY_BRACKET ||
+        cp === LEFT_SQUARE_BRACKET ||
+        cp === RIGHT_SQUARE_BRACKET ||
+        // Maybe v-bind() in calc()
+        cp === SOLIDUS ||
+        cp === ASTERISK
+    )
+}
+
+function isQuote(cp: number): boolean {
+    return cp === APOSTROPHE || cp === QUOTATION_MARK
+}
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression01/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-complex-expression01/document-fragment.json
new file mode 100644
index 00000000..a9f80229
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression01/document-fragment.json
@@ -0,0 +1,2246 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        157
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 12,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                156
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 11,
+                    "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,
+                        23
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 9
+                        }
+                    },
+                    "value": "\ndiv {\n  color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        23,
+                        50
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 36
+                        }
+                    },
+                    "expression": {
+                        "type": "BinaryExpression",
+                        "start": 30,
+                        "end": 48,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 16
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 34
+                            }
+                        },
+                        "range": [
+                            30,
+                            48
+                        ],
+                        "left": {
+                            "type": "BinaryExpression",
+                            "start": 30,
+                            "end": 41,
+                            "loc": {
+                                "start": {
+                                    "line": 3,
+                                    "column": 16
+                                },
+                                "end": {
+                                    "line": 3,
+                                    "column": 27
+                                }
+                            },
+                            "range": [
+                                30,
+                                41
+                            ],
+                            "left": {
+                                "type": "BinaryExpression",
+                                "start": 31,
+                                "end": 36,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 17
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 22
+                                    }
+                                },
+                                "range": [
+                                    31,
+                                    36
+                                ],
+                                "left": {
+                                    "type": "Identifier",
+                                    "start": 31,
+                                    "end": 32,
+                                    "loc": {
+                                        "start": {
+                                            "line": 3,
+                                            "column": 17
+                                        },
+                                        "end": {
+                                            "line": 3,
+                                            "column": 18
+                                        }
+                                    },
+                                    "range": [
+                                        31,
+                                        32
+                                    ],
+                                    "name": "a"
+                                },
+                                "operator": "+",
+                                "right": {
+                                    "type": "Identifier",
+                                    "start": 35,
+                                    "end": 36,
+                                    "loc": {
+                                        "start": {
+                                            "line": 3,
+                                            "column": 21
+                                        },
+                                        "end": {
+                                            "line": 3,
+                                            "column": 22
+                                        }
+                                    },
+                                    "range": [
+                                        35,
+                                        36
+                                    ],
+                                    "name": "b"
+                                }
+                            },
+                            "operator": "/",
+                            "right": {
+                                "type": "Literal",
+                                "start": 40,
+                                "end": 41,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 26
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    40,
+                                    41
+                                ],
+                                "value": 2,
+                                "raw": "2"
+                            }
+                        },
+                        "operator": "+",
+                        "right": {
+                            "type": "Literal",
+                            "start": 44,
+                            "end": 48,
+                            "loc": {
+                                "start": {
+                                    "line": 3,
+                                    "column": 30
+                                },
+                                "end": {
+                                    "line": 3,
+                                    "column": 34
+                                }
+                            },
+                            "range": [
+                                44,
+                                48
+                            ],
+                            "value": "px",
+                            "raw": "'px'"
+                        }
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 31,
+                                "end": 32,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 17
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 18
+                                    }
+                                },
+                                "range": [
+                                    31,
+                                    32
+                                ],
+                                "name": "a"
+                            },
+                            "mode": "r"
+                        },
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 35,
+                                "end": 36,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 21
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 22
+                                    }
+                                },
+                                "range": [
+                                    35,
+                                    36
+                                ],
+                                "name": "b"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        50,
+                        69
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 36
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 9
+                        }
+                    },
+                    "value": ";\n}\ndiv {\n  color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        69,
+                        100
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 40
+                        }
+                    },
+                    "expression": {
+                        "type": "BinaryExpression",
+                        "start": 80,
+                        "end": 98,
+                        "loc": {
+                            "start": {
+                                "line": 6,
+                                "column": 20
+                            },
+                            "end": {
+                                "line": 6,
+                                "column": 38
+                            }
+                        },
+                        "range": [
+                            80,
+                            98
+                        ],
+                        "left": {
+                            "type": "BinaryExpression",
+                            "start": 80,
+                            "end": 91,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 20
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 31
+                                }
+                            },
+                            "range": [
+                                80,
+                                91
+                            ],
+                            "left": {
+                                "type": "BinaryExpression",
+                                "start": 81,
+                                "end": 86,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 21
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 26
+                                    }
+                                },
+                                "range": [
+                                    81,
+                                    86
+                                ],
+                                "left": {
+                                    "type": "Identifier",
+                                    "start": 81,
+                                    "end": 82,
+                                    "loc": {
+                                        "start": {
+                                            "line": 6,
+                                            "column": 21
+                                        },
+                                        "end": {
+                                            "line": 6,
+                                            "column": 22
+                                        }
+                                    },
+                                    "range": [
+                                        81,
+                                        82
+                                    ],
+                                    "name": "a"
+                                },
+                                "operator": "+",
+                                "right": {
+                                    "type": "Identifier",
+                                    "start": 85,
+                                    "end": 86,
+                                    "loc": {
+                                        "start": {
+                                            "line": 6,
+                                            "column": 25
+                                        },
+                                        "end": {
+                                            "line": 6,
+                                            "column": 26
+                                        }
+                                    },
+                                    "range": [
+                                        85,
+                                        86
+                                    ],
+                                    "name": "b"
+                                }
+                            },
+                            "operator": "/",
+                            "right": {
+                                "type": "Literal",
+                                "start": 90,
+                                "end": 91,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 30
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 31
+                                    }
+                                },
+                                "range": [
+                                    90,
+                                    91
+                                ],
+                                "value": 2,
+                                "raw": "2"
+                            }
+                        },
+                        "operator": "+",
+                        "right": {
+                            "type": "Literal",
+                            "start": 94,
+                            "end": 98,
+                            "loc": {
+                                "start": {
+                                    "line": 6,
+                                    "column": 34
+                                },
+                                "end": {
+                                    "line": 6,
+                                    "column": 38
+                                }
+                            },
+                            "range": [
+                                94,
+                                98
+                            ],
+                            "value": "px",
+                            "raw": "'px'"
+                        }
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 81,
+                                "end": 82,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 21
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 22
+                                    }
+                                },
+                                "range": [
+                                    81,
+                                    82
+                                ],
+                                "name": "a"
+                            },
+                            "mode": "r"
+                        },
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 85,
+                                "end": 86,
+                                "loc": {
+                                    "start": {
+                                        "line": 6,
+                                        "column": 25
+                                    },
+                                    "end": {
+                                        "line": 6,
+                                        "column": 26
+                                    }
+                                },
+                                "range": [
+                                    85,
+                                    86
+                                ],
+                                "name": "b"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        100,
+                        117
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 6,
+                            "column": 40
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 9
+                        }
+                    },
+                    "value": ";\n}\np {\n  color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        117,
+                        144
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 9
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 36
+                        }
+                    },
+                    "expression": {
+                        "type": "BinaryExpression",
+                        "start": 124,
+                        "end": 143,
+                        "loc": {
+                            "start": {
+                                "line": 9,
+                                "column": 16
+                            },
+                            "end": {
+                                "line": 9,
+                                "column": 35
+                            }
+                        },
+                        "range": [
+                            124,
+                            143
+                        ],
+                        "left": {
+                            "type": "BinaryExpression",
+                            "start": 126,
+                            "end": 131,
+                            "loc": {
+                                "start": {
+                                    "line": 9,
+                                    "column": 18
+                                },
+                                "end": {
+                                    "line": 9,
+                                    "column": 23
+                                }
+                            },
+                            "range": [
+                                126,
+                                131
+                            ],
+                            "left": {
+                                "type": "Identifier",
+                                "start": 126,
+                                "end": 127,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 19
+                                    }
+                                },
+                                "range": [
+                                    126,
+                                    127
+                                ],
+                                "name": "a"
+                            },
+                            "operator": "+",
+                            "right": {
+                                "type": "Identifier",
+                                "start": 130,
+                                "end": 131,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    130,
+                                    131
+                                ],
+                                "name": "b"
+                            }
+                        },
+                        "operator": "/",
+                        "right": {
+                            "type": "BinaryExpression",
+                            "start": 137,
+                            "end": 142,
+                            "loc": {
+                                "start": {
+                                    "line": 9,
+                                    "column": 29
+                                },
+                                "end": {
+                                    "line": 9,
+                                    "column": 34
+                                }
+                            },
+                            "range": [
+                                137,
+                                142
+                            ],
+                            "left": {
+                                "type": "Literal",
+                                "start": 137,
+                                "end": 138,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 29
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 30
+                                    }
+                                },
+                                "range": [
+                                    137,
+                                    138
+                                ],
+                                "value": 2,
+                                "raw": "2"
+                            },
+                            "operator": "*",
+                            "right": {
+                                "type": "Identifier",
+                                "start": 141,
+                                "end": 142,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 33
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 34
+                                    }
+                                },
+                                "range": [
+                                    141,
+                                    142
+                                ],
+                                "name": "a"
+                            }
+                        }
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 126,
+                                "end": 127,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 18
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 19
+                                    }
+                                },
+                                "range": [
+                                    126,
+                                    127
+                                ],
+                                "name": "a"
+                            },
+                            "mode": "r"
+                        },
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 130,
+                                "end": 131,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    130,
+                                    131
+                                ],
+                                "name": "b"
+                            },
+                            "mode": "r"
+                        },
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 141,
+                                "end": 142,
+                                "loc": {
+                                    "start": {
+                                        "line": 9,
+                                        "column": 33
+                                    },
+                                    "end": {
+                                        "line": 9,
+                                        "column": 34
+                                    }
+                                },
+                                "range": [
+                                    141,
+                                    142
+                                ],
+                                "name": "a"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        144,
+                        148
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 9,
+                            "column": 36
+                        },
+                        "end": {
+                            "line": 11,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n}\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    148,
+                    156
+                ],
+                "loc": {
+                    "start": {
+                        "line": 11,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 11,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                156,
+                157
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 8
+                },
+                "end": {
+                    "line": 12,
+                    "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,
+                8
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                8,
+                11
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 0
+                },
+                "end": {
+                    "line": 2,
+                    "column": 3
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                11,
+                12
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 3
+                },
+                "end": {
+                    "line": 2,
+                    "column": 4
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                12,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 4
+                },
+                "end": {
+                    "line": 2,
+                    "column": 5
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                13,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 5
+                },
+                "end": {
+                    "line": 3,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                16,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 2
+                },
+                "end": {
+                    "line": 3,
+                    "column": 8
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                22,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                23,
+                29
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 3,
+                    "column": 15
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                29,
+                30
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 15
+                },
+                "end": {
+                    "line": 3,
+                    "column": 16
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 30,
+            "end": 31,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 16
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "range": [
+                30,
+                31
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "a",
+            "start": 31,
+            "end": 32,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 18
+                }
+            },
+            "range": [
+                31,
+                32
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 33,
+            "end": 34,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 19
+                },
+                "end": {
+                    "line": 3,
+                    "column": 20
+                }
+            },
+            "range": [
+                33,
+                34
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "b",
+            "start": 35,
+            "end": 36,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 21
+                },
+                "end": {
+                    "line": 3,
+                    "column": 22
+                }
+            },
+            "range": [
+                35,
+                36
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 36,
+            "end": 37,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 22
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "range": [
+                36,
+                37
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "/",
+            "start": 38,
+            "end": 39,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "range": [
+                38,
+                39
+            ]
+        },
+        {
+            "type": "Numeric",
+            "value": "2",
+            "start": 40,
+            "end": 41,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 26
+                },
+                "end": {
+                    "line": 3,
+                    "column": 27
+                }
+            },
+            "range": [
+                40,
+                41
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 42,
+            "end": 43,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 28
+                },
+                "end": {
+                    "line": 3,
+                    "column": 29
+                }
+            },
+            "range": [
+                42,
+                43
+            ]
+        },
+        {
+            "type": "String",
+            "value": "'px'",
+            "start": 44,
+            "end": 48,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 30
+                },
+                "end": {
+                    "line": 3,
+                    "column": 34
+                }
+            },
+            "range": [
+                44,
+                48
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                49,
+                50
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 35
+                },
+                "end": {
+                    "line": 3,
+                    "column": 36
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                50,
+                51
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 36
+                },
+                "end": {
+                    "line": 3,
+                    "column": 37
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                51,
+                52
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 37
+                },
+                "end": {
+                    "line": 4,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                52,
+                53
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 0
+                },
+                "end": {
+                    "line": 4,
+                    "column": 1
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                53,
+                54
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 1
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                54,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 3
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                57,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 3
+                },
+                "end": {
+                    "line": 5,
+                    "column": 4
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                58,
+                59
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 4
+                },
+                "end": {
+                    "line": 5,
+                    "column": 5
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                59,
+                62
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 5
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                62,
+                68
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 8
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                68,
+                69
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 8
+                },
+                "end": {
+                    "line": 6,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                69,
+                75
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 9
+                },
+                "end": {
+                    "line": 6,
+                    "column": 15
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                79,
+                80
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 19
+                },
+                "end": {
+                    "line": 6,
+                    "column": 20
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 80,
+            "end": 81,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 20
+                },
+                "end": {
+                    "line": 6,
+                    "column": 21
+                }
+            },
+            "range": [
+                80,
+                81
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "a",
+            "start": 81,
+            "end": 82,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 21
+                },
+                "end": {
+                    "line": 6,
+                    "column": 22
+                }
+            },
+            "range": [
+                81,
+                82
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 83,
+            "end": 84,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 23
+                },
+                "end": {
+                    "line": 6,
+                    "column": 24
+                }
+            },
+            "range": [
+                83,
+                84
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "b",
+            "start": 85,
+            "end": 86,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 25
+                },
+                "end": {
+                    "line": 6,
+                    "column": 26
+                }
+            },
+            "range": [
+                85,
+                86
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 86,
+            "end": 87,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 26
+                },
+                "end": {
+                    "line": 6,
+                    "column": 27
+                }
+            },
+            "range": [
+                86,
+                87
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "/",
+            "start": 88,
+            "end": 89,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 28
+                },
+                "end": {
+                    "line": 6,
+                    "column": 29
+                }
+            },
+            "range": [
+                88,
+                89
+            ]
+        },
+        {
+            "type": "Numeric",
+            "value": "2",
+            "start": 90,
+            "end": 91,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 30
+                },
+                "end": {
+                    "line": 6,
+                    "column": 31
+                }
+            },
+            "range": [
+                90,
+                91
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 92,
+            "end": 93,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 32
+                },
+                "end": {
+                    "line": 6,
+                    "column": 33
+                }
+            },
+            "range": [
+                92,
+                93
+            ]
+        },
+        {
+            "type": "String",
+            "value": "'px'",
+            "start": 94,
+            "end": 98,
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 34
+                },
+                "end": {
+                    "line": 6,
+                    "column": 38
+                }
+            },
+            "range": [
+                94,
+                98
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                99,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 39
+                },
+                "end": {
+                    "line": 6,
+                    "column": 40
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                100,
+                101
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 40
+                },
+                "end": {
+                    "line": 6,
+                    "column": 41
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                101,
+                102
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 41
+                },
+                "end": {
+                    "line": 7,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                102,
+                103
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 0
+                },
+                "end": {
+                    "line": 7,
+                    "column": 1
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                103,
+                104
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 1
+                },
+                "end": {
+                    "line": 8,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                104,
+                105
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 0
+                },
+                "end": {
+                    "line": 8,
+                    "column": 1
+                }
+            },
+            "value": "p"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                105,
+                106
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 1
+                },
+                "end": {
+                    "line": 8,
+                    "column": 2
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                106,
+                107
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 2
+                },
+                "end": {
+                    "line": 8,
+                    "column": 3
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                107,
+                110
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 3
+                },
+                "end": {
+                    "line": 9,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                110,
+                116
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 2
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                116,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 9,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                117,
+                123
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 9
+                },
+                "end": {
+                    "line": 9,
+                    "column": 15
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                123,
+                124
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 15
+                },
+                "end": {
+                    "line": 9,
+                    "column": 16
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 124,
+            "end": 125,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 16
+                },
+                "end": {
+                    "line": 9,
+                    "column": 17
+                }
+            },
+            "range": [
+                124,
+                125
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 125,
+            "end": 126,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 17
+                },
+                "end": {
+                    "line": 9,
+                    "column": 18
+                }
+            },
+            "range": [
+                125,
+                126
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "a",
+            "start": 126,
+            "end": 127,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 18
+                },
+                "end": {
+                    "line": 9,
+                    "column": 19
+                }
+            },
+            "range": [
+                126,
+                127
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 128,
+            "end": 129,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 20
+                },
+                "end": {
+                    "line": 9,
+                    "column": 21
+                }
+            },
+            "range": [
+                128,
+                129
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "b",
+            "start": 130,
+            "end": 131,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 22
+                },
+                "end": {
+                    "line": 9,
+                    "column": 23
+                }
+            },
+            "range": [
+                130,
+                131
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 131,
+            "end": 132,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 23
+                },
+                "end": {
+                    "line": 9,
+                    "column": 24
+                }
+            },
+            "range": [
+                131,
+                132
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 132,
+            "end": 133,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 24
+                },
+                "end": {
+                    "line": 9,
+                    "column": 25
+                }
+            },
+            "range": [
+                132,
+                133
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "/",
+            "start": 134,
+            "end": 135,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 26
+                },
+                "end": {
+                    "line": 9,
+                    "column": 27
+                }
+            },
+            "range": [
+                134,
+                135
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 136,
+            "end": 137,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 28
+                },
+                "end": {
+                    "line": 9,
+                    "column": 29
+                }
+            },
+            "range": [
+                136,
+                137
+            ]
+        },
+        {
+            "type": "Numeric",
+            "value": "2",
+            "start": 137,
+            "end": 138,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 29
+                },
+                "end": {
+                    "line": 9,
+                    "column": 30
+                }
+            },
+            "range": [
+                137,
+                138
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "*",
+            "start": 139,
+            "end": 140,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 31
+                },
+                "end": {
+                    "line": 9,
+                    "column": 32
+                }
+            },
+            "range": [
+                139,
+                140
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "a",
+            "start": 141,
+            "end": 142,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 33
+                },
+                "end": {
+                    "line": 9,
+                    "column": 34
+                }
+            },
+            "range": [
+                141,
+                142
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 142,
+            "end": 143,
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 34
+                },
+                "end": {
+                    "line": 9,
+                    "column": 35
+                }
+            },
+            "range": [
+                142,
+                143
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                143,
+                144
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 35
+                },
+                "end": {
+                    "line": 9,
+                    "column": 36
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                144,
+                145
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 36
+                },
+                "end": {
+                    "line": 9,
+                    "column": 37
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                145,
+                146
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 37
+                },
+                "end": {
+                    "line": 10,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                146,
+                147
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 0
+                },
+                "end": {
+                    "line": 10,
+                    "column": 1
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                147,
+                148
+            ],
+            "loc": {
+                "start": {
+                    "line": 10,
+                    "column": 1
+                },
+                "end": {
+                    "line": 11,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                148,
+                155
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 0
+                },
+                "end": {
+                    "line": 11,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                155,
+                156
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 7
+                },
+                "end": {
+                    "line": 11,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                156,
+                157
+            ],
+            "loc": {
+                "start": {
+                    "line": 11,
+                    "column": 8
+                },
+                "end": {
+                    "line": 12,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression01/source.vue b/test/fixtures/document-fragment/style-variables-with-complex-expression01/source.vue
new file mode 100644
index 00000000..bcd17837
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression01/source.vue
@@ -0,0 +1,11 @@
+<style>
+div {
+  color: v-bind((a + b) / 2 + 'px' );
+}
+div {
+  color: v-bind    ((a + b) / 2 + 'px' );
+}
+p {
+  color: v-bind(((a + b)) / (2 * a));
+}
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression01/token-ranges.json b/test/fixtures/document-fragment/style-variables-with-complex-expression01/token-ranges.json
new file mode 100644
index 00000000..4f1de537
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression01/token-ranges.json
@@ -0,0 +1,78 @@
+[
+    "<style",
+    ">",
+    "\n",
+    "div",
+    " ",
+    "{",
+    "\n  ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "(",
+    "a",
+    "+",
+    "b",
+    ")",
+    "/",
+    "2",
+    "+",
+    "'px'",
+    ")",
+    ";",
+    "\n",
+    "}",
+    "\n",
+    "div",
+    " ",
+    "{",
+    "\n  ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "(",
+    "a",
+    "+",
+    "b",
+    ")",
+    "/",
+    "2",
+    "+",
+    "'px'",
+    ")",
+    ";",
+    "\n",
+    "}",
+    "\n",
+    "p",
+    " ",
+    "{",
+    "\n  ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "(",
+    "(",
+    "a",
+    "+",
+    "b",
+    ")",
+    ")",
+    "/",
+    "(",
+    "2",
+    "*",
+    "a",
+    ")",
+    ")",
+    ";",
+    "\n",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression01/tree.json b/test/fixtures/document-fragment/style-variables-with-complex-expression01/tree.json
new file mode 100644
index 00000000..26a7fef2
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression01/tree.json
@@ -0,0 +1,181 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\ndiv {\n  color: v-bind((a + b) / 2 + 'px' );\n}\ndiv {\n  color: v-bind    ((a + b) / 2 + 'px' );\n}\np {\n  color: v-bind(((a + b)) / (2 * a));\n}\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\ndiv {\n  color: v-bind((a + b) / 2 + 'px' );\n}\ndiv {\n  color: v-bind    ((a + b) / 2 + 'px' );\n}\np {\n  color: v-bind(((a + b)) / (2 * a));\n}\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\ndiv {\n  color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind((a + b) / 2 + 'px' )",
+                        "children": [
+                            {
+                                "type": "BinaryExpression",
+                                "text": "(a + b) / 2 + 'px'",
+                                "children": [
+                                    {
+                                        "type": "BinaryExpression",
+                                        "text": "(a + b) / 2",
+                                        "children": [
+                                            {
+                                                "type": "BinaryExpression",
+                                                "text": "a + b",
+                                                "children": [
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "a",
+                                                        "children": []
+                                                    },
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "b",
+                                                        "children": []
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "type": "Literal",
+                                                "text": "2",
+                                                "children": []
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'px'",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n}\ndiv {\n  color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind    ((a + b) / 2 + 'px' )",
+                        "children": [
+                            {
+                                "type": "BinaryExpression",
+                                "text": "(a + b) / 2 + 'px'",
+                                "children": [
+                                    {
+                                        "type": "BinaryExpression",
+                                        "text": "(a + b) / 2",
+                                        "children": [
+                                            {
+                                                "type": "BinaryExpression",
+                                                "text": "a + b",
+                                                "children": [
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "a",
+                                                        "children": []
+                                                    },
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "b",
+                                                        "children": []
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "type": "Literal",
+                                                "text": "2",
+                                                "children": []
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'px'",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n}\np {\n  color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind(((a + b)) / (2 * a))",
+                        "children": [
+                            {
+                                "type": "BinaryExpression",
+                                "text": "((a + b)) / (2 * a)",
+                                "children": [
+                                    {
+                                        "type": "BinaryExpression",
+                                        "text": "a + b",
+                                        "children": [
+                                            {
+                                                "type": "Identifier",
+                                                "text": "a",
+                                                "children": []
+                                            },
+                                            {
+                                                "type": "Identifier",
+                                                "text": "b",
+                                                "children": []
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "type": "BinaryExpression",
+                                        "text": "2 * a",
+                                        "children": [
+                                            {
+                                                "type": "Literal",
+                                                "text": "2",
+                                                "children": []
+                                            },
+                                            {
+                                                "type": "Identifier",
+                                                "text": "a",
+                                                "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-complex-expression02/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-complex-expression02/document-fragment.json
new file mode 100644
index 00000000..dea299fb
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression02/document-fragment.json
@@ -0,0 +1,1478 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        139
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 10,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                138
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 9,
+                    "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": 14
+                        }
+                    },
+                    "value": "\ndiv {\n  width: calc("
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        55
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 14
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 41
+                        }
+                    },
+                    "expression": {
+                        "type": "BinaryExpression",
+                        "start": 35,
+                        "end": 53,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 21
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 39
+                            }
+                        },
+                        "range": [
+                            35,
+                            53
+                        ],
+                        "left": {
+                            "type": "BinaryExpression",
+                            "start": 35,
+                            "end": 46,
+                            "loc": {
+                                "start": {
+                                    "line": 3,
+                                    "column": 21
+                                },
+                                "end": {
+                                    "line": 3,
+                                    "column": 32
+                                }
+                            },
+                            "range": [
+                                35,
+                                46
+                            ],
+                            "left": {
+                                "type": "BinaryExpression",
+                                "start": 36,
+                                "end": 41,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    36,
+                                    41
+                                ],
+                                "left": {
+                                    "type": "Identifier",
+                                    "start": 36,
+                                    "end": 37,
+                                    "loc": {
+                                        "start": {
+                                            "line": 3,
+                                            "column": 22
+                                        },
+                                        "end": {
+                                            "line": 3,
+                                            "column": 23
+                                        }
+                                    },
+                                    "range": [
+                                        36,
+                                        37
+                                    ],
+                                    "name": "a"
+                                },
+                                "operator": "+",
+                                "right": {
+                                    "type": "Identifier",
+                                    "start": 40,
+                                    "end": 41,
+                                    "loc": {
+                                        "start": {
+                                            "line": 3,
+                                            "column": 26
+                                        },
+                                        "end": {
+                                            "line": 3,
+                                            "column": 27
+                                        }
+                                    },
+                                    "range": [
+                                        40,
+                                        41
+                                    ],
+                                    "name": "b"
+                                }
+                            },
+                            "operator": "/",
+                            "right": {
+                                "type": "Literal",
+                                "start": 45,
+                                "end": 46,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 31
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 32
+                                    }
+                                },
+                                "range": [
+                                    45,
+                                    46
+                                ],
+                                "value": 2,
+                                "raw": "2"
+                            }
+                        },
+                        "operator": "+",
+                        "right": {
+                            "type": "Literal",
+                            "start": 49,
+                            "end": 53,
+                            "loc": {
+                                "start": {
+                                    "line": 3,
+                                    "column": 35
+                                },
+                                "end": {
+                                    "line": 3,
+                                    "column": 39
+                                }
+                            },
+                            "range": [
+                                49,
+                                53
+                            ],
+                            "value": "px",
+                            "raw": "'px'"
+                        }
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 36,
+                                "end": 37,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 23
+                                    }
+                                },
+                                "range": [
+                                    36,
+                                    37
+                                ],
+                                "name": "a"
+                            },
+                            "mode": "r"
+                        },
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 40,
+                                "end": 41,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 26
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    40,
+                                    41
+                                ],
+                                "name": "b"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        55,
+                        130
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 41
+                        },
+                        "end": {
+                            "line": 9,
+                            "column": 0
+                        }
+                    },
+                    "value": " - 3px);\n}\np {\n  /* missing close */\n  width: v-bind(((a + b)) / (2 * a)\n}\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    130,
+                    138
+                ],
+                "loc": {
+                    "start": {
+                        "line": 9,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 9,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                138,
+                139
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 8
+                },
+                "end": {
+                    "line": 10,
+                    "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,
+                8
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                8,
+                11
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 0
+                },
+                "end": {
+                    "line": 2,
+                    "column": 3
+                }
+            },
+            "value": "div"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                11,
+                12
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 3
+                },
+                "end": {
+                    "line": 2,
+                    "column": 4
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                12,
+                13
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 4
+                },
+                "end": {
+                    "line": 2,
+                    "column": 5
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                13,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 5
+                },
+                "end": {
+                    "line": 3,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                16,
+                22
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 2
+                },
+                "end": {
+                    "line": 3,
+                    "column": 8
+                }
+            },
+            "value": "width:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                22,
+                23
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                23,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 9
+                },
+                "end": {
+                    "line": 3,
+                    "column": 14
+                }
+            },
+            "value": "calc("
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 14
+                },
+                "end": {
+                    "line": 3,
+                    "column": 20
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                34,
+                35
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 20
+                },
+                "end": {
+                    "line": 3,
+                    "column": 21
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Punctuator",
+            "value": "(",
+            "start": 35,
+            "end": 36,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 21
+                },
+                "end": {
+                    "line": 3,
+                    "column": 22
+                }
+            },
+            "range": [
+                35,
+                36
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "a",
+            "start": 36,
+            "end": 37,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 22
+                },
+                "end": {
+                    "line": 3,
+                    "column": 23
+                }
+            },
+            "range": [
+                36,
+                37
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 38,
+            "end": 39,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 24
+                },
+                "end": {
+                    "line": 3,
+                    "column": 25
+                }
+            },
+            "range": [
+                38,
+                39
+            ]
+        },
+        {
+            "type": "Identifier",
+            "value": "b",
+            "start": 40,
+            "end": 41,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 26
+                },
+                "end": {
+                    "line": 3,
+                    "column": 27
+                }
+            },
+            "range": [
+                40,
+                41
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": ")",
+            "start": 41,
+            "end": 42,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 27
+                },
+                "end": {
+                    "line": 3,
+                    "column": 28
+                }
+            },
+            "range": [
+                41,
+                42
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "/",
+            "start": 43,
+            "end": 44,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 29
+                },
+                "end": {
+                    "line": 3,
+                    "column": 30
+                }
+            },
+            "range": [
+                43,
+                44
+            ]
+        },
+        {
+            "type": "Numeric",
+            "value": "2",
+            "start": 45,
+            "end": 46,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 31
+                },
+                "end": {
+                    "line": 3,
+                    "column": 32
+                }
+            },
+            "range": [
+                45,
+                46
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "value": "+",
+            "start": 47,
+            "end": 48,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 33
+                },
+                "end": {
+                    "line": 3,
+                    "column": 34
+                }
+            },
+            "range": [
+                47,
+                48
+            ]
+        },
+        {
+            "type": "String",
+            "value": "'px'",
+            "start": 49,
+            "end": 53,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 35
+                },
+                "end": {
+                    "line": 3,
+                    "column": 39
+                }
+            },
+            "range": [
+                49,
+                53
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                54,
+                55
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 40
+                },
+                "end": {
+                    "line": 3,
+                    "column": 41
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                55,
+                56
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 41
+                },
+                "end": {
+                    "line": 3,
+                    "column": 42
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                56,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 42
+                },
+                "end": {
+                    "line": 3,
+                    "column": 43
+                }
+            },
+            "value": "-"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                57,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 43
+                },
+                "end": {
+                    "line": 3,
+                    "column": 44
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                58,
+                63
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 44
+                },
+                "end": {
+                    "line": 3,
+                    "column": 49
+                }
+            },
+            "value": "3px);"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                63,
+                64
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 49
+                },
+                "end": {
+                    "line": 4,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                64,
+                65
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 0
+                },
+                "end": {
+                    "line": 4,
+                    "column": 1
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                65,
+                66
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 1
+                },
+                "end": {
+                    "line": 5,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                66,
+                67
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 0
+                },
+                "end": {
+                    "line": 5,
+                    "column": 1
+                }
+            },
+            "value": "p"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                67,
+                68
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 1
+                },
+                "end": {
+                    "line": 5,
+                    "column": 2
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                68,
+                69
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 2
+                },
+                "end": {
+                    "line": 5,
+                    "column": 3
+                }
+            },
+            "value": "{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                69,
+                72
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 3
+                },
+                "end": {
+                    "line": 6,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                72,
+                74
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 2
+                },
+                "end": {
+                    "line": 6,
+                    "column": 4
+                }
+            },
+            "value": "/*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                74,
+                75
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 4
+                },
+                "end": {
+                    "line": 6,
+                    "column": 5
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                75,
+                82
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 5
+                },
+                "end": {
+                    "line": 6,
+                    "column": 12
+                }
+            },
+            "value": "missing"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                82,
+                83
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 12
+                },
+                "end": {
+                    "line": 6,
+                    "column": 13
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                83,
+                88
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 13
+                },
+                "end": {
+                    "line": 6,
+                    "column": 18
+                }
+            },
+            "value": "close"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                88,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 18
+                },
+                "end": {
+                    "line": 6,
+                    "column": 19
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                89,
+                91
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 19
+                },
+                "end": {
+                    "line": 6,
+                    "column": 21
+                }
+            },
+            "value": "*/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                91,
+                94
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 21
+                },
+                "end": {
+                    "line": 7,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                94,
+                100
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 2
+                },
+                "end": {
+                    "line": 7,
+                    "column": 8
+                }
+            },
+            "value": "width:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                100,
+                101
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 9
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                101,
+                111
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 9
+                },
+                "end": {
+                    "line": 7,
+                    "column": 19
+                }
+            },
+            "value": "v-bind(((a"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                111,
+                112
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 19
+                },
+                "end": {
+                    "line": 7,
+                    "column": 20
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                112,
+                113
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 20
+                },
+                "end": {
+                    "line": 7,
+                    "column": 21
+                }
+            },
+            "value": "+"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                113,
+                114
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 21
+                },
+                "end": {
+                    "line": 7,
+                    "column": 22
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                114,
+                117
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 22
+                },
+                "end": {
+                    "line": 7,
+                    "column": 25
+                }
+            },
+            "value": "b))"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                117,
+                118
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 25
+                },
+                "end": {
+                    "line": 7,
+                    "column": 26
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                118,
+                119
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 26
+                },
+                "end": {
+                    "line": 7,
+                    "column": 27
+                }
+            },
+            "value": "/"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                119,
+                120
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 27
+                },
+                "end": {
+                    "line": 7,
+                    "column": 28
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                120,
+                122
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 28
+                },
+                "end": {
+                    "line": 7,
+                    "column": 30
+                }
+            },
+            "value": "(2"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                122,
+                123
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 30
+                },
+                "end": {
+                    "line": 7,
+                    "column": 31
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                123,
+                124
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 31
+                },
+                "end": {
+                    "line": 7,
+                    "column": 32
+                }
+            },
+            "value": "*"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                124,
+                125
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 32
+                },
+                "end": {
+                    "line": 7,
+                    "column": 33
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                125,
+                127
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 33
+                },
+                "end": {
+                    "line": 7,
+                    "column": 35
+                }
+            },
+            "value": "a)"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                127,
+                128
+            ],
+            "loc": {
+                "start": {
+                    "line": 7,
+                    "column": 35
+                },
+                "end": {
+                    "line": 8,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                128,
+                129
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 0
+                },
+                "end": {
+                    "line": 8,
+                    "column": 1
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                129,
+                130
+            ],
+            "loc": {
+                "start": {
+                    "line": 8,
+                    "column": 1
+                },
+                "end": {
+                    "line": 9,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                130,
+                137
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 0
+                },
+                "end": {
+                    "line": 9,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                137,
+                138
+            ],
+            "loc": {
+                "start": {
+                    "line": 9,
+                    "column": 7
+                },
+                "end": {
+                    "line": 9,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                138,
+                139
+            ],
+            "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-with-complex-expression02/source.vue b/test/fixtures/document-fragment/style-variables-with-complex-expression02/source.vue
new file mode 100644
index 00000000..2803c288
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression02/source.vue
@@ -0,0 +1,9 @@
+<style>
+div {
+  width: calc(v-bind((a + b) / 2 + 'px' ) - 3px);
+}
+p {
+  /* missing close */
+  width: v-bind(((a + b)) / (2 * a)
+}
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression02/token-ranges.json b/test/fixtures/document-fragment/style-variables-with-complex-expression02/token-ranges.json
new file mode 100644
index 00000000..ff7beaf3
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression02/token-ranges.json
@@ -0,0 +1,64 @@
+[
+    "<style",
+    ">",
+    "\n",
+    "div",
+    " ",
+    "{",
+    "\n  ",
+    "width:",
+    " ",
+    "calc(",
+    "v-bind",
+    "(",
+    "(",
+    "a",
+    "+",
+    "b",
+    ")",
+    "/",
+    "2",
+    "+",
+    "'px'",
+    ")",
+    " ",
+    "-",
+    " ",
+    "3px);",
+    "\n",
+    "}",
+    "\n",
+    "p",
+    " ",
+    "{",
+    "\n  ",
+    "/*",
+    " ",
+    "missing",
+    " ",
+    "close",
+    " ",
+    "*/",
+    "\n  ",
+    "width:",
+    " ",
+    "v-bind(((a",
+    " ",
+    "+",
+    " ",
+    "b))",
+    " ",
+    "/",
+    " ",
+    "(2",
+    " ",
+    "*",
+    " ",
+    "a)",
+    "\n",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-complex-expression02/tree.json b/test/fixtures/document-fragment/style-variables-with-complex-expression02/tree.json
new file mode 100644
index 00000000..2ecb302b
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-complex-expression02/tree.json
@@ -0,0 +1,83 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\ndiv {\n  width: calc(v-bind((a + b) / 2 + 'px' ) - 3px);\n}\np {\n  /* missing close */\n  width: v-bind(((a + b)) / (2 * a)\n}\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\ndiv {\n  width: calc(v-bind((a + b) / 2 + 'px' ) - 3px);\n}\np {\n  /* missing close */\n  width: v-bind(((a + b)) / (2 * a)\n}\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\ndiv {\n  width: calc(",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind((a + b) / 2 + 'px' )",
+                        "children": [
+                            {
+                                "type": "BinaryExpression",
+                                "text": "(a + b) / 2 + 'px'",
+                                "children": [
+                                    {
+                                        "type": "BinaryExpression",
+                                        "text": "(a + b) / 2",
+                                        "children": [
+                                            {
+                                                "type": "BinaryExpression",
+                                                "text": "a + b",
+                                                "children": [
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "a",
+                                                        "children": []
+                                                    },
+                                                    {
+                                                        "type": "Identifier",
+                                                        "text": "b",
+                                                        "children": []
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                "type": "Literal",
+                                                "text": "2",
+                                                "children": []
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "type": "Literal",
+                                        "text": "'px'",
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": " - 3px);\n}\np {\n  /* missing close */\n  width: v-bind(((a + b)) / (2 * a)\n}\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file

From 56607423c6fd6542f8d68793728a19845bc3396d Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Mon, 24 Jan 2022 11:59:45 +0900
Subject: [PATCH 2/3] fix

---
 src/style/index.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/style/index.ts b/src/style/index.ts
index e5739c99..da81c040 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -23,17 +23,17 @@ import { DEFAULT_ECMA_VERSION } from "../script-setup/parser-options"
 import { resolveReferences } from "../template"
 import type {
     CSSCommentToken,
-    CSSParseOption,
     CSSPunctuatorToken,
     CSSToken,
+    CSSTokenizeOption,
 } from "./tokenizer"
 import { CSSTokenType, CSSTokenizer } from "./tokenizer"
 
 class CSSTokenScanner {
     private reconsuming: CSSToken[] = []
     private tokenizer: CSSTokenizer
-    public constructor(text: string, parserOptions: CSSParseOption) {
-        this.tokenizer = new CSSTokenizer(text, 0, parserOptions)
+    public constructor(text: string, options: CSSTokenizeOption) {
+        this.tokenizer = new CSSTokenizer(text, 0, options)
     }
     public nextToken(): CSSToken | null {
         return this.reconsuming.shift() || this.tokenizer.nextToken()
@@ -77,7 +77,7 @@ function parseStyleElement(
     style: VStyleElement,
     globalLocationCalculator: LocationCalculatorForHtml,
     parserOptions: ParserOptions,
-    cssOptions: CSSParseOption,
+    cssOptions: CSSTokenizeOption,
 ) {
     if (style.children.length !== 1) {
         return
@@ -112,7 +112,7 @@ function parseStyle(
     code: string,
     locationCalculator: LocationCalculatorForHtml,
     parserOptions: ParserOptions,
-    cssOptions: CSSParseOption,
+    cssOptions: CSSTokenizeOption,
 ) {
     let textStart = 0
     for (const {
@@ -294,7 +294,7 @@ type VBindLocations = {
  */
 function* iterateVBind(
     code: string,
-    cssOptions: CSSParseOption,
+    cssOptions: CSSTokenizeOption,
 ): IterableIterator<VBindLocations> {
     const tokenizer = new CSSTokenScanner(code, cssOptions)
 

From 99eeaaa12e9526a3d1a2dcc5393125b2c7ba4b5b Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Mon, 24 Jan 2022 12:19:10 +0900
Subject: [PATCH 3/3] add comments

---
 src/html/util/unicode.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/html/util/unicode.ts b/src/html/util/unicode.ts
index 21fd900a..3087de54 100644
--- a/src/html/util/unicode.ts
+++ b/src/html/util/unicode.ts
@@ -11,33 +11,33 @@ export const CARRIAGE_RETURN = 0x0D
 export const LINE_FEED = 0x0A
 export const FORM_FEED = 0x0C
 export const SPACE = 0x20
-export const EXCLAMATION_MARK = 0x21
+export const EXCLAMATION_MARK = 0x21 // !
 export const QUOTATION_MARK = 0x22 // "
-export const NUMBER_SIGN = 0x23
-export const AMPERSAND = 0x26
+export const NUMBER_SIGN = 0x23 // #
+export const AMPERSAND = 0x26 // &
 export const APOSTROPHE = 0x27 // '
 export const LEFT_PARENTHESIS = 0x28 // (
 export const RIGHT_PARENTHESIS = 0x29 // )
 export const ASTERISK = 0x2A // *
-export const HYPHEN_MINUS = 0x2D
+export const HYPHEN_MINUS = 0x2D // -
 export const SOLIDUS = 0x2F // /
 export const DIGIT_0 = 0x30
 export const DIGIT_9 = 0x39
-export const COLON = 0x3a
-export const SEMICOLON = 0x3B
-export const LESS_THAN_SIGN = 0x3C
-export const EQUALS_SIGN = 0x3D
-export const GREATER_THAN_SIGN = 0x3E
-export const QUESTION_MARK = 0x3F
+export const COLON = 0x3a // :
+export const SEMICOLON = 0x3B // ;
+export const LESS_THAN_SIGN = 0x3C // <
+export const EQUALS_SIGN = 0x3D // =
+export const GREATER_THAN_SIGN = 0x3E // >
+export const QUESTION_MARK = 0x3F // ?
 export const LATIN_CAPITAL_A = 0x41
 export const LATIN_CAPITAL_D = 0x44
 export const LATIN_CAPITAL_F = 0x46
 export const LATIN_CAPITAL_X = 0x58
 export const LATIN_CAPITAL_Z = 0x5A
-export const LEFT_SQUARE_BRACKET = 0x5B
-export const REVERSE_SOLIDUS = 0x5C
-export const RIGHT_SQUARE_BRACKET = 0x5D
-export const GRAVE_ACCENT = 0x60
+export const LEFT_SQUARE_BRACKET = 0x5B // [
+export const REVERSE_SOLIDUS = 0x5C // \
+export const RIGHT_SQUARE_BRACKET = 0x5D // ]
+export const GRAVE_ACCENT = 0x60 // `
 export const LATIN_SMALL_A = 0x61
 export const LATIN_SMALL_F = 0x66
 export const LATIN_SMALL_X = 0x78