lism-css 0.3.4 → 0.5.0

package/README.md

@@ -33,11 +33,11 @@ For HTML sites, you can also load CSS via CDN.
 ### 3. Using Components
 
 ```jsx
-import { Box, Text, ... } from 'lism-css/react';
+import { Box, HTML, ... } from 'lism-css/react';
 
 // ...
 <Box p='20' bgc="base-2">
-	<Text fz="l">Lorem ipsum text...</Text>
+	<HTML.p fz="l">Lorem ipsum text...</HTML.p>
 </Box>
 // ...
 ```

package/bin/build-config.js

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import getMaybeTokenValue from '../src/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) {
+		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, 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;
+}
+
+/**
+ * メイン処理
+ */
+export default async function buildConfig(CONFIG) {
+	const { tokens: TOKENS, props: PROPS } = CONFIG;
+	console.log('_prop-config.scssを生成中...');
+
+	let scssContent = `// 自動生成されたファイル. 生成日時: ${new Date().toISOString()}\n`;
+
+	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.cjs

@@ -0,0 +1,92 @@
+/* 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);
+}

package/bin/build-css.js

@@ -0,0 +1,90 @@
+/* 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ファイル処理
+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

@@ -0,0 +1,69 @@
+#!/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 '../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, '../config/default-config.js');
+const userConfigPath = path.resolve(projectRoot, 'lism.config.js');
+
+// コマンドライン引数の先頭をサブコマンドとして解釈（デフォルトは 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 は存在する時のみ読み込む
+		let userConfig = {};
+		if (fs.existsSync(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

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

package/config/__prop_list.js

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,25 @@
+@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.js

@@ -0,0 +1,9 @@
+import TOKENS from './defaults/tokens.js';
+import PROPS from './defaults/props.js';
+import STATES from './defaults/states.js';
+
+export default {
+	tokens: TOKENS,
+	props: PROPS,
+	states: STATES,
+};

package/config/defaults/__props-memo.js

@@ -0,0 +1,45 @@
+/**
+	--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
+//