Panda.cssを触ってみてのメモです

Panda.cssを触ってみてのメモです

誰かの助けになればと！あと自分の復習用

以下使用したバージョンです。

使用したフレームワーク/ライブラリ	バージョン
next	14.2.8
@pandacss/dev	0.45.2

関数的にまとめ対象別に変数を渡せるのか？

結論できた

// tsx
<div className={css(ball('-.14s'))}>s</div>
<div className={css(ball('-70ms'))}></div>
<div className={css(ball('0s'))}></div>

// css crate function
const ball = (delayTime: string) => {
    return {
        m: '.1em',
        w: '1.6em',
        h: '1.6em',
        bg: 'main',
        borderRadius: 'full',
        animation: 'loadingAnimate',
        animationDuration: '.6s',
        animationTimingFunction: 'ease-in-out',
        animationDelay: `${delayTime}`
    }
}

panda.config.tsのkeyframesにはy or trslateYは使用出来ない

ts:panda.config.ts（修正前）

theme: {
    extend: {
      keyframes: {
        loadingAnimate: {
          '33%': {
            y: '10px',
          },
          '66%': {
            y: '-10px'
          },
          '100%': {
            y: '0'
          }
        }
      },
    },
  },

とやるとtsでエラーが出ていることを確認。
どうやら型定義にyやtraslateYは定義されておらず認識してくれないっぽい。なぜ？

オブジェクト リテラルは既知のプロパティのみ指定できます。'y' は型 'CssProperties' に存在しません。ts(2353)

ts:panda.config.ts（修正後）

theme: {
    extend: {
      keyframes: {
        loadingAnimate: {
          '33%': {
            translate: '0 10px',
          },
          '66%': {
            translate: '0 -10px'
          },
          '100%': {
            translate: '0'
          }
        }
      },
    },
  },

背景画像のurlはどこから指定？

Next(AppRouter)を使用していたので静的画像はpublic配下にいれていましたが、どのようにしたら読み込めるのかを考えていたらドキュメントにありますね。。

こうか！

ts:panda.config.ts

tokens: {
    assets: {
      illustBack: {
        value: { type: 'url', value: '/public/img/illust_back.svg' }
      },
    },
}

ts:index.tsx

const profileBlock = {
    m: '0 auto', p: '14% 4%', pos: 'relative', w: '100%', color: 'white', bg: 'illustBack top left / 4px auto main',
    md: {p: '48px', w: '1000px', boxShadow: '5px 10px 20px rgba(0,0,0,0.25)', color: 'black'}
}

できない。。。
というのもconfig.tsで定義しているurlのvalueはサイトドメインからの相対パスなので404を吐いていそう。。。
下記に変更

👍 '/public/img/illust_back.svg'
👎 '/img/illust_back.svg'

いけるか？
できない。。。
どうやらbg(backgound一括)指定だとできないっぽいので以下に変更。

👍 bgImage: 'illustBack', bgPosition: 'top left', bgSize: '4px auto', bgColor: 'main'
👎 bg: 'illustBack top left / 4px auto main'

できた！

まとめ

まだまだ一筋縄ではいかないっぽい