Skip to content

Latest commit

 

History

History
942 lines (744 loc) · 22.6 KB

CHANGELOG.md

File metadata and controls

942 lines (744 loc) · 22.6 KB

@pandacss/parser

0.17.4

Patch Changes

0.17.3

Patch Changes

0.17.2

Patch Changes

0.17.1

Patch Changes

0.17.0

Patch Changes

0.16.0

Patch Changes

0.15.5

Patch Changes

0.15.4

Patch Changes

  • 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 a data-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)),
      },
    )
  • 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]

0.15.3

Patch Changes

  • 1ac2011b: Add a new config.importMap option that allows you to specify a custom module specifier to import from instead of being tied to the outdir

    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]

0.15.2

Patch Changes

0.15.1

Patch Changes

  • 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]

0.15.0

Patch Changes

  • 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 the jsx 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]

0.14.0

Patch Changes

0.13.1

Patch Changes

0.13.0

Patch Changes

0.12.2

Patch Changes

0.12.1

Patch Changes

0.12.0

Patch Changes

0.11.1

Patch Changes

0.11.0

Patch Changes

0.10.0

Minor Changes

  • a669f4d5: Introduce new slot recipe features.

    Slot recipes are useful for styling composite or multi-part components easily.

    • sva: the slot recipe version of cva
    • defineSlotRecipe: the slot recipe version of defineRecipe

    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>
      )
    }

Patch Changes

0.9.0

Minor Changes

  • c08de87f: ### Breaking

    • Renamed the name property of a config recipe to className. 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 to jsxName.
    const hstack = definePattern({
    -  jsx: 'HStack',
    +  jsxName: 'HStack',
      // ...
    })

    Feature

    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 the jsx property.

    import { defineConfig } from '@pandacss/dev'
    
    export default defineConfig({
      patterns: {
        extend: {
          circle: {
            jsx: ['CustomCircle'],
          },
        },
      },
    })

Patch Changes

0.8.0

Minor Changes

  • 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]))

Patch Changes

  • 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]

0.7.0

Patch Changes

  • 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]

0.6.0

Patch Changes

  • 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 common jsx 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]

0.5.1

Patch Changes

  • 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 like import { container } from "styled-system/patterns"; cause it would expect the full path src/styled-system

  • a3d760ce: Do not allow all JSX properties to be extracted if none provided, rely on the isStyleProp fn instead

    This 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]

0.5.0

Minor Changes

  • 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 to template-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.

Patch Changes

0.4.0

Patch Changes

0.3.2

Patch Changes

0.3.1

Patch Changes

0.3.0

Minor Changes

  • 6d81ee9e: - Set default jsx factory to 'styled'
    • Fix issue where pattern JSX was not being generated correctly when properties are not defined

Patch Changes

0.0.2

Patch Changes

  • 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]