🐷
SvelteでVue.jsみたいにインラインCSSを使うライブラリを作った
作ったもの
ここで試せます。
なんで作ったか
- 標準でいい感じにインライン CSS が書けなかった
- 動的に CSS を変更するとしたら結構面倒くさい
- svelte-css-varsというライブラリがあったが css の var が楽に使えるだけで別に追加で css を書かないといけなくてめんどくさかった
- Vue.js のインライン CSS が使いやすいからほぼそれと同じ使い方ができるようにしたかった
使い方
yarn add svelte-inline-css
.svelte
<script lang="ts">
import style from 'svelte-inline-css';
export let height: `${number}px` = '0px';
</script>
<div use:style={{ height, backgroundColor: 'pink' }} />
Vue.js とほとんど一緒で CSS プロパティは camelCase を使用します。
Vue.js v3 のドキュメントと全く同じ書き方をした例があります。
これから
- Vue.js と挙動をほぼ一致させる
-
Array Syntax- 実装 v1.2.0
- Auto-prefixing
- Multiple Values
-
- インラインに展開するんじゃなくて CSS として出力できるようにしたい
- SvelteKit とかビルドツールによって色々ありそうだからできたら程度
Discussion