diff --git a/src/style/index.ts b/src/style/index.ts
index 4c7ff08f..33594963 100644
--- a/src/style/index.ts
+++ b/src/style/index.ts
@@ -69,7 +69,7 @@ function parseStyleElement(
     }
     const code = textNode.value
     // short circuit
-    if (!code.includes("v-bind(")) {
+    if (!/v-bind(?:\(|\/)/u.test(code)) {
         return
     }
 
@@ -96,10 +96,14 @@ function parseStyle(
     cssOptions: CSSParseOption,
 ) {
     let textStart = 0
-    for (const { range, expr, exprOffset, quote, comments } of iterateVBind(
-        code,
-        cssOptions,
-    )) {
+    for (const {
+        range,
+        expr,
+        exprOffset,
+        quote,
+        openingParenOffset,
+        comments,
+    } of iterateVBind(code, cssOptions)) {
         insertComments(
             document,
             comments.map((c) =>
@@ -128,9 +132,11 @@ function parseStyle(
             references: [],
         }
 
+        const openingParenStart =
+            locationCalculator.getOffsetWithGap(openingParenOffset)
         const beforeTokens: Token[] = [
             createSimpleToken(
-                "HTMLText",
+                "HTMLRawText",
                 container.range[0],
                 container.range[0] + 6 /* v-bind */,
                 "v-bind",
@@ -138,8 +144,8 @@ function parseStyle(
             ),
             createSimpleToken(
                 "Punctuator",
-                container.range[0] + 6 /* v-bind */,
-                container.range[0] + 7,
+                openingParenStart,
+                openingParenStart + 1,
                 "(",
                 locationCalculator,
             ),
@@ -259,11 +265,31 @@ 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
     quote: '"' | "'" | null
+    openingParenOffset: number
     comments: {
         type: string
         range: OffsetRange
@@ -279,25 +305,37 @@ function* iterateVBind(
     cssOptions: CSSParseOption,
 ): IterableIterator<VBindLocations> {
     const re = cssOptions.inlineComment
-        ? /"|'|\/[*/]|\bv-bind\(/gu
-        : /"|'|\/\*|\bv-bind\(/gu
+        ? /"|'|\/[*/]|\bv-bind/gu
+        : /"|'|\/\*|\bv-bind/gu
     let match
     while ((match = re.exec(code))) {
-        const startOrVBind = match[0]
-        if (startOrVBind === '"' || startOrVBind === "'") {
+        const startToken = match[0]
+        if (isQuote(startToken)) {
             // skip string
-            re.lastIndex = skipString(code, startOrVBind, re.lastIndex)
-        } else if (startOrVBind === "/*" || startOrVBind === "//") {
+            re.lastIndex = skipString(code, startToken, re.lastIndex)
+        } else if (isCommentStart(startToken)) {
             // skip comment
             re.lastIndex = skipComment(
                 code,
-                startOrVBind === "/*" ? "block" : "line",
+                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, re.lastIndex, cssOptions)
+            const arg = parseVBindArg(
+                code,
+                openingParen.openingParenOffset + 1,
+                cssOptions,
+            )
             if (!arg) {
                 continue
             }
@@ -306,13 +344,66 @@ function* iterateVBind(
                 expr: arg.expr,
                 exprOffset: arg.exprOffset,
                 quote: arg.quote,
-                comments: arg.comments,
+                openingParenOffset: openingParen.openingParenOffset,
+                comments: [...openingParen.comments, ...arg.comments],
             }
             re.lastIndex = arg.end
         }
     }
 }
 
+function findVBindOpeningParen(
+    code: string,
+    nextIndex: number,
+    cssOptions: CSSParseOption,
+): {
+    openingParenOffset: number
+    comments: {
+        type: string
+        range: OffsetRange
+        value: string
+    }[]
+} | 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 === "(") {
+            return {
+                openingParenOffset: match.index,
+                comments,
+            }
+        } else if (isCommentStart(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,
+                ),
+            })
+            continue
+        }
+        // There were no opening parens.
+        return null
+    }
+    return null
+}
+
 function parseVBindArg(
     code: string,
     nextIndex: number,
@@ -338,29 +429,26 @@ function parseVBindArg(
         value: string
     }[] = []
     while ((match = re.exec(code))) {
-        const startOrVBind = match[0]
-        if (startOrVBind === '"' || startOrVBind === "'") {
+        const token = match[0]
+        if (isQuote(token)) {
             const start = match.index
-            const end = (re.lastIndex = skipString(
-                code,
-                startOrVBind,
-                re.lastIndex,
-            ))
+            const end = (re.lastIndex = skipString(code, token, re.lastIndex))
             stringRanges.push([start, end])
-        } else if (startOrVBind === "/*" || startOrVBind === "//") {
-            const block = startOrVBind === "/*"
+        } else if (isCommentStart(token)) {
+            const comment = COMMENT[token]
             const start = match.index
             const end = (re.lastIndex = skipComment(
                 code,
-                block ? "block" : "line",
+                comment.closing,
                 re.lastIndex,
             ))
             comments.push({
-                type: block ? "Block" : "Line",
+                type: comment.type,
                 range: [start, end],
-                value: block
-                    ? code.slice(start + 2, end - 2)
-                    : code.slice(start + 2, end - 1),
+                value: code.slice(
+                    start + token.length,
+                    end - comment.closing.length,
+                ),
             })
         } else {
             // closing paren
@@ -405,10 +493,9 @@ function skipString(code: string, quote: '"' | "'", nextIndex: number): number {
 
 function skipComment(
     code: string,
-    kind: "block" | "line",
+    closing: "*/" | "\n",
     nextIndex: number,
 ): number {
-    const closing = kind === "block" ? "*/" : "\n"
     const index = code.indexOf(closing, nextIndex)
     if (index >= nextIndex) {
         return index + closing.length
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json b/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
index a71d5817..9d703376 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/document-fragment.json
@@ -2,7 +2,7 @@
     "type": "VDocumentFragment",
     "range": [
         0,
-        324
+        291
     ],
     "loc": {
         "start": {
@@ -19,7 +19,7 @@
             "type": "VElement",
             "range": [
                 0,
-                323
+                290
             ],
             "loc": {
                 "start": {
@@ -258,7 +258,7 @@
                     "type": "VText",
                     "range": [
                         128,
-                        181
+                        148
                     ],
                     "loc": {
                         "start": {
@@ -270,13 +270,13 @@
                             "column": 18
                         }
                     },
-                    "value": "; /* vue 3.1 may not work well. */\n    border-color: "
+                    "value": ";\n    border-color: "
                 },
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        181,
-                        224
+                        148,
+                        191
                     ],
                     "loc": {
                         "start": {
@@ -290,8 +290,8 @@
                     },
                     "expression": {
                         "type": "CallExpression",
-                        "start": 191,
-                        "end": 206,
+                        "start": 158,
+                        "end": 173,
                         "loc": {
                             "start": {
                                 "line": 5,
@@ -303,13 +303,13 @@
                             }
                         },
                         "range": [
-                            191,
-                            206
+                            158,
+                            173
                         ],
                         "callee": {
                             "type": "Identifier",
-                            "start": 191,
-                            "end": 197,
+                            "start": 158,
+                            "end": 164,
                             "loc": {
                                 "start": {
                                     "line": 5,
@@ -321,16 +321,16 @@
                                 }
                             },
                             "range": [
-                                191,
-                                197
+                                158,
+                                164
                             ],
                             "name": "border"
                         },
                         "arguments": [
                             {
                                 "type": "Literal",
-                                "start": 198,
-                                "end": 205,
+                                "start": 165,
+                                "end": 172,
                                 "loc": {
                                     "start": {
                                         "line": 5,
@@ -342,8 +342,8 @@
                                     }
                                 },
                                 "range": [
-                                    198,
-                                    205
+                                    165,
+                                    172
                                 ],
                                 "value": "color",
                                 "raw": "'color'"
@@ -354,8 +354,8 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 191,
-                                "end": 197,
+                                "start": 158,
+                                "end": 164,
                                 "loc": {
                                     "start": {
                                         "line": 5,
@@ -367,8 +367,8 @@
                                     }
                                 },
                                 "range": [
-                                    191,
-                                    197
+                                    158,
+                                    164
                                 ],
                                 "name": "border"
                             },
@@ -379,8 +379,8 @@
                 {
                     "type": "VText",
                     "range": [
-                        224,
-                        248
+                        191,
+                        215
                     ],
                     "loc": {
                         "start": {
@@ -397,8 +397,8 @@
                 {
                     "type": "VExpressionContainer",
                     "range": [
-                        248,
-                        309
+                        215,
+                        276
                     ],
                     "loc": {
                         "start": {
@@ -412,8 +412,8 @@
                     },
                     "expression": {
                         "type": "MemberExpression",
-                        "start": 258,
-                        "end": 288,
+                        "start": 225,
+                        "end": 255,
                         "loc": {
                             "start": {
                                 "line": 7,
@@ -425,13 +425,13 @@
                             }
                         },
                         "range": [
-                            258,
-                            288
+                            225,
+                            255
                         ],
                         "object": {
                             "type": "Identifier",
-                            "start": 258,
-                            "end": 268,
+                            "start": 225,
+                            "end": 235,
                             "loc": {
                                 "start": {
                                     "line": 7,
@@ -443,15 +443,15 @@
                                 }
                             },
                             "range": [
-                                258,
-                                268
+                                225,
+                                235
                             ],
                             "name": "background"
                         },
                         "property": {
                             "type": "Identifier",
-                            "start": 283,
-                            "end": 288,
+                            "start": 250,
+                            "end": 255,
                             "loc": {
                                 "start": {
                                     "line": 7,
@@ -463,8 +463,8 @@
                                 }
                             },
                             "range": [
-                                283,
-                                288
+                                250,
+                                255
                             ],
                             "name": "color"
                         },
@@ -474,8 +474,8 @@
                         {
                             "id": {
                                 "type": "Identifier",
-                                "start": 258,
-                                "end": 268,
+                                "start": 225,
+                                "end": 235,
                                 "loc": {
                                     "start": {
                                         "line": 7,
@@ -487,8 +487,8 @@
                                     }
                                 },
                                 "range": [
-                                    258,
-                                    268
+                                    225,
+                                    235
                                 ],
                                 "name": "background"
                             },
@@ -499,8 +499,8 @@
                 {
                     "type": "VText",
                     "range": [
-                        309,
-                        315
+                        276,
+                        282
                     ],
                     "loc": {
                         "start": {
@@ -518,8 +518,8 @@
             "endTag": {
                 "type": "VEndTag",
                 "range": [
-                    315,
-                    323
+                    282,
+                    290
                 ],
                 "loc": {
                     "start": {
@@ -538,8 +538,8 @@
         {
             "type": "VText",
             "range": [
-                323,
-                324
+                290,
+                291
             ],
             "loc": {
                 "start": {
@@ -682,7 +682,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 28,
                 34
@@ -828,7 +828,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 76,
                 82
@@ -999,301 +999,13 @@
             "type": "HTMLWhitespace",
             "range": [
                 129,
-                130
+                134
             ],
             "loc": {
                 "start": {
                     "line": 4,
                     "column": 68
                 },
-                "end": {
-                    "line": 4,
-                    "column": 69
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                130,
-                132
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 69
-                },
-                "end": {
-                    "line": 4,
-                    "column": 71
-                }
-            },
-            "value": "/*"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                132,
-                133
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 71
-                },
-                "end": {
-                    "line": 4,
-                    "column": 72
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                133,
-                136
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 72
-                },
-                "end": {
-                    "line": 4,
-                    "column": 75
-                }
-            },
-            "value": "vue"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                136,
-                137
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 75
-                },
-                "end": {
-                    "line": 4,
-                    "column": 76
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                137,
-                140
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 76
-                },
-                "end": {
-                    "line": 4,
-                    "column": 79
-                }
-            },
-            "value": "3.1"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                140,
-                141
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 79
-                },
-                "end": {
-                    "line": 4,
-                    "column": 80
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                141,
-                144
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 80
-                },
-                "end": {
-                    "line": 4,
-                    "column": 83
-                }
-            },
-            "value": "may"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                144,
-                145
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 83
-                },
-                "end": {
-                    "line": 4,
-                    "column": 84
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                145,
-                148
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 84
-                },
-                "end": {
-                    "line": 4,
-                    "column": 87
-                }
-            },
-            "value": "not"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                148,
-                149
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 87
-                },
-                "end": {
-                    "line": 4,
-                    "column": 88
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                149,
-                153
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 88
-                },
-                "end": {
-                    "line": 4,
-                    "column": 92
-                }
-            },
-            "value": "work"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                153,
-                154
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 92
-                },
-                "end": {
-                    "line": 4,
-                    "column": 93
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                154,
-                159
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 93
-                },
-                "end": {
-                    "line": 4,
-                    "column": 98
-                }
-            },
-            "value": "well."
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                159,
-                160
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 98
-                },
-                "end": {
-                    "line": 4,
-                    "column": 99
-                }
-            },
-            "value": " "
-        },
-        {
-            "type": "HTMLRawText",
-            "range": [
-                160,
-                162
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 99
-                },
-                "end": {
-                    "line": 4,
-                    "column": 101
-                }
-            },
-            "value": "*/"
-        },
-        {
-            "type": "HTMLWhitespace",
-            "range": [
-                162,
-                167
-            ],
-            "loc": {
-                "start": {
-                    "line": 4,
-                    "column": 101
-                },
                 "end": {
                     "line": 5,
                     "column": 4
@@ -1304,8 +1016,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                167,
-                180
+                134,
+                147
             ],
             "loc": {
                 "start": {
@@ -1322,8 +1034,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                180,
-                181
+                147,
+                148
             ],
             "loc": {
                 "start": {
@@ -1338,10 +1050,10 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
-                181,
-                187
+                148,
+                154
             ],
             "loc": {
                 "start": {
@@ -1358,8 +1070,8 @@
         {
             "type": "Punctuator",
             "range": [
-                187,
-                188
+                154,
+                155
             ],
             "loc": {
                 "start": {
@@ -1376,8 +1088,8 @@
         {
             "type": "Punctuator",
             "range": [
-                190,
-                191
+                157,
+                158
             ],
             "loc": {
                 "start": {
@@ -1394,8 +1106,8 @@
         {
             "type": "Identifier",
             "value": "border",
-            "start": 191,
-            "end": 197,
+            "start": 158,
+            "end": 164,
             "loc": {
                 "start": {
                     "line": 5,
@@ -1407,15 +1119,15 @@
                 }
             },
             "range": [
-                191,
-                197
+                158,
+                164
             ]
         },
         {
             "type": "Punctuator",
             "value": "(",
-            "start": 197,
-            "end": 198,
+            "start": 164,
+            "end": 165,
             "loc": {
                 "start": {
                     "line": 5,
@@ -1427,15 +1139,15 @@
                 }
             },
             "range": [
-                197,
-                198
+                164,
+                165
             ]
         },
         {
             "type": "String",
             "value": "'color'",
-            "start": 198,
-            "end": 205,
+            "start": 165,
+            "end": 172,
             "loc": {
                 "start": {
                     "line": 5,
@@ -1447,15 +1159,15 @@
                 }
             },
             "range": [
-                198,
-                205
+                165,
+                172
             ]
         },
         {
             "type": "Punctuator",
             "value": ")",
-            "start": 205,
-            "end": 206,
+            "start": 172,
+            "end": 173,
             "loc": {
                 "start": {
                     "line": 5,
@@ -1467,15 +1179,15 @@
                 }
             },
             "range": [
-                205,
-                206
+                172,
+                173
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                222,
-                223
+                189,
+                190
             ],
             "loc": {
                 "start": {
@@ -1492,8 +1204,8 @@
         {
             "type": "Punctuator",
             "range": [
-                223,
-                224
+                190,
+                191
             ],
             "loc": {
                 "start": {
@@ -1510,8 +1222,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                224,
-                225
+                191,
+                192
             ],
             "loc": {
                 "start": {
@@ -1528,8 +1240,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                225,
-                230
+                192,
+                197
             ],
             "loc": {
                 "start": {
@@ -1546,8 +1258,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                230,
-                247
+                197,
+                214
             ],
             "loc": {
                 "start": {
@@ -1564,8 +1276,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                247,
-                248
+                214,
+                215
             ],
             "loc": {
                 "start": {
@@ -1580,10 +1292,10 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
-                248,
-                254
+                215,
+                221
             ],
             "loc": {
                 "start": {
@@ -1600,8 +1312,8 @@
         {
             "type": "Punctuator",
             "range": [
-                254,
-                255
+                221,
+                222
             ],
             "loc": {
                 "start": {
@@ -1618,8 +1330,8 @@
         {
             "type": "Punctuator",
             "range": [
-                257,
-                258
+                224,
+                225
             ],
             "loc": {
                 "start": {
@@ -1636,8 +1348,8 @@
         {
             "type": "Identifier",
             "value": "background",
-            "start": 258,
-            "end": 268,
+            "start": 225,
+            "end": 235,
             "loc": {
                 "start": {
                     "line": 7,
@@ -1649,15 +1361,15 @@
                 }
             },
             "range": [
-                258,
-                268
+                225,
+                235
             ]
         },
         {
             "type": "Punctuator",
             "value": ".",
-            "start": 268,
-            "end": 269,
+            "start": 235,
+            "end": 236,
             "loc": {
                 "start": {
                     "line": 7,
@@ -1669,15 +1381,15 @@
                 }
             },
             "range": [
-                268,
-                269
+                235,
+                236
             ]
         },
         {
             "type": "Identifier",
             "value": "color",
-            "start": 283,
-            "end": 288,
+            "start": 250,
+            "end": 255,
             "loc": {
                 "start": {
                     "line": 7,
@@ -1689,15 +1401,15 @@
                 }
             },
             "range": [
-                283,
-                288
+                250,
+                255
             ]
         },
         {
             "type": "Punctuator",
             "range": [
-                302,
-                303
+                269,
+                270
             ],
             "loc": {
                 "start": {
@@ -1714,8 +1426,8 @@
         {
             "type": "Punctuator",
             "range": [
-                308,
-                309
+                275,
+                276
             ],
             "loc": {
                 "start": {
@@ -1732,8 +1444,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                309,
-                310
+                276,
+                277
             ],
             "loc": {
                 "start": {
@@ -1750,8 +1462,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                310,
-                313
+                277,
+                280
             ],
             "loc": {
                 "start": {
@@ -1768,8 +1480,8 @@
         {
             "type": "HTMLRawText",
             "range": [
-                313,
-                314
+                280,
+                281
             ],
             "loc": {
                 "start": {
@@ -1786,8 +1498,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                314,
-                315
+                281,
+                282
             ],
             "loc": {
                 "start": {
@@ -1804,8 +1516,8 @@
         {
             "type": "HTMLEndTagOpen",
             "range": [
-                315,
-                322
+                282,
+                289
             ],
             "loc": {
                 "start": {
@@ -1822,8 +1534,8 @@
         {
             "type": "HTMLTagClose",
             "range": [
-                322,
-                323
+                289,
+                290
             ],
             "loc": {
                 "start": {
@@ -1840,8 +1552,8 @@
         {
             "type": "HTMLWhitespace",
             "range": [
-                323,
-                324
+                290,
+                291
             ],
             "loc": {
                 "start": {
@@ -1916,11 +1628,11 @@
         {
             "type": "Line",
             "value": " comment4",
-            "start": 206,
-            "end": 217,
+            "start": 173,
+            "end": 184,
             "range": [
-                206,
-                217
+                173,
+                184
             ],
             "loc": {
                 "start": {
@@ -1936,11 +1648,11 @@
         {
             "type": "Block",
             "value": "comment5",
-            "start": 270,
-            "end": 282,
+            "start": 237,
+            "end": 249,
             "range": [
-                270,
-                282
+                237,
+                249
             ],
             "loc": {
                 "start": {
@@ -1956,11 +1668,11 @@
         {
             "type": "Block",
             "value": "comment6",
-            "start": 289,
-            "end": 301,
+            "start": 256,
+            "end": 268,
             "range": [
-                289,
-                301
+                256,
+                268
             ],
             "loc": {
                 "start": {
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/source.vue b/test/fixtures/document-fragment/style-variables-edge-cases/source.vue
index e7a0b9a4..ed74f449 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/source.vue
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/source.vue
@@ -1,7 +1,7 @@
 <style>
   .text{
     color: v-bind(  color /* comment1 */ );
-    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */
+    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ );
     border-color: v-bind(  "border('color')// comment4
     ");
     background-color: v-bind(  "background. /*comment5*/ color /*comment6*/ "
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json b/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
index 07dcd8ca..91914c99 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/token-ranges.json
@@ -23,22 +23,6 @@
     "'",
     ")",
     ";",
-    " ",
-    "/*",
-    " ",
-    "vue",
-    " ",
-    "3.1",
-    " ",
-    "may",
-    " ",
-    "not",
-    " ",
-    "work",
-    " ",
-    "well.",
-    " ",
-    "*/",
     "\n    ",
     "border-color:",
     " ",
diff --git a/test/fixtures/document-fragment/style-variables-edge-cases/tree.json b/test/fixtures/document-fragment/style-variables-edge-cases/tree.json
index 3c4ffbe6..2f530c7e 100644
--- a/test/fixtures/document-fragment/style-variables-edge-cases/tree.json
+++ b/test/fixtures/document-fragment/style-variables-edge-cases/tree.json
@@ -1,11 +1,11 @@
 [
     {
         "type": "VDocumentFragment",
-        "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>\n",
+        "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ );\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>\n",
         "children": [
             {
                 "type": "VElement",
-                "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ ); /* vue 3.1 may not work well. */\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>",
+                "text": "<style>\n  .text{\n    color: v-bind(  color /* comment1 */ );\n    font-size: v-bind( /* comment2 */ 'font.size'  /* comment3 */ );\n    border-color: v-bind(  \"border('color')// comment4\n    \");\n    background-color: v-bind(  \"background. /*comment5*/ color /*comment6*/ \"\n    );\n  }\n</style>",
                 "children": [
                     {
                         "type": "VStartTag",
@@ -57,7 +57,7 @@
                     },
                     {
                         "type": "VText",
-                        "text": "; /* vue 3.1 may not work well. */\n    border-color: ",
+                        "text": ";\n    border-color: ",
                         "children": []
                     },
                     {
diff --git a/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json b/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
index 91952fba..187cd4d5 100644
--- a/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-ignores02/document-fragment.json
@@ -731,7 +731,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 40,
                 46
@@ -949,7 +949,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 79,
                 85
@@ -1263,7 +1263,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 125,
                 131
@@ -1971,7 +1971,7 @@
             "value": "/**/"
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 337,
                 343
diff --git a/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json b/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
index c9f02bee..1abbaf33 100644
--- a/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-inline-comment-like/document-fragment.json
@@ -832,7 +832,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 89,
                 95
diff --git a/test/fixtures/document-fragment/style-variables-with-comment01/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-comment01/document-fragment.json
new file mode 100644
index 00000000..d28b3506
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-comment01/document-fragment.json
@@ -0,0 +1,788 @@
+{
+    "type": "VDocumentFragment",
+    "range": [
+        0,
+        91
+    ],
+    "loc": {
+        "start": {
+            "line": 1,
+            "column": 0
+        },
+        "end": {
+            "line": 7,
+            "column": 0
+        }
+    },
+    "children": [
+        {
+            "type": "VElement",
+            "range": [
+                0,
+                90
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 6,
+                    "column": 8
+                }
+            },
+            "name": "style",
+            "rawName": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "startTag": {
+                "type": "VStartTag",
+                "range": [
+                    0,
+                    7
+                ],
+                "loc": {
+                    "start": {
+                        "line": 1,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 1,
+                        "column": 7
+                    }
+                },
+                "selfClosing": false,
+                "attributes": []
+            },
+            "children": [
+                {
+                    "type": "VText",
+                    "range": [
+                        7,
+                        28
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 1,
+                            "column": 7
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 11
+                        }
+                    },
+                    "value": "\n  .text{\n    color: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        28,
+                        45
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 3,
+                            "column": 28
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 39,
+                        "end": 44,
+                        "loc": {
+                            "start": {
+                                "line": 3,
+                                "column": 22
+                            },
+                            "end": {
+                                "line": 3,
+                                "column": 27
+                            }
+                        },
+                        "range": [
+                            39,
+                            44
+                        ],
+                        "name": "color"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 39,
+                                "end": 44,
+                                "loc": {
+                                    "start": {
+                                        "line": 3,
+                                        "column": 22
+                                    },
+                                    "end": {
+                                        "line": 3,
+                                        "column": 27
+                                    }
+                                },
+                                "range": [
+                                    39,
+                                    44
+                                ],
+                                "name": "color"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        45,
+                        58
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 3,
+                            "column": 28
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 11
+                        }
+                    },
+                    "value": ";\n    width: "
+                },
+                {
+                    "type": "VExpressionContainer",
+                    "range": [
+                        58,
+                        76
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 11
+                        },
+                        "end": {
+                            "line": 4,
+                            "column": 29
+                        }
+                    },
+                    "expression": {
+                        "type": "Identifier",
+                        "start": 70,
+                        "end": 75,
+                        "loc": {
+                            "start": {
+                                "line": 4,
+                                "column": 23
+                            },
+                            "end": {
+                                "line": 4,
+                                "column": 28
+                            }
+                        },
+                        "range": [
+                            70,
+                            75
+                        ],
+                        "name": "width"
+                    },
+                    "references": [
+                        {
+                            "id": {
+                                "type": "Identifier",
+                                "start": 70,
+                                "end": 75,
+                                "loc": {
+                                    "start": {
+                                        "line": 4,
+                                        "column": 23
+                                    },
+                                    "end": {
+                                        "line": 4,
+                                        "column": 28
+                                    }
+                                },
+                                "range": [
+                                    70,
+                                    75
+                                ],
+                                "name": "width"
+                            },
+                            "mode": "r"
+                        }
+                    ]
+                },
+                {
+                    "type": "VText",
+                    "range": [
+                        76,
+                        82
+                    ],
+                    "loc": {
+                        "start": {
+                            "line": 4,
+                            "column": 29
+                        },
+                        "end": {
+                            "line": 6,
+                            "column": 0
+                        }
+                    },
+                    "value": ";\n  }\n"
+                }
+            ],
+            "endTag": {
+                "type": "VEndTag",
+                "range": [
+                    82,
+                    90
+                ],
+                "loc": {
+                    "start": {
+                        "line": 6,
+                        "column": 0
+                    },
+                    "end": {
+                        "line": 6,
+                        "column": 8
+                    }
+                }
+            },
+            "variables": [],
+            "style": true
+        },
+        {
+            "type": "VText",
+            "range": [
+                90,
+                91
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "tokens": [
+        {
+            "type": "HTMLTagOpen",
+            "range": [
+                0,
+                6
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 0
+                },
+                "end": {
+                    "line": 1,
+                    "column": 6
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                6,
+                7
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 6
+                },
+                "end": {
+                    "line": 1,
+                    "column": 7
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                7,
+                10
+            ],
+            "loc": {
+                "start": {
+                    "line": 1,
+                    "column": 7
+                },
+                "end": {
+                    "line": 2,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                10,
+                16
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 2
+                },
+                "end": {
+                    "line": 2,
+                    "column": 8
+                }
+            },
+            "value": ".text{"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                16,
+                21
+            ],
+            "loc": {
+                "start": {
+                    "line": 2,
+                    "column": 8
+                },
+                "end": {
+                    "line": 3,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                21,
+                27
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 4
+                },
+                "end": {
+                    "line": 3,
+                    "column": 10
+                }
+            },
+            "value": "color:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                27,
+                28
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 10
+                },
+                "end": {
+                    "line": 3,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                28,
+                34
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 11
+                },
+                "end": {
+                    "line": 3,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                38,
+                39
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 21
+                },
+                "end": {
+                    "line": 3,
+                    "column": 22
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "color",
+            "start": 39,
+            "end": 44,
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 22
+                },
+                "end": {
+                    "line": 3,
+                    "column": 27
+                }
+            },
+            "range": [
+                39,
+                44
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                44,
+                45
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 27
+                },
+                "end": {
+                    "line": 3,
+                    "column": 28
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                45,
+                46
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 28
+                },
+                "end": {
+                    "line": 3,
+                    "column": 29
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                46,
+                51
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 29
+                },
+                "end": {
+                    "line": 4,
+                    "column": 4
+                }
+            },
+            "value": "\n    "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                51,
+                57
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 4
+                },
+                "end": {
+                    "line": 4,
+                    "column": 10
+                }
+            },
+            "value": "width:"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                57,
+                58
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 10
+                },
+                "end": {
+                    "line": 4,
+                    "column": 11
+                }
+            },
+            "value": " "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                58,
+                64
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 11
+                },
+                "end": {
+                    "line": 4,
+                    "column": 17
+                }
+            },
+            "value": "v-bind"
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                69,
+                70
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 22
+                },
+                "end": {
+                    "line": 4,
+                    "column": 23
+                }
+            },
+            "value": "("
+        },
+        {
+            "type": "Identifier",
+            "value": "width",
+            "start": 70,
+            "end": 75,
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 23
+                },
+                "end": {
+                    "line": 4,
+                    "column": 28
+                }
+            },
+            "range": [
+                70,
+                75
+            ]
+        },
+        {
+            "type": "Punctuator",
+            "range": [
+                75,
+                76
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 28
+                },
+                "end": {
+                    "line": 4,
+                    "column": 29
+                }
+            },
+            "value": ")"
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                76,
+                77
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 29
+                },
+                "end": {
+                    "line": 4,
+                    "column": 30
+                }
+            },
+            "value": ";"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                77,
+                80
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 30
+                },
+                "end": {
+                    "line": 5,
+                    "column": 2
+                }
+            },
+            "value": "\n  "
+        },
+        {
+            "type": "HTMLRawText",
+            "range": [
+                80,
+                81
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 2
+                },
+                "end": {
+                    "line": 5,
+                    "column": 3
+                }
+            },
+            "value": "}"
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                81,
+                82
+            ],
+            "loc": {
+                "start": {
+                    "line": 5,
+                    "column": 3
+                },
+                "end": {
+                    "line": 6,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        },
+        {
+            "type": "HTMLEndTagOpen",
+            "range": [
+                82,
+                89
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 0
+                },
+                "end": {
+                    "line": 6,
+                    "column": 7
+                }
+            },
+            "value": "style"
+        },
+        {
+            "type": "HTMLTagClose",
+            "range": [
+                89,
+                90
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 7
+                },
+                "end": {
+                    "line": 6,
+                    "column": 8
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "HTMLWhitespace",
+            "range": [
+                90,
+                91
+            ],
+            "loc": {
+                "start": {
+                    "line": 6,
+                    "column": 8
+                },
+                "end": {
+                    "line": 7,
+                    "column": 0
+                }
+            },
+            "value": "\n"
+        }
+    ],
+    "comments": [
+        {
+            "type": "Block",
+            "range": [
+                34,
+                38
+            ],
+            "loc": {
+                "start": {
+                    "line": 3,
+                    "column": 17
+                },
+                "end": {
+                    "line": 3,
+                    "column": 21
+                }
+            },
+            "value": ""
+        },
+        {
+            "type": "Block",
+            "range": [
+                64,
+                69
+            ],
+            "loc": {
+                "start": {
+                    "line": 4,
+                    "column": 17
+                },
+                "end": {
+                    "line": 4,
+                    "column": 22
+                }
+            },
+            "value": "c"
+        }
+    ],
+    "errors": []
+}
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-comment01/source.vue b/test/fixtures/document-fragment/style-variables-with-comment01/source.vue
new file mode 100644
index 00000000..fab4f769
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-comment01/source.vue
@@ -0,0 +1,6 @@
+<style>
+  .text{
+    color: v-bind/**/(color);
+    width: v-bind/*c*/(width);
+  }
+</style>
diff --git a/test/fixtures/document-fragment/style-variables-with-comment01/token-ranges.json b/test/fixtures/document-fragment/style-variables-with-comment01/token-ranges.json
new file mode 100644
index 00000000..3bc49bc8
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-comment01/token-ranges.json
@@ -0,0 +1,30 @@
+[
+    "<style",
+    ">",
+    "\n  ",
+    ".text{",
+    "\n    ",
+    "color:",
+    " ",
+    "v-bind",
+    "(",
+    "color",
+    ")",
+    ";",
+    "\n    ",
+    "width:",
+    " ",
+    "v-bind",
+    "(",
+    "width",
+    ")",
+    ";",
+    "\n  ",
+    "}",
+    "\n",
+    "</style",
+    ">",
+    "\n",
+    "/**/",
+    "/*c*/"
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-comment01/tree.json b/test/fixtures/document-fragment/style-variables-with-comment01/tree.json
new file mode 100644
index 00000000..0aec6ad4
--- /dev/null
+++ b/test/fixtures/document-fragment/style-variables-with-comment01/tree.json
@@ -0,0 +1,66 @@
+[
+    {
+        "type": "VDocumentFragment",
+        "text": "<style>\n  .text{\n    color: v-bind/**/(color);\n    width: v-bind/*c*/(width);\n  }\n</style>\n",
+        "children": [
+            {
+                "type": "VElement",
+                "text": "<style>\n  .text{\n    color: v-bind/**/(color);\n    width: v-bind/*c*/(width);\n  }\n</style>",
+                "children": [
+                    {
+                        "type": "VStartTag",
+                        "text": "<style>",
+                        "children": []
+                    },
+                    {
+                        "type": "VText",
+                        "text": "\n  .text{\n    color: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind/**/(color)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "color",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n    width: ",
+                        "children": []
+                    },
+                    {
+                        "type": "VExpressionContainer",
+                        "text": "v-bind/*c*/(width)",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "text": "width",
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "type": "VText",
+                        "text": ";\n  }\n",
+                        "children": []
+                    },
+                    {
+                        "type": "VEndTag",
+                        "text": "</style>",
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "type": "VText",
+                "text": "\n",
+                "children": []
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
index 6df073da..64dc07d6 100644
--- a/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables-with-error/document-fragment.json
@@ -277,7 +277,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 28,
                 34
diff --git a/test/fixtures/document-fragment/style-variables01/document-fragment.json b/test/fixtures/document-fragment/style-variables01/document-fragment.json
index ad788a15..1812ac76 100644
--- a/test/fixtures/document-fragment/style-variables01/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables01/document-fragment.json
@@ -1396,7 +1396,7 @@
                     "value": " "
                 },
                 {
-                    "type": "HTMLText",
+                    "type": "HTMLRawText",
                     "range": [
                         243,
                         249
@@ -1758,7 +1758,7 @@
                     "value": " "
                 },
                 {
-                    "type": "HTMLText",
+                    "type": "HTMLRawText",
                     "range": [
                         313,
                         319
@@ -3601,7 +3601,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 243,
                 249
@@ -3963,7 +3963,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 313,
                 319
diff --git a/test/fixtures/document-fragment/style-variables02/document-fragment.json b/test/fixtures/document-fragment/style-variables02/document-fragment.json
index 3ea5850b..167b24f4 100644
--- a/test/fixtures/document-fragment/style-variables02/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables02/document-fragment.json
@@ -516,7 +516,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 29,
                 35
@@ -770,7 +770,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 73,
                 79
diff --git a/test/fixtures/document-fragment/style-variables03/document-fragment.json b/test/fixtures/document-fragment/style-variables03/document-fragment.json
index 8f6b3606..46bc7e8f 100644
--- a/test/fixtures/document-fragment/style-variables03/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables03/document-fragment.json
@@ -535,7 +535,7 @@
             "value": "color:"
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 28,
                 34
@@ -915,7 +915,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 93,
                 99
diff --git a/test/fixtures/document-fragment/style-variables04/document-fragment.json b/test/fixtures/document-fragment/style-variables04/document-fragment.json
index e9beb1c0..9ac5a074 100644
--- a/test/fixtures/document-fragment/style-variables04/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables04/document-fragment.json
@@ -248,7 +248,7 @@
             "value": ".text{color:"
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 19,
                 25
diff --git a/test/fixtures/document-fragment/style-variables05/document-fragment.json b/test/fixtures/document-fragment/style-variables05/document-fragment.json
index f14b915c..58b12495 100644
--- a/test/fixtures/document-fragment/style-variables05/document-fragment.json
+++ b/test/fixtures/document-fragment/style-variables05/document-fragment.json
@@ -682,7 +682,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 28,
                 34
@@ -828,7 +828,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 62,
                 68
@@ -1068,7 +1068,7 @@
             "value": "/**/"
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 113,
                 119
@@ -1310,7 +1310,7 @@
             "value": " "
         },
         {
-            "type": "HTMLText",
+            "type": "HTMLRawText",
             "range": [
                 173,
                 179