Variables compilation and open-props

[edamascus]

If a VarGroup is imported and used within a stylex.create(), will all variables be included in the compiled CSS file even if they were not used? I have noticed that all variables will be included in the CSS file whether they are used or not. Shouldn't unused variables be excluded?

Another question related to the repo's open-props, can we use those variables? I tried to use colors and they worked well but as mentioned earlier all the colors were added as variables to the compiled CSS file.

However, when I use shadows, styles break and no shadow will be applied to the element. I am using the shadow variable as follows:

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

const container = stylex.create({
  base: {
    // ... other styles
    boxShadow: shadows.shadow2,
  },
});

I currently have a react project setup with vite and vite-plugin-stylex (as explained here) and I want to make sure if this related to the plugin or how the project is setup.

[nmn]

Shouldn't unused variables be excluded?

We will do this eventually, but it's not a high priorirty because
this problem can be solved with a PostCSS or LighteningCSS plugin.

https://github.com/tomasklaen/postcss-prune-var

---

Regarding the use the shadow variables, I just tried it in a NextJS app dir project and everything seems to work correctly for me.

If the issue is during development, try updating to the just released v0.4.1

If the issue is during production, try clearing the Vite cache.

[edamascus]

Yes, all the packages: @stylexjs/stylex, @stylexjs/open-props and @stylexjs/eslint-plugin are now 0.4.1. Everything was working perfectly fine before the update. I have even uninstalled the packages and reinstalled them to make sure. Could this be an issue with the vite-plugin-stylex plugin?

[edamascus]

@nmn, I have created a react project with typescript and Vite from scratch and installed @stylexjs/stylex and wired things up with vite-plugin-stylex and the same error showed up Uncaught TypeError: stylex.inject is not a function. I thought that something might be wrong with my monorepo's node_modules or Vite cache but it looks that the outcome is the same even with a fresh project setup.

[nmn]

We changed the runtime in 0.4.1 where stylex.inject no longer exists and the inject function is now imported directly from @stylex/stylex/lib/stylex-inject. The Babel plugin has also been updated to import this path automatically.

It could be a bug with the Vite plugin, but I'm not sure why that would be the case. I'll investigate some more on my end.

[edamascus]

I was finally able to update to StyleX v0.4.1 with a temp workaround.

I can confirm now that the open-props shadows are applied properly with the updated version.

---

Regarding removing unused variables, I used postcss-prune-var on the generated file as you suggested. I also used @csstools/postcss-cascade-layers plugin to polyfill the css @layer rule.

Since I am using vite-plugin-stylex the useLayers option should be provided by the plugin is that correct?

[nmn]

I also used @csstools/postcss-cascade-layers plugin to #267 (comment) css @layer rule.

This is supported by StyleX itself, but the polyfill should be fine too. So if you can use postcss-plugins, it's not a big deal if the useLayers options isn't available.