lism-css 0.22.1 → 0.23.0-beta.0

package/src/scss/{_prop-config.scss → _prop-config.gen.scss}

@@ -8,7 +8,6 @@ $props: (
   'fz': (
     prop: 'font-size',
     utilities: (
-      'root': 'var(--fz--root)',
       'base': 'var(--fz--base)',
       '5xl': 'var(--fz--5xl)',
       '4xl': 'var(--fz--4xl)',
@@ -55,11 +54,26 @@ $props: (
     ),
   ),
   'lh': (
-    prop: 'line-height',
+    prop: '--hl',
     utilities: (
+      '1': '0px',
+      'base': 'var(--hl--base)',
+      'xs': 'var(--hl--xs)',
+      's': 'var(--hl--s)',
+      'l': 'var(--hl--l)',
     ),
-    exUtility: (
+    isVar: 1,
+  ),
+  'hl': (
+    prop: '--hl',
+    utilities: (
+      'base': 'var(--hl--base)',
+      'xs': 'var(--hl--xs)',
+      's': 'var(--hl--s)',
+      'l': 'var(--hl--l)',
     ),
+    bp: 1,
+    isVar: 1,
   ),
   'lts': (
     prop: 'letter-spacing',
@@ -69,7 +83,6 @@ $props: (
       'l': 'var(--lts--l)',
       'xl': 'var(--lts--xl)',
     ),
-    bp: 0,
   ),
   'ta': (
     prop: 'text-align',
@@ -104,7 +117,7 @@ $props: (
       'inline': 'inline',
       'inline-block': 'inline-block',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'o': (
     prop: 'opacity',
@@ -589,11 +602,11 @@ $props: (
         'gap': 'inherit',
       ),
     ),
-    bp: lg,
+    bp: 1,
   ),
   'cols': (
     prop: '--cols',
-    bp: lg,
+    bp: 1,
     isVar: 1,
   ),
   'rows': (
@@ -646,21 +659,21 @@ $props: (
   ),
   'gta': (
     prop: 'grid-template-areas',
-    bp: lg,
+    bp: 1,
   ),
   'gtc': (
     prop: 'grid-template-columns',
     utilities: (
       'subgrid': 'subgrid',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'gtr': (
     prop: 'grid-template-rows',
     utilities: (
       'subgrid': 'subgrid',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'gaf': (
     prop: 'grid-auto-flow',
@@ -675,21 +688,21 @@ $props: (
     utilities: (
       '1\\/1': '1 / 1',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'gc': (
     prop: 'grid-column',
     utilities: (
       '1\\/-1': '1 / -1',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'gr': (
     prop: 'grid-row',
     utilities: (
       '1\\/-1': '1 / -1',
     ),
-    bp: lg,
+    bp: 1,
   ),
   'ai': (
     prop: 'align-items',
@@ -829,3 +842,13 @@ $props: (
     bp: 1,
   ),
 );
+
+$breakpoints: (
+  'xs': 0,
+  'sm': '480px',
+  'md': '800px',
+  'lg': '1120px',
+  'xl': 0,
+);
+
+$default_important: 0;

package/src/scss/_setting.scss

@@ -1,20 +1,15 @@
 @use 'sass:map';
 @use 'sass:string';
-@use './prop-config' as props;
+@use './prop-config.gen' as props;
 
-$default_important: 0 !default;
+// $default_important: lism.config.js の defaultImportant を prop-config.gen 経由で既定値に読む。
+// `@use ... with ($default_important: ...)` で明示上書きされた場合は、!default が無効化されそちらが優先される。
+$default_important: props.$default_important !default;
 $is_container_query: 1 !default;
-$common_support_bp: 'md' !default;
 
+// breakpoints: サイズ 0 は「無効」（_query.scss の bp-up / bp-down がスキップする）。
 $breakpoints: () !default;
-$breakpoints: map.merge(
-  (
-    'sm': '480px',
-    'md': '800px',
-    'lg': '1120px',
-  ),
-  $breakpoints
-);
+$breakpoints: map.merge(props.$breakpoints, $breakpoints);
 
 $props: () !default;
 $props: map.deep-merge(props.$props, $props);

package/src/scss/auto_output.test.ts

@@ -0,0 +1,91 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import * as sass from 'sass';
+import { describe, expect, test } from 'vitest';
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
+
+const testProp = (bp: string) => `
+  $props: (
+    'zztest': (
+      prop: 'padding',
+      utilities: (
+        '10': '10px',
+      ),
+      bp: ${bp},
+      alwaysVar: 1,
+    ),
+  )
+`;
+
+function compileAutoOutput(settingOverrides: string): string {
+  const result = sass.compileString(
+    `
+@use './setting' with (
+${settingOverrides}
+);
+@use './auto_output';
+`,
+    {
+      url: pathToFileURL(resolve(currentDir, '__auto_output_test.scss')),
+      logger: {
+        warn: () => {},
+        debug: () => {},
+      },
+    }
+  );
+
+  return result.css;
+}
+
+describe('auto_output breakpoint output', () => {
+  test('bp: 1 outputs default enabled breakpoints only', () => {
+    const css = compileAutoOutput(testProp('1'));
+
+    expect(css).not.toContain('.-zztest_xs');
+    expect(css).toContain('.-zztest_sm');
+    expect(css).toContain('.-zztest_md');
+    expect(css).toContain('.-zztest_lg');
+    expect(css).not.toContain('.-zztest_xl');
+  });
+
+  test('bp: 1 outputs xs and xl when breakpoints define their sizes', () => {
+    const css = compileAutoOutput(`
+  $breakpoints: (
+    'xs': '360px',
+    'xl': '1440px',
+  ),
+${testProp('1')}
+`);
+
+    expect(css).toContain('.-zztest_xs');
+    expect(css).toContain('.-zztest_sm');
+    expect(css).toContain('.-zztest_md');
+    expect(css).toContain('.-zztest_lg');
+    expect(css).toContain('.-zztest_xl');
+  });
+
+  test('bp list outputs only explicitly listed breakpoints', () => {
+    const css = compileAutoOutput(`
+  $breakpoints: (
+    'xs': '360px',
+    'xl': '1440px',
+  ),
+${testProp("('sm', 'md')")}
+`);
+
+    expect(css).not.toContain('.-zztest_xs');
+    expect(css).toContain('.-zztest_sm');
+    expect(css).toContain('.-zztest_md');
+    expect(css).not.toContain('.-zztest_lg');
+    expect(css).not.toContain('.-zztest_xl');
+  });
+
+  test('bp string does not output breakpoint classes', () => {
+    const css = compileAutoOutput(testProp("'md'"));
+
+    expect(css).not.toContain('.-zztest_sm');
+    expect(css).not.toContain('.-zztest_md');
+    expect(css).not.toContain('.-zztest_lg');
+  });
+});

package/src/scss/base/index.scss

@@ -1,7 +1,5 @@
 @forward './tokens/tokens';
-@forward './tokens/typography';
-@forward './tokens/space';
-@forward './tokens/shadow';
+@forward './tokens/tokens.gen'; // tokens.ts のインライン値から自動生成されるトークン値
 
 // 各html要素のベーススタイル
 @forward './html';

package/src/scss/base/set/index.scss

@@ -4,3 +4,8 @@
 @forward './bleed';
 @forward './plain';
 @forward './revert';
+
+.set--s {
+  // 何も指定しなければ em 単位に変換する
+  --s-unit: 0.5em;
+}

package/src/scss/base/tokens/_tokens.gen.scss

@@ -0,0 +1,69 @@
+// このファイルは自動生成されます。直接編集しないでください（次回ビルド時に上書きされます）。
+// 生成元: コア → config/defaults/tokens.ts / 利用側 → defaults + lism.config.js の tokens
+:root {
+  --white: #fff;
+  --black: #000;
+  --fz--base: 1rem;
+  --fz--5xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 6));
+  --fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
+  --fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
+  --fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
+  --fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
+  --fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
+  --fz--m: 1em;
+  --fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
+  --fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
+  --fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
+  --hl--base: calc(var(--hl-unit) * 3);
+  --hl--xs: var(--hl-unit);
+  --hl--s: calc(var(--hl-unit) * 2);
+  --hl--l: calc(var(--hl-unit) * 4);
+  --lts--base: normal;
+  --lts--s: -0.025em;
+  --lts--l: 0.05em;
+  --lts--xl: 0.1em;
+  --ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';
+  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+  --ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+  --fw--light: 300;
+  --fw--normal: 400;
+  --fw--bold: 600;
+  --o--mp: 0.9;
+  --o--p: 0.75;
+  --o--pp: 0.5;
+  --o--ppp: 0.25;
+  --bdrs--10: 0.25rem;
+  --bdrs--20: 0.5rem;
+  --bdrs--30: 1rem;
+  --bdrs--40: 1.5rem;
+  --bdrs--99: 99rem;
+  --sz--xs: 400px;
+  --sz--s: 640px;
+  --sz--m: 880px;
+  --sz--l: 1200px;
+  --sz--xl: 1600px;
+  --ar--og: 1.91/1;
+}
+:root,
+.set--bxsh {
+  --bxsh--10: var(--shsz--10) var(--shc);
+  --bxsh--20: var(--shsz--20) var(--shc);
+  --bxsh--30: var(--shsz--30) var(--shc);
+  --bxsh--40: var(--shsz--40) var(--shc);
+  --bxsh--50: var(--shsz--50) var(--shc);
+}
+:root,
+.set--s {
+  --s5: calc(var(--s-unit) * 0.5);
+  --s10: var(--s-unit);
+  --s15: calc(var(--s-unit) * 1.5);
+  --s20: calc(var(--s-unit) * 2);
+  --s25: calc(var(--s-unit) * 2.5);
+  --s30: calc(var(--s-unit) * 3);
+  --s35: calc(var(--s-unit) * 4);
+  --s40: calc(var(--s-unit) * 5);
+  --s50: calc(var(--s-unit) * 8);
+  --s60: calc(var(--s-unit) * 13);
+  --s70: calc(var(--s-unit) * 21);
+  --s80: calc(var(--s-unit) * 34);
+}

package/src/scss/base/tokens/_tokens.scss

@@ -1,8 +1,15 @@
+/* --------------------------------------------------
+  ハーフレディング管理変数
+-------------------------------------------------- */
+@property --hl {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.25rem;
+}
+
 /* --------------------------------------------------
   bleedサイズ保持変数
-  Memo: 最外側の is--container 直下の子で 100cqi に上書きされ、それ以降は inherit で
-        子孫まで伝搬する。is--container が祖先に存在しない場合の fallback として
-        初期値に 100svi（small viewport inline size）を設定する。
+    Memo: 最外側の is--container 直下の子で 100cqi に上書きされ、それ以降は inherit で子孫まで伝搬する。
         cqi を算出値で保持するために登録済みカスタムプロパティとして定義する。
 -------------------------------------------------- */
 @property --sz--bleed {
@@ -11,24 +18,17 @@
   inherits: true;
 }
 
+/* --------------------------------------------------
+  色・構造系トークン（手書き）
+    Memo: 多くのインライン値は tokens.ts → _tokens.gen.scss へ自動生成。色とスコープ用の構造変数だけ
+          ここに実値を残す（tokens.ts 側は '-' センチネル）。
+-------------------------------------------------- */
 :root {
-  /** 
-   * Content size
-   */
-  --sz--xl: 1600px; // 80*20
-  --sz--l: 1200px; // 80*15
-  --sz--m: 880px; // 80*11
-  --sz--s: 640px; // 80*8
-  --sz--xs: 400px; // 80*5
-
-  /** 
+  /**
    * カラーパレット
    *   1. 赤を基準として 明度L・彩度C を決める。
    *   2. 各色は 色相H を固定セット。 L,C は色によって微調整。
    */
-  --black: #000;
-  --white: #fff;
-
   // 基準の明度と彩度（red)
   --L: 60%;
   --C: 0.2;
@@ -37,13 +37,13 @@
   --red: oklch(var(--L) var(--C) 20);
   --orange: oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);
   --yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);
-  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152);
+  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
   --blue: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);
   --purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);
   --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);
   --gray: oklch(calc(var(--L) - 4%) calc(var(--C) / 10) 240);
 
-  /** 
+  /**
    * セマンティックカラー
    */
   --brand: #1e5f8c;
@@ -71,41 +71,42 @@
   --neutral: hsl(220, 2%, 80%);
 
   /**
-   * opacity
-   * 音楽の強弱記号（piano 系列）に由来。p の反復回数が多いほど透明度が増す。
+   * shadow の構造変数
    */
-  --o--mp: 0.9;
-  --o--p: 0.75;
-  --o--pp: 0.5;
-  --o--ppp: 0.25;
+  --shc: var(--shadow);
+  --shsz--10: 0px 1px 3px;
+  --shsz--20: 0px 2px 6px;
+  --shsz--30: 0px 4px 12px;
+  --shsz--40: 0px 8px 24px;
+  --shsz--50: 0px 16px 48px;
 
-  /** 
-   * border-radius
+  /**
+   * typography トークンの構造変数
    */
-  --bdrs--10: 0.25rem; // ≒ 4px
-  --bdrs--20: 0.5rem; // ≒ 8px
-  --bdrs--30: 1rem; // ≒ 16px
-  --bdrs--40: 1.5rem; // ≒ 24px
-  --bdrs--99: 99rem;
+  --fz-mol: 8; // 倍音列の分母（7~ に対応）
+  --hl-unit: calc(var(--fz--base) * 0.125); /* ハーフレディングの計算単位 ≒ 2px */
 
   /**
-   * aspect-ratio
+   * SPACE トークンの構造変数
    */
-  --ar--og: 1.91/1;
+  --s-unit: calc(var(--fz--base) * 0.5); // 余白の計算単位 ≒ 8px（フィボナッチ数列ベース）
 
   /**
-   * サイトコンテンツの左右につける余白量の基準値
+   * コンテンツの左右につける余白量
    *   Memo: -max-sz\:full などからも参照されるのでrootで定義している
    */
   --gutter--base: var(--s30);
 
-  /** 
+  /**
    * コンテンツ間の余白バリエーションを定義
    */
   --flow--base: var(--s30);
   --flow--s: var(--s20);
 }
 
+/**
+ * 日本語環境での調整
+ */
 :root:where([lang='ja']) {
   --flow--base: var(--s35);
 }

package/src/scss/full.scss

@@ -0,0 +1,12 @@
+/*
+  full版（@layer あり）:
+  isVar系を除く全propsのBPサポートを lg まで拡張したビルド。
+  CSS purge と併用し、未使用分を削る前提の「全部入り」配布物。
+  _prop-config-full.gen.scss は config/presets/props-full.ts から生成される。
+*/
+@use './prop-config-full.gen' as full;
+@use './setting' with (
+  $props: full.$props
+);
+@use './with_layer';
+@use './props/index' as props;

package/src/scss/full_no_layer.scss

@@ -0,0 +1,32 @@
+/*
+  full版（@layer なし）:
+  full.css と同じく isVar系を除く全propsのBPサポートを lg まで拡張し、
+  main_no_layer.css と同じく @layer を使わずに出力するレガシー対応ビルド。
+  ※ @use ... with は対象モジュールの初回ロード前に行う必要があるため、
+  setting → mixin の順で設定すること（mixin は内部で setting をロードする）。
+*/
+@use './prop-config-full.gen' as full;
+@use './setting' with (
+  $props: full.$props
+);
+@use './mixin' with (
+  $layer_mode: 0
+);
+
+// reset(ここはレイヤーあり）
+@use './reset' as reset;
+
+// base
+@use './base/index' as base;
+
+// Trait（独立レイヤー）
+// primitive より弱い位置に配置。詳細は _with_layer.scss のコメント参照。
+@use './trait/index' as trait;
+
+// Primitives
+@use './primitives/layout/index' as layout;
+@use './primitives/atomic/index' as atomic;
+
+// utility
+@use './utility/index' as utility;
+@use './props/index' as props;

package/src/scss/props/index.scss

@@ -2,7 +2,6 @@
 // @forward './pass-get'; // 先に読み込む
 
 // 特殊
-@forward './lh';
 @forward './border';
 @forward './size';
 

package/src/scss/trait/is/_wrapper.scss

@@ -8,4 +8,4 @@
   }
 }
 
-// Memo: .-contentSize:s / m / l / xl は contentSize Prop の auto-generated 出力（src/scss/_prop-config.scss 経由）から自動的に props 層に出力される。
+// Memo: .-contentSize:s / m / l / xl は contentSize Prop の auto-generated 出力（src/scss/_prop-config.gen.scss 経由）から自動的に props 層に出力される。

package/bin/__build-css.cjs

@@ -1,92 +0,0 @@
-/* eslint no-console: 0 */
-const path = require('path');
-const fs = require('fs');
-
-// glob
-const glob = require('glob');
-
-// node-sass
-// const sass = require('node-sass');
-const sass = require('sass');
-// const globImporter = require('node-sass-glob-importer');
-
-// postcss
-const postcss = require('postcss');
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-// const mqpacker = require('css-mqpacker');
-
-// consoleの色付け
-const COLOR = {
-  red: '\u001b[31m',
-  green: '\u001b[32m',
-  reset: '\x1b[0m',
-};
-
-// 環境変数・引数
-// const envTYPE = process.env.TYPE || '';
-// const TARGET_DIR = process.argv[2] || '';
-
-(() => {
-  // パス（絶対パスに変換）
-  let src = path.resolve(__dirname, '../src/scss');
-  let dist = path.resolve(__dirname, '../dist/css');
-  compileSCSS(src, dist);
-
-  // component
-  src = path.resolve(__dirname, '../src/components');
-  dist = path.resolve(__dirname, '../dist/components');
-  console.log('compileSCSS', src, dist);
-  compileSCSS(src, dist);
-})();
-
-// scssファイル処理
-async function compileSCSS(src, dist) {
-  let files = [];
-
-  const ignore = ['**/_*.scss'];
-  files = glob.sync(src + '/**/*.scss', { ignore });
-  // console.log('files', files);
-
-  for (const filePath of files) {
-    console.log(COLOR.green + 'Start sassRender: ' + COLOR.reset + filePath);
-
-    const fileName = filePath.replace(src + '/', '');
-    const srcPath = path.resolve(__dirname, src, fileName);
-    const distPath = path.resolve(__dirname, dist, fileName).replace('.scss', '.css').replace('/index.css', '.css');
-
-    try {
-      // dart sass コンパイル
-      const compiledCSS = sass.compile(srcPath, {
-        style: 'expanded', // 圧縮はcssnanoに任せる
-      });
-
-      // postcss実行
-      postcss([autoprefixer, cssnano])
-        .process(compiledCSS.css, { from: undefined })
-        .then((postcssResult) => {
-          writeCSS(distPath, postcssResult.css);
-        });
-
-      // console.log(COLOR.green + 'Completed.');
-    } catch (error) {
-      console.log(COLOR.red + '\n========== ! ERROR ==========' + COLOR.reset);
-      console.log(error);
-      console.log(COLOR.red + '========== / ERROR ========== \n' + COLOR.reset);
-    }
-  }
-}
-
-// 書き出し処理
-function writeCSS(filePath, css) {
-  const dir = path.dirname(filePath);
-
-  // ディレクトリがなければ作成
-  if (!fs.existsSync(dir)) {
-    console.log('mkdir ' + dir);
-    fs.mkdirSync(dir, { recursive: true });
-  }
-
-  // css書き出し
-  fs.writeFileSync(filePath, css);
-}