Lism

LismのCSS設計に対応した様々なプロパティを受け取ることができるようになっている汎用的なコンポーネントです。
何も指定がなければ、ただの<div>を返します。

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

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

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

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

<Lism>で受け取れる、Lism CSS 専用プロパティをLism Propsと呼んでいます。

出力する HTMLタグを指定できます。デフォルトはdivです。

<Lism tag='p' fz='l'>Lorem ipsum texts...</Lism>

↓

<p class="-fz:l">Lorem ipsum texts...</p>

現在のコンポーネントの主要なクラス名を指定できます。 <Lism>のクラス処理の中で優先度が高めの出力順となります。

<Lism p='10' lismClass='c--myComponent'>Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

lismClassに対するバリエーションクラスを出力できます。
lismClass に複数クラスが指定されている場合、先頭のクラスに対してバリエーションクラスを出力します。

<Lism lismClass='c--myComponent' variant='secondary'>Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent c--myComponent--secondary">Lorem ipsum texts...</div>

レイアウトモジュールを指定できます。例えばlayout='flow'とすると、.l--flowクラスが出力されます。

<Lism layout='flow'>Lorem ipsum texts...</Lism>

↓

<div class="l--flow">Lorem ipsum texts...</div>

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

import Image from 'next/image';

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

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

さらに、exProps には 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は不要ですが、外部コンポーネント用のプロパティを明示的に指定しておくと、将来的にも影響がでる心配がなくなります。）

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

主要な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>

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

例：position:relative用の -pos:rel クラスは、以下のどちらの書き方でも出力されます。

<Lism pos='relative'>...</Lism>
<Lism pos='rel'>...</Lism>

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

<div class="-pos:rel">...</div>

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

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

<Lism o='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>

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

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

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

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

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

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

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

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

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

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

<div class='-p_md' style='--p_md:var(--s40)'>
  ...
</div>

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

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

<Lism p=':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側で変数の中身を記述したい場合や、親と同じ変数を継承したい場合などに活用できます。

各プロパティごとに、対応するトークンがある場合の処理について。

• そのトークン専用のクラスがある場合は、そのクラスが出力されます。
  • 例: fz='l' の場合は -fz:l クラスが出力されます。
• 対応トークンがあるがクラスとして登録されていない場合、CSS変数がインラインスタイルで出力されます。
  • 例: c='red' の場合は class="-c"とstyle="--c:var(--red)" が出力されます。