feat: Support default values for v-bind in CSS

src/html/util/unicode.ts

@@ -45,6 +45,7 @@ export const LATIN_SMALL_Z = 0x7A
 export const LEFT_CURLY_BRACKET = 0x7B // {
 export const RIGHT_CURLY_BRACKET = 0x7D // }
 export const NULL_REPLACEMENT = 0xFFFD
+export const COMMA = 0x2C
 
 /**
  * Check whether the code point is a whitespace.

src/style/index.ts

@@ -121,6 +121,7 @@ function parseStyle(
         quote,
         openingParenOffset,
         comments,
+        defaultValue,
     } of iterateVBind(code, cssOptions)) {
         insertComments(
             document,
@@ -201,6 +202,32 @@ function parseStyle(
                 ),
             )
         }
+        if (defaultValue.length) {
+            afterTokens.unshift(
+                createSimpleToken(
+                    "Punctuator",
+                    locationCalculator.getOffsetWithGap(
+                        defaultValue[0].range[0],
+                    ),
+                    locationCalculator.getOffsetWithGap(
+                        defaultValue[0].range[1],
+                    ),
+                    ",",
+                    locationCalculator,
+                ),
+                createSimpleToken(
+                    "HTMLRawText",
+                    locationCalculator.getOffsetWithGap(
+                        defaultValue[1].range[0],
+                    ),
+                    locationCalculator.getOffsetWithGap(
+                        defaultValue[1].range[1],
+                    ),
+                    defaultValue[1].value,
+                    locationCalculator,
+                ),
+            )
+        }
         const beforeLast = beforeTokens[beforeTokens.length - 1]
         replaceAndSplitTokens(
             document,
@@ -287,6 +314,7 @@ type VBindLocations = {
     quote: '"' | "'" | null
     openingParenOffset: number
     comments: CSSCommentToken[]
+    defaultValue: CSSToken[]
 }
 
 /**
@@ -317,6 +345,7 @@ function* iterateVBind(
             quote: arg.quote,
             openingParenOffset: openingParen.openingParen.range[0],
             comments: [...openingParen.comments, ...arg.comments],
+            defaultValue: arg.defaultValue,
         }
     }
 }
@@ -350,6 +379,7 @@ function parseVBindArg(tokenizer: CSSTokenScanner): {
     quote: '"' | "'" | null
     closingParen: CSSPunctuatorToken
     comments: CSSCommentToken[]
+    defaultValue: CSSToken[]
 } | null {
     const tokensBuffer: CSSToken[] = []
     const comments: CSSCommentToken[] = []
@@ -370,14 +400,25 @@ function parseVBindArg(tokenizer: CSSTokenScanner): {
                         quote: quotedToken.quote,
                         closingParen: token,
                         comments,
+                        defaultValue: [],
                     }
                 }
                 const startToken = tokensBuffer[0] || token
+                const commaToken = tokens.find(
+                    (tk) =>
+                        tk.type === CSSTokenType.Punctuator && tk.value === ",",
+                )
                 return {
-                    exprRange: [startToken.range[0], token.range[0]],
+                    exprRange: [
+                        startToken.range[0],
+                        (commaToken || token).range[0],
+                    ],
                     quote: null,
                     closingParen: token,
                     comments: [],
+                    defaultValue: commaToken
+                        ? tokens.slice(tokens.indexOf(commaToken))
+                        : [],
                 }
             }
 

src/style/tokenizer.ts

@@ -19,6 +19,7 @@ import {
     SEMICOLON,
     LEFT_SQUARE_BRACKET,
     RIGHT_SQUARE_BRACKET,
+    COMMA,
 } from "../html/util/unicode"
 
 export const enum CSSTokenType {
@@ -315,6 +316,7 @@ export class CSSTokenizer {
 
 function isPunctuator(cp: number): boolean {
     return (
+        cp === COMMA ||
         cp === COLON ||
         cp === SEMICOLON ||
         // Brackets