fix: add css format specifier support to enhancedConsoleLog (#300)

MrPancakes39 · AlemTuzlak · web-flow · commit 17c823b5196b · 2026-01-06T11:53:52.000+01:00
* Added CSS Formatting to Enhanced Logs

* Fixed Failing Enhanced Logs Tests

* Added CSS Formatting Test to Enhanced Console Logs

* Added @tanstack/devtools-vite Changeset

* Check for server enviroment in enhanceConsoleLog

- This change is made so log coloring can work in both Server and Browser
- It will use ANSI for Server and CSS for Browser

* fix: make the console logs always conditionally render

---------

Co-authored-by: Alem Tuzlak &lt;t.zlak@hotmail.com&gt;
diff --git a/.changeset/sad-weeks-pay.md b/.changeset/sad-weeks-pay.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+Added css format specifier support to enhancedLogs
diff --git a/examples/react/start/src/routes/__root.tsx b/examples/react/start/src/routes/__root.tsx
@@ -33,6 +33,7 @@ export const Route = createRootRoute({
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {
+  console.log('Rendering Root Document')
   return (
     <html lang="en">
       <head>
diff --git a/packages/devtools-vite/src/enhance-logs.test.ts b/packages/devtools-vite/src/enhance-logs.test.ts
@@ -94,7 +94,6 @@ describe('remove-devtools', () => {
         3000,
       )!.code,
     )
-    console.log('output', output)
     expect(
       output.includes(
         'http://localhost:3000/__tsd/open-source?source=test.jsx',
@@ -114,4 +113,20 @@ 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,
+      )!.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)
+  })
 })
diff --git a/packages/devtools-vite/src/enhance-logs.ts b/packages/devtools-vite/src/enhance-logs.ts
@@ -31,11 +31,42 @@ const transform = (
           location.start.column,
         ]
         const finalPath = `${filePath}:${lineNumber}:${column + 1}`
-        path.node.arguments.unshift(
+        const logMessage = `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath}`)}\n → `
+
+        const serverLogMessage = t.arrayExpression([
+          t.stringLiteral(logMessage),
+        ])
+        const browserLogMessage = t.arrayExpression([
+          // LOG with css formatting specifiers: %c
           t.stringLiteral(
-            `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `,
+            `%c${'LOG'}%c %c${`Go to Source: 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'),
+        ])
+
+        // typeof window === "undefined"
+        const checkServerCondition = t.binaryExpression(
+          '===',
+          t.unaryExpression('typeof', t.identifier('window')),
+          t.stringLiteral('undefined'),
+        )
+
+        // ...(isServer ? serverLogMessage : browserLogMessage)
+        path.node.arguments.unshift(
+          t.spreadElement(
+            t.conditionalExpression(
+              checkServerCondition,
+              serverLogMessage,
+              browserLogMessage,
+            ),
           ),
         )
+
         didTransform = true
       }
     },

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@tanstack/devtools-vite': patch
 +---
++
 +Added css format specifier support to enhancedLogs