https://github.com/brendon1555/panda-cx-deduplicator
A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes
https://github.com/brendon1555/panda-cx-deduplicator
classname css deduplication hacktoberfest pandacss styling
Last synced: 8 months ago
JSON representation
A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes
- Host: GitHub
- URL: https://github.com/brendon1555/panda-cx-deduplicator
- Owner: brendon1555
- License: mit
- Created: 2023-10-06T10:24:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T10:13:22.000Z (about 2 years ago)
- Last Synced: 2025-02-01T11:34:41.634Z (9 months ago)
- Topics: classname, css, deduplication, hacktoberfest, pandacss, styling
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :panda_face: PandaCSS `cx` replacement with deduplication of atomic classes
A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes (when paired with @brendon1555/panda-preset-unique-utilities)
## :rotating_light: PLEASE READ! :rotating_light:
- This function DOES NOT work if you have enabled the `hash` option in your PandaCSS configuration. Once hashed, the property names are no longer available to be deduplicated.
- This function requires the `@brendon1555/panda-preset-unique-utilities` preset to be added to your PandaCSS configuration. This ensures the atomic classes are unique and can be deduplicated.
- Avoid using underscores in any _non_ atomic class names. This is due to the way this function identifies atomic classes. (The built in `__` in slot recipes is fine)
## Installation
```bash
# npm
npm install -D @brendon1555/panda-cx-deduplicator
# yarn
yarn add -D @brendon1555/panda-cx-deduplicator
# pnpm
pnpm add -D @brendon1555/panda-cx-deduplicator
```
## Usage
- Add the `@brendon1555/panda-preset-unique-utilities` preset to your PandaCSS configuration (`panda.config.ts`). Check it out [here](https://github.com/brendon1555/panda-preset-unique-utilities).
- Import and use the `cx` function from `@brendon1555/panda-cx-deduplicator` instead of the one from PandaCSS.
```tsx
import { cx } from '@brendon1555/panda-cx-deduplicator';
import { css } from '../styled-system/css'
const styles = css({
borderRadius: '8px',
paddingX: '12px',
paddingY: '24px'
})
const Card = ({ className, ...props }) => {
return
}
const App = () => {
return (
<>
>
)
}
// Output
//
//
//
//
```