Prefix className with propName in development.

[mellyeliu]

Describe the feature request

Right now, we hash the <list of “conditions”>++ to generate classNames for everything!
Instead: For common, key-value pairs, such as margin:0, generate small readable classNames, such as: m-0
We'll want to add this in as a config option to StyleXOptions

Some examples:

Margin:0 -> m-0 / `margin-0`
marginTop: 8px -> m-t-8
marginTop: 1rem -> m-t-1rem / `margin-top-1rem`
marginTop: calc(1rem - 2px); -> `m-t-ksjhc` / `margin-top-jksdhjkh`
display: block -> d-block
flex: 1` -> `f-1`
Float: left -> `fl-left`
Filter: saturate() -> `fi-hshjsfg3`

[necolas]

I wrote a stylex patch in RSD to prefix class names with the prop name: https://github.com/facebook/react-strict-dom/blob/main/patches/%40stylexjs%2Bbabel-plugin%2B0.7.5.patch#L52

I would be wary of trying to generate tailwind-like classes, even if it's only in dev, because people will simply try to write selectors against them. We already had an issue internally where a patch was landed to target a StyleX dev classname.

It was communicated to the CSS BE team that we'd switch to dev data-* props (#723), which would make that a lot less likely for an engineer to try to target with a CSS selector. The GH issue frames it as providing info for a dev tools integration, but it's first an improvement over the current debugging info we generate.

[nmn]

The initial goal is only to make the classes a bit more readable in development. We can start with prefixing class names with the prop name. and leave the hashes for the value part.

[nmn]

See also #184

[mellyeliu]

Done in #742