fix: tsconfig paths and HMR (#2028)

* fix: ts config paths hmr

* fix: skip arg

* test: update snap

* docs: add hmr fallback plan

* test: fix

* chore: update

.changeset/heavy-sheep-accept.md

@@ -0,0 +1,7 @@
+---
+'@pandacss/types': patch
+'@pandacss/core': patch
+'@pandacss/node': patch
+---
+
+Fix issue where HMR doesn't work when tsconfig paths is used.

packages/core/__tests__/import-map.test.ts

@@ -38,7 +38,7 @@ describe('import map', () => {
     // ts paths
     expect(
       ctx.imports.match({ mod: 'anydir/css', alias: 'css', name: 'css' }, function resolveTsPath(mod) {
-        return { 'anydir/css': 'styled-system/css' }[mod]
+        if (mod === 'anydir/css') return `${ctx.config.cwd}/styled-system/css`
       }),
     ).toBeTruthy()
   })

packages/core/src/file-matcher.ts

@@ -93,7 +93,7 @@ export class FileMatcher {
 
   private createMatch = (mod: string, keys: string[]) => {
     const mods = this.imports.filter((o) => {
-      const isFromMod = o.mod.includes(mod) || o.importMapValue === mod
+      const isFromMod = o.mod.includes(mod) || o.importMapValue?.includes(mod)
       const isOneOfKeys = keys.includes(o.name)
       return isFromMod && isOneOfKeys
     })

packages/core/src/import-map.ts

@@ -52,13 +52,13 @@ export class ImportMap {
   }
 
   private getOutdir = () => {
-    const compilerOptions = this.context.conf.tsconfig?.compilerOptions ?? {}
-    const cwd = this.context.config.cwd
+    const { cwd, outdir } = this.context.config
 
+    const compilerOptions = this.context.conf.tsconfig?.compilerOptions ?? {}
     const baseUrl = compilerOptions.baseUrl ?? ''
-    const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, '').slice(1) : cwd
 
-    return this.context.config.outdir.replace(relativeBaseUrl, '')
+    const relativeBaseUrl = baseUrl !== cwd ? baseUrl.replace(cwd, '').slice(1) : cwd
+    return outdir.replace(relativeBaseUrl, '')
   }
 
   normalize = (map: string | ImportMapInput | undefined): ImportMapOutput => {
@@ -86,8 +86,9 @@ export class ImportMap {
 
       // that might be a TS path mapping, it could be completely different from the actual path
       const resolvedMod = resolveTsPath?.(result.mod)
+      const absMod = [this.context.config.cwd, mod].join('/')
 
-      if (resolvedMod?.includes(mod)) {
+      if (resolvedMod?.includes(absMod)) {
         result.importMapValue = resolvedMod
         return true
       }

packages/node/src/config.ts

@@ -1,9 +1,9 @@
-import { convertTsPathsToRegexes, loadConfig } from '@pandacss/config'
+import { loadConfig } from '@pandacss/config'
 import type { Config, ConfigResultWithHooks, PandaHooks } from '@pandacss/types'
-import { createDebugger, createHooks } from 'hookable'
-import { parse } from 'tsconfck'
 import browserslist from 'browserslist'
+import { createDebugger, createHooks } from 'hookable'
 import { PandaContext } from './create-context'
+import { loadTsConfig } from './load-tsconfig'
 
 export async function loadConfigAndCreateContext(options: { cwd?: string; config?: Config; configPath?: string } = {}) {
   const { config, configPath } = options
@@ -23,25 +23,10 @@ export async function loadConfigAndCreateContext(options: { cwd?: string; config
     conf.config.browserslist ||= browserslist.findConfig(cwd)?.defaults
   }
 
-  const tsconfigResult = await parse(conf.path, {
-    root: cwd,
-    // @ts-ignore
-    resolveWithEmptyIfConfigNotFound: true,
-  })
-
-  if (tsconfigResult) {
-    conf.tsconfig = tsconfigResult.tsconfig
-    conf.tsconfigFile = tsconfigResult.tsconfigFile
-
-    const options = tsconfigResult.tsconfig?.compilerOptions
-
-    if (options?.paths) {
-      const baseUrl = options.baseUrl
-      conf.tsOptions = {
-        baseUrl,
-        pathMappings: convertTsPathsToRegexes(options.paths, baseUrl ?? cwd),
-      }
-    }
+  const tsConfResult = await loadTsConfig(conf, cwd)
+
+  if (tsConfResult) {
+    Object.assign(conf, tsConfResult)
   }
 
   // Register user hooks

packages/node/src/diff-engine.ts

@@ -14,6 +14,11 @@ export class DiffEngine {
    */
   async reloadConfigAndRefreshContext(fn?: (conf: LoadConfigResult) => void) {
     const conf = await loadConfig({ cwd: this.ctx.config.cwd, file: this.ctx.conf.path })
+
+    // attach tsconfig options from previous config
+    const { tsconfig, tsconfigFile, tsOptions } = this.ctx.conf
+    Object.assign(conf, { tsconfig, tsconfigFile, tsOptions })
+
     return this.refresh(conf, fn)
   }
 

packages/node/src/load-tsconfig.ts

@@ -0,0 +1,31 @@
+import { convertTsPathsToRegexes } from '@pandacss/config'
+import type { LoadConfigResult, LoadTsConfigResult } from '@pandacss/types'
+import { parse } from 'tsconfck'
+
+export async function loadTsConfig(conf: LoadConfigResult, cwd: string): Promise<LoadTsConfigResult | undefined> {
+  const tsconfigResult = await parse(conf.path, {
+    root: cwd,
+    //@ts-ignore
+    resolveWithEmptyIfConfigNotFound: true,
+  })
+
+  if (!tsconfigResult) return
+
+  const { tsconfig, tsconfigFile } = tsconfigResult
+  const { compilerOptions } = tsconfig
+
+  const result: LoadTsConfigResult = {
+    tsconfig,
+    tsconfigFile,
+  }
+
+  if (compilerOptions?.paths) {
+    const baseUrl = compilerOptions.baseUrl
+    result.tsOptions = {
+      baseUrl,
+      pathMappings: convertTsPathsToRegexes(compilerOptions.paths, baseUrl ?? cwd),
+    }
+  }
+
+  return result
+}

packages/types/src/config.ts

@@ -364,15 +364,18 @@ export interface ConfigTsOptions {
   pathMappings: PathMapping[]
 }
 
-export interface LoadConfigResult {
+export interface LoadTsConfigResult {
+  tsconfig?: TSConfig
+  tsOptions?: ConfigTsOptions
+  tsconfigFile?: string
+}
+
+export interface LoadConfigResult extends LoadTsConfigResult {
   /** Config path */
   path: string
   config: UserConfig
   serialized: string
   deserialize: () => Config
-  tsconfig?: TSConfig
-  tsOptions?: ConfigTsOptions
-  tsconfigFile?: string
   dependencies: string[]
 }
 

website/pages/docs/overview/faq.md

@@ -18,6 +18,37 @@ This error seems to be caused by process timing issues between file writes. This
 
 ---
 
+### HMR does not work when I use `tsconfig` paths?
+
+Panda tries to automatically infer and read the custom paths defined in `tsconfig.json` file. However, there might be scenarios where the hot module replacement doesn't work.
+
+To fix this add the `importMap` option to your `panda.config.js` file, setting it's value to the specified `paths` in your `tsconfig.json` file.
+
+```json
+// tsconfig.json
+
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@my-path/*": ["./styled-system/*"]
+    }
+  }
+}
+```
+
+```js
+// panda.config.js
+
+module.exports = {
+  importMap: '@my-path'
+}
+```
+
+This will ensure that the paths are resolved correctly, and HMR works as expected.
+
+---
+
 ### Why are my styles not applied?
 
 Check that the [`@layer` rules](/docs/concepts/cascade-layers#layer-css) are set and the corresponding `.css` file is included. [If you're not using `postcss`](/docs/installation/cli), ensure that `styled-system/styles.css` is imported and that the `panda` command has been run (or is running with `--watch`).