POC: feat: stable style for AtomLabelEditForm

[tpoisseau]

• minimal and optional css reset with <OclReset>
• useCSS internal util to manage dynamic css

Refs: #72

---

Pro:

• Light
• No new build steps
• No deps

Cons:

• Rough DX
  • css in js strings (no autocomplete / color highlights)
  • hardcoded class to use in JSX and css.

[targos]

By reading https://react.dev/reference/react/useInsertionEffect, we should not use useInsertionEffect as we are not a CSS-in-JS library. I don't want us to create our own way of doing it (the documentation doesn't show how to do it correctly with CSSStyleSheet)

[cloudflare-workers-and-pages]

Deploying react-ocl with    Cloudflare Pages

Latest commit:	ab54cff
Status:	✅  Deploy successful!
Preview URL:	https://244e744b.react-ocl.pages.dev
Branch Preview URL:	https://72-ensure-stable-styling-acc.react-ocl.pages.dev

View logs

[tpoisseau]

We are not a CSS-in-JS lib, but what is done here is similar to css-in-js.

But if we want to have this kind of feature (on-demand styling, optional reset) the best we can do is to integrate emotion to this lib. Because we have good knowledge of this lib and it has all features we needs.

• https://emotion.sh/docs/globals for conditional reset
• https://emotion.sh/docs/styled for on-demand styling

[targos]

I wonder if https://react.dev/reference/react-dom/components/style isn't actually the simple answer to just inject css at the level of the component render.

[tpoisseau]

I will give it a try

[tpoisseau]

Ok, So I finally moved OclReset to stories., the reset stylesheet comes from preflight react-science.

I tweaked atomLabelEditCss so it looks nearly identical with and without reset.

And I added a css tagged template literal helper + docs to enable CSS Language injection in js strings for webstorm. It's not perfect but it drastically improves DX with auto-complete and syntax highlight.

[tpoisseau]

So, @targos do you prefer we merge as-is this POC, or do you prefer we use @emotion/styled ?

[targos]

I discussed with Luc and if we are ok with using @emotion/styled if it makes the implementation simpler and if it works transparently for the end-user

[tpoisseau]

With @emotion/styled the DX will be better and simpler related to DX.
With this PoC, it's transparent for the user because the styles are written to be similar with and without a reset stylesheet. And there is no css compilation and the components takes care to implement his styles.

@emotion/styled should keep theses advantages (works transparently for user of lib) and improve the DX at the cost of a new library in the final app bundle (mitigated because we already use this lib in our other libraries like react-science). The cost is for other users of react-ocl.

To conclude:

• react-ocl is responsible to styled his own components to be compatible with and without reset stylesheet. No technology here to help us.
• @emotion/styled to have a better DX and be transparent for apps using this lib.

[targos]

Let's use @emotion/styled. You convinced me that it's generally better to keep something that we have experience with.

And it's not so large after all: https://bundlephobia.com/package/@emotion/styled@11.14.1

[tpoisseau]

Done, But I wonder if I should use dependencies or peerDependencies. WDYT @targos

[targos]

I think dependencies is good.