{"_id":"@brendon1555/panda-cx-deduplicator","name":"@brendon1555/panda-cx-deduplicator","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@brendon1555/panda-cx-deduplicator","version":"0.1.0","description":"A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","author":{"name":"Brendon Lees","email":"brendon1555@gmail.com"},"publishConfig":{"access":"public"},"keywords":["panda","css","pandacss","styling","atomic","cx"],"repository":{"type":"git","url":"git+https://github.com/brendon1555/panda-cx-deduplicator.git"},"bugs":{"url":"https://github.com/brendon1555/panda-cx-deduplicator/issues"},"peerDependencies":{"@brendon1555/panda-preset-unique-utilities":"^0.1.0","@pandacss/dev":"^0.15.5"},"license":"MIT","devDependencies":{"@typescript-eslint/eslint-plugin":"^6.7.4","eslint":"^8.50.0","prettier":"^3.0.3","tsup":"^7.2.0","typescript":"^5.2.2","vitest":"^0.34.6"},"scripts":{"test":"vitest","build":"tsup src/index.ts --format=esm,cjs --dts","lint":"eslint . --ext .ts","prettier":"prettier --check .","prettier-fix":"prettier --write ."},"homepage":"https://github.com/brendon1555/panda-cx-deduplicator#readme","_id":"@brendon1555/panda-cx-deduplicator@0.1.0","_integrity":"sha512-w+R2VC0eG2gyldu7kRouF4UWAUxEnGUaXXMcH9JuIBD94hD9SL8xvf4fFaoC1O0knz6mCop2j9bH6sX1Br/nUw==","_resolved":"/tmp/7be286c7f7f7600eee75a926d7b211fa/brendon1555-panda-cx-deduplicator-0.1.0.tgz","_from":"file:brendon1555-panda-cx-deduplicator-0.1.0.tgz","_nodeVersion":"20.8.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-w+R2VC0eG2gyldu7kRouF4UWAUxEnGUaXXMcH9JuIBD94hD9SL8xvf4fFaoC1O0knz6mCop2j9bH6sX1Br/nUw==","shasum":"374fddc82026b39611d18e877b9242b14402fcad","tarball":"https://registry.npmjs.org/@brendon1555/panda-cx-deduplicator/-/panda-cx-deduplicator-0.1.0.tgz","fileCount":7,"unpackedSize":7822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVrDXo2RZqw3+nofONFZW6LAss804DoJqLiN3PsAIGMwIgXiYN+V7GKANZMb9Zx+773zogxeuSefQz3cJq+nuzYc0="}]},"_npmUser":{"name":"brendon1555","email":"brendon1555@gmail.com"},"directories":{},"maintainers":[{"name":"brendon1555","email":"brendon1555@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/panda-cx-deduplicator_0.1.0_1696673630279_0.7254381303837303"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-07T10:13:50.144Z","0.1.0":"2023-10-07T10:13:50.454Z","modified":"2023-10-07T10:13:50.774Z"},"maintainers":[{"name":"brendon1555","email":"brendon1555@gmail.com"}],"description":"A drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes","homepage":"https://github.com/brendon1555/panda-cx-deduplicator#readme","keywords":["panda","css","pandacss","styling","atomic","cx"],"repository":{"type":"git","url":"git+https://github.com/brendon1555/panda-cx-deduplicator.git"},"author":{"name":"Brendon Lees","email":"brendon1555@gmail.com"},"bugs":{"url":"https://github.com/brendon1555/panda-cx-deduplicator/issues"},"license":"MIT","readme":"# :panda_face: PandaCSS `cx` replacement with deduplication of atomic classes\n\nA drop in replacement for the PandaCSS `cx` function with deduplication of atomic classes (when paired with @brendon1555/panda-preset-unique-utilities)\n\n## :rotating_light: PLEASE READ! :rotating_light:\n\n- 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.\n- 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.\n- 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)\n\n## Installation\n\n```bash\n# npm\nnpm install -D @brendon1555/panda-cx-deduplicator\n\n# yarn\nyarn add -D @brendon1555/panda-cx-deduplicator\n\n# pnpm\npnpm add -D @brendon1555/panda-cx-deduplicator\n```\n\n## Usage\n\n- 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).  \n- Import and use the `cx` function from `@brendon1555/panda-cx-deduplicator` instead of the one from PandaCSS.\n\n\n```tsx\nimport { cx } from '@brendon1555/panda-cx-deduplicator';\nimport { css } from '../styled-system/css'\n \nconst styles = css({\n  borderRadius: '8px',\n  paddingX: '12px',\n  paddingY: '24px'\n})\n \nconst Card = ({ className, ...props }) => {\n  return <div className={cx('group', styles, className)} {...props} />\n}\n\n\nconst App = () => {\n    return (\n        <>\n            <Card />\n            <Card className={css({ paddingX: '6px' })} />\n            <Card paddingX='8px' paddingY='12px' />\n            <Card css={{ paddingX: '20px', bg: 'red.200' }} />\n        </>\n    )\n}\n\n// Output\n// <div class=\"group rounded_8px px_12px py_24px\"></div>\n// <div class=\"group rounded_8px px_6px py_24px\"></div>\n// <div class=\"group rounded_8px px_8px py_12px\"></div>\n// <div class=\"group rounded_8px px_20px py_24px bg_red.200\"></div>\n\n```","readmeFilename":"README.md"}