feat(generator): export tokens individually (WIP)

[juanrgm]

📝 Description

Export tokens individually for tree shaking (+30kb savings).

⛳️ Current behavior (updates)

All tokens are exported in one single object.

🚀 New behavior

Tokens are still exported in a single object, but a new variable (tokens) is available to store all the individually exported tokens.

💣 Is this a breaking change (Yes/No):

No.

📝 Additional Information

There are some issues to address due to the character limit on JS variable names. This has been resolved as follows.

If the variable name is valid, the token can be accessed directly:

import { tokens } from "../styled-system/tokens"
tokens.colors_500

If the variable name is invalid, it will be accessed via a map (e.g., tokens.$['sizes.special_Name!']).

To maintain a similarity with tokens, an exception has been made so that negative numbers cannot be exported in variables: spacing.-1 will be converted to spacing_n1.

There are still some tokens with names that are not allowed due to the use of the (-) character (

panda/packages/studio/styled-system/tokens/tokens-entry.mjs

Line 478 in 0519505

export const $ = {};

):

• easings.in-out
• sizes.breakpoint-sm
• sizes.breakpoint-md
• sizes.breakpoint-lg
• sizes.breakpoint-xl
• sizes.breakpoint-2xl

You can always transform - into _ to allow it to be exported, but this causes conflicts (e.g., easings.in_out and easings.in-out would use the same name).

Another solution for later is to limit the characters allowed in the tokens.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	❌ Failed (Inspect)		Jun 30, 2025 9:24am
panda-playground	✅ Ready (Inspect)	Visit Preview	Jun 30, 2025 9:24am
panda-studio	✅ Ready (Inspect)	Visit Preview	Jun 30, 2025 9:24am

[changeset-bot]

🦋 Changeset detected

Latest commit: 0519505

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@pandacss/generator	Minor
@pandacss/node	Minor
@pandacss/parser	Minor
@pandacss/reporter	Minor
@pandacss/astro-plugin-studio	Minor
@pandacss/dev	Minor
@pandacss/postcss	Minor
@pandacss/studio	Minor
@pandacss/config	Minor
@pandacss/core	Minor
@pandacss/extractor	Minor
@pandacss/is-valid-prop	Minor
@pandacss/logger	Minor
@pandacss/preset-atlaskit	Minor
@pandacss/preset-base	Minor
@pandacss/preset-open-props	Minor
@pandacss/preset-panda	Minor
@pandacss/shared	Minor
@pandacss/token-dictionary	Minor
@pandacss/types	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR