Closed1

pandacssの特定の関数をaliasを用いてimportすると解析されない

yossuliyossuli

現状

Panda CSS を使用する際に生成されるstyled-systemディレクトリがありますね?
僕はここから関数をimportする際にimport文が長くなってしまうことを嫌ってaliasを設定したくなりました。

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@ss/*": ["./app/styled-system/*"]
    }
  }
}

こんな感じですね。
importするときは

hoge.tsx
import { css } from "@ss/css";

こんな感じで呼び出します。
これは問題なくcssは適用されました。
じゃあpatternsからもaliasを用いてimportできるだろうと

hoge.tsx
import { css } from "@ss/css";
import { flex } from "@ss/patterns";

こんな感じに書いたところ、なぜかcssが適用されません。

対処

panda debugを用いてどのように解析されているかを確認したところ、そもそも認識されていないようでした。
css()は問題なくaliasを使用しても解析されるのにflex()は解析されない...?そんなわけあるかと自分の実装をこねくり回すなど試行錯誤を繰り返した結果...

Panda CSSが悪いんじゃね???

https://github.com/chakra-ui/panda/discussions/1034

見たことのある症状だなぁ...
一応pr#1039 で解決したとされていますが

packages/generator/src/generator.ts
  const getImportMap = (outdir: string) => ({
-   css: `${outdir}/css`,
-   recipe: `${outdir}/recipes`,
-   pattern: `${outdir}/patterns`,
-   jsx: `${outdir}/jsx`,
+   css: [outdir, 'css'],
+   recipe: [outdir, 'recipes'],
+   pattern: [outdir, 'patterns'],
+   jsx: [outdir, 'jsx'],
  })

この変更でcssとそれ以外のimportに差が出るのが解消されるとは思えない...
Panda CSS のせいやろ()

解決方法

panda.config.ts
  export default defineConfig({
+   importMap: {
+     patterns: "@ss/patterns",
+   },
  }

正直この解決方法は対処療法的であまりよくなさそうだなぁと思いつつも、内部実装を解析してPRを出せるほど技術力もないし、まぁ動くからいっか

おわりに

こんな雑な記事が誰かの役に立っていたら幸いです。

このスクラップは6ヶ月前にクローズされました