Bundle size using sprinkles

[sqrtsanta]

I've tried to bundle an example from https://vanilla-extract.style/documentation/sprinkles-api/ sprinkles.css.ts via esbuild.

// src/sprinkles.css.ts

import {
  defineProperties,
  createSprinkles
} from '@vanilla-extract/sprinkles';

const space = {
  none: 0,
  small: '4px',
  medium: '8px',
  large: '16px'
};

const colors = {
  blue50: '#eff6ff',
  blue100: '#dbeafe',
  blue200: '#bfdbfe'
  // etc.
};

const responsiveProperties = defineProperties({
  conditions: {
    mobile: {},
    tablet: { '@media': 'screen and (min-width: 768px)' },
    desktop: { '@media': 'screen and (min-width: 1024px)' }
  },
  defaultCondition: 'mobile',
  properties: {
    display: ['none', 'block', 'flex'],
    flexDirection: ['row', 'column'],
    padding: space
    // etc.
  }
});

const colorProperties = defineProperties({
  conditions: {
    lightMode: {
      '@media': '(prefers-color-scheme: light)'
    },
    darkMode: { '@media': '(prefers-color-scheme: dark)' }
  },
  defaultCondition: false,
  properties: {
    color: colors,
    background: colors
  }
  // etc.
});

export const sprinkles = createSprinkles(
  responsiveProperties,
  colorProperties
);

// src/index.ts

import { sprinkles } from "./sprinkles.css";

export const buttonStyles = sprinkles({
  color: "blue50",
});

// esbuild.build.js

const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');

require('esbuild')
  .build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    plugins: [vanillaExtractPlugin()],
    outfile: 'dist/bundle.js',
  })
  .catch(() => process.exit(1))

The output was 6.8kb bundle.css & 9.6kb bundle.js. I didn't expect it to be zero-runtime, but was surprised to see that js bundle is bigger than css one. I'm wondering what @vanilla-extract/sprinkles gives me over @vanilla-extract/css to warrant js bundle increase. What's your thoughts?

[mattcompiles]

Hey Bud,

You are building with minify turned off, so most of the bundle size you're seeing is code that is only intended for development builds. With minify enabled the bundle size will decrease dramatically. There's still a small cost to shipping Sprinkles but I don't think it's a significant one.

[sqrtsanta]

Hey, thank you for a fast reply (and for a hard work to you all for creating such an awesome lib)

On the topic, after minification it is 1.1kb css & 2.3kb js, fair enough. My discussion, albeit phrased poorly, isn't about initial cost of @vanilla-extract/css & @vanilla-extract/sprinkles, it's pretty small. I am curious how much using both of them increases my bundle in the long run. Here are the results how one additional css var & one additional property in sprinkles increase bundles:

• Only @vanila-extract/css with one var and one style
  75b bundle.css & 45b bundle.js Codesandbox

• Only @vanila-extract/css with two vars and one style
  105b bundle.css & 43b bundle.js Codesandbox

• Only @vanila-extract/css with ~220 vars of tailwind colors and one style
  4.6kb bundle.css & 45b bundle.js Codesandbox

• Only @vanilla-extract/css with ~1808 vars and one style
  37kb bundle.css & 43b bundle.js Codesandbox

• Both @vanilla-extract/css with one var and @vanila-extract/sprinkles with two properties and one style
  255b bundle.css & 51b bundle.js Codesandbox

• Both @vanilla-extract/css with one var and @vanila-extract/sprinkles with four properties and one style
  762b bundle.css & 65b bundle.js Codesandbox

• Both @vanilla-extract/css with ~220 vars of tailwind colors and @vanila-extract/sprinkles with two properties and one style
  34kb bundle.css & 61b bundle.js Codesandbox

• Both @vanilla-extract/css with ~1808 vars and @vanila-extract/sprinkles with 55 properties/17 shorthands/8 conditions and one style
  272kb bundle.css & 100b bundle.js Codesandbox

It looks like using @vanilla-extract/sprinkles does bloat both bundles, unless I'm doing something wrong.

UPDATE I was very wrong :). Forgot to create styles in *.css.ts files, rather than in index.ts. Updated sandboxes & numbers. @vanilla-extract/sprinkles does only increase bundle.css.

Does it mean that the moment I import sprinkles from sprinkles.css.ts in tsx/jsx file, my js bundle will bloat?

[mattcompiles]

Yeah, it's a tradeoff. The number you see growing is just references to all the classes that get generated, plus things like shorthands. If you created all theses styles manually you'd likely see a similar bundle size as the class references have to be stored in the bundle. Also, I don't think you're taking compression into account. The sprinkles output should compress very well as it's just the same data structures repeating, with hashes that are sequential.

Lastly, I wouldn't think you'd want to generate that many properties through Sprinkles, as you'll never use most of them. We like to use Sprinkles for the most common 80% of your styles. Then we combine it with custom styles, or component specific recipes.

[sqrtsanta]

Got it, thanks a lot!