@pandacss/is-valid-prop - npm Package Versions

[0.34.3] - 2024-03-09

Fixed

Fix nested styled factory composition

import { styled } from '../styled-system/jsx'

const BasicBox = styled('div', { base: { fontSize: '10px' } })
const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })

export const App = () => {
  return (
    <>
      {/* ✅ fs_10px */}
      <BasicBox>text1</BasicBox>
      {/* ✅ fs_20px */}
      <ExtendedBox1>text2</ExtendedBox1>
      {/* BEFORE: ❌ fs_10px fs_30px */}
      {/* NOW: ✅ fs_30px */}
      <ExtendedBox2>text3</ExtendedBox2>
    </>
  )
}

Added

Allow color opacity modifier when using strictTokens, e.g color: "blue.200/50" will not throw a TS error anymore

[0.34.2] - 2024-03-08

Fixed

• Fix strictPropertyValues with border* properties

We had listed border\* properties as affected by strictPropertyValues but they shouldn't be restricted as their syntax is too complex to be restricted. This removes any border* properties that do not specifically end with Style like borderTopStyle.

import { css } from '../styled-system/css'

css({
  borderTop: '1px solid red', // ✅ will now be fine as it should be
  borderTopStyle: 'abc', // ✅ will still report a TS error
})

• Fix a false positive with the validation check that reported Missing token when using a color opacity modifier in config tokens or semanticTokens

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 in config.semanticTokens.colors.secondary
• [tokens] Missing token: colors.blue.500/32 used in config.semanticTokens.colors.secondary

Added

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

[0.34.1] - 2024-03-06

Fixed

Fix the color opacity modifier syntax for semanticTokens inside of conditions

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  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}', // <-- wasn't working as expected
            _dark: '{colors.green.500/half}',
          },
        },
      },
    },
  },
})

will now correctly generate the following CSS:

@layer tokens {
  :where(:root, :host) {
    --colors-blue-500: blue;
    --colors-green-500: green;
    --opacity-half: 0.5;
    --colors-secondary: red;
  }

  .light {
    --colors-secondary: color-mix(in srgb, var(--colors-blue-500) 32%, transparent);
  }

  .dark {
    --colors-secondary: color-mix(in srgb, var(--colors-green-500) 50%, transparent);
  }
}

[0.34.0] - 2024-03-06

Fixed

• Fix issue where text accent color token was nested incorrectly.
• Fix splitCssProps typings, it would sometimes throw Expression produces a union type that is too complex to represent"
• 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
      },
    },
  },
})

Added

• Add a config validation check to prevent using spaces in token keys, show better error logs when there's a CSS parsing error
• Add a warning when using value twice in config

import { 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
        },
      },
    },
  },
})

• Allow using the color opacity modifier syntax (blue.300/70) in token references:

1. {colors.blue.300/70}
2. token(colors.blue.300/70)

Note that this works both in style usage and in build-time config.

// runtime usage

import { css } from '../styled-system/css'

css({ bg: '{colors.blue.300/70}' })
// => @layer utilities {
//    .bg_token\(colors\.blue\.300\/70\) {
//      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
//    }
//  }

css({ bg: 'token(colors.blue.300/70)' })
// => @layer utilities {
//    .bg_token\(colors\.blue\.300\/70\) {
//      background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
//    }
//  }

// build-time usage
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  theme: {
    tokens: {
      colors: {
        blue: {
          300: { value: '#00f' },
        },
      },
    },
    semanticTokens: {
      colors: {
        primary: {
          value: '{colors.blue.300/70}',
        },
      },
    },
  },
})

@layer tokens {
  :where(:root, :host) {
    --colors-blue-300: #00f;
    --colors-primary: color-mix(in srgb, var(--colors-blue-300) 70%, transparent);
  }
}

Changed

Deprecates emitPackage, it will be removed in the next major version.

Why?

It's known for causing several issues:

• bundlers sometimes eagerly cache the node_modules, leading to panda codegen updates to the styled-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 of styled-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 of styled-system/css
• for a component library, use a dedicated workspace package (e.g. @acme/styled-system) and use importMap: "@acme/styled-system" so that Panda knows which entrypoint to extract, e.g. import { css } from '@acme/styled-system/css'