open-props not tree-shaked

[hyperknot]

Describe the issue

I do something as simple as:

import { colors } from '@stylexjs/open-props/lib/colors.stylex'

const styles = stylex.create({
  base: {
    color: colors.indigo6,
  },
});

and I look at the built css, and all the colors are compiled in. That single line is 4500 characters long!

Expected behavior

Only the used color should be present in the compiled css.

Steps to reproduce

I'm using this in Vite with the following versions.

"@stylexjs/open-props": "^0.9.3",
"@stylexjs/stylex": "^0.9.3",
"vite-plugin-stylex": "^0.13.0"

Let me know if this is indeed a bug and then I'll try to make a minimal reproducible case here.

Test case

No response

Additional comments

No response

[nmn]

Thank you for filing this issue. This is a known issue but we forgot to prioritize it.

[hyperknot]

Thank you for the reply, great to hear that!

[hyperknot]

It might be related to this.

I took Radix colors, put them in a single file and did a Replace to add stylex.defineVars(.

Now I have a file like this with 1800 lines:

import * as stylex from '@stylexjs/stylex'

export const gray = stylex.defineVars({
  gray1: '#fcfcfc',
  gray2: '#f9f9f9',
  gray3: '#f0f0f0',
  gray4: '#e8e8e8',
  gray5: '#e0e0e0',
  gray6: '#d9d9d9',
  gray7: '#cecece',
  gray8: '#bbbbbb',
  gray9: '#8d8d8d',
  gray10: '#838383',
  gray11: '#646464',
  gray12: '#202020',
})

export const grayA = stylex.defineVars({
  grayA1: '#00000003',
  grayA2: '#00000006',
  grayA3: '#0000000f',
  grayA4: '#00000017',
  grayA5: '#0000001f',
  grayA6: '#00000026',
  grayA7: '#00000031',
  grayA8: '#00000044',
  grayA9: '#00000072',
  grayA10: '#0000007c',
  grayA11: '#0000009b',
  grayA12: '#000000df',
})

This file is also not tree shaken. I mean the moment I include a single variable, all of them gets included, my CSS size explodes.

Do you think, now with PostCSS, we could just use a plugin for this? Like https://github.com/tomasklaen/postcss-prune-var for example?

[necolas]

I believe open-props is being moved to https://github.com/nmn/stylextras - please migrate any relevant issues there

[nmn]

Although this issue mentions open-props this is not an open-props specific issue and is an issue about stylex.defineVars in general.

The task is to detect which variables are actually used in styles and strip out the rest from the generated CSS file.

[hyperknot]

Thanks for reopening! I looked at https://github.com/tomasklaen/postcss-prune-var, as it might be able to do exactly this, but I don't know what is the state of the PostCSS integration.

[nmn]

@hyperknot You can use the postcss plugin alongside the StyleX postCSS plugin and it should work. I have looked at that plugin too, and it should work in the majority of use-cases but there are small edge-cases where something custom would be needed.

[hyperknot]

So you are considering implementing proper tree-shaking for the StyleX part?

[nmn]

So you are considering implementing proper tree-shaking for the StyleX part?

Yes.

[necolas]

Although this issue mentions open-props this is not an open-props specific issue and is an issue about stylex.defineVars in general.

Please open a new issue with an appropriate title and description. Otherwise this one needs it's title and description completely rewritten.

[necolas]

#941