react-spaceman and serverside rendering

[julius-retzer]

Hi again!

Since attachStyles relies on document being defined, I just realized it's currently impossible for us to use it with our CSS modules + SSR setup.

That's a major bummer because we really like it :)

We are considering making a PR but since our setup is a bit specific, maybe we would need to fork, which I would really like to avoid.

Do you have any suggestions how to approach this?

Thanks a lot a for answering these questions!

[sapegin]

It would be very cool to support SSR. If you have any ideas how to do it feel free to send a PR! I guess just checking for document isn’t enough ;-|

[ZauberNerd]

How about removing jss and just using inline styles? Or writing <style> tags yourself in the <Panel /> component?
You would have a bit of duplication in the generated HTML, but I don't think that will matter much, since it is only one or two attributes per element.

[sapegin]

We’re not using JSS.

https://github.com/sapegin/react-spaceman/blob/master/src/styles.ts

[ZauberNerd]

Ah, right I only saw it in the package.json and assumed that it is being used here.

But my proposal is still valid: Don't try to deduplicate css by collecting it and using class names, but instead write either inline styles via the style attribute or inline <style> blocks.

Also: Collecting styles/classes in a module-scoped variable could potentially leak during SSR when the consumer is doing async rendering and multiple request are being handled in the same time, right?

[sapegin]

Don't try to deduplicate css by collecting it and using class names, but instead write either inline styles via the style attribute or inline <style> blocks.

This is something I’m not going to do.

Also: Collecting styles/classes in a module-scoped variable could potentially leak during SSR when the consumer is doing async rendering and multiple request are being handled in the same time, right?

I don’t understand what problems you see here.

[sapegin]

I guess we should extract this code and make CSS available as a string. @Wormyy would that be enough?

react-spaceman/src/Panel.tsx

Lines 15 to 46 in 5988e85

	// margin-bottom
	const belowClasses = addClassesForAllSizes(
	'b',
	(name, value) => `${name} { margin-bottom: ${value}px }`
	);
	// padding-left, padding-right
	const xClasses = addClassesForAllSizes(
	'x',
	(name, value) => `${name} { padding-left: ${value}px; padding-right: ${value}px }`
	);
	// padding-top, padding-bottom
	const yClasses = addClassesForAllSizes(
	'y',
	(name, value) => `${name} { padding-top: ${value}px; padding-bottom: ${value}px }`
	);
	// Inline
	const inlineContainerClass = addClass('i', name => `${name} { display: flex; flex-wrap: wrap }`);
	const inlineClasses = addClassesForAllSizes(
	'i',
	(name, value) => `${name} > *:not(:last-child) { margin-right: ${value}px }`
	);
	// Stack
	const stackClasses = addClassesForAllSizes(
	's',
	(name, value) => `${name} > *:not(:last-child) { margin-bottom: ${value}px }`
	);
	attachAllStyles();

[ZauberNerd]

Also: Collecting styles/classes in a module-scoped variable could potentially leak during SSR when the consumer is doing async rendering and multiple request are being handled in the same time, right?

I don’t understand what problems you see here.

Assuming you do streaming SSR or use react@16s new async rendering and two requests arrive at almost the same time, the first request starts rendering and therefore fills the module-scoped variable with class names that it has collected during rendering.
Then the second request starts rendering and will reuse the same module-scoped variable as the first request, which means one of these two requests will reset the variable before the other one can render it.