facebook / facebook/stylex

[babel-plugin] StyleX adds logical properties classes when it should not

Open
#796 3 comments 0 reactions 0 assignees View on GitHub
bug
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 (


Hello


);
}
```

Output (this is correct)::

```html


Hello


```

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 (


Hello


);
}
```

Output (I believe this is incorrect):

```html


Hello

^^^^^^^^^^^^^^

```

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.