Lism Props

Lismコンポーネントでは、専用のプロパティ("Lism Props" と呼びます)が受け取れるようになっています。

Lism Propsの多くは、対応するCSSプロパティを省略した名前で用意されています。

<Box bgc="rgba(0,0,0,0.2)">...</Box>

対応トークンとユーティリティクラスでの出力について

Lismでは、主要なCSSプロパティ向けのプリセット値をトークンで管理しています。
Tokens で紹介しているものがそれにあたります。

対応するトークン値を指定した時、ユーティリティクラスとして出力されるか、もしくは対応するCSS変数として出力されます。

例えば、p(padding)やmb(margin-bottom)プロパティはSPACE, shadowプロパティにはSHADOWトークンが対応しており、対応するトークンを指定することが可能です。

<Box p={20} mb={40} shadow="2">...</Box>

この中で、pに対する20とshadowに対する2は、ユーティリティクラスとして出力されるように事前に設定されており、mbには、その設定がありません。

そのため、出力結果は次のようになります。

<div class="-p:20 -bxsh:2 -mb:" style="--mb:var(--s--40)">...</div>

ユーティリティクラスとして出力される値について

トークン管理している値が全てユーティリティ化されているわけでもなく、トークン管理していない値でもユーティリティ化されているものがあります。

PROPSデータで utils または presets が指定されているものは、指定した値がユーティリティクラス化される可能性があります。具体的にどの値をユーティリティ化するかどうかの詳細は/src/config/presets,/src/config/utilitiesで定義しており、これらは上書きも可能です（予定）。

いくつかユーティリティクラス化される例を挙げておきます。

• p={20} → -p:20
• p="box:s" → -p:box:s
• mt="auto" → -mt:a
• c="main", → -c:main
• bgc="pale", → -bgc:pale
• fz="xl" → -fz:xl
• w="100%",w="100" → -w:100
• ta="center",ta="c" → -ta:c
• d="flex",d="f" → -d:f

<Box p="box:s" c="main" bgc="pale" ta="c" fz="xl">
	Text
</Box>
 
↓ 出力結果
 
<div class="l--box -p:box:s -c:main -bgc:pale -ta:c -fz:xl">
	...
</div>

ユーティリティクラス化されない時の出力パターンについて

3パターンあります。

• memo...

• 1のメリット

  • 何かしらそのpropを持つかどうかがクラスで判定できる。
  • 子要素に変数の受け渡しをすることで、親では何も適用せずにinheritさせるみたいなことができる。
  • 優先度的な問題が多少緩和できる。（強力なインラインセットは変数でしかない）
  • →HTML側の文字数が少なくなる(ほんの少し)

• 1,2の判断基準どうする？

  • utility以外を使うことが珍しいか（自由な数値で値をとれるか）どうか?
  • ブレイクポイントで切り替えるかどうかで判断すればいいのでは？

1. -prop:クラスと--prop変数の組み合わせで出力される

pやc,bgcなど、

• ブレイクポイントの指定が可能なもの
• ユーティリティクラスが多いもの
• 使用頻度が高く文字数の省略になりそうなもの
• -{prop}:クラスによって何か値を指定していることが分かったほうが便利なケースがありそうなプロパティ

がこのパターンで出力されます。

<Box p="1em" bgc="rgba(0,0,0,0.1)">
	...
</Box>
 
↓ 出力結果
 
<div class="l--box -p: -c: -bgc:" style="--p:1em;--c:#f15a00;--bgc:rgba(0,0,0,0.1)">
	...
</div>

2. 単純にstyleとして出力される

<Box maxW="20em" opacity="0.5">
	...
</Box>
 
↓ 出力結果
 
<div class="l--box" style="max-width:20em;opacity:0.5">
	...
</div>

3. --propだけ出力されるもの

このケースは稀です。

• --bdc,--bdw,--bds のborder系
• --keycolor など、利用する場面が限定されているもの。

-prop:クラスだけを出力する方法

パターン1での出力がされるLism Propsに対して "-" または true を指定することで、.-{prop}: クラスだけの出力が可能です。

CSSファイル側で具体的な値を指定したい場合などに活用できます。

<Box mb bd w opacity p={['-', '-']}>
	<p>Box</p>
</Box>
 
↓
 
<div class="l--box -p@sm -p: -mb: -bd: -w:"><p>Box</p></div>

このように、-{prop}:クラスだけ出力されてCSS変数は何も出力されません。（パターン2で出力されるopacityに関しては、-opacity:クラスが出力されていないことにも注目してください。）

Responsive Props

Lism Propsの一部は、ブレイクポイントで値を切り替えることができ、2通りの指定方法があります。

1. 配列で順番に指定（ _ → sm → md → ...）
2. オブジェクトで直接ブレイクポイントを指定

<Box p={[20, 30, 40]}>
	...
</Box>
 
or
 
<Box p={{ _: 20, sm: 30, md: 40 }}>
	...
</Box>

これにより出力されるHTMLは以下のようになります。

<div class="l--box -p:20 -p@sm -p@md" style="--p--sm:var(--s--30);--p--md:var(--s--40)">
	...
</div>

<Box p={[20, null, 40]}>
	...
</Box>
 
or
 
<Box p={{ _: 20, md: 40 }}>
	...
</Box>

これにより出力されるHTMLは以下のようになります。

<div class="l--box -p:20 -p@md" style="--p--md:var(--s--40)">
	...
</div>

<Flex gap={[30, 40]}>
	<Box w={['auto', null, '25%']}>コンテンツ</Box>
	<Box>コンテンツ</Box>
	<Box>コンテンツ</Box>
</Flex>

方向成分を持ち、かつBP指定可能なプロパティ

p={{left, right,...}}などの指定も可能です。

BP指定との併用時における注意事項を以下に記載します。

...

// p={_:{pl: [20,40], pr: 30}, sm:{}} のような指定はできないルール.
// p=[{left,right}, {left,right}] みたいな指定はできないルール.
// p={x: [20,40], y: [30,40]} は一応処理的には問題ないが、そもそもそんな指定は非推奨

その他

tagで出力するHTMLタグの指定ができる。

一部、asで別コンポーネントとして展開できるものもある。

TODO:Space分割にも対応？