lism-css 0.22.2 → 0.23.0

package/dist/lib/types/CustomTraitRegistry.d.ts

@@ -0,0 +1,9 @@
+/**
+ * lism.config.js の traits で追加した trait キーを型側へ解禁するための拡張ポイント。
+ *
+ * プロジェクト直下の lism-env.d.ts から `declare module 'lism-css'` で拡張される。
+ * trait は presence ベース（真偽でクラス付与を制御）なので値は boolean（既定 trait の `ExtractTraitValue<string>` に一致）。
+ */
+export type CustomTraitValue = boolean;
+export interface CustomTraitRegistry {
+}

package/dist/lib/types/FullModeRegistry.d.ts

@@ -0,0 +1,26 @@
+/**
+ * lism.config.js の `isFullMode: true`（full preset をコンポーネント側にも適用するモード）を
+ * 型側へ反映するための拡張ポイント。
+ *
+ * full モードでは isVar 系を除く全 props が responsive になる（`props-full.ts` のランタイム挙動と一致）が、
+ * 静的型は lism.config.js の `.js` の値を読めないため、デフォルトでは defaults 由来のまま追従しない。
+ * このレジストリを `declare module 'lism-css'` で拡張（= 何らかのキーを1つ以上付与）すると、
+ * {@link import('./PropValueTypes').PropValueTypes} が full 版に切り替わり、
+ * `pl` 等の本来 bp:0 の props でも BP 指定（配列・オブジェクト記法）が型エラーにならなくなる。
+ *
+ * ランタイム側の有効化はあくまで lism.config.js の `isFullMode` で行う。ここで切り替えるのは
+ * 「型が提示・許可する範囲」だけで、両者を一致させるのはユーザーの責務（`BreakpointRegistry` と同じ設計）。
+ *
+ * @example プロジェクト直下の型定義ファイル（例: `src/lism-env.d.ts`）で full モードを型に反映する
+ * ```ts
+ * import 'lism-css';
+ *
+ * declare module 'lism-css' {
+ *   interface FullModeRegistry {
+ *     enabled: true; // キー名は任意。1つでもキーがあれば full 版の型に切り替わる
+ *   }
+ * }
+ * ```
+ */
+export interface FullModeRegistry {
+}

package/dist/lib/types/PropValueTypes.d.ts

@@ -1,23 +1,24 @@
-import { TOKENS, PROPS, BREAK_POINTS } from '../../../config/index';
+import { TOKENS, PROPS } from '../../../config/index';
 import { WithArbitraryString, ArrayElement, ExtractArrayValues, ExtractObjectKeys, ExtractPropertyValue } from './utils';
 import { MakeResponsive } from './ResponsiveProps';
+import { FullModeRegistry } from './FullModeRegistry';
 type PropsConfig = typeof PROPS;
 type TokensConfig = typeof TOKENS;
 /**
- * TOKENS のキーから対応する値の型を取得
- * - 配列形式: TOKENS[K] が配列の場合、その要素の型
- * - オブジェクト形式: TOKENS[K].values が配列の場合、その要素の型
+ * TOKENS のキーから対応する値の型（= トークンのキー集合）を取得
+ * - 配列 / Set 形式: その要素の型
+ * - 値付きフラットマップ（{ key: value }）: その keyof（トークンのキー集合）
  *
  * @example
  * ```ts
  * type FzValues = TokenConfigValues<'fz'>;
- * // 結果: 'root' | 'base' | '5xl' | ...
+ * // 結果: 'base' | '5xl' | ...
  *
  * type SpaceValues = TokenConfigValues<'space'>;
  * // 結果: '5' | '10' | '15' | ...
  * ```
  */
-type TokenConfigValues<K extends keyof TokensConfig> = TokensConfig[K] extends readonly unknown[] ? ArrayElement<TokensConfig[K]> : ExtractArrayValues<TokensConfig[K], 'values'>;
+type TokenConfigValues<K extends keyof TokensConfig> = TokensConfig[K] extends readonly unknown[] ? ArrayElement<TokensConfig[K]> : TokensConfig[K] extends object ? keyof TokensConfig[K] & string : never;
 /**
  * token プロパティから対応する TOKENS の値を抽出
  */
@@ -33,15 +34,13 @@ type ExtractPropValues<T> = ExtractArrayValues<T, 'presets'> | ExtractObjectKeys
  * - ない場合: string | number（フォールバック）
  */
 type PropValueType<T> = ExtractPropValues<T> extends never ? string | number | boolean : WithArbitraryString<ExtractPropValues<T>> | number | boolean | null;
-/** bp で指定できるブレークポイント名（'lg' など個別指定用） */
-type BreakpointName = (typeof BREAK_POINTS)[number];
 /**
  * bp プロパティでレスポンシブ（配列・オブジェクト形式）が有効かを判定
  * - bp 未設定 / bp: 0 → false
- * - bp: 1 → 全 BP からユーティリティクラス生成
- * - bp: 'lg' 等 → 指定 BP 以降のみ（配列形式の型は bp: 1 と同様に許可）
+ * - bp: 1 → 有効 BP すべてからユーティリティクラス生成
+ * - bp: ['sm', 'md'] 等のリスト形式 → 列挙した BP のみ出力（型は bp: 1 と同様に許可）
  */
-type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 0 ? false : ExtractPropertyValue<T, 'bp'> extends 1 | BreakpointName ? true : false;
+type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 0 ? false : ExtractPropertyValue<T, 'bp'> extends 1 | readonly unknown[] ? true : false;
 type AllPropKeys = keyof PropsConfig;
 /**
  * bp が有効（1 またはブレークポイント名）なプロパティのキーを抽出
@@ -65,16 +64,49 @@ export type ResponsivePropValueTypes = {
 export type NonResponsivePropValueTypes = {
     [K in PropsWithoutBreakpoint]?: PropValueType<PropsConfig[K]>;
 };
+/** defaults 由来の Props 型（full モード未適用時のデフォルト） */
+type DefaultPropValueTypes = MakeResponsive<ResponsivePropValueTypes> & NonResponsivePropValueTypes;
+/**
+ * isVar 系（state 変数扱い・full preset の対象外）の prop かを判定。
+ * isVar 未設定の prop は `ExtractPropertyValue` が never を返す。`1 extends X` の向きで
+ * 判定することで、X が never でも 1 でもない（= false）になり、tuple ラップ時の
+ * `[never] extends [1]` が true に化ける罠を避ける。
+ */
+type IsVarProp<T> = 1 extends ExtractPropertyValue<T, 'isVar'> ? true : false;
+/**
+ * full モードでレスポンシブになる prop のキー。
+ * - isVar 系以外: full preset が bp:1 にするため常にレスポンシブ
+ * - isVar 系: props-full.ts の対象外なのでデフォルトの bp 判定のまま
+ */
+type FullPropsWithBreakpoint = {
+    [K in AllPropKeys]: IsVarProp<PropsConfig[K]> extends true ? (HasBreakpointSupport<PropsConfig[K]> extends true ? K : never) : K;
+}[AllPropKeys];
+type FullPropsWithoutBreakpoint = Exclude<AllPropKeys, FullPropsWithBreakpoint>;
+/** full モード適用時の Props 型（isVar 系を除く全 props がレスポンシブ） */
+type FullPropValueTypes = MakeResponsive<{
+    [K in FullPropsWithBreakpoint]?: PropValueType<PropsConfig[K]>;
+}> & {
+    [K in FullPropsWithoutBreakpoint]?: PropValueType<PropsConfig[K]>;
+};
+/**
+ * FullModeRegistry が module augmentation で拡張されている（= キーが1つ以上ある）か。
+ * 空 interface の `keyof` は never。`[never] extends [never]` の tuple ラップで
+ * naked never の分配（条件型が never に潰れる）を回避している（HasBreakpointSupport と同手法）。
+ */
+type IsFullModeAdvertised = [keyof FullModeRegistry] extends [never] ? false : true;
 /**
  * PROPS 設定から生成される Props 型（レスポンシブ対応含む）
  * - bp が有効なプロパティ: レスポンシブ対応（配列・オブジェクト形式可）
  * - bp なしのプロパティ: 単一値のみ
  * - presets/utils/token なしのプロパティ: string | number（フォールバック）
  *
+ * {@link FullModeRegistry} が拡張されている場合は full 版に切り替わり、isVar 系を除く
+ * 全 props がレスポンシブになる（lism.config.js の isFullMode に型を追従させるための opt-in）。
+ *
  * @example
  * ```ts
  * // bp が有効なプロパティ（fz など）
- * fz?: 'root' | 'base' | ... | ['root', 'base'] | { base: 'root', md: 'base' }
+ * fz?: 'base' | 'l' | ... | ['base', 'l'] | { base: 'base', md: 'l' }
  *
  * // bp なしのプロパティ（fw など）
  * fw?: 'thin' | 'light' | 'normal' | ...
@@ -83,5 +115,5 @@ export type NonResponsivePropValueTypes = {
  * bg?: Responsive<string | number>
  * ```
  */
-export type PropValueTypes = MakeResponsive<ResponsivePropValueTypes> & NonResponsivePropValueTypes;
+export type PropValueTypes = IsFullModeAdvertised extends true ? FullPropValueTypes : DefaultPropValueTypes;
 export {};

package/dist/lib/types/ResponsiveProps.d.ts

@@ -1,31 +1,75 @@
-import { BREAK_POINTS_ALL } from '../../../config/index';
 import { LimitedArray } from './utils';
-/** 全ブレイクポイントキー（'base' を含む） */
-type BreakpointKey = (typeof BREAK_POINTS_ALL)[number];
-/** ブレイクポイント数（5: base, sm, md, lg, xl） */
-type BreakpointCount = (typeof BREAK_POINTS_ALL)['length'];
-/** ブレイクポイント数を上限とする配列型（1〜5要素） */
-type ResponsiveArray<T> = LimitedArray<T | null, BreakpointCount>;
+/**
+ * 型が「広告する（補完・許可する）」ブレイクポイントのレジストリ。
+ *
+ * パッケージのデフォルト広告は `sm` / `md` / `lg` のみ。
+ * `xl` / `xs` を使うプロジェクトは、自前の `.d.ts` で `declare module 'lism-css'` により
+ * この interface を拡張すると、`Responsive<T>` の
+ * オブジェクトキー（`{ xl: ... }` など）と配列記法の最大長が連動して広がる。
+ *
+ * ランタイム（`getBpData` の解釈・配列記法の位置）は `base/sm/md/lg/xl` を
+ * 固定で保持しており、ここで切り替えるのは「型が提示・許可するキーの範囲」だけ。
+ * これにより「CSS は出力されないのに型では常に許される」xl の非対称を解消する。
+ *
+ * @example プロジェクト側の型定義ファイル（例: `src/lism.d.ts`）で xl / xs を解禁する
+ * ```ts
+ * import 'lism-css';
+ *
+ * declare module 'lism-css' {
+ *   interface BreakpointRegistry {
+ *     xl: true; // 配列の5要素目 [.., xl] と { xl: ... } を解禁
+ *     xs: true; // { xs: ... } を解禁（xs は配列記法では書けない）
+ *   }
+ * }
+ * ```
+ */
+export interface BreakpointRegistry {
+    sm: true;
+    md: true;
+    lg: true;
+}
+/** 広告するブレイクポイントキー（`base` を除く。文字列キーのみ抽出して string 制約を満たす） */
+type AdvertisedBpKey = Extract<keyof BreakpointRegistry, string>;
+/**
+ * 配列記法の位置順（`base` を除く）。位置は固定の契約（変更しない）。
+ * `xs` はこの並びに含めない（= 配列記法では書けず、オブジェクト記法のみ）。
+ */
+type ArrayBpSequence = ['sm', 'md', 'lg', 'xl'];
+/** タプルのうち `Keys` に含まれる要素だけを残す */
+type FilterByKeys<Tuple extends readonly unknown[], Keys, Acc extends unknown[] = []> = Tuple extends readonly [infer Head, ...infer Rest] ? FilterByKeys<Rest, Keys, Head extends Keys ? [...Acc, Head] : Acc> : Acc;
+/**
+ * 広告する配列の最大長 = base(1) + 配列対象 BP のうち広告されている数。
+ * `extends infer N extends number` で number へ制約し、LimitedArray の N 制約を満たす。
+ */
+type ArrayMaxLength<Bp extends string> = [unknown, ...FilterByKeys<ArrayBpSequence, Bp>]['length'] extends infer N extends number ? N : never;
+/**
+ * 広告キーを明示的に受け取るレスポンシブ型のコア。
+ * 公開用の {@link Responsive} は `Bp` に `keyof BreakpointRegistry` を差し込む。
+ * （型テストで「デフォルト / +xl / +xs」をmodule augmentationなしに検証するためにエクスポートしている）
+ */
+export type ResponsiveFor<T, Bp extends string> = T | LimitedArray<T | null, ArrayMaxLength<Bp>> | Partial<Record<'base' | Bp, T>>;
 /**
  * プロパティ値をレスポンシブ対応の型に変換するユーティリティ型
  *
- * 単一の値、配列形式（最大5要素）、ブレイクポイントオブジェクト形式のいずれかを受け付ける
+ * 単一の値、配列形式（位置は `[base, sm, md, lg, xl]` で固定）、
+ * ブレイクポイントオブジェクト形式のいずれかを受け付ける。
+ * 許可されるキー・配列長はデフォルトで `base/sm/md/lg`（xl/xs は {@link BreakpointRegistry} の拡張で解禁）。
  *
  * @example
  * ```ts
  * type FzProp = Responsive<'s' | 'm' | 'l'>;
- * // 結果:
+ * // 結果（デフォルト広告 sm/md/lg のとき）:
  * // | 's' | 'm' | 'l'
- * // | ['s' | 'm' | 'l'] | ['s' | 'm' | 'l', 's' | 'm' | 'l'] | ... (最大5要素)
- * // | { base?: 's' | 'm' | 'l'; sm?: 's' | 'm' | 'l'; md?: ...; lg?: ...; xl?: ... }
+ * // | ['s' | 'm' | 'l'] | ... (最大4要素 [base, sm, md, lg])
+ * // | { base?: ...; sm?: ...; md?: ...; lg?: ... }
  *
  * // 使用例
  * const a: FzProp = 'm';                           // 単一値
- * const b: FzProp = ['s', 'm', 'l'];               // 配列形式（最大5要素）
+ * const b: FzProp = ['s', 'm', 'l'];               // 配列形式
  * const c: FzProp = { base: 's', md: 'l' };        // オブジェクト形式
  * ```
  */
-export type Responsive<T> = T | ResponsiveArray<T> | Partial<Record<BreakpointKey, T>>;
+export type Responsive<T> = ResponsiveFor<T, AdvertisedBpKey>;
 /**
  * オブジェクト型の各プロパティをレスポンシブ対応に変換するユーティリティ型
  *

package/dist/lib/types/ResponsiveProps.module-augmentation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/warnUnsupportedBp.js

@@ -12,7 +12,7 @@ function i(s) {
   if (n.has(s)) return;
   n.add(s);
   const e = o[s], t = [`[lism-css] \`${s}\` does not support breakpoint values by default.`];
-  e && t.push(`  - Use the logical property \`${e}\` instead`), t.push(`  - ${e ? "Or e" : "E"}nable it via SCSS $props: \`'${s}': ( bp: 1 )\``), t.push("  Docs: https://lism-css.com/en/docs/customize/"), t.push("  * If you've already customized this via SCSS, you can ignore this warning."), console.warn(t.join(`
+  e && t.push(`  - Use the logical property \`${e}\` instead`), t.push(`  - ${e ? "Or e" : "E"}nable it via SCSS $props: \`'${s}': ( bp: 1 )\``), t.push("  Docs: https://lism-css.com/en/docs/customize/scss/"), t.push("  * If you've already customized this via SCSS, you can ignore this warning."), console.warn(t.join(`
 `));
 }
 export {

package/dist/scss/auto_output.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "description": "Lism CSS is a layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",
@@ -12,22 +12,21 @@
     "astro-component",
     "react-component"
   ],
-  "bin": {
-    "lism-css": "./bin/cli.mjs"
-  },
   "files": [
     "dist",
     "config.js",
     "config.d.ts",
-    "vite-plugin.js",
-    "bin",
     "packages",
     "src/scss"
   ],
   "type": "module",
   "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./config.js": "./config.js",
     "./config": {
       "import": "./dist/config/index.js",
@@ -37,12 +36,22 @@
       "import": "./dist/config/default-config.js",
       "types": "./dist/config/default-config.d.ts"
     },
-    "./vite-plugin": "./vite-plugin.mjs",
+    "./config/helper": {
+      "import": "./dist/config/helper.js",
+      "types": "./dist/config/helper.d.ts"
+    },
+    "./config/defaults/*": {
+      "import": "./dist/config/defaults/*.js",
+      "types": "./dist/config/defaults/*.d.ts"
+    },
+    "./config/presets/*": {
+      "import": "./dist/config/presets/*.js",
+      "types": "./dist/config/presets/*.d.ts"
+    },
     "./lib/*": {
-      "import": "./dist/lib/*",
+      "import": "./dist/lib/*.js",
       "types": "./dist/lib/*.d.ts"
     },
-    "./bin/*": "./bin/*",
     "./react": {
       "import": "./dist/components/index.js",
       "types": "./dist/components/index.d.ts"
@@ -96,13 +105,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "autoprefixer": "^10.4.0",
-    "cssnano": "^7.0.0",
-    "glob": "^11.0.0 || ^13.0.0",
-    "postcss": "^8.4.0",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "sass": "^1.70.0"
+    "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -110,21 +114,6 @@
     },
     "@types/react-dom": {
       "optional": true
-    },
-    "autoprefixer": {
-      "optional": true
-    },
-    "cssnano": {
-      "optional": true
-    },
-    "glob": {
-      "optional": true
-    },
-    "postcss": {
-      "optional": true
-    },
-    "sass": {
-      "optional": true
     }
   },
   "sideEffects": false,
@@ -133,9 +122,10 @@
     "test": "pnpm vitest",
     "vitest": "vitest run",
     "typecheck": "tsc --noEmit && astro check --tsconfig packages/astro/tsconfig.json",
-    "build": "pnpm build:js && pnpm build:css",
+    "build": "pnpm build:js && pnpm build:css:only",
     "build:js": "vite build && pnpm exec tsc -p config/tsconfig.json",
-    "build:css": "tsx bin/script-build-css.js",
+    "build:css": "pnpm build:js && pnpm build:css:only",
+    "build:css:only": "tsx bin/script-build-css.js",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "pnpm lint:eslint && pnpm lint:style",
     "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx,astro}'",

package/src/scss/_auto_output.scss

@@ -94,9 +94,9 @@ $bp_support_list: (); // list
 
   // 基本的なbaseセレクタタイプ: 基本は0, BPサポートオンなら 1.
   $base_type: 0;
+  $has_bp_support: $bp_support == 1 or meta.type-of($bp_support) == list;
 
-  // Memo: == 1 ではないのは、'sm' や 'md' などの指定も入ってくる可能性があるから
-  @if $bp_support != 0 {
+  @if $has_bp_support {
     $base_type: 1;
   }
 
@@ -145,10 +145,11 @@ $bp_support_list: (); // list
 
   // BPクラスを出力するプロパティのリストを作成
 
-  // $bp_support が 1 または 文字列（'sm','md','lg'などかどうか）
-  // Memo: 文字列がくるのは、ユーザーカスタマイズでプロパティ個別にサポートするブレイクポイントを変更したい時。
-  @if $bp_support == 1 or meta.type-of($bp_support) == string {
+  // $bp_support が 1（有効BPすべて）/ リスト（出力BPの明示指定）かどうか
+  @if $has_bp_support {
     $bp_support_list: list.append($bp_support_list, $key);
+  } @else if $bp_support != 0 {
+    @warn "[lism-css] prop '#{$key}': bp must be 0, 1, or a breakpoint list; skipped.";
   }
 }
 // @debug $bp_support_list;
@@ -160,49 +161,61 @@ $bp_support_list: (); // list
  */
 // setting.$breakpoints のキーだけを抽出したリストを取得
 $bp_names: map.keys(setting.$breakpoints);
-$bp_outputs: (
-  'sm': [],
-  'md': [],
-  'lg': [],
-  'xl': [],
-);
+// min-width カスケード順は $breakpoints の正準順序（xs, sm, md, lg, xl）に従う。
+// 無効BP（サイズ0）は Step3 の query.bp-up でスキップされる。
+$bp_outputs: ();
+@each $bp in $bp_names {
+  $bp_outputs: map.merge(
+    $bp_outputs,
+    (
+      $bp: [],
+    )
+  );
+}
 /* __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;
+  @if (meta.type-of($prop_bp_data) == list) {
+    // ── リスト形式: 列挙された BP のみを exact 出力（範囲ではなく明示指定）──
+    $_prop_bp_list: $prop_bp_data;
+    @each $bp in $_prop_bp_list {
+      @if not map.has-key($bp_outputs, $bp) {
+        @warn "[lism-css] prop '#{$key}': bp '#{$bp}' is not a known breakpoint key; skipped.";
+      } @else {
+        // サイズ0（=$breakpoints で無効）の BP を明示指定しても出力されないため警告する
+        $_bp_size: map.get(setting.$breakpoints, $bp);
+        @if (not $_bp_size) or ($_bp_size == 0) {
+          @warn "[lism-css] prop '#{$key}': bp '#{$bp}' has no breakpoint size (disabled in $breakpoints); skipped.";
+        } @else {
+          $_bp_list: map.get($bp_outputs, $bp);
+          $_bp_list: list.join($_bp_list, $key);
+          $bp_outputs: map.merge(
+            $bp_outputs,
+            (
+              $bp: $_bp_list,
+            )
+          );
+        }
+      }
+    }
+  } @else {
+    // ── 範囲形式（1）──
+    // セマンティクス: $breakpoints にサイズが定義された有効BPすべてへ出力する。
+    // 無効BP（サイズ0）は Step3 の query.bp-up でスキップされる。
+    @each $bp in $bp_names {
+      // mapから現在のリストを取得→リスト追加→更新されたリストを再びマージ
+      $_bp_list: map.get($bp_outputs, $bp);
+      $_bp_list: list.join($_bp_list, $key);
+      $bp_outputs: map.merge(
+        $bp_outputs,
+        (
+          $bp: $_bp_list,
+        )
+      );
     }
-
-    $i: $i + 1;
   }
 }
 // @debug $bp_outputs;
@@ -227,7 +240,6 @@ $bp_outputs: (
 
       .-#{$key}_#{$bp} {
         @if $alwaysVar == 1 {
-          // state 変数扱い: --prop を単一情報源にし、--prop を上書きして property は var(--prop) を読む
           #{$prop_name}: var(--#{$key}) #{get_important_str($important)};
           --#{$key}: var(--#{$key}_#{$bp}) !important;
         } @else {