lism-css 0.22.2 → 0.23.0

package/bin/build-config.js

@@ -1,155 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-// CLI実行時にsrcからとると見つかれないので dist からとる
-import getMaybeTokenValue from '../dist/lib/getMaybeTokenValue.js';
-
-// ES modules用の__dirname取得
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * ユーティリティ値を生成
- * @param {Object} propConfig - プロパティ設定
- * @returns {Object} ユーティリティ値のオブジェクト
- */
-function generateUtilities(propConfig, TOKENS) {
-  const { utils = {}, presets = [], token = '', tokenClass = 0 } = propConfig;
-  const utilities = {};
-
-  // tokenをクラス化するのであれば presetsへ追加
-  if (token && tokenClass === 1) {
-    const tokenValues = TOKENS[token];
-    if (tokenValues && Array.isArray(tokenValues)) {
-      presets.push(...tokenValues);
-    } else if (tokenValues && typeof tokenValues === 'object') {
-      presets.push(...(tokenValues.values || []));
-    }
-  }
-
-  // presetsが定義されている場合
-  if (presets.length > 0) {
-    presets.forEach((preset) => {
-      utilities[preset] = getMaybeTokenValue(token, preset, TOKENS);
-    });
-  }
-
-  // utilsが定義されている場合
-  if (utils) {
-    Object.entries(utils).forEach(([key, value]) => {
-      utilities[key] = value;
-    });
-  }
-
-  return utilities;
-}
-
-/**
- * プロパティ設定をSCSS形式に変換
- * @param {string} propKey - プロパティに対応する省略型のキー名
- * @param {Object} propConfig - プロパティ設定
- * @returns {string} SCSS形式の文字列
- */
-function generatePropScss(propKey, propConfig, TOKENS) {
-  const { prop = '', bp, isVar, alwaysVar, important } = propConfig;
-
-  // styleが定義されている場合はそれを使用、なければpropKeyをそのまま使用
-  const utilities = generateUtilities(propConfig, TOKENS);
-
-  // ユーティリティが存在するかどうか
-  const hasUtilities = Object.keys(utilities).length > 0;
-
-  // 出力するCSSがない場合
-  if (!hasUtilities && !bp) {
-    return '';
-  }
-
-  let scss = `  '${propKey}': (\n`;
-  if (isVar) {
-    scss += `    prop: '--${propKey}',\n`;
-  } else {
-    // propName を prop-name に変換（キャメルケースをケバブケースに変換）
-    scss += `    prop: '${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}',\n`;
-  }
-
-  if (hasUtilities) {
-    const exs = propConfig.exUtility || null;
-
-    scss += `    utilities: (\n`;
-    Object.entries(utilities).forEach(([utilKey, value]) => {
-      // キーに特殊文字が含まれる場合はエスケープ(/,%, : の前に \\ をつける(最終的にscss側の処理で \ ひとつになるようにここでは \\ ))
-      const escapedKey = utilKey.replace(/\//g, '\\\\/').replace(/%/g, '\\\\%').replace(/:/g, '\\\\:');
-
-      // exUtility としても定義されている場合はスキップ
-      if (undefined === exs?.[utilKey]) {
-        scss += `      '${escapedKey}': '${value}',\n`;
-      }
-    });
-    scss += `    ),\n`;
-
-    if (exs) {
-      scss += `    exUtility: (\n`;
-
-      for (const [exKey, exProps] of Object.entries(exs)) {
-        if (typeof exProps === 'object') {
-          scss += `      '${exKey}': (\n`;
-          for (const _prop in exProps) {
-            if (exProps[_prop]) {
-              scss += `        '${_prop}': '${exProps[_prop]}',\n`;
-            }
-          }
-          scss += `      ),\n`;
-        }
-      }
-      scss += `    ),\n`;
-    }
-  }
-
-  if (bp !== undefined) {
-    scss += `    bp: ${bp},\n`;
-  }
-  if (isVar !== undefined) {
-    scss += `    isVar: ${isVar},\n`;
-  }
-  if (alwaysVar !== undefined) {
-    scss += `    alwaysVar: ${alwaysVar},\n`;
-  }
-  if (important !== undefined) {
-    scss += `    important: ${important},\n`;
-  }
-
-  scss += `  ),`;
-
-  return scss;
-}
-
-/**
- * メイン処理
- */
-export default async function buildConfig(CONFIG) {
-  const { tokens: TOKENS, props: PROPS } = CONFIG;
-  console.log('_prop-config.scssを生成中...');
-
-  let scssContent = '';
-
-  scssContent += '$props: (\n';
-  // 各プロパティをSCSS形式に変換
-  Object.entries(PROPS).forEach(([propKey, propConfig], index, array) => {
-    const propContent = generatePropScss(propKey, propConfig, TOKENS);
-    if (!propContent) return;
-    scssContent += propContent;
-
-    // 最後の要素でない場合は改行を追加
-    if (index < array.length - 1) {
-      scssContent += '\n';
-    }
-  });
-
-  scssContent += '\n);\n';
-
-  // ファイルに出力
-  const outputPath = path.join(__dirname, '../src/scss/_prop-config.scss');
-  await fs.promises.writeFile(outputPath, scssContent, 'utf8');
-
-  console.log(`✅ _prop-config.scssを生成しました: ${outputPath}`);
-}

package/bin/build-css.js

@@ -1,90 +0,0 @@
-/* eslint no-console: 0 */
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-
-// glob（CJS互換モジュールだが、ESM からもデフォルト import で利用可能）
-import { globSync } from 'glob';
-
-// dart-sass
-// import legacySass from 'node-sass';
-import * as sass from 'sass';
-
-// postcss
-import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import cssnano from 'cssnano';
-
-// console の色付け
-const COLOR = {
-  red: '\u001b[31m',
-  green: '\u001b[32m',
-  reset: '\x1b[0m',
-};
-
-// __dirname（ESM）
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// scssファイル処理
-export async function compileSCSS(src, dist) {
-  let files = [];
-
-  // NOTE: CLI 経由で実行されると cwd がプロジェクト側になるため、
-  // glob の ignore が相対解決されずに全件ヒットすることがある。
-  // cwd を明示してパターンを相対指定、absolute で絶対パスを受け取る。
-  const ignore = ['**/_*.scss'];
-  files = globSync('**/*.scss', { cwd: src, ignore, absolute: true });
-
-  console.log('▶️ [compileSCSS] 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 実行（完了まで await）
-      const postcssResult = await postcss([autoprefixer, cssnano]).process(compiledCSS.css, { from: undefined });
-      writeCSS(distPath, postcssResult.css);
-    } 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);
-}
-
-// デフォルトエクスポート（他から await 可能）
-export default async function buildCSS() {
-  // パス（絶対パスに変換）
-  let src = path.resolve(__dirname, '../src/scss');
-  let dist = path.resolve(__dirname, '../dist/css');
-  await compileSCSS(src, dist);
-
-  // component
-  // src = path.resolve(__dirname, '../src/components');
-  // dist = path.resolve(__dirname, '../dist/components');
-  // await compileSCSS(src, dist);
-}

package/bin/cli.mjs

@@ -1,79 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath, pathToFileURL } from 'url';
-import buildConfig from './build-config.js';
-import buildCSS from './build-css.js';
-import { objDeepMerge } from '../dist/config/helper.js';
-
-// NOTE: build-config.js を実行するための簡易CLIエントリ
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// プロジェクトルート取得
-const projectRoot = process.cwd();
-
-console.log('🤖 projectRoot:', projectRoot);
-
-// 設定ファイルのパス
-const defaultConfigPath = path.resolve(__dirname, '../dist/config/default-config.js');
-
-// ユーザー設定ファイルを検索（優先順: .js → .mjs）
-const CONFIG_SEARCH = ['lism.config.js', 'lism.config.mjs'];
-function findUserConfigPath() {
-  for (const name of CONFIG_SEARCH) {
-    const abs = path.resolve(projectRoot, name);
-    if (fs.existsSync(abs)) return abs;
-  }
-  return null;
-}
-const userConfigPath = findUserConfigPath();
-
-// コマンドライン引数の先頭をサブコマンドとして解釈（デフォルトは build-config）
-const args = process.argv.slice(2);
-const command = args[0] || '';
-
-async function main() {
-  // 指定がない場合、build-config を実行
-  if (command === 'build') {
-    // default-config を常に読み込む（ESM default export を取得）
-    const defaultConfigModule = await import(pathToFileURL(defaultConfigPath).href);
-    const defaultConfig = defaultConfigModule?.default || {};
-
-    // user の lism.config.{js,mjs} は存在する時のみ読み込む
-    let userConfig = {};
-    if (userConfigPath) {
-      const userConfigModule = await import(pathToFileURL(userConfigPath).href);
-      userConfig = userConfigModule?.default || {};
-
-      console.log('===== 📁 userConfig =====');
-      console.log(userConfig);
-      console.log('==========');
-    }
-
-    // 設定をディープマージ
-    const CONFIG = objDeepMerge(defaultConfig, userConfig);
-
-    // 動的インポートで同ディレクトリのスクリプトを実行
-    await buildConfig(CONFIG); // SCSSの設定ファイルを出力
-    await buildCSS();
-    return;
-  }
-
-  if (!command) {
-    console.log('Usage: lism-css <command>');
-    console.log('  <command>:');
-    console.log('    - build : Build the CSS');
-    return;
-  }
-
-  // 未知のサブコマンドはエラー表示
-  console.error(`Unknown command: ${command}`);
-  process.exit(1);
-}
-
-main().catch((error) => {
-  // 例外は標準エラー出力に流して終了コード1で終了
-  console.error(error);
-  process.exit(1);
-});

package/bin/script-build-css.js

@@ -1,6 +0,0 @@
-import buildCSS from './build-css.js';
-import buildConfig from './build-config.js';
-import { CONFIG } from '../config/index.ts';
-
-await buildConfig(CONFIG);
-await buildCSS();

package/src/scss/base/tokens/_shadow.scss

@@ -1,23 +0,0 @@
-/* --------------------------------------------------
-  shadow
-    Memo: :root だけで --bxsh-- をセットしてしまうと --shc がその時点で固定されるので、
-    要素ごとに --shc を上書きできるよう、再セット用の set--bxsh クラスを併用する。
--------------------------------------------------- */
-:root {
-  --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;
-}
-
-: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);
-}

package/src/scss/base/tokens/_space.scss

@@ -1,30 +0,0 @@
-/* --------------------------------------------------
-  SPACEトークンの定義
-    Memo: set--s で、SPACEトークンを再定義できる。
--------------------------------------------------- */
-:root,
-.set--s {
-  /**
-   * 余白: フィボナッチ数列をベースに設計する
-   */
-  --s-unit: calc(var(--fz--base) * 0.5); // 計算単位 ≒ 8px
-
-  --s10: var(--s-unit); // ≒ 8px
-  --s20: calc(var(--s-unit) * 2); // ≒ 16px
-  --s30: calc(var(--s-unit) * 3); // ≒ 24px
-  --s40: calc(var(--s-unit) * 5); // ≒ 40px
-  --s50: calc(var(--s-unit) * 8); // ≒ 64px
-  --s60: calc(var(--s-unit) * 13); // ≒ 104px
-  --s70: calc(var(--s-unit) * 21); // ≒ 168px
-  --s80: calc(var(--s-unit) * 34); // ≒ 272px
-
-  // ~40までの前半部分は間を埋める
-  --s5: calc(var(--s-unit) * 0.5); // ≒ 4px
-  --s15: calc(var(--s-unit) * 1.5); // ≒ 12px
-  --s25: calc(var(--s-unit) * 2.5); // ≒ 20px
-  --s35: calc(var(--s-unit) * 4); // ≒ 32px
-}
-.set--s {
-  // 何も指定しなければ em 単位に変換する
-  --s-unit: 0.5em;
-}

package/src/scss/base/tokens/_typography.scss

@@ -1,69 +0,0 @@
-/* --------------------------------------------------
-  ハーフレディング管理変数
--------------------------------------------------- */
-@property --hl {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 0.25rem;
-}
-
-/* --------------------------------------------------
-  typography トークンの定義
--------------------------------------------------- */
-:root {
-  /**
-   * font-size
-   */
-  // font-size: 倍音列でのスケーリング。単位は em
-  --fz--base: 1rem;
-  --fz-mol: 8; // 倍音列の分母（7~ に対応）
-  --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));
-
-  /** 
-   * font-family
-   *   Memo: system-ui は　游ゴシックが適用されてしまう。
-   */
-  // Base font: -apple-system: safari&firefox / 'BlinkMacSystemFont': Chrome / 'Hiragino Sans': Mac / 'Segoe UI Emoji': Windows用
-  --ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';
-
-  // Mono font: SFMono, Menlo: Mac  / Consolas: Win / Liberation Mono: Linux
-  --ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
-
-  // Accent font: This is just one example.
-  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
-
-  /** 
-   * font-weight
-   */
-  --fw--light: 300;
-  --fw--normal: 400;
-  --fw--bold: 600;
-
-  /** 
-   * letter-spacing
-   */
-  --lts--base: normal;
-  --lts--s: -0.025em;
-  --lts--l: 0.05em;
-  --lts--xl: 0.1em;
-
-  /** 
-   * ハーフレディング: unit の倍数で構成する
-   */
-  --hl-unit: calc(var(--fz--base) * 0.125); /* 計算単位 ≒ 2px */
-
-  --hl--xs: var(--hl-unit);
-  --hl--s: calc(var(--hl-unit) * 2);
-  --hl--base: calc(var(--hl-unit) * 3);
-  --hl--l: calc(var(--hl-unit) * 4);
-  // --hl--xl: calc(var(--hl-unit) * 5);
-}

package/src/scss/props/_lh.scss

@@ -1,16 +0,0 @@
-.-lh\:1 {
-  --hl: 0px;
-  // line-height: 1;
-}
-.-lh\:base {
-  --hl: var(--hl--base);
-}
-.-lh\:xs {
-  --hl: var(--hl--xs);
-}
-.-lh\:s {
-  --hl: var(--hl--s);
-}
-.-lh\:l {
-  --hl: var(--hl--l);
-}