Skip to content

Commit 7a8b590

Browse files
authored
check whether style needs a suffix with a set and remove debug casting (#286)
1 parent 9856a13 commit 7a8b590

File tree

7 files changed

+93
-38
lines changed

7 files changed

+93
-38
lines changed

.changeset/beige-hounds-enjoy.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-render-to-string': patch
3+
---
4+
5+
Change style calculation to use a Set rather than Regex

.changeset/quiet-toes-carry.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-render-to-string': major
3+
---
4+
5+
Remove the castin to VNode for `preact/debug`, this is fixed in Preact >= 10.13.0

package-lock.json

Lines changed: 34 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,11 @@
122122
"microbundle": "^0.15.1",
123123
"mocha": "^8.2.1",
124124
"baseline-rts": "npm:preact-render-to-string@latest",
125-
"preact": "^10.11.1",
125+
"preact": "^10.13.0",
126126
"prettier": "^2.2.1",
127127
"sinon": "^9.2.2",
128128
"sinon-chai": "^3.5.0",
129-
"typescript": "^4.1.3"
129+
"typescript": "^5.0.0"
130130
},
131131
"dependencies": {
132132
"pretty-format": "^3.8.0"

src/index.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -145,15 +145,6 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
145145
rendered =
146146
rendered +
147147
_renderToString(child, context, isSvgMode, selectValue, parent);
148-
149-
if (
150-
typeof child === 'string' ||
151-
typeof child === 'number' ||
152-
typeof child === 'bigint'
153-
) {
154-
// @ts-ignore manually constructing a Text vnode
155-
vnode[i] = h(null, null, child);
156-
}
157148
}
158149
return rendered;
159150
}
@@ -338,6 +329,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
338329
}
339330

340331
if (UNSAFE_NAME.test(type)) {
332+
// this seems to performs a lot better than throwing
333+
// return '<!-- -->';
341334
throw new Error(`${type} is not a valid HTML tag name in ${s}>`);
342335
}
343336

src/util.js

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
33
export const XLINK = /^xlink:?./;
44

55
// DOM properties that should NOT have "px" added when numeric
6-
const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/;
76
const ENCODED_ENTITIES = /["&<]/;
87

98
/** @param {string} str */
@@ -50,9 +49,45 @@ export let isLargeString = (s, length, ignoreLines) =>
5049
String(s).indexOf('<') !== -1;
5150

5251
const JS_TO_CSS = {};
53-
const SUFFIX_CACHE = {};
5452

55-
const CSS_REGEX = /([A-Z])/g;
53+
const IS_NON_DIMENSIONAL = new Set([
54+
'animation-iteration-count',
55+
'border-image-outset',
56+
'border-image-slice',
57+
'border-image-width',
58+
'box-flex',
59+
'box-flex-group',
60+
'box-ordinal-group',
61+
'column-count',
62+
'fill-opacity',
63+
'flex',
64+
'flex-grow',
65+
'flex-negative',
66+
'flex-order',
67+
'flex-positive',
68+
'flex-shrink',
69+
'flood-opacity',
70+
'font-weight',
71+
'grid-column',
72+
'grid-row',
73+
'line-clamp',
74+
'line-height',
75+
'opacity',
76+
'order',
77+
'orphans',
78+
'stop-opacity',
79+
'stroke-dasharray',
80+
'stroke-dashoffset',
81+
'stroke-miterlimit',
82+
'stroke-opacity',
83+
'stroke-width',
84+
'tab-size',
85+
'widows',
86+
'z-index',
87+
'zoom'
88+
]);
89+
90+
const CSS_REGEX = /[A-Z]/g;
5691
// Convert an Object style to a CSSText string
5792
export function styleObjToCss(s) {
5893
let str = '';
@@ -63,17 +98,15 @@ export function styleObjToCss(s) {
6398
prop[0] == '-'
6499
? prop
65100
: JS_TO_CSS[prop] ||
66-
(JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$1').toLowerCase());
101+
(JS_TO_CSS[prop] = prop.replace(CSS_REGEX, '-$&').toLowerCase());
67102

68103
let suffix = ';';
69-
let isNumber = typeof val === 'number';
70-
if (isNumber && SUFFIX_CACHE[name]) {
71-
suffix = 'px;';
72-
} else if (
73-
isNumber &&
74-
IS_NON_DIMENSIONAL.test(prop.toLowerCase()) === false
104+
if (
105+
typeof val === 'number' &&
106+
// Exclude custom-attributes
107+
!name.startsWith('--') &&
108+
!IS_NON_DIMENSIONAL.has(name)
75109
) {
76-
SUFFIX_CACHE[name] = true;
77110
suffix = 'px;';
78111
}
79112
str = str + name + ':' + val + suffix;

test/render.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1313,7 +1313,7 @@ describe('render', () => {
13131313
);
13141314
}
13151315

1316-
expect(render(<App />)).to.equal('<div><p>P481</p><p>P476951</p></div>');
1316+
expect(render(<App />)).to.equal('<div><p>P0-0</p><p>P0-1</p></div>');
13171317
});
13181318
});
13191319
});

0 commit comments

Comments
 (0)