Prevent rendering of css placeholder without css

Author: dolfbarr

src/constants.ts

@@ -7,3 +7,5 @@ export const CSS_SUB_VALUE = 'color: SlateGray; font-weight: thin;'
 export const ALLOWED_NODE_ENVS = ['dev', 'development']
 
 export const DEFAULT_LOG_LEVEL: LogLevels = 'log'
+
+export const DEFAULT_LABEL_SIZE = 14

src/utils.test.ts

@@ -7,12 +7,12 @@ describe('utils', () => {
   jest.spyOn(utils, 'getCurrentTime').mockReturnValue('09:38 PM')
   describe('getGroupLabel', () => {
     it('renders', () => {
-      expect(getGroupLabel(_PrintTypes.Change)).toEqual('Change %c%c@ 09:38 PM')
+      expect(getGroupLabel(_PrintTypes.Change)).toEqual('Change @ 09:38 PM')
     })
 
     it('renders with component name', () => {
       expect(getGroupLabel(_PrintTypes.Mount, 'TestComponent')).toEqual(
-        'Mount in %c<TestComponent /> %c@ 09:38 PM',
+        'Mount in <TestComponent /> @ 09:38 PM',
       )
     })
   })
@@ -67,7 +67,7 @@ describe('utils', () => {
       print(printProps)
 
       expect(consoleGroup).toHaveBeenCalledWith(
-        'Change in %c<SomeComponentName /> %c@ 09:38 PM',
+        'Change in <SomeComponentName /> @ 09:38 PM',
         undefined,
         undefined,
       )
@@ -80,7 +80,7 @@ describe('utils', () => {
       print({ ...printProps, prevValue: 'Some Previous value' })
 
       expect(consoleGroup).toHaveBeenCalledWith(
-        'Change in %c<SomeComponentName /> %c@ 09:38 PM',
+        'Change in <SomeComponentName /> @ 09:38 PM',
         undefined,
         undefined,
       )
@@ -116,7 +116,7 @@ describe('utils', () => {
 
       expect(consoleGroup).not.toHaveBeenCalled()
       expect(consoleGroupCollapsed).toHaveBeenCalledWith(
-        'Change in %c<SomeComponentName /> %c@ 09:38 PM',
+        'Change in <SomeComponentName /> @ 09:38 PM',
         undefined,
         undefined,
       )

src/utils.ts

@@ -1,21 +1,43 @@
 import * as utils from './utils'
 import { Printer, _PrintConfig, _PrintTypes, _SupportedConsole } from './types'
+import { DEFAULT_LABEL_SIZE } from './constants'
 
 /* istanbul ignore next */
 export function getCurrentTime(): string {
   // No need in testing Date module
   return new Date().toLocaleTimeString()
 }
 
+export function stylePlaceholder(withCss?: boolean): string {
+  return withCss ? '%c' : ''
+}
+
+export function getMessageLabel<T>(
+  value: T,
+  label?: string,
+  withCss?: boolean,
+): string {
+  const printLabel = label
+    ? `${label.padStart(DEFAULT_LABEL_SIZE, ' ')}: `
+    : ''.padStart(DEFAULT_LABEL_SIZE + 2, ' ')
+
+  return `${printLabel}${stylePlaceholder(withCss)}${String(value)}`
+}
+
 export function getGroupLabel(
   type: _PrintTypes,
   componentName?: string,
+  withComponentCSS?: boolean,
+  withSubValueCSS?: boolean,
 ): string {
+  const componentCssPlaceholder = stylePlaceholder(withComponentCSS)
+  const subValueCssPlaceholder = stylePlaceholder(withComponentCSS)
+
   const componentNameWrapper = componentName
-    ? `in %c<${String(componentName)} /> `
-    : '%c'
+    ? `in ${componentCssPlaceholder}<${String(componentName)} /> `
+    : `${componentCssPlaceholder}`
   const typeWrapper = `${String(type)} `
-  const timeWrapper = `%c@ ${utils.getCurrentTime()}`
+  const timeWrapper = `${subValueCssPlaceholder}@ ${utils.getCurrentTime()}`
 
   return `${typeWrapper}${componentNameWrapper}${timeWrapper}`
 }
@@ -71,7 +93,12 @@ export function print<T>({
 
   if (flags.isGrouped) {
     getCurrentPrinter(flags.isCollapsed ? 'groupCollapsed' : 'group')(
-      getGroupLabel(type, componentName),
+      getGroupLabel(
+        type,
+        componentName,
+        Boolean(componentCSS),
+        Boolean(subValueCSS),
+      ),
       componentCSS,
       subValueCSS,
     )
@@ -83,9 +110,7 @@ export function print<T>({
     css?: string,
   ): void => {
     const printer = getCurrentPrinter(logLevel)
-    const message = `${
-      label ? `${label.padStart(14, ' ')}: ` : ''.padStart(16, ' ')
-    }${css ? '%c' : ''}${String(printValue)}`
+    const message = getMessageLabel(printValue, label, Boolean(css))
 
     if (!css) printer(message)
     if (css) printer(message, css)