search

facebook / stylex

StyleX is the styling system for ambitious user interfaces.
https://stylexjs.com
MIT License
8.44k stars 310 forks source link

Prefix className with propName in development. #739

Closed mellyeliu closed 1 month ago

mellyeliu commented 1 month ago

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 commented 1 month ago

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 (https://github.com/facebook/stylex/issues/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 commented 1 month ago

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 commented 1 month ago

See also #184

mellyeliu commented 1 month ago

Done in https://github.com/facebook/stylex/pull/742