Provide a way to prune unused css?

[ceopaludetto]

I've testing this library in a razzle setup, works pretty well. I loved it.

Following the readme of sprinkles package, I've read that you can use tailwind color values in colorStyles definitions, then I wrote a normalized object of color and provided to createAtomicStyles function, see the example below:

import { createAtomicStyles, createAtomsFn } from "@vanilla-extract/sprinkles";
import * as colors from "tailwindcss/colors";

type ColorHue = keyof typeof colors["rose"];

type ColorNames = keyof Omit<typeof colors, "black" | "white">;

type ThemeColors = `${ColorNames}${ColorHue}`;

// here we transform { rose: { 50: "#hex", 100: "#hex" } } into { rose50: "#hex", rose100: "#hex" }
const normalizedColors: { [K in ThemeColors]: string } = Object.entries(colors)
  .map(([key, color]) => {
    const normalized = Object.entries(color).map(([hue, value]) => {
      return [`${key}${hue}`, value];
    });

    return Object.fromEntries(normalized);
  })
  .reduce((acc, obj) => ({ ...acc, ...obj }), {});

// and finally we add black and white colors
const withBlackAndWhite = {
  ...normalizedColors,
  black: "#000000",
  white: "#ffffff",
};

export const colorStyles = createAtomicStyles({
  conditions: {
    lightMode: { "@media": "(prefers-color-scheme: light)" },
    darkMode: {
      "@media":
        "(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)",
    },
    hover: { selector: "&:hover" },
    focus: { selector: "&:focus" },
  },
  defaultCondition: false,
  properties: {
    background: withBlackAndWhite,
    color: withBlackAndWhite,
    borderColor: withBlackAndWhite,
  },
});

export const atoms = createAtomsFn(layoutStyles, colorStyles);

When I generate the css, vanilla-extract generate all classes to all possible colors in background, color and borderColor with all possible conditions

See:

I think in a production scenario, devs will only create classes to brand related colors, but even though, can be very useful with we can purge some unused rules

(Sorry about the english)

[ajkachnic]

Yeah it seems like since everything is generated at runtime, it is quite possible to prune the unused properties and not generate classes for them.

In my case, I have a Tailwind-like set up (spacing system, color palette, typography styles). I, no joke, can't run a production build (of Next.js) without V8 crashing

<--- Last few GCs --->

[79006:0x4b9f170]    21091 ms: Mark-sweep 2020.4 (2089.0) -> 2015.7 (2084.3) MB, 65.8 / 0.0 ms  (average mu = 0.187, current mu = 0.131) allocation failure scavenge might not succeed
[79006:0x4b9f170]    21165 ms: Mark-sweep 2021.7 (2090.3) -> 2017.4 (2086.0) MB, 65.0 / 0.0 ms  (average mu = 0.153, current mu = 0.116) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 3: 0xb7978e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 4: 0xb79b07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 5: 0xd34395  [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 6: 0xd34f1f  [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 7: 0xd42fab v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 8: 0xd46b6c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
 9: 0xd1524b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
10: 0x105b23f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]
11: 0x1401219  [/home/andrew/.volta/tools/image/node/14.16.1/bin/node]

I could definitely manually prune this system, but it seems like it is definitely possible for the compiler to do

[mattcompiles]

The out of memory issues are concerning and might need to be addressed.

However, putting that aside I don't think there will be any offical way to prune the atomic CSS from Sprinkles. At least for the time being or until a safe consistent way of doing so is discovered. Vanilla-extract doesn't rely on AST knowledge to work which we see as a big plus and we'd certainly have to give that up to attempt this. Furthermore, we see Sprinkles as a util that provides 80% of your commonly used styles, rather than a huge set of every possible combination.

[AbdallahAbis]

Hey @mattcompiles, any updates on this?
I don't see any docs for purging the unused css.

[sentience]

@AbdallahAbis Matt's update above specifically says the team is unlikely to build this. I think if someone wants this, they'll have to build it themselves.

[jamesopstad]

I was wondering if it might be possible to build a solution for this using proxies. When used in css.ts files, the generated sprinkles function is evaluated at build time so it should be possible to track property access and only generate the css that is actually used. Is this worth exploring or is there an obvious reason why this wouldn't work? Of course, if the sprinkles function is used at runtime then all the css would need to be available but I think the user could make this choice explicitly.

[neolectron]

Hello guys, just wanted to warn you that someone actually made something to prune unused css, it's finally working. More details here :
https://twitter.com/astahmer_dev/status/1601244606133567488

[endigma]

#942