refactor(artifacts): ArtifactMap

packages/cli/__tests__/cli.test.ts

@@ -54,6 +54,10 @@ describe('CLI', () => {
     // init on existing project
     const output2 = execSync(cmd, { cwd: testsCwd }).toString()
     expect(output2.includes('It looks like you already have panda created')).toBe(true)
+  })
+
+  test('init --force', async () => {
+    const cmd = `node ${binPath} init --cwd="${testsCwd}" --force`
 
     // init with --force
     const output3 = execSync(cmd + ' --force --postcss --logfile="./panda.log"', { cwd: testsCwd }).toString()

packages/cli/src/cli-main.ts

@@ -154,12 +154,12 @@ export async function main() {
       if (watch) {
         ctx.watchConfig(
           async () => {
-            const affecteds = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
+            const changes = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
               ctx = new PandaContext(conf)
             })
 
-            await ctx.hooks['config:change']?.({ config: ctx.config, changes: affecteds })
-            await codegen(ctx, Array.from(affecteds.artifacts))
+            await ctx.hooks['config:change']?.({ config: ctx.config, changes })
+            await codegen(ctx, changes)
             logger.info('ctx:updated', 'config rebuilt ✅')
           },
           { cwd, poll },
@@ -234,11 +234,11 @@ export async function main() {
         //
         ctx.watchConfig(
           async () => {
-            const affecteds = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
+            const changes = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
               ctx = new PandaContext(conf)
             })
 
-            await ctx.hooks['config:change']?.({ config: ctx.config, changes: affecteds })
+            await ctx.hooks['config:change']?.({ config: ctx.config, changes })
             await cssgen(ctx, options)
             logger.info('ctx:updated', 'config rebuilt ✅')
           },
@@ -470,11 +470,11 @@ export async function main() {
       if (watch) {
         ctx.watchConfig(
           async () => {
-            const affecteds = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
+            const changes = await ctx.diff.reloadConfigAndRefreshContext((conf) => {
               ctx = new PandaContext(conf)
             })
 
-            await ctx.hooks['config:change']?.({ config: ctx.config, changes: affecteds })
+            await ctx.hooks['config:change']?.({ config: ctx.config, changes })
             await buildInfo(ctx, outfile)
             logger.info('ctx:updated', 'config rebuilt ✅')
           },

packages/config/__tests__/merge-hooks.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest'
 import { mergeHooks } from '../src/merge-hooks'
-import type { Artifact } from '@pandacss/types'
+import type { ArtifactFileId, GeneratedArtifact } from '@pandacss/types'
 
 describe('mergeConfigs / theme', () => {
   test('should merge hooks and call sequentially async', async () => {
@@ -90,7 +90,7 @@ describe('mergeConfigs / theme', () => {
 
   test('should merge hooks and call sequentially using previous result: codegen:prepare', async () => {
     const order: number[] = []
-    let original: Artifact[]
+    let original: GeneratedArtifact[]
     const hooks = mergeHooks([
       {
         name: 'panda-plugin',
@@ -101,7 +101,7 @@ describe('mergeConfigs / theme', () => {
             original = args.original!
 
             return args.artifacts.map((art) => {
-              return { ...art, files: art.files.map((f) => ({ ...f, code: (f.code || '').replace('aaa', 'xxx') })) }
+              return { ...art, content: (art.content || '').replace('aaa', 'xxx') }
             })
           },
         },
@@ -116,36 +116,33 @@ describe('mergeConfigs / theme', () => {
             expect(args.original).toMatchInlineSnapshot(`
               [
                 {
-                  "files": [
-                    {
-                      "code": "aaa aaa aaa",
-                      "file": "aaa.js",
-                    },
-                  ],
+                  "content": "aaa aaa aaa",
                   "id": "recipes.1",
+                  "path": [
+                    "recipes",
+                    "aaa.js",
+                  ],
                 },
                 {
-                  "files": [
-                    {
-                      "code": "bbb bbb bbb",
-                      "file": "bbb.js",
-                    },
-                  ],
+                  "content": "bbb bbb bbb",
                   "id": "recipes.2",
+                  "path": [
+                    "recipes",
+                    "bbb.js",
+                  ],
                 },
                 {
-                  "files": [
-                    {
-                      "code": "ccc ccc ccc",
-                      "file": "ccc.js",
-                    },
-                  ],
+                  "content": "ccc ccc ccc",
                   "id": "recipes.3",
+                  "path": [
+                    "recipes",
+                    "ccc.js",
+                  ],
                 },
               ]
             `)
             return args.artifacts.map((art) => {
-              return { ...art, files: art.files.map((f) => ({ ...f, code: (f.code || '').replace('bbb', 'zzz') })) }
+              return { ...art, content: (art.content || '').replace('bbb', 'zzz') }
             })
           },
         },
@@ -155,9 +152,9 @@ describe('mergeConfigs / theme', () => {
     const result = await hooks['codegen:prepare']?.({
       changed: [],
       artifacts: [
-        { id: 'recipes.1', files: [{ code: 'aaa aaa aaa', file: 'aaa.js' }] },
-        { id: 'recipes.2', files: [{ code: 'bbb bbb bbb', file: 'bbb.js' }] },
-        { id: 'recipes.3', files: [{ code: 'ccc ccc ccc', file: 'ccc.js' }] },
+        { id: 'recipes.1' as ArtifactFileId, path: ['recipes', 'aaa.js'], content: 'aaa aaa aaa' },
+        { id: 'recipes.2' as ArtifactFileId, path: ['recipes', 'bbb.js'], content: 'bbb bbb bbb' },
+        { id: 'recipes.3' as ArtifactFileId, path: ['recipes', 'ccc.js'], content: 'ccc ccc ccc' },
       ],
     })
 
@@ -170,31 +167,28 @@ describe('mergeConfigs / theme', () => {
     expect(result).toMatchInlineSnapshot(`
       [
         {
-          "files": [
-            {
-              "code": "xxx aaa aaa",
-              "file": "aaa.js",
-            },
-          ],
+          "content": "xxx aaa aaa",
           "id": "recipes.1",
+          "path": [
+            "recipes",
+            "aaa.js",
+          ],
         },
         {
-          "files": [
-            {
-              "code": "zzz bbb bbb",
-              "file": "bbb.js",
-            },
-          ],
+          "content": "zzz bbb bbb",
           "id": "recipes.2",
+          "path": [
+            "recipes",
+            "bbb.js",
+          ],
         },
         {
-          "files": [
-            {
-              "code": "ccc ccc ccc",
-              "file": "ccc.js",
-            },
-          ],
+          "content": "ccc ccc ccc",
           "id": "recipes.3",
+          "path": [
+            "recipes",
+            "ccc.js",
+          ],
         },
       ]
     `)

packages/config/src/diff-config.ts

@@ -1,7 +1,5 @@
-import { dashCase } from '@pandacss/shared'
-import type { ArtifactId, Config, DiffConfigResult } from '@pandacss/types'
+import type { Config, DiffConfigResult } from '@pandacss/types'
 import microdiff from 'microdiff'
-import { artifactMatchers } from './config-deps'
 
 type ConfigOrFn = Config | (() => Config)
 
@@ -12,50 +10,24 @@ const runIfFn = (fn: ConfigOrFn): Config => (typeof fn === 'function' ? fn() : f
  */
 export function diffConfigs(config: ConfigOrFn, prevConfig: Config | undefined): DiffConfigResult {
   //
-  const affected: DiffConfigResult = {
-    artifacts: new Set(),
+  const result: DiffConfigResult = {
     hasConfigChanged: false,
     diffs: [],
   }
 
   if (!prevConfig) {
-    affected.hasConfigChanged = true
-    return affected
+    result.hasConfigChanged = true
+    return result
   }
 
   const configDiff = microdiff(prevConfig, runIfFn(config))
 
   if (!configDiff.length) {
-    return affected
+    return result
   }
 
-  affected.hasConfigChanged = true
-  affected.diffs = configDiff
+  result.hasConfigChanged = true
+  result.diffs = configDiff
 
-  configDiff.forEach((change) => {
-    const changePath = change.path.join('.')
-
-    artifactMatchers.forEach((matcher) => {
-      const id = matcher(changePath) as ArtifactId | undefined
-      if (!id) return
-
-      // add `recipes.xxx-yyy` to specify which recipes were affected, and later avoid rewriting all recipes
-      // same for recipes, use dashCase since those will be used as filenames
-      if (id === 'recipes') {
-        // ['theme', 'recipes', 'xxx'] => recipes.xxx
-        const name = dashCase(change.path.slice(1, 3).join('.')) as ArtifactId
-        affected.artifacts.add(name)
-      }
-
-      if (id === 'patterns') {
-        // ['patterns', 'xxx'] => patterns.xxx
-        const name = dashCase(change.path.slice(0, 2).join('.')) as ArtifactId
-        affected.artifacts.add(name)
-      }
-
-      affected.artifacts.add(id)
-    })
-  })
-
-  return affected
+  return result
 }

packages/core/src/context.ts

@@ -43,6 +43,7 @@ const defaults = (config: UserConfig): UserConfig => ({
   outExtension: 'mjs',
   shorthands: true,
   syntax: 'object-literal',
+  separator: '_',
   ...config,
   layers: {
     reset: 'reset',

packages/core/src/index.ts

@@ -2,6 +2,7 @@ import * as messages from './messages'
 export { Breakpoints } from './breakpoints'
 export { Conditions } from './conditions'
 export { Context } from './context'
+export { FileEngine } from './file'
 export { FileMatcher } from './file-matcher'
 export type { ImportResult } from './file-matcher'
 export { ImportMap } from './import-map'

packages/core/src/patterns.ts

@@ -1,6 +1,6 @@
 import { capitalize, createRegex, dashCase, getPatternStyles, isObject, memo, uncapitalize } from '@pandacss/shared'
 import type { TokenDictionary } from '@pandacss/token-dictionary'
-import type { ArtifactFilters, Dict, PatternConfig, PatternHelpers, UserConfig } from '@pandacss/types'
+import type { Dict, PatternConfig, PatternHelpers, UserConfig } from '@pandacss/types'
 import type { Utility } from './utility'
 
 interface PatternOptions {
@@ -104,11 +104,6 @@ export class Patterns {
     }
   }
 
-  filterDetails(filters?: ArtifactFilters) {
-    const patternDiffs = filters?.affecteds?.patterns
-    return patternDiffs ? this.details.filter((pattern) => patternDiffs.includes(pattern.dashName)) : this.details
-  }
-
   getPropertyValues = (patternName: string, property: string) => {
     const patternConfig = this.getConfig(patternName)
     if (!patternConfig) return []