Not tree shaking styles during dev mode

[Mkassabov]

Describe the issue

when there are multiple stylex.defineVars in a file all of them are added to the CSS in dev mode even if not all are imported

Expected behavior

tree shaking correctly removes unused stylex.defineVars calls

Steps to reproduce

index.tsx

import * as stylex from "@stylexjs/stylex";
import { Pink } from "./variable.stylex";

const styles = stylex.create({
  color: {
    color: Pink.pink,
  },
});

export function Playground() {
  return (
    <div>
      <span {...stylex.props(styles.color)}>test</span>
    </div>
  );
}

variable.stylex.ts

import * as stylex from "@stylexjs/stylex";

export const Pink = /*@__PURE__*/ stylex.defineVars({
  pink: "pink",
});

export const Green = /*@__PURE__*/ stylex.defineVars({
  green: "green",
});

Green will end up being included in the css in dev mode, and thus the extrenous --green-<id> variable will end up being included.

Test case

run bun install
run bun run dev

(though any package manager should work)

https://github.com/Mkassabov/stylex-vite-tree-shaking

observe that the green variable has been added

Additional comments

adding /*@__PURE__*/ to signify these shouldn't be included in dev mode also doesn't work

The main reason for wanting this is we add our entire color system (which is some ~7500 colors) as stylex styles. the vast majority of which aren't used; this causes the chrome dev tools to become extremely slow

[sergiocarneiro]

This would be useful for me too, and has already been discussed a year ago in issue #717, it's just not implemented yet.

[Mkassabov]

This would be useful for me too, and has already been discussed a year ago in issue #717, it's just not implemented yet.

I saw that issue but I read it as being for production, I think its important this is handled for development too; in fact I'm more okay with it being in production since bundling those 7500 extra colors impact our bundle by like 0.2kb after gzip. the bigger issue is that chrome dev tools become unstably slow (and sometimes crash)

[mellyeliu]

You may have better luck using defineConsts if these variables are not themed so you're not eating up browser memory with CSS variables, iirc @dwei-figma had some luck with defineConsts tokens greatly speeding up dev tools. You can also set these variables to null and then set only the needed values in some part of the DOM tree with themes, which is a pattern we've used internally.

As for the actual fix, it's in the backlog and will prioritize it soon.

[Mkassabov]

You may have better luck using defineConsts if these variables are not themed so you're not eating up browser memory with CSS variables,

defineConsts fixes this (though using solid means I had to fork the vite plugins cause the community ones I could find seem a little abandoned :/ and are on old versions of stylex)

You can also set these variables to null and then set only the needed values in some part of the DOM tree with themes, which is a pattern we've used internally.

these variables are only used to generate themes, they aren't used directly; so setting them to null wouldn't actually help.

As for the actual fix, it's in the backlog and will prioritize it soon.

don't seem to need this anymore since defineConsts solves this for us, but yay anyway!

Thanks for the fast help! 🤍

[nmn]

though using solid means I had to fork the vite plugins cause the community ones I could find seem a little abandoned :/ and are on old versions of stylex

I recently created the @stylexjs/unplugin package which should make integration with Vite apps a lot simpler. We already have a bunch of example react apps and I'll try and add a Solid.js example soon.

If you're using Solid Start, I have seen some issues with Vinxi before but I haven't tried it this time.

---

The tree-shaking of variables is still on our backlog. The actual implementation will likely remove individual variables that are never used rather than just the entire exports.

[Mkassabov]

I recently created the @stylexjs/unplugin package which should make integration with Vite apps a lot simpler. We already have a bunch of example react apps and I'll try and add a Solid.js example soon.

If you're using Solid Start, I have seen some issues with Vinxi before but I haven't tried it this time.

I have both vite + solid and solid start. both seem to work with stylex-extend. Just bumped the stylex versions it uses and everything seems to works fine.

will try out the unplugin at some point over the next few days.