A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes
MIT License
cx
replacement with deduplication of atomic classesA drop in replacement for the PandaCSS cx
function with deduplication of atomic classes (when paired with @brendon1555/panda-preset-unique-utilities)
hash
option in your PandaCSS configuration. Once hashed, the property names are no longer available to be deduplicated.@brendon1555/panda-preset-unique-utilities
preset to be added to your PandaCSS configuration. This ensures the atomic classes are unique and can be deduplicated.__
in slot recipes is fine)# npm
npm install -D @brendon1555/panda-cx-deduplicator
# yarn
yarn add -D @brendon1555/panda-cx-deduplicator
# pnpm
pnpm add -D @brendon1555/panda-cx-deduplicator
@brendon1555/panda-preset-unique-utilities
preset to your PandaCSS configuration (panda.config.ts
). Check it out here.cx
function from @brendon1555/panda-cx-deduplicator
instead of the one from PandaCSS.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 <div className={cx('group', styles, className)} {...props} />
}
const App = () => {
return (
<>
<Card />
<Card className={css({ paddingX: '6px' })} />
<Card paddingX='8px' paddingY='12px' />
<Card css={{ paddingX: '20px', bg: 'red.200' }} />
</>
)
}
// Output
// <div class="group rounded_8px px_12px py_24px"></div>
// <div class="group rounded_8px px_6px py_24px"></div>
// <div class="group rounded_8px px_8px py_12px"></div>
// <div class="group rounded_8px px_20px py_24px bg_red.200"></div>