Is there a way to make Sprinkles tree-shakeable

[Ghirigoro]

Sprinkles has been a real pleasure to use, and it's allowed me to be the most productive I've ever been working on the frontend - thank you so much to all the folks who create and maintain it.

Unfortunately though, it produces eye-watering bundle sizes for both css and js assets. For example, In my current project the output from the css.ts that defines the sprinkles is 3X larger than the rest of my code combined.

I've tried addressing the css part of the issue with PurgeCSS but I'm not sure there's a way to do it: the indirection introduced by Sprinkles means that PurgeCSS can't remove anything. The file defining the sprinkles contains all class names, and the rest of the app only contains the keys pointing to the class names, giving PurgeCSS nothing to work with.

As to the JS part I have no clue how to address the issue...

My understanding is that the "official" recommendation is to exercise restraint with Sprinkles (i.e. don't dump all possible utility classes in). That works to a degree but even if you're very disciplined, it breaks down when you start using conditions, as you end up manually managing all the combinations ("this is the subset of sizes that can be used on focus; this is the subset that can be used in mobile; this is the subset that can be focused on mobile; etc..."). At that point the effort required to maintain overrides the DX benefits Sprinkles provides.

Has anyone found an approach to managing this? Am I misunderstanding something?

[askoufis]

It's quite a tricky problem to statically analyze which sprinkles classes are used and not used, and is somewhat outside the realm of what Vanilla Extract is currently capable of.

I would suggest that it's worth evaluating which utility classes actually need conditions on them. It makes sense to have media query conditions for space properties, but is it worth having a :focus condition for space properties? IMO probably not.

Another thing worth considering is whether it would just be easier to have static styles for a subset of your vars. For example, if you only want to allow a subset of colors to be available for :focus styles, rather than using sprinkles you could just create some static styles using styleVariants. This will avoid the creation of extra classnames for the base condition for that subset of colors that would occur if you were to use sprinkles for these :focus styles.

Of course this is all dependent on what you want to allow/disallow in your sprinkles/component API. I'd be happy to take a look at your sprinkles definitions if you don't mind posting them here.

[Ghirigoro]

Thanks for the kind offer of reviewing my sprinkles definitions, but I've been whittling it down to size and am getting there in terms of size. I was more curious about whether there were some options for automating the process through static analysis, but I know that it's not a trivial problem to solve so there might not be any. Some of my issues might stem from the fact that I'm coming from Tailwind so am used to having everything available and letting the JIT compiler do the work of removing unused classes. In the future I'll try to be more judicious about what I add to my definitions, and keep rarely used cases to some variants as you suggest.

Thanks for your help and work on VE/Sprinkles!