feat: token and recipe analysis (#3035)

* wip

* refactor: code and mv to node pkg

* docs: add changeset

* refactor: create reporter package

* fix: recipe and token detection

* refactor: classify pattern

* refactor: add support for output format

* refactor: format

* refactor: support scope and classify global css

* refactor: update tokens

* refactor: slice most used

* refactor: update

* chore: rm unused

* docs: update changeset

* refactor: expose token maps

* refactor: fix typo

---------

Co-authored-by: Alexandre Stahmer <[email protected]>

Author: segunadebayo

.changeset/nervous-pans-enjoy.md

@@ -0,0 +1,19 @@
+---
+'@pandacss/types': minor
+'@pandacss/node': minor
+'@pandacss/dev': minor
+'@pandacss/reporter': minor
+---
+
+Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how your design
+system is used and answers the following questions:
+
+- What tokens are most used?
+- What recipe variants are most used?
+- How many hardcoded values vs tokens do we have?
+
+```sh
+panda analyze --scope=<token|recipe>
+```
+
+> Still work in progress but we're excited to get your feedback!

packages/cli/src/cli-main.ts

@@ -2,7 +2,7 @@ import { findConfig } from '@pandacss/config'
 import { colors, logger } from '@pandacss/logger'
 import {
   PandaContext,
-  analyzeTokens,
+  analyze,
   buildInfo,
   codegen,
   cssgen,
@@ -14,7 +14,6 @@ import {
   setupGitIgnore,
   setupPostcss,
   startProfiling,
-  writeAnalyzeJSON,
   type CssGenOptions,
 } from '@pandacss/node'
 import { PandaError, compact } from '@pandacss/shared'
@@ -361,10 +360,14 @@ export async function main() {
     .command('analyze [glob]', 'Analyze design token usage in glob')
     .option('--outfile [filepath]', 'Output analyze report in JSON')
     .option('--silent', "Don't print any logs")
+    .option('--scope <type>', 'Select analysis scope (token or recipe)')
     .option('-c, --config <path>', 'Path to panda config file')
     .option('--cwd <cwd>', 'Current working directory', { default: cwd })
     .action(async (maybeGlob?: string, flags: AnalyzeCommandFlags = {}) => {
-      const { silent, config: configPath } = flags
+      const { silent, config: configPath, scope } = flags
+
+      const tokenScope = scope == null || scope === 'token'
+      const recipeScope = scope == null || scope === 'recipe'
 
       const cwd = resolve(flags.cwd!)
 
@@ -378,19 +381,23 @@ export async function main() {
         configPath,
       })
 
-      const result = analyzeTokens(ctx, {
-        onResult(file) {
-          logger.info('cli', `Analyzed ${colors.bold(file)}`)
-        },
-      })
+      const result = analyze(ctx)
 
       if (flags?.outfile && typeof flags.outfile === 'string') {
-        await writeAnalyzeJSON(flags.outfile, result, ctx)
+        await result.writeReport(flags.outfile)
         logger.info('cli', `JSON report saved to ${resolve(flags.outfile)}`)
         return
       }
 
-      logger.info('cli', `Found ${result.propByIndex.size} token used in ${result.derived.byFilePathMaps.size} files`)
+      if (tokenScope && !ctx.tokens.isEmpty) {
+        const tokenAnalysis = result.getTokenReport()
+        logger.info('analyze:tokens', `Token usage report 🎨 \n${tokenAnalysis.formatted}`)
+      }
+
+      if (recipeScope && !ctx.recipes.isEmpty()) {
+        const recipeAnalysis = result.getRecipeReport()
+        logger.info('analyze:recipes', `Recipe usage report 🎛️ \n${recipeAnalysis.formatted}`)
+      }
     })
 
   cli

packages/cli/src/types.ts

@@ -42,6 +42,7 @@ export interface AnalyzeCommandFlags {
   outfile?: string
   cwd?: string
   config?: string
+  scope?: 'token' | 'recipe'
 }
 
 export interface DebugCommandFlags {

packages/core/src/context.ts

@@ -204,7 +204,10 @@ export class Context {
       recipes: this.recipes,
       patterns: this.patterns,
       jsx: this.jsx,
-      syntax: config.syntax,
+      config: this.config,
+      tokens: this.tokens,
+      conditions: this.conditions,
+      utility: this.utility,
       encoder: this.encoder,
       tsOptions: this.conf.tsOptions,
       join: (...paths: string[]) => paths.join('/'),

packages/core/src/recipes.ts

@@ -53,6 +53,10 @@ export class Recipes {
 
   private context!: SerializeContext
 
+  get config() {
+    return this.recipes
+  }
+
   constructor(private recipes: RecipeRecord = {}) {
     this.prune()
   }

packages/core/src/types.ts

@@ -1,3 +1,4 @@
+import type { TokenDictionary } from '@pandacss/token-dictionary'
 import type {
   Config,
   Dict,
@@ -9,13 +10,15 @@ import type {
   TSConfig,
   UserConfig,
 } from '@pandacss/types'
+import type { Conditions } from './conditions'
+import type { Context } from './context'
 import type { ImportMap } from './import-map'
 import type { JsxEngine } from './jsx'
 import type { Layers } from './layers'
 import type { Patterns } from './patterns'
 import type { Recipes } from './recipes'
 import type { StyleEncoder } from './style-encoder'
-import type { Context } from './context'
+import type { Utility } from './utility'
 
 export interface TransformResult {
   layer?: string
@@ -114,9 +117,12 @@ export interface ParserOptions {
   hash: HashOptions
   imports: ImportMap
   jsx: JsxEngine
-  syntax: Config['syntax']
+  config: Config
   recipes: Recipes
+  tokens: TokenDictionary
   patterns: Patterns
+  utility: Utility
+  conditions: Conditions
   encoder: StyleEncoder
   join: (...paths: string[]) => string
   compilerOptions: TSConfig['compilerOptions']

packages/core/src/utility.ts

@@ -413,17 +413,24 @@ export class Utility {
     return this
   }
 
-  private getTransformArgs = (raw: string): TransformArgs => {
-    const token = Object.assign(this.getToken.bind(this), {
+  private getTokenFn = () => {
+    return Object.assign(this.getToken.bind(this), {
       raw: (path: string) => this.tokens.getByName(path),
     })
+  }
 
-    const _colorMix = (value: string) => colorMix(value, token)
+  resolveColorMix = (value: string) => {
+    const token = this.getTokenFn()
+    return colorMix(value, token)
+  }
 
+  private getTransformArgs = (raw: string): TransformArgs => {
     return {
-      token,
+      token: this.getTokenFn(),
       raw,
-      utils: { colorMix: _colorMix },
+      utils: {
+        colorMix: this.resolveColorMix.bind(this),
+      },
     }
   }
 
@@ -548,4 +555,18 @@ export class Utility {
   isDeprecated = (prop: string) => {
     return this.deprecated.has(prop)
   }
+
+  /**
+   * Returns the token type for a given property
+   */
+  getTokenType = (prop: string) => {
+    const set = this.types.get(prop)
+    if (!set) return
+    for (const type of set) {
+      const match = type.match(TOKEN_TYPE_PATTERN)
+      if (match) return match[1]
+    }
+  }
 }
+
+const TOKEN_TYPE_PATTERN = /type:Tokens\["([^"]+)"\]/

packages/extractor/src/box.ts

@@ -31,6 +31,15 @@ export const box = {
     return new BoxNodeConditional({ type: 'conditional', whenTrue, whenFalse, node, stack })
   },
   from: toBoxNode,
+  objectToMap: (value: Record<string, unknown>, node: Node, stack: Node[]) => {
+    const map = new Map(
+      Object.entries(value).map(([k, v]: [string, any]) => {
+        const boxed = box.from(v, node, stack)
+        return [k, boxed || null]
+      }),
+    )
+    return new BoxNodeMap({ type: 'map', value: map, node, stack })
+  },
   //
   emptyObject: (node: Node, stack: Node[]) => {
     return new BoxNodeObject({ type: 'object', value: {}, isEmpty: true, node, stack })

packages/node/package.json

@@ -39,8 +39,8 @@
   "dependencies": {
     "@pandacss/config": "workspace:*",
     "@pandacss/core": "workspace:*",
-    "@pandacss/extractor": "workspace:*",
     "@pandacss/generator": "workspace:*",
+    "@pandacss/reporter": "workspace:*",
     "@pandacss/logger": "workspace:*",
     "@pandacss/parser": "workspace:*",
     "@pandacss/shared": "workspace:*",
@@ -49,8 +49,6 @@
     "browserslist": "4.23.3",
     "chokidar": "3.6.0",
     "fast-glob": "3.3.2",
-    "file-size": "1.0.0",
-    "filesize": "10.1.6",
     "fs-extra": "11.2.0",
     "glob-parent": "6.0.2",
     "is-glob": "4.0.3",