fix(colorized-brackets): use object style htmlStyle

Author: antfu

packages/colorized-brackets/src/colorizeBracketTokens.ts

@@ -105,18 +105,20 @@ function assignColorToToken(
   else {
     const { defaultColor = 'light', cssVariablePrefix = '--shiki-' }
       = shikiOptions
-    const styles: string[] = []
+    const styles: Record<string, string> = typeof token.htmlStyle === 'string'
+      ? {}
+      : token.htmlStyle || {}
 
     for (const [colorName, theme] of Object.entries(shikiOptions.themes)) {
       const themeName = typeof theme === 'string' ? theme : theme?.name
       const cssProperty
         = colorName === defaultColor
           ? 'color'
           : `${cssVariablePrefix}${colorName}`
-      styles.push(`${cssProperty}:${getColor(themes, themeName, level)}`)
+      styles[cssProperty] = getColor(themes, themeName, level)
     }
 
-    token.htmlStyle = styles.join(';')
+    token.htmlStyle = styles
   }
 }
 

packages/colorized-brackets/test/fixtures.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { lstatSync, readdirSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 import { join, sep } from 'node:path'
@@ -11,6 +12,8 @@ import {
   prettifyBrackets,
 } from './utils'
 
+const SHOULD_LOG = false
+
 /**
  * `tests/samples` contains code snippets that annotate expected colors with `@colors` comments.
  * `Y`, `P`, `B` are for the 3 levels of matched brackets (yellow, purple, blue), and `R` is for mismatched brackets (red).
@@ -63,11 +66,11 @@ describe('file-driven tests', async () => {
     })
     const actualBrackets = parseActualBrackets(html)
     // Logging the colored brackets is much easier to read
-    /* eslint-disable no-console */
-    console.log(c.bold(fileName))
-    console.log('  Expected:', prettifyBrackets(expectedBrackets))
-    console.log('  Actual:  ', prettifyBrackets(actualBrackets))
-    /* eslint-enable no-console */
+    if (SHOULD_LOG) {
+      console.log(c.bold(fileName))
+      console.log('  Expected:', prettifyBrackets(expectedBrackets))
+      console.log('  Actual:  ', prettifyBrackets(actualBrackets))
+    }
     expect(prettifyBrackets(actualBrackets, { noAnsi: true })).toEqual(
       prettifyBrackets(expectedBrackets, { noAnsi: true }),
     )