Design system tree-shaking

[m-makara]

Hi, we are currently evaluating panda css for our monorepo design system setup. According to the docs in the case of a monorepo the recommended approach is to just include the design system folder in the config like so:

include: ['../@acme-org/design-system/src/**/*.tsx', './src/**/*.{ts,tsx}']

Supposed then that I have then two components in my design system:

ComponentA:

import { css } from 'styled-system';

export const ComponentA = () => (
  <div className={css({ color: 'red.400' })}></div>
);

ComponentB:

import { css } from 'styled-system';

export const ComponentB = () => (
  <div className={css({ color: 'green.500' })}></div>
);

Then in App.ts only the ComponentA is imported from the design system.

import './index.css';
import { ComponentA } from 'design-system';

export const App = () => {
  return <ComponentA />;
};

The generated resulting index.css contains classes for both ComponentA and ComponentB even though only one of them is used in the final App.

/* Other layers omitted for brevity */
@layer utilities{.text_red\.400{color:var(--colors-red-400)}.text_green\.500{color:var(--colors-green-500)}}

What would be the recommended approach to handle this use case? Since this quickly grows in size when new components are added to the design system and various applications inside the monorepo might require only a handful of provided components.

[kiruushaaa]

seems this is the key https://panda-css.com/docs/guides/static#removing-unused-css
and similar for tokens https://panda-css.com/docs/concepts/hooks#remove-unused-variables-from-final-css in case you're not gonna use token() or token.var()