lism-css 0.22.0 → 0.22.1

package/bin/cli.mjs

@@ -4,7 +4,7 @@ import path from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
 import buildConfig from './build-config.js';
 import buildCSS from './build-css.js';
-import { objDeepMerge } from '../config/helper.js';
+import { objDeepMerge } from '../dist/config/helper.js';
 
 // NOTE: build-config.js を実行するための簡易CLIエントリ
 const __filename = fileURLToPath(import.meta.url);
@@ -16,7 +16,7 @@ const projectRoot = process.cwd();
 console.log('🤖 projectRoot:', projectRoot);
 
 // 設定ファイルのパス
-const defaultConfigPath = path.resolve(__dirname, '../config/default-config.js');
+const defaultConfigPath = path.resolve(__dirname, '../dist/config/default-config.js');
 
 // ユーザー設定ファイルを検索（優先順: .js → .mjs）
 const CONFIG_SEARCH = ['lism.config.js', 'lism.config.mjs'];

package/dist/lib/getLismProps.js

@@ -2,10 +2,10 @@ import { TRAITS as P, PROPS as d } from "../config/index.js";
 import j from "./getLayoutProps.js";
 import k from "./getAtomicProps.js";
 import E from "./isPresetValue.js";
-import w from "./isTokenValue.js";
+import x from "./isTokenValue.js";
 import g from "./getUtilKey.js";
 import C from "./getMaybeCssVar.js";
-import x from "./getBpData.js";
+import w from "./getBpData.js";
 import z from "./warnUnsupportedBp.js";
 import _ from "./helper/atts.js";
 import A from "./helper/isEmptyObj.js";
@@ -28,8 +28,8 @@ class L {
   attrs = {};
   _propConfig;
   constructor(t) {
-    const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: u = {}, ...h } = t;
-    this.styles = { ...r }, this._propConfig = { ...u }, o && o.length && (this.primitiveClass = [...o]), A(h) || (this.attrs = { ...h }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
+    const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: c = {}, ...u } = t;
+    this.styles = { ...r }, this._propConfig = { ...c }, o && o.length && (this.primitiveClass = [...o]), A(u) || (this.attrs = { ...u }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
   // 出力順: [className&class] [primitiveClass] [setClasses] [traitClasses] [uClasses] [propClasses]
@@ -68,7 +68,7 @@ class L {
     let i = d[t] || null;
     if (i === null) return;
     this._propConfig?.[t] && (i = Object.assign({}, i, this._propConfig[t]));
-    const { base: e, ...o } = x(s);
+    const { base: e, ...o } = w(s);
     process.env.NODE_ENV !== "production" && !i.bp && Object.keys(o).length > 0 && z(t), this.setAttrs(t, e, i), Object.keys(o).forEach((r) => {
       i && this.setAttrs(t, o[r], i, r);
     });
@@ -110,24 +110,25 @@ class L {
     if (s == null || s === "" || s === !1) return;
     let o = `--${t}`, r = `-${String(i.utilKey || t)}`;
     if (e && (o = `--${t}_${e}`, r += `_${e}`), typeof s == "string" && s.startsWith(":")) {
-      this.addProp(`${r}:${s.replace(":", "")}`);
+      const l = s.slice(1);
+      this.addProp(l ? `${r}:${l}` : r);
       return;
     }
     if (!e) {
-      const { presets: p, tokenClass: V, utils: y, shorthands: m } = i;
-      if (p && E(p, s)) {
-        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
-        f && this.addProp(`${r}:${f}`);
+      const { presets: l, tokenClass: V, utils: y, shorthands: m } = i;
+      if (l && E(l, s)) {
+        const h = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        h && this.addProp(`${r}:${h}`);
         return;
       }
-      if (V && i.token && w(i.token, s)) {
-        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
-        f && this.addProp(`${r}:${f}`);
+      if (V && i.token && x(i.token, s)) {
+        const h = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        h && this.addProp(`${r}:${h}`);
         return;
       }
-      let l = "";
-      if (y && typeof s == "string" && (l = g(y, s)), !l && m && typeof s == "string" && (l = g(m, s, !0)), l) {
-        this.addProp(`${r}:${l}`);
+      let f = "";
+      if (y && typeof s == "string" && (f = g(y, s)), !f && m && typeof s == "string" && (f = g(m, s, !0)), f) {
+        this.addProp(`${r}:${f}`);
         return;
       }
     }
@@ -135,14 +136,14 @@ class L {
       this.addProp(r);
       return;
     }
-    const { prop: u, isVar: h, alwaysVar: $, token: c, bp: O } = i;
+    const { prop: c, isVar: u, alwaysVar: $, token: p, bp: O } = i;
     let a;
-    if (c && (typeof s == "string" || typeof s == "number") ? a = C(s, c) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
-      if (h) {
+    if (p && (typeof s == "string" || typeof s == "number") ? a = C(s, p) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
+      if (u) {
         this.addStyle(`--${t}`, a);
         return;
       } else if (!O && !$) {
-        this.addStyle(u, a);
+        this.addStyle(c, a);
         return;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Lism CSS is a layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",
@@ -17,7 +17,6 @@
   },
   "files": [
     "dist",
-    "config",
     "config.js",
     "config.d.ts",
     "vite-plugin.js",
@@ -31,11 +30,11 @@
     ".": "./dist/index.js",
     "./config.js": "./config.js",
     "./config": {
-      "import": "./config/index.js",
+      "import": "./dist/config/index.js",
       "types": "./dist/config/index.d.ts"
     },
     "./default-config": {
-      "import": "./config/default-config.js",
+      "import": "./dist/config/default-config.js",
       "types": "./dist/config/default-config.d.ts"
     },
     "./vite-plugin": "./vite-plugin.mjs",
@@ -52,7 +51,6 @@
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
     },
-    "./next-js/*": "./packages/next-js/*",
     "./astro": {
       "import": "./packages/astro/index.ts"
     },
@@ -98,8 +96,36 @@
   "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"
+    "react-dom": "^18 || ^19",
+    "sass": "^1.70.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "autoprefixer": {
+      "optional": true
+    },
+    "cssnano": {
+      "optional": true
+    },
+    "glob": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "scripts": {

package/config/__prop_list.js

@@ -1,44 +0,0 @@
-const _PROPS = {
-  // size
-  // mask
-  // mski: { style: 'maskImage' },
-  // mskbd: { style: 'maskBorder' },
-  // msktyp: { style: 'maskType' },
-  // mskclp: { style: 'maskClip' },
-  // mskcmp: { style: 'maskComposite' },
-  // mskmd: { style: 'maskMode' },
-  // msko: { style: 'maskOrigin' },
-  // mskp: { style: 'maskPosition' },
-  // mskr: { style: 'maskRepeat' },
-  // msksz: { style: 'maskSize' },
-  // bdtlrs: { style: 'borderTopLeftRadius', token: 'bdrs' },
-  // bdtrrs: { style: 'borderTopRightRadius', token: 'bdrs' },
-  // bdblrs: { style: 'borderBottomLeftRadius', token: 'bdrs' },
-  // bdbrrs: { style: 'borderBottomRightRadius', token: 'bdrs' },
-  // bdssrs: { style: 'borderStartStartRadius', token: 'bdrs' },
-  // bdsers: { style: 'borderStartEndRadius', token: 'bdrs' },
-  // bdesrs: { style: 'borderEndStartRadius', token: 'bdrs' },
-  // bdeers: { style: 'borderEndEndRadius', token: 'bdrs' },
-  // transition
-  //display
-  // iis: { style: 'insetInlineStart', token: 'space' },
-  // iie: { style: 'insetInlineEnd', token: 'space' },
-  // ibs: { style: 'insetBlockStart', token: 'space' },
-  // ibe: { style: 'insetBlockEnd', token: 'space' },
-  // isolation
-  // flip: {},
-  // Spacing
-  // grid
-  // transform系
-  // trf: { style: 'transform' },
-  // trfo: { style: 'transformOrigin' },
-  // float
-  // fl: { style: 'float', utils: { left: 'l', right: 'r' } },
-  // cl: { style: 'clear', utils: { left: 'l', right: 'r', both: 'b' } },
-  // object-fit
-  // objf: { style: 'objectFit', utils: { cover: 'cv', contain: 'cn' } },
-  // objp: { style: 'objectPosition' },
-  // filter
-  // fltr: { style: 'filter' }, // fltr?
-  // bdfltr: { style: 'backdropFilter' }, // bdfltr?
-};

package/config/__props.scss

@@ -1,25 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-
-$props: (
-  // 'objf': (
-  // 	prop: 'object-fit',
-  // 	utilities: (
-  // 		'cn': 'contain',
-  // 		'cv': 'cover',
-  // 	),
-  // ),
-  // 'bxsz': (
-  // 		prop: 'box-sizing',
-  // 		utilities: (
-  // 			'cb': 'content-box',
-  // 			'bb': 'border-box',
-  // 		),
-  // 	),
-  // 'iso': (
-  // 		prop: 'isolation',
-  // 		utilities: (
-  // 			'i': 'isolate',
-  // 		),
-   // 	),
-);

package/config/default-config.ts

@@ -1,9 +0,0 @@
-import TOKENS from './defaults/tokens';
-import PROPS from './defaults/props';
-import TRAITS from './defaults/traits';
-
-export default {
-  tokens: TOKENS,
-  props: PROPS,
-  traits: TRAITS,
-} as const;

package/config/defaults/__props-memo.js

@@ -1,45 +0,0 @@
-/**
-	--size- → --szー
-	トークンはハイフン二つ
-
-	globalトークン、 --target-- → --target- かな
-	→ --(\w)+?-- で検索。
-
-
-・flow, container → l--、 frame→is--では？
-・普通のクラス設計、BEMにもどす
-
- */
-
-// tier 1 layout・フォントは超短縮系に省略. 覚えてもらう必要があるもの。
-// p m g flex grid ai ac ji jc lh lts
-
-// 方向指定、一文字のもの（p,m,g) はそのまま繋げる。 start/endのみハイフン。
-// ２文字以上のものは、すべてハイフンで繋ぐ
-
-// tier 2 わかる程度に省略/名称変換
-// ovwrap wbreak
-
-// tier 3 非省略
-// whitespace  translate rotate scale order
-// -whitespace:nowrap (-whspace?)
-
-// wrap-anywhere と break-keep, break-all,
-// -ovwrap:anywhere, -wordbreak:keep -wordbreak:all
-
-// 値のキーワード単体で容易に対応するプロパティが想像できるものは、ユーティリティクラスで {-prop} 部分が省略可能とします。
-// .underline .italic .uppercase, .-lowercase, .emphasis
-// .relative .absolute .fixed, ...
-// .block flex block in-block in-flex, ...
-
-// -txd:none
-
-// -d:none
-// -v:visible, -v:hidden isolate
-
-// prop省略系？→utility
-// .u--colorBox .u--trimLeading u--srOnly
-
-// .underline
-// --under-offset, --under-c, --under-thickness
-//

package/config/defaults/props.ts

@@ -1,361 +0,0 @@
-/**
- * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
- * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
- * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
- *       .-prop{property:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{property:value} となる。
- *
- * ↓コンポーネント処理で使用される
- * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
- *             2 → ユーティリティクラスされ、内容は別途ファイルで記述するもの。
- * shorthands: → コンポーネント側で短く書くための設定
- *
- * ↓SCSS出力で使用される
- * alwaysVar: 1 → state変数扱い。 .-prop,[class*=-prop:] {property:var(--prop)} の base 出力となり、
- *   ユーティリティクラスは --prop をセットする形になる。
- *   加えて BPクラスも .-prop_$bp { property: var(--prop); --prop: var(--prop_$bp) !important; } を出力し、
- *   常に --prop が当該要素の現在値になるよう上書きされる（consumer が --prop を参照できる）。
- * important: 1 → !important を付けて最終的に出力する
- */
-
-const PLACE_PRESETS = ['start', 'center', 'end'] as const;
-const PLACE_FX_PRESETS = ['flex-start', 'flex-end'] as const;
-const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-start', fe: 'flex-end' } as const;
-
-export default {
-  f: { prop: 'font', presets: ['inherit'] },
-  fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1 },
-  fw: {
-    prop: 'fontWeight',
-    token: 'fw',
-    tokenClass: 1,
-    presets: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-  },
-  ff: { prop: 'fontFamily', token: 'ff', tokenClass: 1 },
-  fs: { prop: 'fontStyle', presets: ['italic'], shorthands: { i: 'italic' } },
-  lh: {
-    prop: 'lineHeight',
-    presets: ['1'],
-    token: 'hl',
-    tokenClass: 2,
-    exUtility: { 1: '' },
-  },
-  hl: {
-    isVar: 1,
-    token: 'hl',
-    tokenClass: 0,
-    bp: 0,
-  },
-  lts: { prop: 'letterSpacing', token: 'lts', tokenClass: 1, bp: 0 },
-  ta: { prop: 'textAlign', presets: ['center', 'left', 'right'] },
-  td: { prop: 'textDecoration', utils: { none: 'none' } },
-  tt: { prop: 'textTransform', utils: { upper: 'uppercase', lower: 'lowercase' } },
-  // te: { prop: 'textEmphasis', presets: ['filled'] },
-  // tsh: { prop: 'textShadow' },
-
-  d: {
-    prop: 'display',
-    presets: ['none', 'block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'inline', 'inline-block'],
-    bp: 'lg',
-  },
-  o: { prop: 'opacity', presets: ['0'], token: 'o', tokenClass: 1 },
-  v: { prop: 'visibility', presets: ['hidden'] },
-  ov: { prop: 'overflow', presets: ['hidden', 'auto', 'clip'] },
-  'ov-x': { prop: 'overflowX', presets: ['clip', 'auto', 'scroll'] },
-  'ov-y': { prop: 'overflowY', presets: ['clip', 'auto', 'scroll'] },
-  // overflow-clip-margin → safariで使えない
-  ar: {
-    prop: 'aspectRatio',
-    presets: ['21/9', '16/9', '3/2', '1/1'], // 4/3, 2/1
-    token: 'ar',
-    tokenClass: 1,
-    bp: 1,
-  },
-
-  // size
-  w: { prop: 'width', utils: { fit: 'fit-content' }, presets: ['100%'], token: 'sz', bp: 1 },
-  h: { prop: 'height', utils: { fit: 'fit-content' }, presets: ['100%'], token: 'sz', bp: 1 },
-  'min-w': { prop: 'minWidth', presets: ['100%'], token: 'sz', bp: 1 },
-  'max-w': { prop: 'maxWidth', presets: ['100%'], token: 'sz', bp: 1 },
-  'min-h': { prop: 'minHeight', presets: ['100%'], token: 'sz', bp: 1 },
-  'max-h': { prop: 'maxHeight', presets: ['100%'], token: 'sz', bp: 1 },
-
-  contentSize: { isVar: 1, presets: ['s', 'm', 'l', 'xl'], token: 'sz' },
-  sz: { prop: 'inlineSize', token: 'sz' },
-  'min-sz': { prop: 'minInlineSize', token: 'sz' },
-  'max-sz': {
-    prop: 'maxInlineSize',
-    token: 'sz',
-    tokenClass: 1,
-    presets: ['full', 'bleed'],
-    exUtility: {
-      full: '',
-      bleed: '',
-    },
-  },
-  bsz: { prop: 'blockSize', token: 'sz' },
-  'min-bsz': { prop: 'minBlockSize', token: 'sz' },
-  'max-bsz': { prop: 'maxBlockSize', token: 'sz' },
-
-  // bg
-  bg: { prop: 'background', bp: 0 },
-  bgi: { prop: 'backgroundImage' },
-  bgr: { prop: 'backgroundRepeat', presets: ['no-repeat'] },
-  bgp: { prop: 'backgroundPosition', presets: ['center'] },
-  bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
-  // bga: { prop: 'backgroundAttachment' }, // fixed
-  // bgo: { prop: 'backgroundOrigin' }, // border, padding, content
-  // bgblend: { prop: 'backgroundBlendMode' },
-  // bgclip: {
-  // 	prop: 'backgroundClip',
-  // 	presets: ['text'],
-  // },
-  bgc: {
-    prop: 'backgroundColor',
-    presets: ['base', 'base-2', 'text', 'brand', 'accent', 'inherit', 'transparent'],
-    token: 'color',
-    exUtility: { inherit: { 'background-color': 'inherit' } },
-    alwaysVar: 1,
-  },
-
-  c: {
-    // Note: bg系（bgclip）より後にくるように。
-    prop: 'color',
-    presets: ['base', 'text', 'text-2', 'brand', 'accent', 'inherit'],
-    token: 'color',
-    exUtility: {
-      inherit: { color: 'inherit' }, // --c ではなく color で出力したい
-      // mix: {'--_c1:currentColor;--_c2:transparent;--c:color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))'},
-    },
-    alwaysVar: 1,
-  },
-  keycolor: { isVar: 1, token: 'color' },
-  bd: { prop: 'border', presets: ['none'] },
-  bds: { isVar: 1, presets: ['dashed', 'dotted', 'double'] },
-  bdc: {
-    isVar: 1,
-    presets: ['brand', 'accent', 'divider', 'inherit', 'transparent'],
-    utils: { current: 'currentColor' },
-    token: 'color',
-  },
-  bdw: { isVar: 1, bp: 1 }, // --bdw のみ
-  'bd-x': { prop: 'borderInline' },
-  'bd-y': { prop: 'borderBlock' },
-  'bd-s': { prop: 'borderInlineStart' },
-  'bd-e': { prop: 'borderInlineEnd' },
-  'bd-bs': { prop: 'borderBlockStart' },
-  'bd-be': { prop: 'borderBlockEnd' },
-  'bd-t': { prop: 'borderTop' },
-  'bd-b': { prop: 'borderBottom' },
-  'bd-l': { prop: 'borderLeft' },
-  'bd-r': { prop: 'borderRight' },
-
-  bdrs: {
-    prop: 'borderRadius',
-    presets: ['0'],
-    token: 'bdrs',
-    tokenClass: 1,
-    bp: 1,
-    alwaysVar: 1,
-  },
-  'bdrs-tl': { prop: 'borderTopLeftRadius', token: 'bdrs' },
-  'bdrs-tr': { prop: 'borderTopRightRadius', token: 'bdrs' },
-  'bdrs-br': { prop: 'borderBottomRightRadius', token: 'bdrs' },
-  'bdrs-bl': { prop: 'borderBottomLeftRadius', token: 'bdrs' },
-  'bdrs-ss': { prop: 'borderStartStartRadius', token: 'bdrs' },
-  'bdrs-se': { prop: 'borderStartEndRadius', token: 'bdrs' },
-  'bdrs-es': { prop: 'borderEndStartRadius', token: 'bdrs' },
-  'bdrs-ee': { prop: 'borderEndEndRadius', token: 'bdrs' },
-
-  bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1 },
-
-  // position
-  pos: {
-    prop: 'position',
-    presets: ['static', 'fixed', 'sticky', 'relative', 'absolute'],
-    bp: 1,
-  },
-  z: { prop: 'zIndex', presets: ['-1', '0', '1', '99'] },
-  t: { prop: 'top', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
-  l: { prop: 'left', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
-  r: { prop: 'right', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
-  b: { prop: 'bottom', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
-  i: { prop: 'inset', utils: { 0: '0%' }, token: 'space' },
-  'i-x': { prop: 'insetInline', token: 'space' },
-  'i-y': { prop: 'insetBlock', token: 'space' },
-  'i-s': { prop: 'insetInlineStart', token: 'space' },
-  'i-e': { prop: 'insetInlineEnd', token: 'space' },
-  'i-bs': { prop: 'insetBlockStart', token: 'space' },
-  'i-be': { prop: 'insetBlockEnd', token: 'space' },
-
-  // space
-  p: {
-    prop: 'padding',
-    presets: ['0'],
-    token: 'space',
-    tokenClass: 1,
-    alwaysVar: 1,
-    bp: 1,
-  },
-  px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
-  py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
-  ps: { prop: 'paddingInlineStart', token: 'space', bp: 1 },
-  pe: { prop: 'paddingInlineEnd', token: 'space', bp: 1 },
-  pbs: { prop: 'paddingBlockStart', token: 'space', bp: 1 },
-  pbe: { prop: 'paddingBlockEnd', token: 'space', bp: 1 },
-  pl: { prop: 'paddingLeft', token: 'space', bp: 0 },
-  pr: { prop: 'paddingRight', token: 'space', bp: 0 },
-  pt: { prop: 'paddingTop', token: 'space', bp: 0 },
-  pb: { prop: 'paddingBottom', token: 'space', bp: 0 },
-  m: {
-    prop: 'margin',
-    presets: ['auto', '0'],
-    token: 'space',
-    tokenClass: 1,
-    alwaysVar: 1,
-    bp: 1,
-  },
-  mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
-  my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
-  ms: { prop: 'marginInlineStart', presets: ['auto'], token: 'space', bp: 1 },
-  me: { prop: 'marginInlineEnd', presets: ['auto'], token: 'space', bp: 1 },
-  mbs: { prop: 'marginBlockStart', token: 'space', bp: 1, presets: ['auto', '0'], tokenClass: 1 },
-  mbe: { prop: 'marginBlockEnd', presets: ['auto'], token: 'space', bp: 1 },
-  ml: { prop: 'marginLeft', token: 'space', bp: 0 },
-  mr: { prop: 'marginRight', token: 'space', bp: 0 },
-  mt: { prop: 'marginTop', token: 'space', bp: 0 },
-  mb: { prop: 'marginBottom', token: 'space', bp: 0 },
-
-  g: {
-    prop: 'gap',
-    presets: ['0', 'inherit'],
-    exUtility: { inherit: { gap: 'inherit' } },
-    token: 'space',
-    tokenClass: 1,
-    bp: 'lg',
-  },
-  cg: { prop: 'columnGap', token: 'space', bp: 0 },
-  rg: { prop: 'rowGap', token: 'space', bp: 0 },
-  cols: { isVar: 1, bp: 'lg' },
-  rows: { isVar: 1, bp: 1 },
-
-  // flex
-  fxf: { prop: 'flexFlow' },
-  fxw: { prop: 'flexWrap', presets: ['wrap'], bp: 1 },
-  fxd: { prop: 'flexDirection', presets: ['column', 'column-reverse', 'row-reverse'], bp: 1 },
-  fx: { prop: 'flex', presets: ['1'], bp: 1 },
-  fxg: { prop: 'flexGrow', presets: ['1'] },
-  fxsh: { prop: 'flexShrink', presets: ['0'] },
-  fxb: { prop: 'flexBasis', bp: 1 },
-
-  // grid
-  // gd: { prop: 'grid' },
-  gt: {
-    prop: 'gridTemplate',
-    bp: 1,
-  },
-  gta: { prop: 'gridTemplateAreas', bp: 'lg' },
-  gtc: {
-    prop: 'gridTemplateColumns',
-    presets: ['subgrid'],
-    bp: 'lg',
-  },
-  gtr: {
-    prop: 'gridTemplateRows',
-    presets: ['subgrid'],
-    bp: 'lg',
-  },
-  gaf: { prop: 'gridAutoFlow', presets: ['row', 'column'], bp: 1 }, //dense
-  gac: { prop: 'gridAutoColumns' },
-  gar: { prop: 'gridAutoRows' },
-
-  // grid item
-  ga: { prop: 'gridArea', utils: { '1/1': '1 / 1' }, bp: 'lg' },
-  gc: { prop: 'gridColumn', utils: { '1/-1': '1 / -1' }, bp: 'lg' },
-  gr: { prop: 'gridRow', utils: { '1/-1': '1 / -1' }, bp: 'lg' },
-  gcs: { prop: 'gridColumnStart' },
-  gce: { prop: 'gridColumnEnd' },
-  grs: { prop: 'gridRowStart' },
-  gre: { prop: 'gridRowEnd' },
-
-  // places
-  // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
-  ai: {
-    prop: 'alignItems',
-    presets: [...PLACE_PRESETS, 'stretch', ...PLACE_FX_PRESETS],
-    shorthands: PLACE_SHORTHANDS,
-    bp: 1,
-  },
-  ac: {
-    prop: 'alignContent',
-    presets: [...PLACE_PRESETS, ...PLACE_FX_PRESETS],
-    utils: { between: 'space-between' },
-    shorthands: PLACE_SHORTHANDS,
-    bp: 1,
-  },
-  ji: {
-    prop: 'justifyItems',
-    presets: [...PLACE_PRESETS, 'stretch', ...PLACE_FX_PRESETS],
-    shorthands: PLACE_SHORTHANDS,
-    bp: 1,
-  },
-  jc: {
-    prop: 'justifyContent',
-    presets: [...PLACE_PRESETS, ...PLACE_FX_PRESETS],
-    utils: { between: 'space-between' },
-    shorthands: PLACE_SHORTHANDS,
-    bp: 1,
-  },
-  pi: { prop: 'placeItems', presets: PLACE_PRESETS },
-  pc: { prop: 'placeContent', presets: PLACE_PRESETS },
-  aslf: {
-    prop: 'alignSelf',
-    presets: [...PLACE_PRESETS, 'stretch'],
-    shorthands: PLACE_SHORTHANDS,
-  },
-  jslf: {
-    prop: 'justifySelf',
-    presets: [...PLACE_PRESETS, 'stretch'],
-    shorthands: PLACE_SHORTHANDS,
-  },
-  pslf: { prop: 'placeSelf', presets: PLACE_PRESETS },
-  order: { prop: 'order', presets: ['0', '-1', '1'], bp: 1 },
-
-  // transform
-  // translate: {
-  // 	prop: 'translate',
-  // 	utils: {
-  // 		'-50X': '-50% 0',
-  // 		'-50Y': '0 -50%',
-  // 		'-50XY': '-50% -50%',
-  // 	},
-  // },
-
-  // rotate: {
-  // 	prop: 'rotate',
-  // 	utils: {
-  // 		[`45`]: '45deg',
-  // 		'-45': '-45deg',
-  // 		[`90`]: '90deg',
-  // 		'-90': '-90deg',
-  // 		// '180': '180deg',
-  // 	},
-  // },
-
-  // scale: {
-  // 	prop: 'scale',
-  // 	utils: {
-  // 		'-X': '-1 1',
-  // 		'-Y': '1 -1',
-  // 		'-XY': '-1 -1',
-  // 	},
-  // },
-
-  // others
-  ovw: { prop: 'overflowWrap', presets: ['anywhere'] },
-  whs: { prop: 'whiteSpace', presets: ['nowrap'] },
-  // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
-  float: { prop: 'float', presets: ['left', 'right'] },
-  clear: { prop: 'clear', presets: ['both'] },
-  iso: { prop: 'isolation', presets: ['isolate'] },
-  wm: { prop: 'writingMode', presets: ['vertical-rl'], bp: 1 },
-} as const;

package/config/defaults/tokens.ts

@@ -1,27 +0,0 @@
-export default {
-  fz: ['root', 'base', '5xl', '4xl', '3xl', '2xl', 'xl', 'l', 'm', 's', 'xs', '2xs'],
-  lh: ['base', 'xs', 's', 'l'],
-  hl: ['base', 'xs', 's', 'l'],
-  lts: ['base', 's', 'l', 'xl'],
-  ff: ['base', 'accent', 'mono'],
-  fw: ['light', 'normal', 'bold'],
-  o: ['mp', 'p', 'pp', 'ppp'],
-  bdrs: ['10', '20', '30', '40', '99', 'inner'],
-  bxsh: ['10', '20', '30', '40', '50'],
-  sz: ['xs', 's', 'm', 'l', 'xl'],
-  ar: ['og'],
-  space: {
-    pre: '--s',
-    values: ['5', '10', '15', '20', '25', '30', '35', '40', '50', '60', '70', '80'],
-  },
-  c: {
-    pre: '--',
-    values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent', 'neutral'],
-  },
-  palette: {
-    pre: '--',
-    values: ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray', 'white', 'black', 'keycolor'],
-  },
-  writing: ['vertical'],
-  flow: ['s', 'l'],
-} as const;

package/config/defaults/traits.ts

@@ -1,13 +0,0 @@
-export default {
-  isContainer: 'is--container',
-  isWrapper: 'is--wrapper',
-  isLayer: 'is--layer',
-  isBoxLink: 'is--boxLink',
-  isCoverLink: 'is--coverLink',
-  isSide: 'is--side',
-  isSkipFlow: 'is--skipFlow',
-  hasTransition: 'has--transition',
-  hasGutter: 'has--gutter',
-  hasSnap: 'has--snap',
-  hasMask: 'has--mask',
-} as const;

package/config/helper/minifyHtml.ts

@@ -1,22 +0,0 @@
-/**
- * html文字列をminify
- */
-const minifyHtml = (html: string) => {
-  if (!html) return '';
-
-  // 改行先に削除
-  html = html.replace(/\r?\n/g, '');
-
-  // タブ → スペース
-  html = html.replace(/\t/g, ' ');
-
-  // 複数のスペースを１つに
-  html = html.replace(/\s\s+/g, ' ');
-
-  // タグとタグの間のスペースを削除
-  html = html.replace(/> </g, '><');
-
-  return html;
-};
-
-export default minifyHtml;

package/config/helper.test.ts

@@ -1,238 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { objDeepMerge, arrayConvertToSet } from './helper.js';
-
-describe('objDeepMerge', () => {
-  test('基本的なマージが正しく動作する', () => {
-    const origin = { a: 1, b: 2 };
-    const source = { b: 3, c: 4 };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 1, b: 3, c: 4 });
-  });
-
-  test('ネストしたオブジェクトを深くマージする', () => {
-    const origin = { a: { b: 1, c: 2 }, d: 3 };
-    const source = { a: { b: 10, e: 5 }, f: 6 };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: { b: 10, c: 2, e: 5 }, d: 3, f: 6 });
-  });
-
-  test('深くネストしたオブジェクトを正しくマージする', () => {
-    const origin = { a: { b: { c: 1 } } };
-    const source = { a: { b: { d: 2 } } };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: { b: { c: 1, d: 2 } } });
-  });
-
-  test('originが空オブジェクトの場合、sourceをそのまま返す', () => {
-    const origin = {};
-    const source = { a: 1, b: 2 };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 1, b: 2 });
-  });
-
-  test('sourceが空オブジェクトの場合、originをそのまま返す', () => {
-    const origin = { a: 1, b: 2 };
-    const source = {};
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 1, b: 2 });
-  });
-
-  test('originに存在しないキーが追加される', () => {
-    const origin = { a: 1 };
-    const source = { b: 2, c: 3 };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 1, b: 2, c: 3 });
-  });
-
-  test('値がオブジェクトから配列に上書きされる', () => {
-    const origin = { a: { b: 1 } };
-    const source = { a: [1, 2, 3] };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: [1, 2, 3] });
-  });
-
-  test('値が配列からオブジェクトに上書きされる', () => {
-    const origin = { a: [1, 2, 3] };
-    const source = { a: { b: 1 } };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: { b: 1 } });
-  });
-
-  test('値がプリミティブ型の場合、sourceの値で上書きされる', () => {
-    const origin = { a: 1, b: 'hello' };
-    const source = { a: 2, b: 'world' };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 2, b: 'world' });
-  });
-
-  test('originValueがnullまたはundefinedの場合、sourceValueを追加する', () => {
-    const origin = { a: null, b: undefined };
-    const source = { a: 1, b: 2, c: 3 };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({ a: 1, b: 2, c: 3 });
-  });
-
-  test('元のオブジェクトが変更されないことを確認', () => {
-    const origin = { a: 1, b: { c: 2 } };
-    const source = { b: { d: 3 } };
-    const result = objDeepMerge(origin, source);
-    expect(origin).toEqual({ a: 1, b: { c: 2 } });
-    expect(result).toEqual({ a: 1, b: { c: 2, d: 3 } });
-  });
-
-  test('複雑なネスト構造のマージ', () => {
-    const origin = {
-      level1: {
-        level2: {
-          a: 1,
-          b: 2,
-        },
-        c: 3,
-      },
-      d: 4,
-    };
-    const source = {
-      level1: {
-        level2: {
-          b: 20,
-          e: 5,
-        },
-        f: 6,
-      },
-      g: 7,
-    };
-    const result = objDeepMerge(origin, source);
-    expect(result).toEqual({
-      level1: {
-        level2: {
-          a: 1,
-          b: 20,
-          e: 5,
-        },
-        c: 3,
-        f: 6,
-      },
-      d: 4,
-      g: 7,
-    });
-  });
-});
-describe('arrayConvertToSet', () => {
-  test('配列をSetに変換する', () => {
-    const input = [1, 2, 3];
-    const result = arrayConvertToSet(input);
-    expect(result).toBeInstanceOf(Set);
-    expect(result).toEqual(new Set([1, 2, 3]));
-  });
-
-  test('重複した要素を持つ配列をSetに変換する', () => {
-    const input = [1, 2, 2, 3, 3, 3];
-    const result = arrayConvertToSet(input);
-    expect(result).toEqual(new Set([1, 2, 3]));
-  });
-
-  test('オブジェクト内の配列をSetに変換する', () => {
-    const input = { a: [1, 2, 3], b: [4, 5, 6] };
-    const result = arrayConvertToSet(input);
-    expect(result.a).toEqual(new Set([1, 2, 3]));
-    expect(result.b).toEqual(new Set([4, 5, 6]));
-  });
-
-  test('ネストしたオブジェクト内の配列をSetに変換する', () => {
-    const input = {
-      level1: {
-        level2: {
-          arr: [1, 2, 3],
-        },
-      },
-    };
-    const result = arrayConvertToSet(input);
-    expect(result.level1.level2.arr).toEqual(new Set([1, 2, 3]));
-  });
-
-  test('配列とオブジェクトが混在する場合', () => {
-    const input = {
-      a: [1, 2, 3],
-      b: {
-        c: [4, 5, 6],
-        d: 'string',
-      },
-      e: 100,
-    };
-    const result = arrayConvertToSet(input);
-    expect(result.a).toEqual(new Set([1, 2, 3]));
-    expect(result.b.c).toEqual(new Set([4, 5, 6]));
-    expect(result.b.d).toBe('string');
-    expect(result.e).toBe(100);
-  });
-
-  test('プリミティブ値はそのまま返す', () => {
-    expect(arrayConvertToSet(1)).toBe(1);
-    expect(arrayConvertToSet('string')).toBe('string');
-    expect(arrayConvertToSet(true)).toBe(true);
-    expect(arrayConvertToSet(null)).toBe(null);
-    expect(arrayConvertToSet(undefined)).toBe(undefined);
-  });
-
-  test('空配列をSetに変換する', () => {
-    const input: never[] = [];
-    const result = arrayConvertToSet(input);
-    expect(result).toEqual(new Set());
-  });
-
-  test('空オブジェクトをそのまま返す', () => {
-    const input = {};
-    const result = arrayConvertToSet(input);
-    expect(result).toEqual({});
-  });
-
-  test('深くネストしたオブジェクトと配列の変換', () => {
-    const input = {
-      a: {
-        b: {
-          c: [1, 2, 3],
-          d: {
-            e: [4, 5, 6],
-          },
-        },
-      },
-    };
-    const result = arrayConvertToSet(input);
-    expect(result.a.b.c).toEqual(new Set([1, 2, 3]));
-    expect(result.a.b.d.e).toEqual(new Set([4, 5, 6]));
-  });
-
-  test('配列内にオブジェクトがある場合（配列自体がSetになる）', () => {
-    const obj = { value: 1 };
-    const input = [obj, 2, 3];
-    const result = arrayConvertToSet(input);
-    expect(result).toEqual(new Set([obj, 2, 3]));
-  });
-
-  test('元のオブジェクトが変更されないことを確認', () => {
-    const input = { a: [1, 2, 3] };
-    const result = arrayConvertToSet(input);
-    expect(Array.isArray(input.a)).toBe(true);
-    expect(result.a).toBeInstanceOf(Set);
-  });
-
-  test('複数階層のオブジェクトと配列が混在するケース', () => {
-    const input = {
-      colors: ['red', 'blue', 'green'],
-      sizes: {
-        small: [1, 2, 3],
-        large: [10, 20, 30],
-      },
-      config: {
-        enabled: true,
-        tags: ['tag1', 'tag2'],
-      },
-    };
-    const result = arrayConvertToSet(input);
-    expect(result.colors).toEqual(new Set(['red', 'blue', 'green']));
-    expect(result.sizes.small).toEqual(new Set([1, 2, 3]));
-    expect(result.sizes.large).toEqual(new Set([10, 20, 30]));
-    expect(result.config.enabled).toBe(true);
-    expect(result.config.tags).toEqual(new Set(['tag1', 'tag2']));
-  });
-});

package/config/helper.ts

@@ -1,73 +0,0 @@
-type PlainObject = Record<string, unknown>;
-
-function isObj(value: unknown): value is PlainObject {
-  return value !== null && typeof value === 'object' && !Array.isArray(value);
-}
-
-type DeepMergeResult<T, U> = T extends PlainObject
-  ? U extends PlainObject
-    ? {
-        [K in keyof T | keyof U]: K extends keyof U ? (K extends keyof T ? DeepMergeResult<T[K], U[K]> : U[K]) : K extends keyof T ? T[K] : never;
-      }
-    : T
-  : U extends PlainObject
-    ? U
-    : T;
-
-/**
- * 深いマージを行う関数
- * @param origin - マージ先となる元オブジェクト
- * @param source - マージするソース（このデータに更新される）
- * @returns マージされたオブジェクト
- */
-export function objDeepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(origin: T, source: U): DeepMergeResult<T, U> {
-  const result = { ...origin } as Record<string, unknown>;
-
-  for (const key in source) {
-    if (Object.hasOwn(source, key)) {
-      const originValue = result[key];
-      const sourceValue = (source as Record<string, unknown>)[key];
-
-      if (!originValue) {
-        // origin側に存在しない新たなキーの場合はそのまま追加する
-        result[key] = sourceValue;
-      } else if (isObj(sourceValue) && isObj(originValue)) {
-        // どちらもオブジェクトの場合は再帰的にマージ
-        result[key] = objDeepMerge(originValue, sourceValue);
-      } else {
-        // どちらかのデータがobjectではない場合、そのまま上書き
-        result[key] = sourceValue;
-      }
-    }
-  }
-
-  return result as DeepMergeResult<T, U>;
-}
-
-type DeepArrayToSet<T> = T extends unknown[] ? Set<T[number]> : T extends PlainObject ? { [K in keyof T]: DeepArrayToSet<T[K]> } : T;
-
-/**
- * オブジェクト内の配列を再帰的にSetに変換する関数
- * @param obj - 変換対象のオブジェクト
- * @returns 変換されたオブジェクト
- */
-export function arrayConvertToSet<T>(obj: T): DeepArrayToSet<T> {
-  // 配列の場合はSetに変換
-  if (Array.isArray(obj)) {
-    return new Set(obj) as DeepArrayToSet<T>;
-  }
-
-  // オブジェクトの場合は再帰的に処理
-  if (isObj(obj)) {
-    const result: Record<string, unknown> = {};
-    for (const key in obj) {
-      if (Object.hasOwn(obj, key)) {
-        result[key] = arrayConvertToSet(obj[key]);
-      }
-    }
-    return result as DeepArrayToSet<T>;
-  }
-
-  // その他の値はそのまま返す
-  return obj as DeepArrayToSet<T>;
-}

package/config/index.ts

@@ -1,36 +0,0 @@
-import defaultConfig from './default-config';
-import userConfig from 'lism-css/config.js'; // ユーザーが上書きできる
-import { objDeepMerge, arrayConvertToSet } from './helper';
-
-interface Window {
-  _LISM_CSS_CONFIG_: Partial<typeof defaultConfig>;
-}
-declare const window: Window;
-
-// ビルド時の設定をマージ
-let mergedConfig = objDeepMerge(defaultConfig, userConfig);
-
-// ブラウザ環境で window._LISM_CSS_CONFIG_ があればランタイムでマージ
-if (typeof window !== 'undefined' && window._LISM_CSS_CONFIG_) {
-  mergedConfig = objDeepMerge(mergedConfig, window._LISM_CSS_CONFIG_);
-}
-
-export const CONFIG = mergedConfig;
-
-const { tokens, props, traits } = CONFIG;
-
-const tokensWithColor = {
-  color: [...tokens.c.values, ...tokens.palette.values],
-  ...tokens,
-} as const;
-
-// 配列を Set化.
-export const TOKENS = arrayConvertToSet(structuredClone(tokensWithColor));
-export const PROPS = arrayConvertToSet(structuredClone(props));
-
-// TRAITS は objDeepMerge の型推論により literal types が保持される
-export const TRAITS = traits;
-
-// ブレイクポイント
-export const BREAK_POINTS = ['sm', 'md', 'lg', 'xl'] as const;
-export const BREAK_POINTS_ALL = ['base', ...BREAK_POINTS] as const;

package/config/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "declarationMap": false,
-    "declarationDir": "../dist/config",
-    "emitDeclarationOnly": true,
-    "outDir": "../dist/config",
-    "rootDir": ".",
-    "composite": false,
-    "baseUrl": "..",
-    "paths": {
-      "lism-css/config.js": ["./config.js"]
-    }
-  },
-  "include": ["./**/*.ts"],
-  "exclude": ["**/*.test.ts"]
-}