lism-css 0.9.4 → 0.10.1

package/packages/astro/types.ts

@@ -1,51 +1,19 @@
 /**
  * Astro 用の Lism Props 型
  *
- * Astro テンプレートではコンポーネント呼び出し時にジェネリクスを渡せないため、
- * React の ElementType に依存せず、as を任意の文字列で受け取る。
- * astroHTML.JSX の HTML 属性型を union し、as で要素を切り替えた際の
- * 要素固有属性（href, src 等）も受け入れられるようにする。
- *
  * @see https://github.com/withastro/roadmap/discussions/601
  * @see https://github.com/withastro/roadmap/discussions/398
  */
-import type { HTMLTag } from 'astro/types';
 import type { LismProps } from 'lism-css/lib/getLismProps';
-import type { LayoutType, CssValue } from 'lism-css/lib/types/LayoutProps';
-
-type AstroHTMLAttributesRaw = astroHTML.JSX.HTMLAttributes &
-	astroHTML.JSX.AnchorHTMLAttributes &
-	astroHTML.JSX.ImgHTMLAttributes &
-	astroHTML.JSX.ButtonHTMLAttributes &
-	astroHTML.JSX.FormHTMLAttributes &
-	astroHTML.JSX.InputHTMLAttributes &
-	astroHTML.JSX.SelectHTMLAttributes &
-	astroHTML.JSX.TextareaHTMLAttributes;
-
-/** LismProps と同名のキーを除外し、Lism 側の型を優先させる */
-type AstroHTMLAttributes = Omit<AstroHTMLAttributesRaw, keyof LismProps | keyof AstroLayoutProps>;
+import type { LayoutSpecificProps } from 'lism-css/lib/types/LayoutProps';
 
-/**
- * React では LayoutSpecificProps（判別可能ユニオン・12メンバー）を使用しているが、
- * Astro ではいまとのところジェネリクスを用いていないので AstroHTMLAttributes（8つの HTML 属性型の intersection）が
- * 常に全体に交差されるため、12パターン × 巨大な型で TS2590 が発生する。
- * React では ComponentPropsWithoutRef<T> の T が具体的な1要素に確定するため問題にならない。
- * Astro 用にはフラットな型を使用して回避する。
- *
- * NOTE: 将来的に Astro の Polymorphic 型を導入すれば、as の値から具体的な1要素に
- * 確定できるため、AstroHTMLAttributesRaw の巨大な intersection が不要になり、
- * LayoutSpecificProps も直接使用できる可能性がある。
- */
-interface AstroLayoutProps {
-	layout?: LayoutType;
-	flow?: CssValue;
-	autoFill?: boolean;
-	sideW?: CssValue;
-	mainW?: CssValue;
-	breakSize?: CssValue;
-}
+/** Polymorphic 型と組み合わせて使う共通ベース型 */
+export type AstroLismBaseProps = LismProps &
+  LayoutSpecificProps & {
+    exProps?: Record<string, unknown>;
+  };
 
-export interface AstroLismProps extends LismProps, AstroLayoutProps, AstroHTMLAttributes {
-	as?: HTMLTag;
-	exProps?: Record<string, unknown>;
-}
+/** layout が固定されたレイアウトコンポーネント向けベース型 */
+export type AstroLismFixedLayoutProps = Omit<LismProps, 'layout'> & {
+  exProps?: Record<string, unknown>;
+};

package/src/scss/__memo/_lh-auto-all.scss

@@ -4,15 +4,15 @@
  	→ 下限・上限を超える値がセットされている時、その値を継承できない。
  */
 :root {
-	--lh-min: 1.3em;
-	--lh-max: 1.9em;
+  --lh-min: 1.3em;
+  --lh-max: 1.9em;
 }
 // ---------------------------------------------------------------------
 
 // 全要素で --fz, --lh を受け取れるように
 :where(body *) {
-	font-size: var(--fz, inherit);
-	line-height: var(--lh, inherit);
+  font-size: var(--fz, inherit);
+  line-height: var(--lh, inherit);
 }
 
 // [style*="--fz:"]{
@@ -23,15 +23,15 @@
 *:not([style*="font-size"]),
 [style*="--fz:"], // --fzでフォントサイズ指定されているもの
 [class*="-fz\:"], {
-	--slope: 0.35; // 自動計算用の傾き
-	--base: calc(var(--lh, var(--root--lh)) * 1em); // 計算ように単位をつけておく
+  --slope: 0.35; // 自動計算用の傾き
+  --base: calc(var(--lh, var(--root--lh)) * 1em); // 計算ように単位をつけておく
 
-	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
-	line-height: clamp(
-		min(var(--lh-min), var(--base)),
-		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz, 1em))),
-		max(var(--lh-max), var(--base))
-	);
+  // 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+  line-height: clamp(
+    min(var(--lh-min), var(--base)),
+    calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz, 1em))),
+    max(var(--lh-max), var(--base))
+  );
 }
 
 // .-fz:などに対して--lh指定されてあった場合に上書きできる位置で

package/src/scss/__memo/_lh-auto-h.scss

@@ -2,20 +2,20 @@
  * タイポグラフィ
  */
 :root {
-	--lh-min: 1.3em;
-	--lh-max: 1.9em;
+  --lh-min: 1.3em;
+  --lh-max: 1.9em;
 }
 
 // ---------------------------------------------------------------------
 body {
-	--fz: 1em; // 計算用に --fz の単位をem化しておく
-	--lh: var(--root--lh); // 任意の値
+  --fz: 1em; // 計算用に --fz の単位をem化しておく
+  --lh: var(--root--lh); // 任意の値
 }
 
 // :where(body *),
 :where(:is(h1, h2, h3, h4, h5, h6, p)) {
-	font-size: var(--fz, inherit);
-	line-height: var(--lh, inherit);
+  font-size: var(--fz, inherit);
+  line-height: var(--lh, inherit);
 }
 
 // [style*="--fz:"]{
@@ -30,21 +30,21 @@ body {
 [style*="--fz:"], // --fzでフォントサイズ指定されているもの
 :where(:is(h1, h2, h3, h4, h5, h6, p)):not([style*="font-size"]),
 [class*="-fz\:"] {
-	--slope: 0.35; // 自動計算用の傾き
-	--base: calc(var(--lh) * 1em); // 計算ように単位をつけておく
-
-	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
-	line-height: clamp(
-		min(var(--lh-min), var(--base)),
-		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz))),
-		max(var(--lh-max), var(--base))
-	);
-	font-size: var(--fz);
+  --slope: 0.35; // 自動計算用の傾き
+  --base: calc(var(--lh) * 1em); // 計算ように単位をつけておく
+
+  // 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+  line-height: clamp(
+    min(var(--lh-min), var(--base)),
+    calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz))),
+    max(var(--lh-max), var(--base))
+  );
+  font-size: var(--fz);
 }
 
 // --lh指定されている要素自身はその値で上書き。→ .-lh: 使ってもらう?
 [style*='--lh:'] {
-	line-height: var(--lh);
+  line-height: var(--lh);
 }
 
 // ---------------------------------------------------------------------

package/src/scss/__memo/_lh-manual.scss

@@ -1,36 +1,36 @@
 :root {
-	// 各fzサイズ用のline-height
-	--ls--6L--lh: 1.2;
-	--ls--5L--lh: 1.4;
-	--ls--4L--lh: 1.4;
-	--ls--3L--lh: 1.5;
-	--ls--2L--lh: 1.6;
-	--ls--L--lh: 1.6;
+  // 各fzサイズ用のline-height
+  --ls--6L--lh: 1.2;
+  --ls--5L--lh: 1.4;
+  --ls--4L--lh: 1.4;
+  --ls--3L--lh: 1.5;
+  --ls--2L--lh: 1.6;
+  --ls--L--lh: 1.6;
 
-	// 1,
-	// 1.25, 5XL
-	// 1.4 4XL
-	// 1.5, 2XL, 3XL,
-	// 1.6, L XL
-	// 1.75 base
-	// 2,
-	// 2.5
+  // 1,
+  // 1.25, 5XL
+  // 1.4 4XL
+  // 1.5, 2XL, 3XL,
+  // 1.6, L XL
+  // 1.75 base
+  // 2,
+  // 2.5
 
-	// 1, xs    sm   md,  lg  xl
-	// 1, 1.25, 1.5. 1.75, 2,  2.5
+  // 1, xs    sm   md,  lg  xl
+  // 1, 1.25, 1.5. 1.75, 2,  2.5
 }
 
 h1 {
-	--lh: var(--ls--4L--lh);
+  --lh: var(--ls--4L--lh);
 }
 h2 {
-	--lh: var(--ls--3L--lh);
+  --lh: var(--ls--3L--lh);
 }
 h3 {
-	--lh: var(--ls--2L--lh);
+  --lh: var(--ls--2L--lh);
 }
 h4 {
-	--lh: var(--ls--L--lh);
+  --lh: var(--ls--L--lh);
 }
 // h5 {}
 // h6 {}
@@ -39,20 +39,20 @@ h4 {
 // .-fz\:s {}
 // .-fz\:m {}
 .-fz\:l {
-	--lh: var(--ls--L--lh);
+  --lh: var(--ls--L--lh);
 }
 .-fz\:xl {
-	--lh: var(--ls--2L--lh);
+  --lh: var(--ls--2L--lh);
 }
 .-fz\:2xl {
-	--lh: var(--ls--3L--lh);
+  --lh: var(--ls--3L--lh);
 }
 .-fz\:3xl {
-	--lh: var(--ls--4L--lh);
+  --lh: var(--ls--4L--lh);
 }
 .-fz\:4xl {
-	--lh: var(--ls--5L--lh);
+  --lh: var(--ls--5L--lh);
 }
 .-fz\:5xl {
-	--lh: var(--ls--6L--lh);
+  --lh: var(--ls--6L--lh);
 }

package/src/scss/_auto_output.scss

@@ -19,58 +19,58 @@ base_type:
 
 // マップから値を取得し、nullの場合はデフォルト値を返す
 @function map_get_with_default($map, $key, $default) {
-	$value: map.get($map, $key);
-	@if $value {
-		@return $value;
-	} @else {
-		@return $default;
-	}
+  $value: map.get($map, $key);
+  @if $value {
+    @return $value;
+  } @else {
+    @return $default;
+  }
 }
 
 @function get_important_str($is_important) {
-	@if $is_important == 1 {
-		@return ' !important';
-	}
-	@return '';
+  @if $is_important == 1 {
+    @return ' !important';
+  }
+  @return '';
 }
 
 // 各プロパティのユーティリティクラス
 @mixin echoUtilities($key, $prop, $utilities, $base_type, $important) {
-	@each $ukey, $value in $utilities {
-		$selector: '';
-
-		// ,で複数指定
-		// $has_comma: string.index($ukey, ',');
-		// @if $has_comma {
-		// 	$ukeys: string.split($ukey, ',');
-
-		// 	@for $i from 1 through list.length($ukeys) {
-		// 		$val_key: list.nth($ukeys, $i);
-		// 		$_selector: '.-#{$key}\\:#{$val_key}';
-		// 		@if $i == 1 {
-		// 			$selector: $_selector;
-		// 		} @else {
-		// 			$selector: $selector + ',' + $_selector;
-		// 		}
-		// 	}
-		// } @else {
-		$selector: '.-#{$key}\\:#{$ukey}';
-		// }
-
-		// valueが(prop:val)で詳細に明示されている場合
-		@if (meta.type-of($value) == map) {
-			// マップ形式の場合は何もしない（将来の拡張用）
-		} @else if $base_type == 2 {
-			// important は [class*=] についてるので不要
-			#{$selector} {
-				--#{$key}: #{$value};
-			}
-		} @else {
-			#{$selector} {
-				#{$prop}: #{$value} #{get_important_str($important)};
-			}
-		}
-	}
+  @each $ukey, $value in $utilities {
+    $selector: '';
+
+    // ,で複数指定
+    // $has_comma: string.index($ukey, ',');
+    // @if $has_comma {
+    // 	$ukeys: string.split($ukey, ',');
+
+    // 	@for $i from 1 through list.length($ukeys) {
+    // 		$val_key: list.nth($ukeys, $i);
+    // 		$_selector: '.-#{$key}\\:#{$val_key}';
+    // 		@if $i == 1 {
+    // 			$selector: $_selector;
+    // 		} @else {
+    // 			$selector: $selector + ',' + $_selector;
+    // 		}
+    // 	}
+    // } @else {
+    $selector: '.-#{$key}\\:#{$ukey}';
+    // }
+
+    // valueが(prop:val)で詳細に明示されている場合
+    @if (meta.type-of($value) == map) {
+      // マップ形式の場合は何もしない（将来の拡張用）
+    } @else if $base_type == 2 {
+      // important は [class*=] についてるので不要
+      #{$selector} {
+        --#{$key}: #{$value};
+      }
+    } @else {
+      #{$selector} {
+        #{$prop}: #{$value} #{get_important_str($important)};
+      }
+    }
+  }
 }
 
 /*
@@ -82,74 +82,74 @@ base_type:
  */
 $bp_support_list: (); // list
 @each $key, $data in setting.$props {
-	$prop: map_get_with_default($data, prop, ''); // 対応するCSSプロパティ名
-	$bp_support: map_get_with_default($data, bp, 0);
-	$isVar: map_get_with_default($data, isVar, 0);
-	$alwaysVar: map_get_with_default($data, alwaysVar, 0);
-	$important: map_get_with_default($data, important, setting.$default_important);
-
-	@if $prop == '' {
-		@continue;
-	}
-
-	// 基本的なbaseセレクタタイプ: 基本は0, BPサポートオンなら 1.
-	$base_type: 0;
-
-	// Memo: == 1 ではないのは、'sm' や 'md' などの指定も入ってくる可能性があるから
-	@if $bp_support != 0 {
-		$base_type: 1;
-	}
-
-	@if $alwaysVar == 1 {
-		$base_type: 2;
-	}
-
-	//  isVar が 1 なら base_type は 0
-	@if $isVar == 1 {
-		$base_type: 0;
-	}
-
-	@if $base_type == 2 {
-		.-#{$key},
-		[class*='-#{$key}:'] {
-			#{$prop}: var(--#{$key}) #{get_important_str($important)};
-		}
-	} @else if $base_type == 1 {
-		.-#{$key} {
-			#{$prop}: var(--#{$key}) #{get_important_str($important)};
-		}
-	}
-
-	// utilityクラスのリストを $data から取得
-	$utilities: map.get($data, utilities);
-	$exUtilities: map.get($data, exUtility);
-
-	// ユーティリティクラスのリストが取得できていれば出力
-	@if $utilities {
-		@include echoUtilities($key, $prop, $utilities, $base_type, $important);
-	}
-
-	// exUtilityが存在する場合の処理
-	@if $exUtilities {
-		@each $exKey, $exValue in $exUtilities {
-			// 文字列の場合はそのまま展開
-			@if (meta.type-of($exValue) == map) {
-				.-#{$key}\:#{$exKey} {
-					@each $_p, $_v in $exValue {
-						#{$_p}: #{$_v} #{get_important_str($important)};
-					}
-				}
-			}
-		}
-	}
-
-	// BPクラスを出力するプロパティのリストを作成
-
-	// $bp_support が 1 または 文字列（'sm','md','lg'などかどうか）
-	// Memo: 文字列がくるのは、ユーザーカスタマイズでプロパティ個別にサポートするブレイクポイントを変更したい時。
-	@if $bp_support == 1 or meta.type-of($bp_support) == string {
-		$bp_support_list: list.append($bp_support_list, $key);
-	}
+  $prop: map_get_with_default($data, prop, ''); // 対応するCSSプロパティ名
+  $bp_support: map_get_with_default($data, bp, 0);
+  $isVar: map_get_with_default($data, isVar, 0);
+  $alwaysVar: map_get_with_default($data, alwaysVar, 0);
+  $important: map_get_with_default($data, important, setting.$default_important);
+
+  @if $prop == '' {
+    @continue;
+  }
+
+  // 基本的なbaseセレクタタイプ: 基本は0, BPサポートオンなら 1.
+  $base_type: 0;
+
+  // Memo: == 1 ではないのは、'sm' や 'md' などの指定も入ってくる可能性があるから
+  @if $bp_support != 0 {
+    $base_type: 1;
+  }
+
+  @if $alwaysVar == 1 {
+    $base_type: 2;
+  }
+
+  //  isVar が 1 なら base_type は 0
+  @if $isVar == 1 {
+    $base_type: 0;
+  }
+
+  @if $base_type == 2 {
+    .-#{$key},
+    [class*='-#{$key}:'] {
+      #{$prop}: var(--#{$key}) #{get_important_str($important)};
+    }
+  } @else if $base_type == 1 {
+    .-#{$key} {
+      #{$prop}: var(--#{$key}) #{get_important_str($important)};
+    }
+  }
+
+  // utilityクラスのリストを $data から取得
+  $utilities: map.get($data, utilities);
+  $exUtilities: map.get($data, exUtility);
+
+  // ユーティリティクラスのリストが取得できていれば出力
+  @if $utilities {
+    @include echoUtilities($key, $prop, $utilities, $base_type, $important);
+  }
+
+  // exUtilityが存在する場合の処理
+  @if $exUtilities {
+    @each $exKey, $exValue in $exUtilities {
+      // 文字列の場合はそのまま展開
+      @if (meta.type-of($exValue) == map) {
+        .-#{$key}\:#{$exKey} {
+          @each $_p, $_v in $exValue {
+            #{$_p}: #{$_v} #{get_important_str($important)};
+          }
+        }
+      }
+    }
+  }
+
+  // BPクラスを出力するプロパティのリストを作成
+
+  // $bp_support が 1 または 文字列（'sm','md','lg'などかどうか）
+  // Memo: 文字列がくるのは、ユーザーカスタマイズでプロパティ個別にサポートするブレイクポイントを変更したい時。
+  @if $bp_support == 1 or meta.type-of($bp_support) == string {
+    $bp_support_list: list.append($bp_support_list, $key);
+  }
 }
 // @debug $bp_support_list;
 
@@ -161,49 +161,49 @@ $bp_support_list: (); // list
 // setting.$breakpoints のキーだけを抽出したリストを取得
 $bp_names: map.keys(setting.$breakpoints);
 $bp_outputs: (
-	'sm': [],
-	'md': [],
-	'lg': [],
-	'xl': [],
+  'sm': [],
+  'md': [],
+  'lg': [],
+  'xl': [],
 );
 /* __stylelint-disable */
 // BPサポートしてるプロパティのリストをループ
 @each $key in $bp_support_list {
-	$prop_data: map.get(setting.$props, $key);
-	$prop_bp_data: map.get($prop_data, bp);
-	$support_bp: setting.$common_support_bp;
-
-	@if (meta.type-of($prop_bp_data) == string) {
-		// サポートするブレイクポイントの上書き指定があればそれをセット
-		$support_bp: $prop_bp_data;
-	}
-	//  @else if ($prop_bp_data == 0) {
-	// 	// 0 が渡されれば、BPサポートを無効にする
-	// 	$output_bps: 0;
-	// }
-
-	$flag: true;
-	$i: 1;
-	@while $flag {
-		$bp: list.nth($bp_names, $i);
-
-		// mapから現在のリストを取得→リスト追加→更新されたリストを再びマージ
-		$_bp_list: map.get($bp_outputs, $bp);
-		$_bp_list: list.join($_bp_list, $key);
-		$bp_outputs: map.merge(
-			$bp_outputs,
-			(
-				$bp: $_bp_list,
-			)
-		);
-
-		// サポートするBPまで辿り着いたら終了
-		@if $bp == $support_bp or $i == list.length($bp_names) {
-			$flag: false;
-		}
-
-		$i: $i + 1;
-	}
+  $prop_data: map.get(setting.$props, $key);
+  $prop_bp_data: map.get($prop_data, bp);
+  $support_bp: setting.$common_support_bp;
+
+  @if (meta.type-of($prop_bp_data) == string) {
+    // サポートするブレイクポイントの上書き指定があればそれをセット
+    $support_bp: $prop_bp_data;
+  }
+  //  @else if ($prop_bp_data == 0) {
+  // 	// 0 が渡されれば、BPサポートを無効にする
+  // 	$output_bps: 0;
+  // }
+
+  $flag: true;
+  $i: 1;
+  @while $flag {
+    $bp: list.nth($bp_names, $i);
+
+    // mapから現在のリストを取得→リスト追加→更新されたリストを再びマージ
+    $_bp_list: map.get($bp_outputs, $bp);
+    $_bp_list: list.join($_bp_list, $key);
+    $bp_outputs: map.merge(
+      $bp_outputs,
+      (
+        $bp: $_bp_list,
+      )
+    );
+
+    // サポートするBPまで辿り着いたら終了
+    @if $bp == $support_bp or $i == list.length($bp_names) {
+      $flag: false;
+    }
+
+    $i: $i + 1;
+  }
 }
 // @debug $bp_outputs;
 
@@ -213,26 +213,26 @@ $bp_outputs: (
   （ @containerの出力数を少なくするために出力は最後にまとめている。)
  */
 @each $bp, $data in $bp_outputs {
-	@include query.bp-up($bp) {
-		@each $key in $data {
-			$prop_data: map.get(setting.$props, $key);
-			$prop_name: map.get($prop_data, prop);
-			$isVar: map_get_with_default($prop_data, isVar, 0);
-			$overwriteBaseVar: map_get_with_default($prop_data, overwriteBaseVar, 0);
-			$important: map_get_with_default($prop_data, important, setting.$default_important);
-
-			@if $isVar == 1 {
-				$important: 1;
-			}
-
-			.-#{$key}_#{$bp} {
-				#{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
-
-				// 常に --prop でそのBPの値を取得できるように
-				@if $overwriteBaseVar == 1 {
-					--#{$key}: var(--#{$key}_#{$bp}) !important;
-				}
-			}
-		}
-	}
+  @include query.bp-up($bp) {
+    @each $key in $data {
+      $prop_data: map.get(setting.$props, $key);
+      $prop_name: map.get($prop_data, prop);
+      $isVar: map_get_with_default($prop_data, isVar, 0);
+      $overwriteBaseVar: map_get_with_default($prop_data, overwriteBaseVar, 0);
+      $important: map_get_with_default($prop_data, important, setting.$default_important);
+
+      @if $isVar == 1 {
+        $important: 1;
+      }
+
+      .-#{$key}_#{$bp} {
+        #{$prop_name}: var(--#{$key}_#{$bp}) #{get_important_str($important)};
+
+        // 常に --prop でそのBPの値を取得できるように
+        @if $overwriteBaseVar == 1 {
+          --#{$key}: var(--#{$key}_#{$bp}) !important;
+        }
+      }
+    }
+  }
 }