Predictable css class generator

[mauroerta]

When used in frameworks like NextJS, style generated at build-time or request-time in the server will produce css classes that they will be different from the one generated at run-time in the client; This inconsistency will cause unexpected behaviours like un-styled elements all around the application.

Scenario

Let's make an example:

function Button() {
  const className = useClassName({ componentName: 'Button', variant: 'primary' });

  return <Button className={className} />;
}

In the current implementation of Morfeo, we don't know what className will be, but let's say that the first time the page is generated at request-time will be button-0-0-1, This will also produce a some real Css that will be appended in the head of document, like:

.button-0-0-1 {
   background-color: #fff;
   color: #000;
   border-radius: 8px;
}

Once the page will be served to the client and rehydrated from Next, since the JSS context is different, a new className will be generated, let's say it will be button-0-1-2.
Since "button-0-0-1" !== "button-0-1-2" the css generated at request time will not be applied to the component.

Solution

The issue can be solved in different ways, for example frameworks/libraries like material-ui or styled-component clean css generated at request-time and force the app to re-generate CSS in client side.
I think tho that the real problem is just how we are generating class names, in fact, if the class name was the same in the server and in the client, the generated css would be applied to the component.

Technically, there is a way to always produce predictable class names, we can construct the class name from the css properties and values of our style, for example:

const style = {
    componentName: 'Button',
    variant: 'primary'
}

we can generate for this style a string like component-name-Button-variant-primary, that is just a concatenation of all the {propertyName}-{propertyValue} of the style itself.