[babel-plugin] Exported Styles that use defineVars cause variables to be left behind in the output

[abettadapur]

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"

<div {...stylex.props(styles.myDiv, typographyStyles.textDisplay)} />

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

[mellyeliu]

Addressing in #941