- 44457bb: Use TypeScript 6.0 or later with Panda. This release updates static analysis and codegen to ts-morph v28 and TypeScript 6.0.2.
- Updated dependencies [c31f3a2]
- Updated dependencies [44457bb]
- @pandacss/shared@1.10.0
- @pandacss/shared@1.9.1
- @pandacss/shared@1.9.0
- @pandacss/shared@1.8.2
- @pandacss/shared@1.8.1
- @pandacss/shared@1.8.0
- @pandacss/shared@1.7.3
- @pandacss/shared@1.7.2
- @pandacss/shared@1.7.1
- @pandacss/shared@1.7.0
- @pandacss/shared@1.6.1
- @pandacss/shared@1.6.0
- @pandacss/shared@1.5.1
-
1b85b61: Add
endLineNumberandendColumnfields to AST JSON output frompanda debugcommand.The
*.ast.jsonfiles generated bypanda debugnow include complete position information for detected CSS usage locations. Previously, only start position (lineandcolumn) was exported. Now the output includes:line: Start line numbercolumn: Start column numberendLineNumber: End line number (new)endColumn: End column number (new)
This provides complete span coverage for each detected node, making it easier to precisely locate CSS usage in source files.
Fixes #3407
- @pandacss/shared@1.5.0
- @pandacss/shared@1.4.3
- 1290a27: Only log errors that are instances of
PandaError, preventing test framework and other non-Panda errors from being logged during development. - Updated dependencies [1290a27]
- @pandacss/shared@1.4.2
- @pandacss/shared@1.4.1
- @pandacss/shared@1.4.0
- @pandacss/shared@1.3.1
- @pandacss/shared@1.3.0
- @pandacss/shared@1.2.0
- Updated dependencies [e8ec0aa]
- @pandacss/shared@1.1.0
- @pandacss/shared@1.0.1
-
a3bcbea: Stable release of PandaCSS
Add
createStyleContextfunction to framework artifacts for React, Preact, Solid, and Vue frameworksimport { sva } from 'styled-system/css' import { createStyleContext } from 'styled-system/jsx' const card = sva({ slots: ['root', 'label'], base: { root: { color: 'red', bg: 'red.300', }, label: { fontWeight: 'medium', }, }, variants: { size: { sm: { root: { padding: '10px', }, }, md: { root: { padding: '20px', }, }, }, }, defaultVariants: { size: 'sm', }, }) const { withProvider, withContext } = createStyleContext(card) const CardRoot = withProvider('div', 'root') const CardLabel = withContext('label', 'label')
Then, use like this:
<CardRoot size="sm"> <CardLabel>Hello</CardLabel> </CardRoot>
- Updated dependencies [a3bcbea]
- @pandacss/shared@1.0.0
- Updated dependencies [efa060d]
- Updated dependencies [d2aede5]
- @pandacss/shared@0.54.0
- @pandacss/shared@0.53.7
- @pandacss/shared@0.53.6
- @pandacss/shared@0.53.5
- @pandacss/shared@0.53.4
- @pandacss/shared@0.53.3
- @pandacss/shared@0.53.2
- @pandacss/shared@0.53.1
- @pandacss/shared@0.53.0
- @pandacss/shared@0.52.0
- @pandacss/shared@0.51.1
-
d68ad1f: [BREAKING]: Fix issue where Next.js build might fail intermittently due to version mismatch between internal
ts-morphand userlandtypescript.The current version of TS supported is
5.6.2
- @pandacss/shared@0.51.0
- @pandacss/shared@0.50.0
- @pandacss/shared@0.49.0
- @pandacss/shared@0.48.1
- @pandacss/shared@0.48.0
- @pandacss/shared@0.47.1
- @pandacss/shared@0.47.0
- @pandacss/shared@0.46.1
- Updated dependencies [54426a2]
- @pandacss/shared@0.46.0
- @pandacss/shared@0.45.2
- @pandacss/shared@0.45.1
- Updated dependencies [552dd4b]
- @pandacss/shared@0.45.0
- @pandacss/shared@0.44.0
- @pandacss/shared@0.43.0
- 19c3a2c: Minor changes to the format of the
panda analyze --output coverage.jsonfile- @pandacss/shared@0.42.0
-
2750261: Fix an issue where spreading an identifier in a sva
slotsarray would prevent expected CSS from being generatedimport { sva } from 'styled-system/css' const parts = ['positioner', 'content'] const card = sva({ slots: [...parts], // <- spreading here was causing the below CSS not to be generated, it's now fixed ✅ base: { root: { p: '6', }, }, })
- @pandacss/shared@0.41.0
- @pandacss/shared@0.40.1
- @pandacss/shared@0.40.0
- Updated dependencies [1f636eb]
- @pandacss/shared@0.39.2
- @pandacss/shared@0.39.1
- Updated dependencies [935ec86]
- @pandacss/shared@0.39.0
- Updated dependencies [2c8b933]
- @pandacss/shared@0.38.0
- @pandacss/shared@0.37.2
- Updated dependencies [99870bb]
- @pandacss/shared@0.37.1
- Updated dependencies [7daf159]
- @pandacss/shared@0.37.0
- @pandacss/shared@0.36.1
- @pandacss/shared@0.36.0
- @pandacss/shared@0.35.0
- @pandacss/shared@0.34.3
-
0bf09f2: Allow using namespaced imports
import * as p from 'styled-system/patterns' import * as recipes from 'styled-system/recipes' import * as panda from 'styled-system/css' // this will now be extracted p.stack({ mt: '40px' }) recipes.cardStyle({ rounded: true }) panda.css({ color: 'red' }) panda.cva({ base: { color: 'blue' } }) panda.sva({ base: { root: { color: 'green' } } })
- @pandacss/shared@0.34.2
- @pandacss/shared@0.34.1
- @pandacss/shared@0.34.0
- @pandacss/shared@0.33.0
- @pandacss/shared@0.32.1
- 7e70b6b: Fix issue where
0values doesn't get extracted when used in a condition - Updated dependencies [8cd8c19]
- @pandacss/shared@0.32.0
- Updated dependencies [f0296249]
- @pandacss/shared@0.31.0
- @pandacss/shared@0.30.2
- @pandacss/shared@0.30.1
- Updated dependencies [ab32d1d7]
- Updated dependencies [49c760cd]
- @pandacss/shared@0.30.0
- @pandacss/shared@0.29.1
- @pandacss/shared@0.29.0
-
84304901: Improve performance, mostly for the CSS generation by removing a lot of
postcssusage (and plugins).- Introduce a new
config.lightningcssoption to uselightningcss(currently disabled by default) instead ofpostcss. - Add a new
config.browserslistoption to configure the browserslist used bylightningcss. - Add a
--lightningcssflag to thepandaandpanda cssgencommand to uselightningcssinstead ofpostcssfor this run.
markImportantfn from JS instead of walking through postcss AST nodes- use a fork of
stitchesstringifyfunction instead ofpostcss-css-in-jsto write the CSS string from a JS object - only compute once
TokenDictionaryproperties - refactor
serializeStyleto use the same code path as the rest of the pipeline withStyleEncoder/StyleDecoderand rename it totransformStylesto better convey what it does
- Introduce a new
-
1464460f: Fix static extraction issue when using JSX attributes (props) that are other JSX nodes
While parsing over the AST Nodes, due to an optimization where we skipped retrieving the current JSX element and instead kept track of the latest one, the logic was flawed and did not extract other properties after encountering a JSX attribute that was another JSX node.
const Component = () => { return ( <> {/* ❌ this wasn't extracting ml="2" */} <Flex icon={<svg className="icon" />} ml="2" /> {/* ✅ this was fine */} <Stack ml="4" icon={<div className="icon" />} /> </> ) }
Now both will be fine again.
- 336fd0b0: Perf: use raw
ifinstead of ts-pattern in the extractor (hot path)
-
a76b279e: Extract identifier values coming from an
EnumDeclarationmemberExample:
enum Color { Red = 'red.400', Blue = 'blue.400', } const className = css({ color: Color.Red, backgroundColor: Color['Blue'] })
-
3a04a927: Fix static extraction of the Array Syntax when used with runtime conditions
Given a component like this:
function App() { return <Box py={[2, verticallyCondensed ? 2 : 3, 4]} /> }
the
pyvalue was incorrectly extracted like this:{ "py": { "1": 2, }, }, { "py": { "1": 3, }, },
which would then generate invalid CSS like:
.paddingBlock\\\\:1_2 { 1: 2px; } .paddingBlock\\\\:1_3 { 1: 3px; }
it's now correctly transformed back to an array:
{ "py": { - "1": 2, + [ + undefined, + 2, + ] }, }, { "py": { - "1": 3, + [ + undefined, + 3, + ] }, },which will generate the correct CSS
@media screen and (min-width: 40em) { .sm\\\\:py_2 { padding-block: var(--spacing-2); } .sm\\\\:py_3 { padding-block: var(--spacing-3); } }
-
c40ae1b9: feat(parser): extract {fn}.raw as an identity fn
so this will now work:
import { css } from 'styled-system/css' const paragraphSpacingStyle = css.raw({ '&:not(:first-child)': { marginBlockEnd: '1em' }, }) export const proseCss = css.raw({ maxWidth: '800px', '& p': { '&:not(:first-child)': { marginBlockStart: '1em' }, }, '& h1': paragraphSpacingStyle, '& h2': paragraphSpacingStyle, })
& use ECMA preset for ts-evaluator: This means that no other globals than those that are defined in the ECMAScript spec such as Math, Promise, Object, etc, are available but it allows for some basic evaluation of expressions like this:
import { cva } from '.panda/css' const variants = () => { const spacingTokens = Object.entries({ s: 'token(spacing.1)', m: 'token(spacing.2)', l: 'token(spacing.3)', }) const spacingProps = { px: 'paddingX', py: 'paddingY', } // Generate variants programmatically return Object.entries(spacingProps) .map(([name, styleProp]) => { const variants = spacingTokens .map(([variant, token]) => ({ [variant]: { [styleProp]: token } })) .reduce((_agg, kv) => ({ ..._agg, ...kv })) return { [name]: variants } }) .reduce((_agg, kv) => ({ ..._agg, ...kv })) } const baseStyle = cva({ variants: variants(), })
-
be24d1a0: Fix issue (#1365) with the
unboxfn that removed nullish values, which could be useful for the Array Syntaxconst className = css({ color: ['black', undefined, 'orange', 'red'], })
-
7c1ab170: Fix issue where the
satisfieswould prevent an object from being extracted
-
3269b411: Fix extractor issue where we didn't explore both branches when using a default value as the condition expression
In the example below, only the
yellowcolor would be generated although thebluecolor should also be generated in case thedisabledprop istrue.const CompB = ({ disabled = false }: { disabled: boolean }) => { return <div className={css({ color: disabled ? 'blue' : 'yellow' })}>Component B is disabled</div> }
-
fb449016: Fix cases where Stitches
styled.withConfigwould be misinterpreted as a panda fn and lead to this error:TypeError: Cannot read properties of undefined (reading 'startsWith') at /panda/packages/shared/dist/index.js:433:16 at get (/panda/packages/shared/dist/index.js:116:20) at Utility.setClassName (/panda/packages/core/dist/index.js:1682:66) at inner (/panda/packages/core/dist/index.js:1705:14) at Utility.getOrCreateClassName (/panda/packages/core/dist/index.js:1709:12) at AtomicRule.transform (/panda/packages/core/dist/index.js:1729:23) at /panda/packages/core/dist/index.js:323:32 at inner (/panda/packages/shared/dist/index.js:219:12) at walkObject (/panda/packages/shared/dist/index.js:221:10) at AtomicRule.process (/panda/packages/core/dist/index.js:317:35)
-
78612d7f: Fix node evaluation in extractor process (can happen when using a BinaryExpression, simple CallExpression or conditions)
-
f2abf34d: Fix extractor behaviour when encoutering operation tokens, try to evaluate them instead of resolving them as string
before:
<AspectRatio ratio={1 / 2} asterisk={1 * 5} exp={1 ** 4} minus={5 - 1} />
would be extracted to:
{ "asterisk": "1 *5", "exp": "1**4", "minus": "5 -1", "ratio": "1 / 2" }now, it will be extracted to the actual values:
{ "asterisk": 5, "exp": 1, "minus": 4, "ratio": 0.5 } -
7bc69e4b: Fix issue where extraction does not work when the spread syntax is used or prop contains string that ends with ':'
- @pandacss/logger@0.7.0
-
21295f2e: Resolve identifier default value from parameter, code like
positionandinsethere:export const Positioned: React.FC<PositionedProps> = ({ children, position = 'absolute', inset = 0, ...rest }) => ( <styled.div position={position} inset={inset} {...rest}> {children} </styled.div> )
- @pandacss/logger@0.6.0
-
6f03ead3: Fix issue where operation tokens did not get extracted.
This means that values such as
1 / 2,3*5,2 **4,8- 1will now properly be extracted -
e48b130a: - Remove
stackfrombox.toJSON()so that generated JSON files have less noise, mostly useful to get make thepanda debugcommand easier to read- Also use the
ParserResult.toJSON()method onpanda debugcommand for the same reason
instead of:
[ { "type": "map", "value": { "padding": { "type": "literal", "value": "25px", "node": "StringLiteral", "stack": [ "CallExpression", "ObjectLiteralExpression", "PropertyAssignment", "Identifier", "Identifier", "VariableDeclaration", "StringLiteral" ], "line": 10, "column": 20 }, "fontSize": { "type": "literal", "value": "2xl", "node": "StringLiteral", "stack": [ "CallExpression", "ObjectLiteralExpression", "PropertyAssignment", "ConditionalExpression" ], "line": 11, "column": 67 } }, "node": "CallExpression", "stack": [ "CallExpression", "ObjectLiteralExpression" ], "line": 11, "column": 21 },we now have:
{ "css": [ { "type": "object", "name": "css", "box": { "type": "map", "value": {}, "node": "CallExpression", "line": 15, "column": 27 }, "data": [ { "alignItems": "center", "backgroundColor": "white", "border": "1px solid black", "borderRadius": "8px", "display": "flex", "gap": "16px", "p": "8px", "pr": "16px" } ] } ], "cva": [], "recipe": { "checkboxRoot": [ { "type": "recipe", "name": "checkboxRoot", "box": { "type": "map", "value": {}, "node": "CallExpression", "line": 38, "column": 47 }, "data": [ {} ] } ], - Also use the
-
d9bc63e7: Fix
ShorthandPropertyAssignmenthandling on root objects, it was only handled when accessing an object from a prop acces / element accessthis was fine:
const aliased = 'green.600' const colorMap = { aliased } const className = css({ color: colorMap['aliased'] })
this was not (weirdly):
const color = 'green.600' const className = css({ color })
-
Updated dependencies [f9247e52]
- @pandacss/logger@0.5.1
-
ead9eaa3: Add support for tagged template literal version.
This features is pure css approach to writing styles, and can be a great way to migrate from styled-components and emotion.
Set the
syntaxoption totemplate-literalin the panda config to enable this feature.// panda.config.ts export default defineConfig({ //... syntax: 'template-literal', })
For existing projects, you might need to run the
panda codegen --cleanYou can also use the
--syntaxoption to specify the syntax type when using the CLI.panda init -p --syntax template-literal
To get autocomplete for token variables, consider using the CSS Var Autocomplete extension.
- @pandacss/logger@0.5.0
- @pandacss/logger@0.4.0
- @pandacss/logger@0.3.2
- efd79d83: Baseline release for the launch
- Updated dependencies [efd79d83]
- @pandacss/logger@0.3.1
- @pandacss/logger@0.3.0
-
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
outExtensionkey to config to allow file extension options for generated javascript..jsor.mjs - Add
jsxElementoption to patterns, to allow specifying the jsx element rendered by the patterns.
-
Updated dependencies [fb40fff2]
- @pandacss/logger@0.0.2