Skip to content

Add type-autocomplete for custom utilities #75

New issue

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

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

Already on GitHub? Sign in to your account

Open
zslabs opened this issue Apr 3, 2025 · 1 comment
Open

Add type-autocomplete for custom utilities #75

zslabs opened this issue Apr 3, 2025 · 1 comment

Comments

@zslabs
Copy link

zslabs commented Apr 3, 2025

Description

When adding utilities to override certain properties:

backgroundColor: {
  className: 'bg-c',
  values: { 'palettes.gray.20': '#f0f0f0' },
  transform(value) {
    return { backgroundColor: value }
  },
}

And using them in a style:

className={css({
  backgroundColor: 'palette.gray.20'
})}

The value does resolve correctly and render fine on the frontend, but is not part of the typescript autocomplete in VS Code. The only thing that shows up via autocomplete are values stored for the generic colors token, but what I'm attempting to do is set only certain values to be valid for various properties (text-related colors for color, background properties for fill, background-color, etc).

I'm unsure if this is part of the VS Code plugin or Panda CSS in general though 😕

Problem Statement/Justification

This would expand coverage for custom values.

Proposed Solution or API

Update types for properties to take custom utilities into account.

Alternatives

No response

Additional Information

No response

@segunadebayo
Copy link
Member

I just checked this and it seems to work in Panda itself. This must be a vscode plugin bug then.

Image

@segunadebayo segunadebayo transferred this issue from chakra-ui/panda Apr 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants