- Updated dependencies [97a0e4d]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [af9715a]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [cff19aa]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [5e683ee]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [b7ed157]
- Updated dependencies [54426a2]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [dcc9053]
- Updated dependencies [552dd4b]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- d7f5cab: Ensure
globalFontface
definitions are merged correctly - Updated dependencies [c99cb75]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [e952f82]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
f00ff88: BREAKING: Remove
emitPackage
config option,tldr: use
importMap
instead for absolute paths (e.g can be used for component libraries)emitPackage
is deprecated, it's known for causing several issues:- bundlers sometimes eagerly cache the
node_modules
, leading topanda codegen
updates to thestyled-system
not visible in the browser - auto-imports are not suggested in your IDE.
- in some IDE the typings are not always reflected properly
As alternatives, you can use:
- relative paths instead of absolute paths (e.g.
../styled-system/css
instead ofstyled-system/css
) - use package.json #imports and/or tsconfig path aliases (prefer package.json#imports when possible, TS 5.4 supports
them by default) like
#styled-system/css
instead ofstyled-system/css
https://nodejs.org/api/packages.html#subpath-imports - for a component library, use a dedicated workspace package (e.g.
@acme/styled-system
) and useimportMap: "@acme/styled-system"
so that Panda knows which entrypoint to extract, e.g.import { css } from '@acme/styled-system/css'
https://panda-css.com/docs/guides/component-library
- bundlers sometimes eagerly cache the
- Updated dependencies [e157dd1]
- Updated dependencies [19c3a2c]
- Updated dependencies [f00ff88]
- Updated dependencies [17a1932]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 2f63a4c: Fix issue where panda could load unrelated config files that look like a config e.g.
theming-panda.config.ts
- Updated dependencies [1f636eb]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [df2546a]
- Updated dependencies [221c9a2]
- Updated dependencies [2116abe]
- Updated dependencies [c3e797e]
- Updated dependencies [935ec86]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [96b47b3]
- Updated dependencies [bc09d89]
- Updated dependencies [2c8b933]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [74dfb3e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 88049c5: Improve token validation logic to parse references in
tokens
and compositve values likeborders
andshadows
which could be objects. - Updated dependencies [885963c]
- Updated dependencies [99870bb]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [7daf159]
- Updated dependencies [bcfb5c5]
- Updated dependencies [6247dfb]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [bd0cb07]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
2691f16: Add
config.themes
to easily define and apply a theme on multiple tokens at once, using data attributes and CSS variables.Can pre-generate multiple themes with token overrides as static CSS, but also dynamically import and inject a theme stylesheet at runtime (browser or server).
Example:
// panda.config.ts import { defineConfig } from '@pandacss/dev' export default defineConfig({ // ... // main theme theme: { extend: { tokens: { colors: { text: { value: 'blue' }, }, }, semanticTokens: { colors: { body: { value: { base: '{colors.blue.600}', _osDark: '{colors.blue.400}', }, }, }, }, }, }, // alternative theme variants themes: { primary: { tokens: { colors: { text: { value: 'red' }, }, }, semanticTokens: { colors: { muted: { value: '{colors.red.200}' }, body: { value: { base: '{colors.red.600}', _osDark: '{colors.red.400}', }, }, }, }, }, secondary: { tokens: { colors: { text: { value: 'blue' }, }, }, semanticTokens: { colors: { muted: { value: '{colors.blue.200}' }, body: { value: { base: '{colors.blue.600}', _osDark: '{colors.blue.400}', }, }, }, }, }, }, })
By default, no additional theme variant is generated, you need to specify the specific themes you want to generate in
staticCss.themes
to include them in the CSS output.// panda.config.ts import { defineConfig } from '@pandacss/dev' export default defineConfig({ // ... staticCss: { themes: ['primary', 'secondary'], }, })
This will generate the following CSS:
@layer tokens { :where(:root, :host) { --colors-text: blue; --colors-body: var(--colors-blue-600); } [data-panda-theme='primary'] { --colors-text: red; --colors-muted: var(--colors-red-200); --colors-body: var(--colors-red-600); } @media (prefers-color-scheme: dark) { :where(:root, :host) { --colors-body: var(--colors-blue-400); } [data-panda-theme='primary'] { --colors-body: var(--colors-red-400); } } }
An alternative way of applying a theme is by using the new
styled-system/themes
entrypoint where you can import the themes CSS variables and use them in your app.ℹ️ The
styled-system/themes
will always contain every themes (tree-shaken if not used),staticCss.themes
only applies to the CSS output.Each theme has a corresponding JSON file with a similar structure:
{ "name": "primary", "id": "panda-themes-primary", "dataAttr": "primary", "css": "[data-panda-theme=primary] { ... }" }
ℹ️ Note that for semantic tokens, you need to use inject the theme styles, see below
Dynamically import a theme using its name:
import { getTheme } from '../styled-system/themes' const theme = await getTheme('red') // ^? { // name: "red"; // id: string; // css: string; // }
Inject the theme styles into the DOM:
import { injectTheme } from '../styled-system/themes' const theme = await getTheme('red') injectTheme(document.documentElement, theme) // this returns the injected style element
SSR example with NextJS:
// app/layout.tsx import { Inter } from 'next/font/google' import { cookies } from 'next/headers' import { ThemeName, getTheme } from '../../styled-system/themes' export default async function RootLayout({ children }: { children: React.ReactNode }) { const store = cookies() const themeName = store.get('theme')?.value as ThemeName const theme = themeName && (await getTheme(themeName)) return ( <html lang="en" data-panda-theme={themeName ? themeName : undefined}> {themeName && ( <head> <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} /> </head> )} <body>{children}</body> </html> ) } // app/page.tsx import { getTheme, injectTheme } from '../../styled-system/themes' export default function Home() { return ( <> <button onClick={async () => { const current = document.documentElement.dataset.pandaTheme const next = current === 'primary' ? 'secondary' : 'primary' const theme = await getTheme(next) setCookie('theme', next, 7) injectTheme(document.documentElement, theme) }} > swap theme </button> </> ) } // Set a Cookie function setCookie(cName: string, cValue: any, expDays: number) { let date = new Date() date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000) const expires = 'expires=' + date.toUTCString() document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/' }
Finally, you can create a theme contract to ensure that all themes have the same structure:
import { defineThemeContract } from '@pandacss/dev' const defineTheme = defineThemeContract({ tokens: { colors: { red: { value: '' }, // theme implementations must have a red color }, }, }) defineTheme({ selector: '.theme-secondary', tokens: { colors: { // ^^^^ Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }' // // fixed with // red: { value: 'red' }, }, }, })
-
445c7b6: Fix merging issue when using a preset that has a token with a conflicting value with another (or the user's config)
import { defineConfig } from '@pandacss/dev' const userConfig = defineConfig({ presets: [ { theme: { extend: { tokens: { colors: { black: { value: 'black' }, }, }, }, }, }, ], theme: { tokens: { extend: { colors: { black: { 0: { value: 'black' }, 10: { value: 'black/10' }, 20: { value: 'black/20' }, 30: { value: 'black/30' }, }, }, }, }, }, })
When merged with the preset, the config would create nested tokens (
black.10
,black.20
,black.30
) inside of the initially flatblack
token.This would cause issues as the token engine stops diving deeper after encountering an object with a
value
property.To fix this, we now automatically replace the flat
black
token using theDEFAULT
keyword when resolving the config so that the token engine can continue to dive deeper into the object:{ "theme": { "tokens": { "colors": { "black": { "0": { "value": "black", }, "10": { "value": "black/10", }, "20": { "value": "black/20", }, "30": { "value": "black/30", }, - "value": "black", + "DEFAULT": { + "value": "black", + }, }, }, }, }, }
-
861a280: Introduce a new
globalVars
config option to define type-safe CSS variables and custom CSS @property.Example:
import { defineConfig } from '@pandacss/dev' export default defineConfig({ // ... globalVars: { '--some-color': 'red', '--button-color': { syntax: '<color>', inherits: false, initialValue: 'blue', }, }, })
Note: Keys defined in
globalVars
will be available as a value for every utilities, as they're not bound to token categories.import { css } from '../styled-system/css' const className = css({ '--button-color': 'colors.red.300', // ^^^^^^^^^^^^ will be suggested backgroundColor: 'var(--button-color)', // ^^^^^^^^^^^^^^^^^^ will be suggested })
-
Updated dependencies [861a280]
-
Updated dependencies [2691f16]
-
Updated dependencies [340f4f1]
-
Updated dependencies [fabdabe]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 50db354: Add missing reducers to properly return the results of hooks for
config:resolved
andparser:before
- Updated dependencies [50db354]
- Updated dependencies [f6befbf]
- Updated dependencies [a0c4d27]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
58388de: Fix a false positive with the validation check that reported
Missing token
when using a color opacity modifier in configtokens
orsemanticTokens
import { defineConfig } from '@pandacss/dev' export default defineConfig({ validation: 'warn', conditions: { light: '.light &', dark: '.dark &', }, theme: { tokens: { colors: { blue: { 500: { value: 'blue' } }, green: { 500: { value: 'green' } }, }, opacity: { half: { value: 0.5 }, }, }, semanticTokens: { colors: { secondary: { value: { base: 'red', _light: '{colors.blue.500/32}', _dark: '{colors.green.500/half}', }, }, }, }, }, })
Would incorrectly report:
- [tokens] Missing token:
colors.green.500/half
used inconfig.semanticTokens.colors.secondary
- [tokens] Missing token:
colors.blue.500/32
used inconfig.semanticTokens.colors.secondary
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- [tokens] Missing token:
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
1c63216: Add a config validation check to prevent using spaces in token keys, show better error logs when there's a CSS parsing error
-
9f04427: Fix "missing token" warning when using DEFAULT in tokens path
import { defineConfig } from '@pandacss/dev' export default defineConfig({ validation: 'error', theme: { semanticTokens: { colors: { primary: { DEFAULT: { value: '#ff3333' }, lighter: { value: '#ff6666' }, }, background: { value: '{colors.primary}' }, // <-- ⚠️ wrong warning background2: { value: '{colors.primary.lighter}' }, // <-- no warning, correct }, }, }, })
Add a warning when using
value
twiceimport { defineConfig } from '@pandacss/dev' export default defineConfig({ validation: 'error', theme: { tokens: { colors: { primary: { value: '#ff3333' }, }, }, semanticTokens: { colors: { primary: { value: { value: '{colors.primary}' }, // <-- ⚠️ new warning for this }, }, }, }, })
-
Updated dependencies [d1516c8]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 8feeb95: Add
definePlugin
config functions for type-safety around plugins, add missingplugins
in config dependencies to trigger a config reload onplugins
change - Updated dependencies [cca50d5]
- Updated dependencies [fde37d8]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
a032375: Add a way to create config conditions with nested at-rules/selectors
export default defaultConfig({ conditions: { extend: { supportHover: ['@media (hover: hover) and (pointer: fine)', '&:hover'], }, }, })
import { css } from '../styled-system/css' css({ _supportHover: { color: 'red', }, })
will generate the following CSS:
@media (hover: hover) and (pointer: fine) { &:hover { color: red; } }
-
89ffb6b: Add missing config dependencies for some
styled-system/types
files -
Updated dependencies [a032375]
-
Updated dependencies [89ffb6b]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
de4d9ef: Allow
config.hooks
to be shared inplugins
For hooks that can transform Panda's internal state by returning something (like
cssgen:done
andcodegen:prepare
), each hook instance will be called sequentially and the return result (if any) of the previous hook call is passed to the next hook so that they can be chained together.
- Updated dependencies [8cd8c19]
- Updated dependencies [60cace3]
- Updated dependencies [de4d9ef]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
f0296249: - Sort the longhand/shorthand atomic rules in a deterministic order to prevent property conflicts
- Automatically merge the
base
object in thecss
root styles in the runtime - This may be a breaking change depending on how your styles are created
Ex:
css({ padding: '1px', paddingTop: '3px', paddingBottom: '4px', })
Will now always generate the following css:
@layer utilities { .p_1px { padding: 1px; } .pt_3px { padding-top: 3px; } .pb_4px { padding-bottom: 4px; } }
- Automatically merge the
- e2ad0eed: - Fix issue in token validation logic where token with additional properties like
description
is considered invalid.- When
validation
is set toerror
, show all config errors at once instead of stopping at the first error.
- When
- 2d69b340: Fix
styled
factory nested composition withcva
- ddeda8ac: Add missing log with the
panda -w
CLI, exposeresolveConfig
from@pandacss/config
- Updated dependencies [8f36f9af]
- Updated dependencies [f0296249]
- Updated dependencies [a17fe387]
- Updated dependencies [2d69b340]
- Updated dependencies [40cb30b9]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [6b829cab]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- ffe177fd: Fix the regression caused by the downstream bundle-n-require package, which tries to load custom conditions
first. This led to a
could not resolve @pandacss/dev
error- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 0dd45b6a: Fix issue where config changes could not be detected due to config bundling returning stale result sometimes.
-
74485ef1: Add
utils
functions in theconfig:resolved
hook, making it easy to apply transformations after all presets have been merged.For example, this could be used if you want to use most of a preset but want to completely omit a few things, while keeping the rest. Let's say we want to remove the
stack
pattern from the built-in@pandacss/preset-base
:import { defineConfig } from '@pandacss/dev' export default defineConfig({ // ... hooks: { 'config:resolved': ({ config, utils }) => { return utils.omit(config, ['patterns.stack']) }, }, })
-
ab32d1d7: Fix issue where errors were thrown when semantic tokens are overriden in tokens.
-
d5977c24: - Add a
--logfile
flag to thepanda
,panda codegen
,panda cssgen
andpanda debug
commands.- Add a
logfile
option to the postcss plugin
Logs will be streamed to the file specified by the
--logfile
flag or thelogfile
option. This is useful for debugging issues that occur during the build process.panda --logfile ./logs/panda.log
module.exports = { plugins: { '@pandacss/dev/postcss': { logfile: './logs/panda.log', }, }, }
- Add a
-
Updated dependencies [74485ef1]
-
Updated dependencies [ab32d1d7]
-
Updated dependencies [49c760cd]
-
Updated dependencies [d5977c24]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
a2fb5cc6: - Add support for explicitly specifying config related files that should trigger a context reload on change.
We automatically track the config file and (transitive) files imported by the config file as much as possible, but sometimes we might miss some. You can use this option as a workaround for those edge cases.
Set the
dependencies
option inpanda.config.ts
to a glob or list of files.export default defineConfig({ // ... dependencies: ['path/to/files/**.ts'], })
-
Invoke
config:change
hook in more situations (when the--watch
flag is passed topanda codegen
,panda cssgen
,panda ship
) -
Watch for more config options paths changes, so that the related artifacts will be regenerated a bit more reliably (ex: updating the
config.hooks
will now trigger a full regeneration ofstyled-system
)
-
-
ea3f5548: Add config validation:
- Check for duplicate between token & semanticTokens names
- Check for duplicate between recipes/patterns/slots names
- Check for token / semanticTokens paths (must end/contain 'value')
- Check for self/circular token references
- Check for missing tokens references
- Check for conditions selectors (must contain '&')
- Check for breakpoints units (must be the same)
You can set
validate: 'warn'
in your config to only warn about errors or set it tonone
to disable validation entirely. -
Updated dependencies [5fcdeb75]
-
Updated dependencies [250b4d11]
-
Updated dependencies [f778d3e5]
-
Updated dependencies [a2fb5cc6]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
f58f6df2: Refactor
config.hooks
to be much more powerful, you can now:- Tweak the config after it has been resolved (after presets are loaded and merged), this could be used to dynamically
load all
recipes
from a folder - Transform a source file's content before parsing it, this could be used to transform the file content to a
tsx
-friendly syntax so that Panda's parser can parse it. - Implement your own parser logic and add the extracted results to the classic Panda pipeline, this could be used to parse style usage from any template language
- Tweak the CSS content for any
@layer
or even right before it's written to disk (if using the CLI) or injected through the postcss plugin, allowing all kinds of customizations like removing the unused CSS variables, etc. - React to any config change or after the codegen step (your outdir, the
styled-system
folder) have been generated
See the list of available
config.hooks
here:export interface PandaHooks { /** * Called when the config is resolved, after all the presets are loaded and merged. * This is the first hook called, you can use it to tweak the config before the context is created. */ 'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn /** * Called when the Panda context has been created and the API is ready to be used. */ 'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void /** * Called when the config file or one of its dependencies (imports) has changed. */ 'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn /** * Called after reading the file content but before parsing it. * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it. * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything. */ 'parser:before': (args: { filePath: string; content: string }) => string | void /** * Called after the file styles are extracted and processed into the resulting ParserResult object. * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object. */ 'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void /** * Called after the codegen is completed */ 'codegen:done': () => MaybeAsyncReturn /** * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin. */ 'cssgen:done': (args: { artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css' content: string }) => string | void }
- Tweak the config after it has been resolved (after presets are loaded and merged), this could be used to dynamically
load all
- Updated dependencies [f58f6df2]
- Updated dependencies [770c7aa4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [1ed4df77]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [ee9341db]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
84304901: Improve performance, mostly for the CSS generation by removing a lot of
postcss
usage (and plugins).- Introduce a new
config.lightningcss
option to uselightningcss
(currently disabled by default) instead ofpostcss
. - Add a new
config.browserslist
option to configure the browserslist used bylightningcss
. - Add a
--lightningcss
flag to thepanda
andpanda cssgen
command to uselightningcss
instead ofpostcss
for this run.
markImportant
fn from JS instead of walking through postcss AST nodes- use a fork of
stitches
stringify
function instead ofpostcss-css-in-js
to write the CSS string from a JS object - only compute once
TokenDictionary
properties - refactor
serializeStyle
to use the same code path as the rest of the pipeline withStyleEncoder
/StyleDecoder
and rename it totransformStyles
to better convey what it does
- Introduce a new
-
c9195a4e: ## Change
Change the config dependencies (files that are transitively imported) detection a bit more permissive to make it work by default in more scenarios.
This helps when you're in a monorepo and you have a workspace package for your preset, and you want to see the HMR reflecting changes in your app.
Currently, we only traverse files with the
.ts
extension, this change makes it traverse all files ending with.ts
, meaning that it will also traverse.d.ts
,.d.mts
,.mts
, etc.// apps/storybook/panda.config.ts import { defineConfig } from '@pandacss/dev' import preset from '@acme/preset' export default defineConfig({ // ... })
This would not work before, but now it does.
{ "name": "@acme/preset", "types": "./dist/index.d.mts", // we only looked into `.ts` files, so we didnt check this "main": "./dist/index.js", "module": "./dist/index.mjs", }
This would have been fine before that change.
// packages/preset/package.json { "name": "@acme/preset", "types": "./src/index.ts", // this was fine "main": "./dist/index.js", "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js", }, // ... }, }
-
Updated dependencies [84304901]
-
Updated dependencies [bee3ec85]
-
Updated dependencies [74ac0d9d]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [f823a8c5]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
1bd7fbb7: Fix an edge-case for when the
config.outdir
would not be set in thepanda.config
Internal details: The
outdir
would not have any value after a config change due to the fallback being set in the initial config resolving code path but not in context reloading code path, moving it inside the config loading function fixes this issue. -
Updated dependencies [3f6b3662]
-
Updated dependencies [657ca5da]
-
Updated dependencies [b5cf6ee6]
-
Updated dependencies [58df7d74]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [59fd291c]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [71e82a4e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [f6881022]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [bd552b1f]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [8f4ce97c]
- Updated dependencies [647f05c9]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [526c6e34]
- Updated dependencies [8db47ec6]
- Updated dependencies [1cc8fcff]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [26e6051a]
- Updated dependencies [5b061615]
- Updated dependencies [105f74ce]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [428e5401]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
904aec7b: - Add support for
staticCss
in presets allowing you create sharable, pre-generated styles- Add support for extending
staticCss
defined in presets
const presetWithStaticCss = definePreset({ staticCss: { recipes: { // generate all button styles and variants button: ['*'], }, }, }) export default defineConfig({ presets: [presetWithStaticCss], staticCss: { extend: { recipes: { // extend and pre-generate all sizes for card card: [{ size: ['small', 'medium', 'large'] }], }, }, }, })
- Add support for extending
- 24ee49a5: - Add support for granular config change detection
- Improve the
codegen
experience by only rewriting files affecteds by a config change
- Improve the
- Updated dependencies [24ee49a5]
- Updated dependencies [904aec7b]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [61831040]
- Updated dependencies [89f86923]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [3e1ea626]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [ce34ea45]
- Updated dependencies [aac7b379]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [fa77080a]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [529a262e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [fc4688e6]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [0f3bede5]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- abd7c47a: Fix preset merging, config wins over presets.
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [1ac2011b]
- Updated dependencies [58743bc4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
2645c2da: > Note: This is only relevant for users using more than 1 custom defined preset that overlap with each other.
BREAKING CHANGE: Presets merging order felt wrong (left overriding right presets) and is now more intuitive (right overriding left presets)
Example:
const firstConfig = definePreset({ theme: { tokens: { colors: { 'first-main': { value: 'override' }, }, }, extend: { tokens: { colors: { orange: { value: 'orange' }, gray: { value: 'from-first-config' }, }, }, }, }, }) const secondConfig = definePreset({ theme: { tokens: { colors: { pink: { value: 'pink' }, }, }, extend: { tokens: { colors: { blue: { value: 'blue' }, gray: { value: 'gray' }, }, }, }, }, }) // Final config export default defineConfig({ presets: [firstConfig, secondConfig], })
Here's the difference between the old and new behavior:
{ "theme": { "tokens": { "colors": { "blue": { "value": "blue" }, - "first-main": { - "value": "override" - }, "gray": { - "value": "from-first-config" + "value": "gray" }, "orange": { "value": "orange" }, + "pink": { + "value": "pink", + }, } } } }
-
Updated dependencies [26a788c0]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [4bc515ea]
- Updated dependencies [39298609]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [8106b411]
- Updated dependencies [e6459a59]
- Updated dependencies [6f7ee198]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- d0fbc7cc: Allow
.mts
and.cts
panda config extension - Updated dependencies [d0fbc7cc]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [bf2ff391]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [23b516f4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
dead08a2: Normalize tsconfig path mapping result to posix path.
It fix not generating pattern styles on windows eventually.
-
Updated dependencies [5b95caf5]
-
Updated dependencies [811f4fb1]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [24e783b3]
- Updated dependencies [00d11a8b]
- Updated dependencies [1972b4fa]
- Updated dependencies [386e5098]
- Updated dependencies [a669f4d5]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [c08de87f]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- e1f6318a: Fix module resolution issue when using panda from a browser environment
- be0ad578: Fix parser issue with TS path mappings
- Updated dependencies [be0ad578]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 1a05c4bb: Fix issue where hot module reloading is inconsistent in the PostCSS plugin when another internal typescript-only package is changed
- Updated dependencies [60a77841]
- Updated dependencies [a9c189b7]
- Updated dependencies [d9eeba60]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [97fbe63f]
- Updated dependencies [08d33e0f]
- Updated dependencies [f7aff8eb]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
33198907: Create separate entrypoint for merge configs
import { mergeConfigs } from '@pandacss/config/merge'
-
1a2c0e2b: Fix
panda.config.xxx
file dependencies detection when using the builder (= with PostCSS or with the VSCode extension). It will now also properly resolve tsconfig path aliases. -
Updated dependencies [8c670d60]
-
Updated dependencies [f9247e52]
-
Updated dependencies [1ed239cd]
-
Updated dependencies [78ed6ed4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [ead9eaa3]
- Updated dependencies [3a87cff8]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [e8024347]
- Updated dependencies [d00eb17c]
- Updated dependencies [9156c1c6]
- Updated dependencies [54a8913c]
- Updated dependencies [0f36ebad]
- Updated dependencies [c7b42325]
- Updated dependencies [5b344b9c]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 9822d79a: Remove
bundledDependencies
frompackage.json
to fix NPM resolution- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- efd79d83: Baseline release for the launch
- Updated dependencies [efd79d83]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [bd5c049b]
- Updated dependencies [6d81ee9e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
c308e8be: Allow asynchronous presets
-
fb40fff2: Initial release of all packages
- Internal AST parser for TS and TSX
- Support for defining presets in config
- Support for design tokens (core and semantic)
- Add
outExtension
key to config to allow file extension options for generated javascript..js
or.mjs
- Add
jsxElement
option to patterns, to allow specifying the jsx element rendered by the patterns.
-
Updated dependencies [c308e8be]
-
Updated dependencies [fb40fff2]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]