@pandacss/error - npm Package Versions

[0.26.2] - 2024-01-10

Fixed

Fix placeholder condition in preset-base

[0.26.1] - 2024-01-09

Fixed

Hotfix strictTokens after introducing strictPropertyValues

[0.26.0] - 2024-01-09

Fixed

• Fix issue where [] escape hatch clashed with named grid lines
• Fix @pandacss/postcss plugin regression when the entry CSS file (with @layer rules order) contains user-defined rules, those user-defined rules would not be reloaded correctly after being changed.
• Fix an edge-case for when the config.outdir would not be set in the panda.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.

Added

• Add data-placeholder and data-placeholder-shown to preset-base conditions
• Display better CssSyntaxError logs
• Add borderWidths token to types

Changed

• Remove eject type from presets
• Refactors the parser and import analysis logic. The goal is to ensure we can re-use the import logic in ESLint Plugin and Node.js.
• config.strictTokens will only affect properties that have config tokens, such as color, bg, borderColor, etc.
• config.strictPropertyValues is added and will throw for properties that do not have config tokens, such as display, content, willChange, etc. when the value is not a predefined CSS value.

In version 0.19.0 we changed config.strictTokens typings a bit so that the only property values allowed were the config tokens OR the predefined CSS values, ex: flex for the property display, which prevented typos such as display: 'aaa'.

The problem with this change is that it means you would have to provide every CSS properties a given set of values so that TS wouldn't throw any error. Thus, we will partly revert this change and make it so that config.strictTokens shouldn't affect properties that do not have config tokens, such as content, willChange, display, etc.

v0.19.0:

// config.strictTokens = true
css({ display: 'flex' }) // OK, didn't throw
css({ display: 'block' }) // OK, didn't throw
css({ display: 'abc' }) // ❌ would throw since 'abc' is not part of predefined values of 'display' even thought there is no config token for 'abc'

now:

// config.strictTokens = true
css({ display: 'flex' }) // OK, didn't throw
css({ display: 'block' }) // OK, didn't throw
css({ display: 'abc' }) // ✅ will not throw there is no config token for 'abc'

Instead, if you want the v.19.0 behavior, you can use the new config.strictPropertyValues option. You can combine it with config.strictTokens if you want to be strict on both properties with config tokens and properties without config tokens.

The new config.strictPropertyValues option will only be applied to this exhaustive list of properties:

type StrictableProps =
  | 'alignContent'
  | 'alignItems'
  | 'alignSelf'
  | 'all'
  | 'animationComposition'
  | 'animationDirection'
  | 'animationFillMode'
  | 'appearance'
  | 'backfaceVisibility'
  | 'backgroundAttachment'
  | 'backgroundClip'
  | 'borderCollapse'
  | 'border'
  | 'borderBlock'
  | 'borderBlockEnd'
  | 'borderBlockStart'
  | 'borderBottom'
  | 'borderInline'
  | 'borderInlineEnd'
  | 'borderInlineStart'
  | 'borderLeft'
  | 'borderRight'
  | 'borderTop'
  | 'borderBlockEndStyle'
  | 'borderBlockStartStyle'
  | 'borderBlockStyle'
  | 'borderBottomStyle'
  | 'borderInlineEndStyle'
  | 'borderInlineStartStyle'
  | 'borderInlineStyle'
  | 'borderLeftStyle'
  | 'borderRightStyle'
  | 'borderTopStyle'
  | 'boxDecorationBreak'
  | 'boxSizing'
  | 'breakAfter'
  | 'breakBefore'
  | 'breakInside'
  | 'captionSide'
  | 'clear'
  | 'columnFill'
  | 'columnRuleStyle'
  | 'contentVisibility'
  | 'direction'
  | 'display'
  | 'emptyCells'
  | 'flexDirection'
  | 'flexWrap'
  | 'float'
  | 'fontKerning'
  | 'forcedColorAdjust'
  | 'isolation'
  | 'lineBreak'
  | 'mixBlendMode'
  | 'objectFit'
  | 'outlineStyle'
  | 'overflow'
  | 'overflowX'
  | 'overflowY'
  | 'overflowBlock'
  | 'overflowInline'
  | 'overflowWrap'
  | 'pointerEvents'
  | 'position'
  | 'resize'
  | 'scrollBehavior'
  | 'touchAction'
  | 'transformBox'
  | 'transformStyle'
  | 'userSelect'
  | 'visibility'
  | 'wordBreak'
  | 'writingMode'