Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonambas/panda-plugin-ct
🐼 A Panda CSS plugin for design token aliases
https://github.com/jonambas/panda-plugin-ct
css design-tokens panda pandacss plugin
Last synced: 2 months ago
JSON representation
🐼 A Panda CSS plugin for design token aliases
- Host: GitHub
- URL: https://github.com/jonambas/panda-plugin-ct
- Owner: jonambas
- License: mit
- Created: 2024-04-05T01:49:45.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-28T14:53:10.000Z (3 months ago)
- Last Synced: 2024-11-01T23:42:16.302Z (3 months ago)
- Topics: css, design-tokens, panda, pandacss, plugin
- Language: TypeScript
- Homepage:
- Size: 542 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# panda-plugin-ct
A [Panda CSS](https://panda-css.com/) plugin to create aliases to tokens without generating alias-level class names.
The plugin allows you to structure your tokens in a way makes sense to you, and does not need to adhere to Panda's token structure.
---
### Installation
```sh
npm i panda-plugin-ct
```
```ts
// panda.config.ts
import { defineConfig } from '@pandacss/dev';
import { pluginComponentTokens } from 'panda-plugin-ct';
export default defineConfig({
plugins: [
pluginComponentTokens({
alert: {
background: 'red.500',
text: 'gray.100',
},
}),
],
});
```
---
### Usage
This plugin provides a fully-typed `ct` function to reference the aliases specified in your `panda.config.ts` file. These aliases exist outside of Panda's context and are replaced with the values you provide the plugin. These values can be anything that Panda works with, such as tokens, semantic tokens, objects with conditions, or raw values.
Example component styles:
```tsx
// Component code
import { css, ct } from "../../styled-system/css";
```
Which will produce:
```html
```
```css
/* With ct */
--colors-red-500: #ef4444;
/* With Panda's semanticTokens */
--colors-alert-background: var(--colors-red-500);
.d_flex {
display: flex;
}
/* With ct */
.bg_red\.500 {
background: var(--colors-red-500);
}
/* With Panda's semanticTokens */
.bg_alert\.background {
background: var(--colors-alert-background);
}
```
---
### Supported syntax
This plugin supports aliasing to Panda's object syntax via a `value` key, just as you would define semantic tokens in Panda's theme. Anything Panda supports will work, including raw values.
```ts
export default defineConfig({
plugins: [
pluginComponentTokens({
alert: {
background: {
value: {
base: 'red.500',
lg: 'blue.500',
},
},
text: {
value: '#111',
},
},
}),
],
});
```
```tsx
```
Produces:
```html
```
---
### Further optimization
This plugin generates a performant JS runtime to map paths to their respective class names. This runtime can be completely removed using [@pandabox/unplugin](https://github.com/astahmer/pandabox/tree/main/packages/unplugin), with a transformer exported from this package. Your bundler's config will need to be modified to achieve this.
Example Next.js config:
```js
import unplugin from '@pandabox/unplugin';
import { transform } from 'panda-plugin-ct';
// Your token object
// This should be the same as the object you supplied to the Panda plugin
const tokens = {};
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack: (config) => {
config.plugins.push(
unplugin.webpack({
transform: transform(tokens),
}),
);
return config;
},
};
export default nextConfig;
```
---
### Acknowledgement
- [Jimmy](https://github.com/jimmymorris) – for the idea and motivation behind the plugin
- [Alex](https://github.com/astahmer) – for providing feedback with the plugin's internals and functionality