lism-css 0.9.4 → 0.10.0

package/README.md

@@ -30,7 +30,7 @@ For Next.js, load it in `layout.js` (App Router) or `_app.js` (Pages Router).
 For HTML sites, you can load CSS via CDN:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.9.4/dist/css/main.css" rel="stylesheet" />
 ```
 
 ## Usage
@@ -38,11 +38,11 @@ For HTML sites, you can load CSS via CDN:
 ### React
 
 ```jsx
-import { Box, Flex, Stack, HTML } from 'lism-css/react';
+import { Box, Flex, Stack, Text } from 'lism-css/react';
 
 <Stack g="20">
   <Box p="20" bgc="base-2">
-    <HTML.p fz="l">Lorem ipsum text...</HTML.p>
+    <Text fz="l">Lorem ipsum text...</Text>
   </Box>
 </Stack>
 ```
@@ -51,12 +51,12 @@ import { Box, Flex, Stack, HTML } from 'lism-css/react';
 
 ```astro
 ---
-import { Box, Flex, Stack, HTML } from 'lism-css/astro';
+import { Box, Flex, Stack, Text } from 'lism-css/astro';
 ---
 
 <Stack g="20">
   <Box p="20" bgc="base-2">
-    <HTML.p fz="l">Lorem ipsum text...</HTML.p>
+    <Text fz="l">Lorem ipsum text...</Text>
   </Box>
 </Stack>
 ```

package/bin/__build-css.cjs

@@ -18,9 +18,9 @@ const cssnano = require('cssnano');
 
 // consoleの色付け
 const COLOR = {
-	red: '\u001b[31m',
-	green: '\u001b[32m',
-	reset: '\x1b[0m',
+  red: '\u001b[31m',
+  green: '\u001b[32m',
+  reset: '\x1b[0m',
 };
 
 // 環境変数・引数
@@ -28,65 +28,65 @@ const COLOR = {
 // 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);
+  // パス（絶対パスに変換）
+  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);
-		}
-	}
+  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);
+  const dir = path.dirname(filePath);
 
-	// ディレクトリがなければ作成
-	if (!fs.existsSync(dir)) {
-		console.log('mkdir ' + dir);
-		fs.mkdirSync(dir, { recursive: true });
-	}
+  // ディレクトリがなければ作成
+  if (!fs.existsSync(dir)) {
+    console.log('mkdir ' + dir);
+    fs.mkdirSync(dir, { recursive: true });
+  }
 
-	// css書き出し
-	fs.writeFileSync(filePath, css);
+  // css書き出し
+  fs.writeFileSync(filePath, css);
 }

package/bin/build-config.js

@@ -14,34 +14,34 @@ const __dirname = path.dirname(__filename);
  * @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;
+  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;
 }
 
 /**
@@ -51,108 +51,108 @@ function generateUtilities(propConfig, TOKENS) {
  * @returns {string} SCSS形式の文字列
  */
 function generatePropScss(propKey, propConfig, TOKENS) {
-	const { prop = '', bp, isVar, alwaysVar, overwriteBaseVar, important } = propConfig;
-
-	// styleが定義されている場合はそれを使用、なければpropKeyをそのまま使用
-	const utilities = generateUtilities(propConfig, TOKENS);
-
-	// ユーティリティが存在するかどうか
-	const hasUtilities = Object.keys(utilities).length > 0;
-
-	// 出力するCSSがない場合
-	if (!hasUtilities && !bp) {
-		return '';
-	}
-
-	let scss = `\t'${propKey}': (\n`;
-	if (isVar) {
-		scss += `\t\tprop: '--${propKey}',\n`;
-	} else {
-		// propName を prop-name に変換（キャメルケースをケバブケースに変換）
-		scss += `\t\tprop: '${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}',\n`;
-	}
-
-	if (hasUtilities) {
-		const exs = propConfig.exUtility || null;
-
-		scss += `\t\tutilities: (\n`;
-		Object.entries(utilities).forEach(([utilKey, value]) => {
-			// キーに特殊文字が含まれる場合はエスケープ(/,%, : の前に \\ をつける(最終的にscss側の処理で \ ひとつになるようにここでは \\ ))
-			const escapedKey = utilKey.replace(/\//g, '\\\\/').replace(/%/g, '\\\\%').replace(/:/g, '\\\\:');
-
-			// exUtility としても定義されている場合はスキップ
-			if (undefined === exs?.[utilKey]) {
-				scss += `\t\t\t'${escapedKey}': '${value}',\n`;
-			}
-		});
-		scss += `\t\t),\n`;
-
-		if (exs) {
-			scss += `\t\texUtility: (\n`;
-
-			for (const [exKey, exProps] of Object.entries(exs)) {
-				if (typeof exProps === 'object') {
-					scss += `\t\t\t'${exKey}': (\n`;
-					for (const _prop in exProps) {
-						if (exProps[_prop]) {
-							scss += `\t\t\t\t'${_prop}': '${exProps[_prop]}',\n`;
-						}
-					}
-					scss += `\t\t\t),\n`;
-				}
-			}
-			scss += `\t\t),\n`;
-		}
-	}
-
-	if (bp !== undefined) {
-		scss += `\t\tbp: ${bp},\n`;
-	}
-	if (isVar !== undefined) {
-		scss += `\t\tisVar: ${isVar},\n`;
-	}
-	if (alwaysVar !== undefined) {
-		scss += `\t\talwaysVar: ${alwaysVar},\n`;
-	}
-	if (overwriteBaseVar !== undefined) {
-		scss += `\t\toverwriteBaseVar: ${overwriteBaseVar},\n`;
-	}
-	if (important !== undefined) {
-		scss += `\t\timportant: ${important},\n`;
-	}
-
-	scss += `\t),`;
-
-	return scss;
+  const { prop = '', bp, isVar, alwaysVar, overwriteBaseVar, 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 (overwriteBaseVar !== undefined) {
+    scss += `    overwriteBaseVar: ${overwriteBaseVar},\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を生成中...');
+  const { tokens: TOKENS, props: PROPS } = CONFIG;
+  console.log('_prop-config.scssを生成中...');
 
-	let scssContent = '';
+  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;
+  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';
-		}
-	});
+    // 最後の要素でない場合は改行を追加
+    if (index < array.length - 1) {
+      scssContent += '\n';
+    }
+  });
 
-	scssContent += '\n);\n';
+  scssContent += '\n);\n';
 
-	// ファイルに出力
-	const outputPath = path.join(__dirname, '../src/scss/_prop-config.scss');
-	await fs.promises.writeFile(outputPath, scssContent, 'utf8');
+  // ファイルに出力
+  const outputPath = path.join(__dirname, '../src/scss/_prop-config.scss');
+  await fs.promises.writeFile(outputPath, scssContent, 'utf8');
 
-	console.log(`✅ _prop-config.scssを生成しました: ${outputPath}`);
+  console.log(`✅ _prop-config.scssを生成しました: ${outputPath}`);
 }

package/bin/build-css.js

@@ -17,9 +17,9 @@ import cssnano from 'cssnano';
 
 // console の色付け
 const COLOR = {
-	red: '\u001b[31m',
-	green: '\u001b[32m',
-	reset: '\x1b[0m',
+  red: '\u001b[31m',
+  green: '\u001b[32m',
+  reset: '\x1b[0m',
 };
 
 // __dirname（ESM）
@@ -28,63 +28,63 @@ 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);
-		}
-	}
+  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);
+  const dir = path.dirname(filePath);
 
-	// ディレクトリがなければ作成
-	if (!fs.existsSync(dir)) {
-		console.log('mkdir ' + dir);
-		fs.mkdirSync(dir, { recursive: true });
-	}
+  // ディレクトリがなければ作成
+  if (!fs.existsSync(dir)) {
+    console.log('mkdir ' + dir);
+    fs.mkdirSync(dir, { recursive: true });
+  }
 
-	// css書き出し
-	fs.writeFileSync(filePath, css);
+  // 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);
+  // パス（絶対パスに変換）
+  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

@@ -24,46 +24,46 @@ 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 || {};
+  // 指定がない場合、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 は存在する時のみ読み込む
-		let userConfig = {};
-		if (fs.existsSync(userConfigPath)) {
-			const userConfigModule = await import(pathToFileURL(userConfigPath).href);
-			userConfig = userConfigModule?.default || {};
+    // user の lism.config.js は存在する時のみ読み込む
+    let userConfig = {};
+    if (fs.existsSync(userConfigPath)) {
+      const userConfigModule = await import(pathToFileURL(userConfigPath).href);
+      userConfig = userConfigModule?.default || {};
 
-			console.log('===== 📁 userConfig =====');
-			console.log(userConfig);
-			console.log('==========');
-		}
+      console.log('===== 📁 userConfig =====');
+      console.log(userConfig);
+      console.log('==========');
+    }
 
-		// 設定をディープマージ
-		const CONFIG = objDeepMerge(defaultConfig, userConfig);
+    // 設定をディープマージ
+    const CONFIG = objDeepMerge(defaultConfig, userConfig);
 
-		// 動的インポートで同ディレクトリのスクリプトを実行
-		await buildConfig(CONFIG); // SCSSの設定ファイルを出力
-		await buildCSS();
-		return;
-	}
+    // 動的インポートで同ディレクトリのスクリプトを実行
+    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;
-	}
+  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);
+  // 未知のサブコマンドはエラー表示
+  console.error(`Unknown command: ${command}`);
+  process.exit(1);
 }
 
 main().catch((error) => {
-	// 例外は標準エラー出力に流して終了コード1で終了
-	console.error(error);
-	process.exit(1);
+  // 例外は標準エラー出力に流して終了コード1で終了
+  console.error(error);
+  process.exit(1);
 });