[babel-plugin] stylex.defineVars leaves unused code behind
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
I have two definitions
* I have defined typography design tokens using `defineVars` as follows
```
export const typography = stylex.defineVars({
textDisplayFontFamily: 'Roboto,
textDisplayFontSize: 14,
textDisplayFontWeight: 600,
textDisplayLineHeight: '24px',
...
})
```
* I have defined shared typography _**styles**_ that compose these individual tokens. These are exported to be re-used across the application
```
// stylex-typography.ts
import {typography} from "./tokens.stylex"
export const typographyStyles = stylex.create({
textDisplay: {
fontFamily: typography.textDisplayFontFamily,
fontSize: typography.textDisplayFontSize,
fontWeight: typography.textDisplayFontWeight,
lineHeight: typography.textDisplayLineHeight,
}
})
// component.ts
import {typographyStyles} from "./stylex-typography"
const styles = stylex.create({
myDiv: {
display: 'flex'
}
})
```
This setup causes the StyleX transform to leave behind:
* The result of `defineVars`
```
__webpack_require__.d(__webpack_exports__, {
typography: () => (typography)
})
const typography = {
textDisplayFontFamily: "var(--textDisplayFontFamily-x1rwjgsf)",
textDisplayFontSize: "var(--textDisplayFontSize-x151g8os)",
textDisplayFontWeight: "var(--textDisplayFontWeight-xyqu3li)",
textDisplayLineHeight: "var(--textDisplayLineHeight-x1yrn3sf)",
....
}
```
* Most surprisingly to me, the result of `stylex.create` in the consumer
```
react.createElement("div", {
...stylex.props(styles.myDiv, typographyStyles.textDisplay),
});
const styles = {
myDiv: {
"test_entry__styles.myDiv": "test_entry__styles.myDiv",
display: "display-x78zum5",
$$css: true
}
};
```
Questions:
* Is this behavior expected? Are there significant runtime costs to leave these objects behind in the output?
* Is there a better way that you would suggest to share composed styles like this without leaving behind objects in the output?
### Expected behavior
I at least expected that my consuming component would not leave behind styles just because it is using imported shared styles.
### Steps to reproduce
Repros with latest StyleX babel plugin
### Test case
_No response_
### Additional comments
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.