Disable atomic CSS

[olivierpascal]

Hello,

This may sounds like a weird request, but I would like to be able to disable atomic CSS.

Atomic CSS definitely has its place in production, but is a nightmare as DX to work with in the browser development tools : it makes the HTML code unclear, it's hard to find the correct css rule to edit or disable and, during dev with Vite and HMR, I need to close and open the tab again (only reloading does not work) every 2min when the inspector is open because, and I don't know exactly why yet, it quickly become so slow that it's unusable.

Ideally, I would like to be able to disable atomic CSS in development.

[predaytor]

The main idea behind StyleX is to have the smallest bundle size for css (with atomic approach), but I'd like to see a feature that disables it for dev mode, like you said.

[nmn]

Disabling atomic CSS would also break style merging so this is not possible.

We currently generate debug classNames for ease-of-use during development. There are also some opportunities to further improve DX with dev tool extensions. That's the path I'm looking into but the exact details are not know for now.

[necolas]

StyleX could generate better dev atomic class names, e.g., xrydnm becomes margin-xrydnm.

Other debugging helpers are best done by integrations, like how react-strict-dom (RSD) adds info to the element tree to help identify which source file contains the component that rendered an element - https://github.com/facebook/react-strict-dom/blob/main/packages/react-strict-dom/README.md - and how react-native-web uses a hook in the React Devtools API to display source styles. I think eventually RSD can do all of this and that would be a better way to use StyleX-like APIs in the future