Panda CSSをエイリアスで使う

styled-systemを相対パスでインポートして使っていたが、ファイルが深くなるとわかりにくくなるのでエイリアスを使ってインポートするメモ

https://panda-css.com/docs/installation/vite の手順でインストールしている前提です。

tsconfig.jsonに以下の設定を追加

{
  "compilerOptions": {
    "paths": {
      "@styled-system/*": ["./styled-system/*"]
    }
  },
  "include": ["src", "styled-system"] //これを忘れると補完が効かないので注意
}

vite.config.tsには以下のように設定を追加する

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'node:path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@styled-system': resolve(__dirname, 'styled-system'),
    },
  },
})

これでtsx内で以下のようにインポートできる

import { css } from '@styled-system/css'

function App() {
  return (
    <>
      <h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>
        Welcome to My App
      </h1>
    </>
  )
}

export default App