px unit for grid gap discrepancy between preact-render-to-string and react-dom/server #218

[jpnelson]

We've noticed a discrepancy in how preact / react server renders a component that looks like this:

import React from "preact/compat";
import "./styles.css";

export default function App() {
  return (
    <div
      style={{
        display: "grid",
        "grid-column-gap": 16,
        "grid-row-gap": 24,
        border: "1px solid red"
      }}
    >
      <div className="child">Child</div>
      <div className="child">Child</div>
      <div className="child">Child</div>
      <div className="child">Child</div>
    </div>
  );
}

Code sandboxes for preact and react to compare the output:

• Preact example
• React example

We're using React 16.14.0 but as far as I can tell, React 17.x would have the same discrepancy.

I think the difference is that in Preact, we use this regex:

IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;

Which would match grid-gap, but React explicitly lists non dimensional properties: https://github.com/facebook/react/blob/v17.0.0/packages/react-dom/src/shared/CSSProperty.js#L11

So properties that would be non dimensional in Preact but not React are:

• gridRowGap
• gridColumnGap

There might be more, it might be worth auditing gap properties fully to ensure there aren't more discrepancies