Heavy bundle size

[Narixius]

Hi there, First of all, thanks for your efforts. This project seems to be so catchy and highly DX optimized. I'm going to use it in a mid-size project and so excited about it.

I have question about the default bundle size. I've created a simple Vite project and followed the instructions to configure the Park-ui. I only added the Button component on the first page.

When I build the project, the CSS bundle size is 143 kB which seems very large for a hello-world like project.

The build command output:

public/build/assets/app-YRmq-nzF.css  143.07 kB │ gzip: 26.20 kB

I think I missed something that couses this issue. Please kindly let me know if something is missed during the configuration.

panda.config.css

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
    preflight: true,
    eject: true,
    minify: true,
    presets: ["@pandacss/preset-base", "@park-ui/panda-preset"],
    include: ["./resources/**/*.{js,jsx,ts,tsx}"],
    jsxFramework: "react",
    outdir: "resources/styled-system",
});

park-ui.json

{
    "$schema": "https://park-ui.com/schema.json",
    "cssFramework": "panda",
    "jsFramework": "react",
    "importAliases": {
        "components": "~/js/components",
        "utils": "~/lib"
    },
    "useReactServerComponents": false
}

The app entry file:

import { Button } from "~/js/components/button";
import { Flex } from "~/styled-system/jsx";

export default function HomePage() {
    return (
        <Flex>
            <Button>test button</Button>
        </Flex>
    );
}

Most of the CSS output is filled with not used CSS variables. For example

--colors-white-a4:rgba(255,255,255,.2);--colors-white-a5:rgba(255,255,255,.3);--colors-white-a6:rgba(255,255,255,.4);--colors-white-a7:rgba(255,255,255,.5);--colors-white-a8:rgba(255,255,255,.6);--colors-white-a9:rgba(255,255,255,.7);--colors-white-a10:rgba(255,255,255,.8);--colors-white-a11:rgba(255,255,255,.9);--colors-white-a12:rgba(255,255,255,.95);

Is it possible to remove them from the CSS bundle during build process?

[cschroeter]

@Narixius

Thanks for taking your time to create this issue. I could reproduce the issue and I think what we can do is to allow users to limit the colors added. For example:

  /**
   * Defines additional colors to be included in the color palettes.
   * By default, gray and accent colors are included.
   * @default [] - This means no additional colors are included unless specified.
   */
  additionalColors?: Color[]

And declare your preset like so:

 createPreset({
      accentColor: 'amber',
      grayColor: 'sand',
      additionalColors: ['red', 'green'],
}),

Happy to hear your thoughts

[Narixius]

@cschroeter

Thanks for your response, I truly appreciate your dedication to maintaining this project.

Yeah, that seems fine. The new field (additionalColors) would be very useful in this situation.

[cschroeter]

@Narixius

This feature is now available in 0.34.0.

In the Panda Next.js example I could see a decrease of the CSS bundle from ~28kb to ~7kb using this base configuration:

 import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  jsxFramework: 'react',
  outdir: 'styled-system',
})