Lism

LismのCSS設計に対応した様々なプロパティを受け取ることができるようになっている汎用的なコンポーネントです。

<Lism　p='30' fw='bold' c='blue' bgc='base-2' bdrs='3'>Lism content</Lism>

<div class="-p:30 -fw:bold -c: -bgc:base-2 -bdrs:3"> Lism content </div>

<Lism>Lism content</Lism>

<div>Lism content</div>

import { Lism } from 'lism-css/react';

import { Lism } from 'lism-css/astro';

<Lism>をベースとした@lism/coreで提供する各コンポーネントで受け取れるプロパティをLism Propsと呼んでいます。

Lism Propsは、主に以下の3種類に分類されます。

skipStateが指定されているコンポーネントでは、State Propsは受け取れません。

上記の他、少し複雑なものがいくつかあります。それらについては後述の補足で解説しています。

Layout State クラスに対応するプロパティ群です。

主要なCSSプロパティに対して、それぞれ省略記法でコンポーネントに指定できるようになっています。
例えば、font-size は fz、padding は p で指定できます。

この時、Prop Class に対応する値が指定されれば、下記のようにLismで用意しているユーティリティクラスが出力されるようになっています。

<Lism fz='l' p='20'>contents</Lism>

// ↓ 出力されるHTML
<div class="-fz:l -p:20">contents</div>

トークン値ではなく各プロパティの主要なキーワード値に対応したクラスをする場合、値を省略してもしなくても出力されます。

例：text-align:center用の -ta:c クラスや、position:relative用の -pos:r クラスは、以下のどちらの書き方でも出力されます。

<Lism ta="center" pos="relative">...</Lism>
<Lism ta="c" pos="r">...</Lism>

// ↓ どちらも次のような出力になります

<div class="-ta:c -pos:r">...</div>

ユーティリティクラスに変換されない値を指定した場合、以下のいずれかで出力されます。

1. 単純にstyle属性にインライン出力される。
2. -{prop}: & --{prop} の組み合わせで出力される。
3. --{prop}だけ出力されるもの（特殊）

<Lism op='0.75'>contents</Lism>
↓
<div style="opacity:0.75">contents</div>

<Lism fz='20px'>contents</Lism>
// ↓　出力
<div class="-fz:" style="--fz:20px">contents</div>

ブレイクポイントでの切り替えに対応しているような主要なプロパティは、この-{prop}: & --{prop} で出力されます。

<Lism bd bdc="#000" bdw="2px">...</Lism>

// ↓　出力
<div class="bd:" style="--bdc:#000;--bdw:2px">...</div>

-bd:や-trs:と併用するようなプロパティがこれに当てはまります。

対応するProp Classがない場合でも、u:からはじめることでその後ろの文字列がユーティリティクラス名として出力されます。

<Lism p='u:hoge'>...</Lism>

↓

<div class="-p:hoge">...</div>

必要に応じて独自のクラス名を定義してCSSを追加しておくと、それを活用することができます。

.-p\;hoge{
  /* ... your styles ... */
}

CSS Props に対して"-"またはtrueを指定すると、変数なしで-{prop}:クラスのみを出力します。

<Lism p='-' bdrs>contents</Lism>
↓
<div class="-p: -bdrs:">contents</div>

CSS側で変数の中身を記述したい場合や、親と同じ変数を継承したい場合などに活用できます。

<Lism>コンポーネントを最終的に別の外部コンポーネントとして展開することができます。

import Image from 'next/image';

<Media as={Image} src='...' bxsh='2' bdrs='3' />

先に Lism Props を解析して class, style を生成してから、asで指定したコンポーネントに渡します。
Lismコンポーネント以外に対しても Lism Props を使いたい時に活用してください。

Lism Props としての処理をスキップしたいプロパティを指定できます。

asで指定した外部コンポートが受け取れるプロパティと Lism Props の名前が被っている場合など、外部コンポーネント用のプロパティであることを明示的にしたい時に便利です。

<Icon as={Hoge} exProps={{size:'1em'}} p='10' fz='l'>...</Icon>

上記のようにすることで、LismのIconコンポーネントでp, fz を受け取って処理し、Hogeという外部コンポーネント側で確実にsizeを受け取ることができます。
（現在は Lism 側では size は処理されませんが、exPropsで指定しておくと将来的に影響がでる心配がなくなります。）

pass-get に関するプロパティとして、passVarsを用意しています。

• passVars: --pass-{prop} を出力します。オブジェクト形式 {prop:value} で指定します。

State Props用の処理をスキップできます。<Spacer>や<Divider>、<Text>など、明らかに Layout Stateクラスがつかないような粒度のコンポーネントに対して内部的に指定されています。

Lism で使用できる CSS Propsは、レスポンシブに対応した形式で出力できるようになっています。

次の2通りの書き方があります。

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

どちらも最終的に出力されるHTMLは同じで、ユーティリティクラスとCSS変数のペア（-{prop}@{bp}: & --{bp}-{prop}）で出力されます。

<Lism p={['20', '30', '5rem']}>...</Lism>

<Lism p={{ base: '20', sm: '30', md: '5rem' }}>...</Lism>

<div class='-p:20 -p@sm -p@md' style='--sm-p:var(--s30);--md-p:5rem'>
  ...
</div>

途中のブレイクポイントをスキップする場合は次のようになります。

<Lism p={[null, null, '40']}>...</Lism>

<Lism p={{ md: '40' }}>...</Lism>

<div class='-p@md' style='--md-p:var(--s40)'>
  ...
</div>

デフォルトでレスポンシブ対応されていない（CSSが用意されていない）プロパティに関しては、SCSSによるカスタマイズを行うことで対応できます。