UnoCSSでハマったことを書いていくぜ
ryoppippibreakpoints を theme に追加したら元の breakpoints 消えたんだが..
これはマジでハマるので書いておく
問題点
import {
defineConfig,
presetMini,
} from 'unocss'
export default defineConfig({
theme: {
breakpoints: {
md: "768px",
lg: "1440px"
},
presets: [
presetMini(),
]
})
このように書くと、突然 sm とかのbreakpointが消える
再現Playground
原因
themes に書いたbreakpoints はmergeされず上書きされるので、元のruleにあったものは消える
初見殺しにも程がある
対処法
extendThemeを使う
ドキュメントによれば、 theme を使うのではなくextendTheme
extendTheme: (theme) => {
return {
...theme,
breakpoints: {
...theme.breakpoints,
sm: '320px',
md: '640px',
},
}
}
スプレッド構文で書いてもいいけど、素直に deepMerge 系の関数を使うのがいいと思います。
再現PG (←npmしかPlaygroundで使えないからdefuつかってるよ)
個人的には deepMerge の方が直感的でおすすめ
ryoppippitagify と Attributify 両立できなくない？
問題
I'm feeling <i-line-md-emoji-grin text-red /> today!
これが赤くならない
原因
tagify では Attributify mode が使えないらしい(document見つからなかったけど、実験した感じそう)
対処法
classで書きましょう
I'm feeling <i-line-md-emoji-grin class="text-red" /> today!
shortcut で定義したclassって、 Attributify の svelte extractor できない？
↑日本語が終わってるけど、後で書き直す
問題
foo という shortcut があったときに
<span foo={isFoo} />
みたいな書き方ができない
ちなみにruleにあるやつはできる
たとえば
<span text-red={true} />
は動く（動くよね？）
対処法
できないっぽいので
<span class:foo={isFoo} />
ってちゃんと書きましょう
ryoppippiicon の開始、終了がいじれない
問題
<span i-line-md-github-loop />
みたいなアイコンがあった時に「今流れているアニメーションを止めて最初から開始する」みたいなことができない
自分の作ってたサイトのdark mode 切り替えのアイコンの実装でハマった。
余談だけど、結構いい感じにアイコンが動くのでぜひみてほしい（そして褒めてくれ)
原因
Pure cssだから、制御不能らしい
対処法
UnoCSSのIconを諦めましょう
svg形式でアイコンをimportしましょう...
おすすめは unplugin-icons です。
これで svg 形式でアイコンが読み込めます
Vueの人は @vue/icons とかですかね（使ったことがない)
あとは、componentをmount/remountしたりするとアニメーションが最初から再生されてめでたしめでたし(Svelteでは動作確認済み。他のFWはわからない)。
もちろんJSで操作もできる
逆に再生位置の操作を必要としない/そもそも動かないアイコンしか使わない、なのであれば unocss で完結する方が体験は良いと思う。
ryoppippiTailwindCSS/UnoCSS + Svelte でDynamicな値を使いたい！
記事には書いてないけれど、TailwindCSS/UnoCSSはClass名を正規表現でマッチングしているだけなので、変数を直接埋め込んだclassが処理できないのは当然なんだなあ
css variableを経由して使っていこう