lism-css 0.9.4 → 0.10.1

package/config/defaults/states.ts

@@ -2,43 +2,43 @@ import getSvgUrl from '../helper/getSvgUrl.js';
 // import minifyHtml from '../helper/minifyHtml.js';
 
 export default {
-	isContainer: 'is--container',
-	isWrapper: {
-		className: 'is--wrapper',
-		preset: ['s', 'l'],
-		presetClass: '-contentSize',
-		customVar: '--contentSize',
-		tokenKey: 'sz',
-	},
-	isLayer: 'is--layer',
-	isLinkBox: 'is--linkBox',
-	isSide: 'is--side',
-	isSkipFlow: 'is--skipFlow',
-	isVertical: 'is--vertical',
-	setGutter: 'set--gutter',
+  isContainer: 'is--container',
+  isWrapper: {
+    className: 'is--wrapper',
+    preset: ['s', 'l'],
+    presetClass: '-contentSize',
+    customVar: '--contentSize',
+    tokenKey: 'sz',
+  },
+  isLayer: 'is--layer',
+  isLinkBox: 'is--linkBox',
+  isSide: 'is--side',
+  isSkipFlow: 'is--skipFlow',
+  isVertical: 'is--vertical',
+  setGutter: 'set--gutter',
 
-	// set class
-	setShadow: 'set--shadow',
-	setHov: 'set--hov',
-	setTransition: 'set--transition',
-	setMask: {
-		// 'set--mask',
-		className: 'set--mask',
-		setStyles: (propVal: string) => {
-			// minify化
-			// propVal = minifyHtml(propVal);
-			let imgUrl = propVal;
-			if (imgUrl.startsWith('<svg')) {
-				imgUrl = getSvgUrl(propVal, 'base64');
-			}
-			return {
-				'--maskImg': imgUrl,
-			};
-		},
-	},
-	setPlain: 'set--plain',
-	// setRevert: 'set--revert',
-	setInnerRs: 'set--innerRs',
-	setBp: 'set--bp',
-	setCqUnit: 'set--cqUnit',
+  // set class
+  setShadow: 'set--shadow',
+  setHov: 'set--hov',
+  setTransition: 'set--transition',
+  setMask: {
+    // 'set--mask',
+    className: 'set--mask',
+    setStyles: (propVal: string) => {
+      // minify化
+      // propVal = minifyHtml(propVal);
+      let imgUrl = propVal;
+      if (imgUrl.startsWith('<svg')) {
+        imgUrl = getSvgUrl(propVal, 'base64');
+      }
+      return {
+        '--maskImg': imgUrl,
+      };
+    },
+  },
+  setPlain: 'set--plain',
+  // setRevert: 'set--revert',
+  setInnerRs: 'set--innerRs',
+  setBp: 'set--bp',
+  setCqUnit: 'set--cqUnit',
 } as const;

package/config/defaults/tokens.ts

@@ -1,27 +1,27 @@
 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'],
-	ff: ['base', 'accent', 'mono'],
-	fw: ['thin', 'light', 'normal', 'medium', 'bold', 'black'],
-	o: ['-10', '-20', '-30'],
-	bdrs: ['5', '10', '20', '30', '40', '50', '99', 'inner'],
-	bxsh: ['5', '10', '20', '30', '40', '50'],
-	sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'container'],
-	ar: ['og'],
-	space: {
-		pre: '--s',
-		values: ['5', '10', '15', '20', '30', '40', '50', '60', '70', '80'],
-	},
-	c: {
-		pre: '--',
-		values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent'],
-	},
-	palette: {
-		pre: '--',
-		values: ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray', 'white', 'black', 'keycolor'],
-	},
-	writing: ['vertical'],
-	flow: ['s', 'l'],
+  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'],
+  ff: ['base', 'accent', 'mono'],
+  fw: ['thin', 'light', 'normal', 'medium', 'bold', 'black'],
+  o: ['-10', '-20', '-30'],
+  bdrs: ['5', '10', '20', '30', '40', '50', '99', 'inner'],
+  bxsh: ['5', '10', '20', '30', '40', '50'],
+  sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'container'],
+  ar: ['og'],
+  space: {
+    pre: '--s',
+    values: ['5', '10', '15', '20', '30', '40', '50', '60', '70', '80'],
+  },
+  c: {
+    pre: '--',
+    values: ['base', 'base-2', 'text', 'text-2', 'divider', 'link', 'brand', 'accent'],
+  },
+  palette: {
+    pre: '--',
+    values: ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray', 'white', 'black', 'keycolor'],
+  },
+  writing: ['vertical'],
+  flow: ['s', 'l'],
 } as const;

package/config/helper/getSvgUrl.ts

@@ -2,25 +2,25 @@
  * svgをcssの image url に変換
  */
 const getSvgUrl = (svg: string, encode = '') => {
-	if (!svg) return '';
+  if (!svg) return '';
 
-	// minify化
-	// svg = minifyHtml(svg);
+  // minify化
+  // svg = minifyHtml(svg);
 
-	if ('base64' === encode) {
-		// memo: btoa() だけだとマルチバイト文字が入った時にエラーになる。
-		// encodeURIComponent() でそれを回避できるがそれだとSVGとして描画できず、 unescape() と組み合わせることで期待する動作になった。 see: https://www.softel.co.jp/blogs/tech/archives/4133
-		// svg = window.btoa(unescape(encodeURIComponent(svg)));
+  if ('base64' === encode) {
+    // memo: btoa() だけだとマルチバイト文字が入った時にエラーになる。
+    // encodeURIComponent() でそれを回避できるがそれだとSVGとして描画できず、 unescape() と組み合わせることで期待する動作になった。 see: https://www.softel.co.jp/blogs/tech/archives/4133
+    // svg = window.btoa(unescape(encodeURIComponent(svg)));
 
-		// memo: Buffer 使えば非推奨な関数を使わなくてもいい see: https://hackersheet.com/naopoyo/sheets/bvtrkwt
-		svg = Buffer.from(svg).toString('base64');
-		return `url(data:image/svg+xml;base64,${svg})`;
-	}
+    // memo: Buffer 使えば非推奨な関数を使わなくてもいい see: https://hackersheet.com/naopoyo/sheets/bvtrkwt
+    svg = Buffer.from(svg).toString('base64');
+    return `url(data:image/svg+xml;base64,${svg})`;
+  }
 
-	// シングルクォートをダブルクォートに変換
-	svg = svg.replace(/'/g, '"');
-	// カラーコードの先頭の # → %23 に置換
-	svg = svg.replace(/="#/g, '="%23');
-	return `url('data:image/svg+xml,${svg}')`;
+  // シングルクォートをダブルクォートに変換
+  svg = svg.replace(/'/g, '"');
+  // カラーコードの先頭の # → %23 に置換
+  svg = svg.replace(/="#/g, '="%23');
+  return `url('data:image/svg+xml,${svg}')`;
 };
 export default getSvgUrl;

package/config/helper/minifyHtml.ts

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