fix: add css format specifier support to enhancedConsoleLog

.changeset/sad-weeks-pay.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+Added css format specifier support to enhancedLogs

packages/devtools-vite/src/enhance-logs.test.ts

@@ -114,4 +114,21 @@ describe('remove-devtools', () => {
     )
     expect(output).toBe(undefined)
   })
+
+  test('it adds enhanced console.log with css formatting to console.log()', () => {
+    const output = removeEmptySpace(
+      enhanceConsoleLog(
+        `
+        console.log('This is a log')
+        `,
+        'test.jsx',
+        3000,
+        true,
+      )!.code,
+    )
+    expect(output.includes('color:#A0A')).toEqual(true)
+    expect(output.includes('color:#FFF')).toEqual(true)
+    expect(output.includes('color:#55F')).toEqual(true)
+    expect(output.includes('color:#FFF')).toEqual(true)
+  })
 })

packages/devtools-vite/src/enhance-logs.ts

@@ -8,6 +8,7 @@ const transform = (
   ast: ParseResult<Babel.File>,
   filePath: string,
   port: number,
+  cssFormatting: boolean,
 ) => {
   let didTransform = false
 
@@ -31,11 +32,27 @@ const transform = (
           location.start.column,
         ]
         const finalPath = `${filePath}:${lineNumber}:${column + 1}`
-        path.node.arguments.unshift(
-          t.stringLiteral(
-            `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `,
-          ),
-        )
+        // Prefer ANSI escape codes for formatting.
+        if (!cssFormatting) {
+          path.node.arguments.unshift(
+            t.stringLiteral(
+              `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `,
+            ),
+          )
+        } else {
+          path.node.arguments.unshift(
+            // LOG with css formatting specifiers: %c
+            t.stringLiteral(
+              `%c${'LOG'}%c %c${`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`}%c \n → `,
+            ),
+            // magenta
+            t.stringLiteral('color:#A0A'),
+            t.stringLiteral('color:#FFF'),
+            // blueBright
+            t.stringLiteral('color:#55F'),
+            t.stringLiteral('color:#FFF'),
+          )
+        }
         didTransform = true
       }
     },
@@ -44,7 +61,12 @@ const transform = (
   return didTransform
 }
 
-export function enhanceConsoleLog(code: string, id: string, port: number) {
+export function enhanceConsoleLog(
+  code: string,
+  id: string,
+  port: number,
+  cssFormatting?: boolean,
+) {
   const [filePath] = id.split('?')
   // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
   const location = filePath?.replace(normalizePath(process.cwd()), '')!
@@ -54,7 +76,7 @@ export function enhanceConsoleLog(code: string, id: string, port: number) {
       sourceType: 'module',
       plugins: ['jsx', 'typescript'],
     })
-    const didTransform = transform(ast, location, port)
+    const didTransform = transform(ast, location, port, cssFormatting === true)
     if (!didTransform) {
       return
     }

packages/devtools-vite/src/plugin.ts

@@ -41,6 +41,12 @@ export type TanStackDevtoolsViteConfig = {
      * @default true
      */
     enabled: boolean
+    /**
+     * Whether to use CSS formatting for enhanced logging.
+     * @note Chrome supports ANSI escape codes for formatting. Firefox does not.
+     * @default false
+     */
+    cssFormatting?: boolean
   }
   /**
    * Whether to remove devtools from the production build.
@@ -433,7 +439,12 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         )
           return
 
-        return enhanceConsoleLog(code, id, port)
+        return enhanceConsoleLog(
+          code,
+          id,
+          port,
+          enhancedLogsConfig.cssFormatting,
+        )
       },
     },
     {