code golf

preactjs · Nov 7, 2023 · ca1ac38 · ca1ac38
1 parent 29e3ada
commit ca1ac38
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 68 deletions.
diff --git a/jsx-runtime/src/index.js b/jsx-runtime/src/index.js
@@ -1,5 +1,6 @@
 import { options, Fragment } from 'preact';
-import { encodeEntities, styleObjToCss } from './utils';
+import { encodeEntities } from './utils';
+import { IS_NON_DIMENSIONAL } from '../../src/constants';
 
 /** @typedef {import('preact').VNode} VNode */
 
@@ -88,6 +89,9 @@ function jsxTemplate(templates, ...exprs) {
 	return vnode;
 }
 
+const JS_TO_CSS = {};
+const CSS_REGEX = /[A-Z]/g;
+
 /**
  * Serialize an HTML attribute to a string. This function is not
  * expected to be used directly, but rather through a precompile
@@ -104,7 +108,29 @@ function jsxAttr(name, value) {
 
 	if (name === 'ref' || name === 'key') return '';
 	if (name === 'style' && typeof value === 'object') {
-		return name + '="' + styleObjToCss(value) + '"';
+		let str = '';
+		for (let prop in value) {
+			let val = value[prop];
+			if (val != null && val !== '') {
+				const name =
+					prop[0] == '-'
+						? prop
+						: JS_TO_CSS[prop] ||
+						  (JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
+
+				let suffix = ';';
+				if (
+					typeof val === 'number' &&
+					// Exclude custom-attributes
+					!name.startsWith('--') &&
+					!IS_NON_DIMENSIONAL.test(name)
+				) {
+					suffix = 'px;';
+				}
+				str = str + name + ':' + val + suffix;
+			}
+		}
+		return name + '="' + str + '"';
 	}
 
 	if (

diff --git a/jsx-runtime/src/utils.js b/jsx-runtime/src/utils.js
@@ -34,69 +34,3 @@ export function encodeEntities(str) {
 	if (i !== last) out += str.slice(last, i);
 	return out;
 }
-
-const IS_NON_DIMENSIONAL = new Set([
-	'animation-iteration-count',
-	'border-image-outset',
-	'border-image-slice',
-	'border-image-width',
-	'box-flex',
-	'box-flex-group',
-	'box-ordinal-group',
-	'column-count',
-	'fill-opacity',
-	'flex',
-	'flex-grow',
-	'flex-negative',
-	'flex-order',
-	'flex-positive',
-	'flex-shrink',
-	'flood-opacity',
-	'font-weight',
-	'grid-column',
-	'grid-row',
-	'line-clamp',
-	'line-height',
-	'opacity',
-	'order',
-	'orphans',
-	'stop-opacity',
-	'stroke-dasharray',
-	'stroke-dashoffset',
-	'stroke-miterlimit',
-	'stroke-opacity',
-	'stroke-width',
-	'tab-size',
-	'widows',
-	'z-index',
-	'zoom'
-]);
-
-const JS_TO_CSS = {};
-const CSS_REGEX = /[A-Z]/g;
-// Convert an Object style to a CSSText string
-export function styleObjToCss(s) {
-	let str = '';
-	for (let prop in s) {
-		let val = s[prop];
-		if (val != null && val !== '') {
-			const name =
-				prop[0] == '-'
-					? prop
-					: JS_TO_CSS[prop] ||
-					  (JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
-
-			let suffix = ';';
-			if (
-				typeof val === 'number' &&
-				// Exclude custom-attributes
-				!name.startsWith('--') &&
-				!IS_NON_DIMENSIONAL.has(name)
-			) {
-				suffix = 'px;';
-			}
-			str = str + name + ':' + val + suffix;
-		}
-	}
-	return str || undefined;
-}