Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/astahmer/pandabox
a toolbox for Panda CSS
https://github.com/astahmer/pandabox
css panda pandacss recipes theme toolbox typesafe unplugin vite
Last synced: about 2 months ago
JSON representation
a toolbox for Panda CSS
- Host: GitHub
- URL: https://github.com/astahmer/pandabox
- Owner: astahmer
- Created: 2024-01-18T23:07:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-05-29T08:41:52.000Z (7 months ago)
- Last Synced: 2024-05-29T21:09:53.387Z (7 months ago)
- Topics: css, panda, pandacss, recipes, theme, toolbox, typesafe, unplugin, vite
- Language: TypeScript
- Homepage: https://pandabox.vercel.app/
- Size: 1.51 MB
- Stars: 34
- Watchers: 4
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @pandabox
This will be the home for utilities around Panda CSS.
# @pandabox/prettier-plugin
Prettier plugin for Panda CSS.
Will sort style props based on your local `panda.config.ts`:
- in any Panda function like `css({ ... })` or `stack({ ... })`
- in the `css` prop of any JSX component
- etc...
## Installation
```bash
pnpm add -D prettier @pandabox/prettier-plugin
```
```json
{
"plugins": ["@pandabox/prettier-plugin"]
}
```
# @pandabox/panda-plugins
- `missing-css-warnings` - Logs a warning message when a CSS rule was used at runtime but couldn't be statically
extracted
- `strict-tokens-scope` - Enforce `strictTokens` only for a set of `TokenCategory` or style props
- `strict-tokens-runtime` - Enforce `strictTokens` at runtime, optionally scope this behaviour to a set of
`TokenCategory` or style props
- `restrict-styled-props` - Adds a `props` on the `styled` JSX Factory to restrict the props that can be passed to the
component
- `remove-negative-spacing` - Removes negative spacing tokens
- `remove-features` - Removes features from the `styled-system`
- `minimal-setup` - Removes the built-in presets and allow removing features from the `styled-system`
## Installation
```bash
pnpm add -D @pandabox/panda-plugins
```
## Usage
```tsx
import { defineConfig } from '@pandacss/dev'
import { pluginStrictTokensScope, pluginRemoveNegativeSpacing, pluginRemoveFeatures } from '@pandabox/panda-plugins'
export default defineConfig({
// ...
strictTokens: true,
// can also be used together with
// strictPropertyValues: true,
//
plugins: [
pluginStrictTokensScope({ categories: ['colors', 'spacing'] }),
pluginRemoveFeatures({ features: ['no-jsx', 'no-cva'] }),
pluginRemoveNegativeSpacing({ spacingTokenType: true, tokenType: true }),
],
})
```
# @pandabox/unplugin
Alternative distribution entrypoint for Panda CSS (other than the [CLI](https://panda-css.com/docs/installation/cli) and
[PostCSS plugin](https://panda-css.com/docs/installation/postcss)).
Optionally inline your `styled-system` functions and components results as class names (`atomic` or `grouped`) (with
`optimizeJs` option).
```bash
pnpm i @pandabox/unplugin
```
## Usage
```ts
import { defineConfig } from 'vite'
import pandabox from '@pandabox/unplugin'
export default defineConfig({
plugins: [
pandabox.vite({
/* options */
}),
],
})
```
## `optimizeJs` option
From:
```tsx
import { css } from '../styled-system/css'
export const App = () => {
return (
<>
Hello from Panda
console.log('hello')}
unresolvable={something}
>
Hello from Panda
>
)
}
```
To (`atomic`):
```tsx
import { css } from '../styled-system/css'
export const App = () => {
return (
<>
Hello from Panda
console.log('hello')}
unresolvable={something}
>
Hello from Panda
>
)
}
```
# @pandabox/utils
- `assignInlineVars` is like
[the one from vanilla-extract](https://vanilla-extract.style/documentation/packages/dynamic/#assigninlinevars) but
type-safe with typings using your own panda.config tokens
- `cssVar` allows creating creating css vars as JS objects so you can reference them in your panda config or at runtime
- `wrapValue` will wrap every objects inside the first argument with a { value: xxx }, mostly meant to easily migrate
from a chakra theme tokens object to a panda.config tokens object
# @pandabox/postcss-plugins
```bash
pnpm i @pandabox/postcss-plugins
```
- `removeUnusedCssVars`
- `removeUnusedKeyframes`
## @pandabox/define-recipe
```bash
pnpm i @pandabox/define-recipe
```
The `defineRecipe` method will now return a `RecipeBuilder` object instead of a `RecipeConfig` object. The
`RecipeBuilder` object has the following methods:
- `extend`: add additional variants to or override variants of a recipe.
```ts
const button = defineRecipe({
className: 'btn',
variants: {
variant: { primary: { color: 'red' } },
},
}).extend({
variant: {
primary: { px: 2 },
secondary: { color: 'blue' },
},
})
```
resulting in:
```json
{
"className": "btn",
"variants": {
"variant": {
"primary": { "color": "red", "px": 2 },
"secondary": { "color": "blue" }
}
}
}
```
More methods are available on the `RecipeBuilder` object, see the [README](./packages/define-recipe/README.md) for more