Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

WithEscapeHatch allows invalid token values when "/" is used #3149

Open
1 of 3 tasks
cgatian opened this issue Feb 20, 2025 · 0 comments
Open
1 of 3 tasks

WithEscapeHatch allows invalid token values when "/" is used #3149

cgatian opened this issue Feb 20, 2025 · 0 comments

Comments

@cgatian
Copy link

cgatian commented Feb 20, 2025

Description

I made a custom utility for width and set the values equal to 1 and 2. The types for this utility accept 1/2 due to the WithColorOpacityModifier allowing strings that start with a value and contain a forward slash, e.g. ${T}/.

Link to Reproduction

https://play.panda-css.com/NgeBz8-8QC

Steps to reproduce

  1. Create a basic utility for sizes
utilities: {
    extend: {
      width: {
        shorthand: 'w',
        className: 'w',
        group: 'Width',
        values: ['1', '2'],
      },
    }
  1. Notice values 1 and 2 are the only allowed values
  2. Use the utility type
<div
        className={css({
          width: '2/222' //  ❌ INVALID TOKEN!
        })}
      >
        <span>🐼</span>
        <span>Hello from Panda</span>
      </div>

JS Framework

No response

Panda CSS Version

0.53.0

Browser

No response

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

WithEscapeHatch unions WithColorOpacityModifier which allows strings that contain {token}/{string}.

type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never

export type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>

Perhaps there would be two WithEscapeHatch types, one specifically for group:color and one for all other properties? Something like:

export type WithEscapeHatchColor<T> = WithEscapeHatch<T> | WithColorOpacityModifier<T>

export type WithEscapeHatch<T> = T | `[${string}]` | WithImportant<T>
@cgatian cgatian changed the title WithEscapeHatch allows invalid token values WithEscapeHatch allows invalid token values with "/" Feb 20, 2025
@cgatian cgatian changed the title WithEscapeHatch allows invalid token values with "/" WithEscapeHatch allows invalid token values when "/" is used Feb 20, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant