check whether style needs a suffix with a set and remove debug casting

.changeset/beige-hounds-enjoy.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Change style calculation to use a Set rather than Regex

.changeset/quiet-toes-carry.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': major
+---
+
+Remove the castin to VNode for `preact/debug`, this is fixed in Preact >= 10.13.0

package.json

@@ -122,11 +122,11 @@
 		"microbundle": "^0.15.1",
 		"mocha": "^8.2.1",
 		"baseline-rts": "npm:preact-render-to-string@latest",
-		"preact": "^10.11.1",
+		"preact": "^10.13.0",
 		"prettier": "^2.2.1",
 		"sinon": "^9.2.2",
 		"sinon-chai": "^3.5.0",
-		"typescript": "^4.1.3"
+		"typescript": "^5.0.0"
 	},
 	"dependencies": {
 		"pretty-format": "^3.8.0"

src/index.js

@@ -145,15 +145,6 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			rendered =
 				rendered +
 				_renderToString(child, context, isSvgMode, selectValue, parent);
-
-			if (
-				typeof child === 'string' ||
-				typeof child === 'number' ||
-				typeof child === 'bigint'
-			) {
-				// @ts-ignore manually constructing a Text vnode
-				vnode[i] = h(null, null, child);
-			}
 		}
 		return rendered;
 	}
@@ -338,6 +329,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 	}
 
 	if (UNSAFE_NAME.test(type)) {
+		// this seems to performs a lot better than throwing
+		// return '<!-- -->';
 		throw new Error(`${type} is not a valid HTML tag name in ${s}>`);
 	}
 

src/util.js

@@ -3,7 +3,6 @@ export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 export const XLINK = /^xlink:?./;
 
 // DOM properties that should NOT have "px" added when numeric
-const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/;
 const ENCODED_ENTITIES = /["&<]/;
 
 /** @param {string} str */
@@ -50,9 +49,45 @@ export let isLargeString = (s, length, ignoreLines) =>
 	String(s).indexOf('<') !== -1;
 
 const JS_TO_CSS = {};
-const SUFFIX_CACHE = {};
 
-const CSS_REGEX = /([A-Z])/g;
+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 CSS_REGEX = /[A-Z]/g;
 // Convert an Object style to a CSSText string
 export function styleObjToCss(s) {
 	let str = '';
@@ -63,17 +98,15 @@ export function styleObjToCss(s) {
 				prop[0] == '-'
 					? prop
 					: JS_TO_CSS[prop] ||
-					  (JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$1').toLowerCase());
+					  (JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
 
 			let suffix = ';';
-			let isNumber = typeof val === 'number';
-			if (isNumber && SUFFIX_CACHE[name]) {
-				suffix = 'px;';
-			} else if (
-				isNumber &&
-				IS_NON_DIMENSIONAL.test(prop.toLowerCase()) === false
+			if (
+				typeof val === 'number' &&
+				// Exclude custom-attributes
+				!name.startsWith('--') &&
+				!IS_NON_DIMENSIONAL.has(name)
 			) {
-				SUFFIX_CACHE[name] = true;
 				suffix = 'px;';
 			}
 			str = str + name + ':' + val + suffix;

test/render.test.js

@@ -1313,7 +1313,7 @@ describe('render', () => {
 				);
 			}
 
-			expect(render(<App />)).to.equal('<div><p>P481</p><p>P476951</p></div>');
+			expect(render(<App />)).to.equal('<div><p>P0-0</p><p>P0-1</p></div>');
 		});
 	});
 });