- Updated dependencies [fa77080a]
- @pandacss/[email protected]
- @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]
- Updated dependencies [a76b279e]
- Updated dependencies [5ce359f6]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [12281ff8]
- Updated dependencies [fc4688e6]
- @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]
-
bf0e6a30: Fix issues with class merging in the
styled
factory fn for Qwik, Solid and Vue. -
69699ba4: Improved styled factory by adding a 3rd (optional) argument:
interface FactoryOptions<TProps extends Dict> { dataAttr?: boolean defaultProps?: TProps shouldForwardProp?(prop: string, variantKeys: string[]): boolean }
- Setting
dataAttr
to true will add adata-recipe="{recipeName}"
attribute to the element with the recipe name. This is useful for testing and debugging.
import { styled } from '../styled-system/jsx' import { button } from '../styled-system/recipes' const Button = styled('button', button, { dataAttr: true }) const App = () => ( <Button variant="secondary" mt="10px"> Button </Button> ) // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>
defaultProps
allows you to skip writing wrapper components just to set a few props. It also allows you to locally override the default variants or base styles of a recipe.
import { styled } from '../styled-system/jsx' import { button } from '../styled-system/recipes' const Button = styled('button', button, { defaultProps: { variant: 'secondary', px: '10px', }, }) const App = () => <Button>Button</Button> // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>
shouldForwardProp
allows you to customize which props are forwarded to the underlying element. By default, all props except recipe variants and style props are forwarded.
import { styled } from '../styled-system/jsx' import { button } from '../styled-system/recipes' import { isCssProperty } from '../styled-system/jsx' import { motion, isValidMotionProp } from 'framer-motion' const StyledMotion = styled( motion.div, {}, { shouldForwardProp: (prop, variantKeys) => isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)), }, )
- Setting
-
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
py
value 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); } }
-
Updated dependencies [abd7c47a]
-
Updated dependencies [3a04a927]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
1ac2011b: Add a new
config.importMap
option that allows you to specify a custom module specifier to import from instead of being tied to theoutdir
You can now do things like leverage the native package.json
imports
:export default defineConfig({ outdir: './outdir', importMap: { css: '#panda/styled-system/css', recipes: '#panda/styled-system/recipes', patterns: '#panda/styled-system/patterns', jsx: '#panda/styled-system/jsx', }, })
Or you could also make your outdir an actual package from your monorepo:
export default defineConfig({ outdir: '../packages/styled-system', importMap: { css: '@monorepo/styled-system', recipes: '@monorepo/styled-system', patterns: '@monorepo/styled-system', jsx: '@monorepo/styled-system', }, })
Working with tsconfig paths aliases is easy:
export default defineConfig({ outdir: 'styled-system', importMap: { css: 'styled-system/css', recipes: 'styled-system/recipes', patterns: 'styled-system/patterns', jsx: 'styled-system/jsx', }, })
-
Updated dependencies [95b06bb1]
-
Updated dependencies [1ac2011b]
-
Updated dependencies [58743bc4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [26a788c0]
- Updated dependencies [2645c2da]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
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(), })
-
Updated dependencies [c40ae1b9]
-
Updated dependencies [26f6982c]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
39298609: Make the types suggestion faster (updated
DeepPartial
) -
f27146d6: Fix an issue where some JSX components wouldn't get matched to their corresponding recipes/patterns when using
Regex
in thejsx
field of a config, resulting in some style props missing.issue: chakra-ui#1315
-
Updated dependencies [be24d1a0]
-
Updated dependencies [4bc515ea]
-
Updated dependencies [9f429d35]
-
Updated dependencies [39298609]
-
Updated dependencies [7c1ab170]
-
Updated dependencies [f27146d6]
- @pandacss/[email protected]
- @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]
- @pandacss/[email protected]
- 577dcb9d: Fix issue where Panda does not detect styles after nested template in vue
- 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]
- @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 [c07e1beb]
- Updated dependencies [dfb3f85f]
- Updated dependencies [23b516f4]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- Updated dependencies [dead08a2]
- Updated dependencies [5b95caf5]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
a669f4d5: Introduce new slot recipe features.
Slot recipes are useful for styling composite or multi-part components easily.
sva
: the slot recipe version ofcva
defineSlotRecipe
: the slot recipe version ofdefineRecipe
Definition
import { sva } from 'styled-system/css' const button = sva({ slots: ['label', 'icon'], base: { label: { color: 'red', textDecoration: 'underline' }, }, variants: { rounded: { true: {}, }, size: { sm: { label: { fontSize: 'sm' }, icon: { fontSize: 'sm' }, }, lg: { label: { fontSize: 'lg' }, icon: { fontSize: 'lg', color: 'pink' }, }, }, }, defaultVariants: { size: 'sm', }, })
Usage
export function App() { const btnClass = button({ size: 'lg', rounded: true }) return ( <button> <p class={btnClass.label}> Label</p> <p class={btnClass.icon}> Icon</p> </button> ) }
- Updated dependencies [24e783b3]
- Updated dependencies [386e5098]
- Updated dependencies [6d4eaa68]
- Updated dependencies [a669f4d5]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
c08de87f: ### Breaking
- Renamed the
name
property of a config recipe toclassName
. This is to ensure API consistency and express the intent of the property more clearly.
export const buttonRecipe = defineRecipe({ - name: 'button', + className: 'button', // ... })
- Renamed the
jsx
property of a pattern tojsxName
.
const hstack = definePattern({ - jsx: 'HStack', + jsxName: 'HStack', // ... })
Update the
jsx
property to be used for advanced tracking of custom pattern components.import { Circle } from 'styled-system/jsx' const CustomCircle = ({ children, ...props }) => { return <Circle {...props}>{children}</Circle> }
To track the
CustomCircle
component, you can now use thejsx
property.import { defineConfig } from '@pandacss/dev' export default defineConfig({ patterns: { extend: { circle: { jsx: ['CustomCircle'], }, }, }, })
- Renamed the
- Updated dependencies [c08de87f]
- Updated dependencies [3269b411]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
9ddf258b: Introduce the new
{fn}.raw
method that allows for a super flexible usage and extraction 🎉 :<Button rootProps={css.raw({ bg: "red.400" })} /> // recipe in storybook export const Funky: Story = { args: button.raw({ visual: "funky", shape: "circle", size: "sm", }), }; // mixed with pattern const stackProps = { sm: stack.raw({ direction: "column" }), md: stack.raw({ direction: "row" }) } stack(stackProps[props.size]))
-
fb449016: Fix cases where Stitches
styled.withConfig
would 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)
-
be0ad578: Fix parser issue with TS path mappings
-
78612d7f: Fix node evaluation in extractor process (can happen when using a BinaryExpression, simple CallExpression or conditions)
-
Updated dependencies [fb449016]
-
Updated dependencies [e1f6318a]
-
Updated dependencies [be0ad578]
-
Updated dependencies [78612d7f]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 16cd3764: Fix parser issue in
.vue
files, make the traversal check nested elements instead of only checking the 1st level - 7bc69e4b: Fix issue where extraction does not work when the spread syntax is used or prop contains string that ends with ':'
- Updated dependencies [f2abf34d]
- Updated dependencies [f59154fb]
- Updated dependencies [a9c189b7]
- Updated dependencies [7bc69e4b]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
5bd88c41: Fix JSX recipe extraction when multiple recipes were used on the same component, ex:
const ComponentWithMultipleRecipes = ({ variant }) => { return ( <button className={cx(pinkRecipe({ variant }), greenRecipe({ variant }), blueRecipe({ variant }))}>Hello</button> ) }
Given a
panda.config.ts
with recipes each including a commonjsx
tag name, such as:recipes: { pinkRecipe: { className: 'pinkRecipe', jsx: ['ComponentWithMultipleRecipes'], base: { color: 'pink.100' }, variants: { variant: { small: { fontSize: 'sm' }, }, }, }, greenRecipe: { className: 'greenRecipe', jsx: ['ComponentWithMultipleRecipes'], base: { color: 'green.100' }, variants: { variant: { small: { fontSize: 'sm' }, }, }, }, blueRecipe: { className: 'blueRecipe', jsx: ['ComponentWithMultipleRecipes'], base: { color: 'blue.100' }, variants: { variant: { small: { fontSize: 'sm' }, }, }, }, },
Only the first matching recipe would be noticed and have its CSS generated, now this will properly generate the CSS for each of them
-
b50675ca: Refactor parser to support extracting
css
prop in JSX elements correctly. -
Updated dependencies [21295f2e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
09ebaf2e: Fix svelte parsing when using Typescript or
<script context=module>
or multiple<script>
s -
78ed6ed4: Fix issue where using a nested outdir like
src/styled-system
with a baseUrl like./src
would result on parser NOT matching imports likeimport { container } from "styled-system/patterns";
cause it would expect the full pathsrc/styled-system
-
a3d760ce: Do not allow all JSX properties to be extracted if none provided, rely on the
isStyleProp
fn insteadThis fixes cases when :
eject: true
and only the@pandacss/preset-base
is used (or none)- some non-styling JSX prop is extracted leading to an incorrect CSS rule being generated, ex:
🐼 info [cli] Writing /Users/astahmer/dev/reproductions/remix-panda/styled-system/debug/app__routes___index.css 🐼 error [serializer:css] Failed to serialize CSS: CssSyntaxError: <css input>:28:19: Missed semicolon 26 | } 27 | .src_https\:\/\/akmweb\.viztatech\.com\/web\/svnres\/file\/50_e4bb32c9ea75c5de397f2dc17a3cf186\.jpg { > 28 | src: https://akmweb.viztatech.com/web/svnres/file/50_e4bb32c9ea75c5de397f2dc17a3cf186.jpg | ^ 29 | } 30 | }
-
Updated dependencies [6f03ead3]
-
Updated dependencies [8c670d60]
-
Updated dependencies [c0335cf4]
-
Updated dependencies [762fd0c9]
-
Updated dependencies [f9247e52]
-
Updated dependencies [1ed239cd]
-
Updated dependencies [78ed6ed4]
-
Updated dependencies [e48b130a]
-
Updated dependencies [d9bc63e7]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
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
syntax
option totemplate-literal
in 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 --clean
You can also use the
--syntax
option 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.
-
30f41e01: Fix parsing of factory recipe with property access + object syntax, such as:
const Input = styled.input({ base: { color: 'blue.100', bg: 'blue.900', }, })
-
Updated dependencies [60df9bd1]
-
Updated dependencies [ead9eaa3]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 8991b1e4: - Experimental support for
.vue
files and better.svelte
support- Fix issue where the
panda ship
command does not write to the correct path
- Fix issue where the
- Updated dependencies [54a8913c]
- Updated dependencies [c7b42325]
- Updated dependencies [5b344b9c]
- @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]
- efd79d83: Baseline release for the launch
- Updated dependencies [efd79d83]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- 6d81ee9e: - Set default jsx factory to 'styled'
- Fix issue where pattern JSX was not being generated correctly when properties are not defined
- Updated dependencies [6d81ee9e]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
- @pandacss/[email protected]
-
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]
- @pandacss/[email protected]
- @pandacss/[email protected]