fix(transformers): also convert single-theme inline token styles to classes (#1344)

Author: harsh-thakkar7

packages/transformers/src/transformers/style-to-class.ts

@@ -25,8 +25,10 @@ export interface ShikiTransformerStyleToClass extends ShikiTransformer {
 }
 
 /**
- * Remove line breaks between lines.
- * Useful when you override `display: block` to `.line` in CSS.
+ * Convert inline styles to class names, and collect the styles it creates a CSS stylesheet for
+ * via `getCSS()`.
+ *
+ * Works on the `<pre>` element, on the token spans, and on tokens with custom `htmlStyle`.
  */
 export function transformerStyleToClass(options: TransformerStyleToClassOptions = {}): ShikiTransformerStyleToClass {
   const {
@@ -69,6 +71,15 @@ export function transformerStyleToClass(options: TransformerStyleToClassOptions
       delete t.properties.style
       this.addClassToHast(t, className)
     },
+    span(hast) {
+      // Token colors are applied to the `<span>` elements after the `tokens` hook runs, so spans
+      // with a plain single-theme style are caught here.
+      if (!hast.properties.style)
+        return
+      const className = registerStyle(hast.properties.style as string)
+      delete hast.properties.style
+      this.addClassToHast(hast, className)
+    },
     tokens(lines) {
       for (const line of lines) {
         for (const token of line) {

packages/transformers/test/style-to-class.test.ts

@@ -50,3 +50,23 @@ it('transformerStyleToClass', async () => {
 
   expect(transformer.getCSS()).toMatchInlineSnapshot(`".__shiki_223nhr{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-nord:#81A1C1}.__shiki_u5wfov{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-nord:#D8DEE9}.__shiki_26darv{--shiki-dark:#666666;--shiki-light:#999999;--shiki-nord:#81A1C1}.__shiki_17lqoe{--shiki-dark:#666666;--shiki-light:#999999;--shiki-nord:#ECEFF4}.__shiki_6u0ar0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-nord:#88C0D0}.__shiki_k92bfk{--shiki-dark:#666666;--shiki-light:#999999;--shiki-nord:#D8DEE9FF}.__shiki_1328cg{--shiki-dark:#4C9A91;--shiki-light:#2F798A;--shiki-nord:#B48EAD}.__shiki_ga6n9x{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-nord:#ECEFF4}.__shiki_23isjw{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-nord:#A3BE8C}.__shiki_uywmyh{--shiki-dark:#dbd7caee;--shiki-light:#393a34;--shiki-nord:#d8dee9ff;--shiki-dark-bg:#121212;--shiki-light-bg:#ffffff;--shiki-nord-bg:#2e3440ff}"`)
 })
+
+it('transformerStyleToClass with a single theme', async () => {
+  using shiki = await createHighlighter({
+    themes: ['nord'],
+    langs: ['typescript'],
+  })
+
+  const transformer = transformerStyleToClass({ classPrefix: '__shiki_' })
+
+  const result = shiki.codeToHtml(`console.log('hello')`, {
+    lang: 'typescript',
+    theme: 'nord',
+    defaultColor: false,
+    transformers: [transformer],
+  })
+
+  // Token spans should be converted to classes just like the <pre> element is.
+  expect(result).not.toContain('<span style=')
+  expect(transformer.getCSS()).toContain('color:#')
+})