[babel-plugin] StyleX adds logical properties classes when it should not
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
_Related to https://github.com/facebook/stylex/issues/752._
This was very confusing for me to discover. I believe StyleX has a bug when replacing logical properties.
See the following code for example:
```tsx
import * as stylex from "@stylexjs/stylex";
import { CSSPropertiesWithExtras } from "@stylexjs/stylex/lib/StyleXTypes";
const styles = stylex.create({
idea: (args: { width?: CSSPropertiesWithExtras["width"] }) => ({
width: args.width,
}),
});
export function Idea() {
return (
);
}
```
Output (this is correct)::
```html
```
Now see what happens when we use `inline-size` instead of `width`:
```tsx
import * as stylex from "@stylexjs/stylex";
import { CSSPropertiesWithExtras } from "@stylexjs/stylex/lib/StyleXTypes";
const styles = stylex.create({
idea: (args: { inlineSize?: CSSPropertiesWithExtras["inlineSize"] }) => ({
inlineSize: args.inlineSize,
}),
});
export function Idea() {
return (
);
}
```
Output (I believe this is incorrect):
```html
^^^^^^^^^^^^^^
```
When using logical properties, it looks like StyleX is adding the class when it should not, because in this case `inlineSize` is `undefined` and therefore the class should be omitted altogether. This was causing me a lot of problems because it took me a while to figure out it seems to be a side effect of logical properties and not all properties.
I'll try disabling `styleResolution: 'legacy-expand-shorthands'` and see if this problem goes away on its own.
### Expected behavior
_See above_
### Steps to reproduce
_See above_
### Test case
_No response_
### Additional comments
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.