{"_id":"animated-css-kit","name":"animated-css-kit","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"animated-css-kit","version":"1.0.1","description":"PostCSS plugin for processing animate.css with custom animation options - adds vendor prefixes and injects CSS variables","main":"index.js","keywords":["postcss","postcss-plugin","css","animations","animate.css","vendor-prefixes","autoprefixer","tailwind","tailwindcss"],"author":{"name":"dumptyd"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/dumptyd/animated-css-kit.git"},"bugs":{"url":"https://github.com/dumptyd/animated-css-kit/issues"},"homepage":"https://github.com/dumptyd/animated-css-kit#readme","engines":{"node":">=14.0.0"},"peerDependencies":{"postcss":"^8"},"_id":"animated-css-kit@1.0.1","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-JpRu0/4m6y4xkO7KRUw+DsiGaPalvztFaiBT78hLQ9yP/c6HItHEcw8yeZg70VaSN3ALK/OZ8FZUVJ3UI7RilQ==","shasum":"b354d0f15d1db31a17f36e0cd3c025b6a382a60f","tarball":"https://registry.npmjs.org/animated-css-kit/-/animated-css-kit-1.0.1.tgz","fileCount":11,"unpackedSize":46378,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBcSd3FFV7QvvqTNlkF6OUgA345/6B31VXuP875QFPIwAiEA7O6u5JmVcEj+TF994daxoFIRxwwJCwTSnZ//fq0hb3A="}]},"_npmUser":{"name":"taylorhunttech","email":"taylorhunttech@outlook.com"},"directories":{},"maintainers":[{"name":"taylorhunttech","email":"taylorhunttech@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/animated-css-kit_1.0.1_1783523540243_0.9103390428476481"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T15:12:20.104Z","1.0.1":"2026-07-08T15:12:20.444Z","modified":"2026-07-08T15:12:20.682Z"},"maintainers":[{"name":"taylorhunttech","email":"taylorhunttech@outlook.com"}],"description":"PostCSS plugin for processing animate.css with custom animation options - adds vendor prefixes and injects CSS variables","homepage":"https://github.com/dumptyd/animated-css-kit#readme","keywords":["postcss","postcss-plugin","css","animations","animate.css","vendor-prefixes","autoprefixer","tailwind","tailwindcss"],"repository":{"type":"git","url":"git+https://github.com/dumptyd/animated-css-kit.git"},"author":{"name":"dumptyd"},"bugs":{"url":"https://github.com/dumptyd/animated-css-kit/issues"},"license":"MIT","readme":"# animated-css-kit\r\n\r\nPostCSS plugin for processing animate.css with custom animation options.\r\n\r\n## Features\r\n\r\n✅ Inject custom CSS variables (duration, delay, iteration count)  \r\n✅ Add vendor prefixes to animation properties (`-webkit-`)  \r\n✅ Process @keyframes with vendor prefixes  \r\n✅ Ensure cross-browser compatibility  \r\n✅ Lightweight and focused  \r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install animated-css-kit postcss\r\n# or\r\nyarn add animated-css-kit postcss\r\n```\r\n\r\n## Usage\r\n\r\n### With PostCSS\r\n\r\n```javascript\r\nconst postcss = require('postcss');\r\nconst animatecssPlugin = require('animated-css-kit');\r\n\r\nconst result = postcss([\r\n  animatecssPlugin({\r\n    stage: 3,\r\n    features: {\r\n      'custom-properties': {\r\n        preserve: true,\r\n        variables: {\r\n          '--animate-duration': '1.5s',\r\n          '--animate-delay': '200ms',\r\n          '--animate-repeat': '2'\r\n        }\r\n      }\r\n    },\r\n    autoprefixer: {\r\n      flexbox: 'no-2009',\r\n      grid: 'autoplace'\r\n    },\r\n    browsers: 'last 2 versions, > 1%, not dead'\r\n  })\r\n]).process(cssString, { from: undefined });\r\n\r\nconsole.log(result.css);\r\n```\r\n\r\n**Input CSS:**\r\n```css\r\n:root {\r\n  --animate-duration: 1s;\r\n}\r\n\r\n.animate {\r\n  animation-duration: var(--animate-duration);\r\n  animation-delay: var(--animate-delay);\r\n}\r\n\r\n@keyframes bounce {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n```\r\n\r\n**Output CSS:**\r\n```css\r\n:root {\r\n  --animate-duration: 1.5s;     /* User's value */\r\n  --animate-delay: 200ms;        /* User's value */\r\n  --animate-repeat: 2;           /* User's value */\r\n}\r\n\r\n.animate {\r\n  -webkit-animation-duration: var(--animate-duration);  /* Prefixed */\r\n  animation-duration: var(--animate-duration);\r\n  -webkit-animation-delay: var(--animate-delay);        /* Prefixed */\r\n  animation-delay: var(--animate-delay);\r\n}\r\n\r\n@-webkit-keyframes bounce {                             /* Prefixed */\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n\r\n@keyframes bounce {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n```\r\n\r\n## API\r\n\r\n### `animatecssPlugin(options)`\r\n\r\nReturns a PostCSS plugin instance.\r\n\r\n#### Options\r\n\r\n**`options.features`** (Object)  \r\nFeature configuration for CSS processing.\r\n\r\n- **`options.features['custom-properties']`** (Object)  \r\n  CSS custom properties configuration.\r\n  - **`variables`** (Object) - Key-value pairs of CSS variables to inject/update\r\n  - **`preserve`** (boolean) - Whether to preserve original values (default: true)\r\n\r\n**`options.autoprefixer`** (Object)  \r\nAutoprefixer configuration for vendor prefixes.\r\n  - **`flexbox`** (string) - Flexbox prefixing strategy (e.g., 'no-2009')\r\n  - **`grid`** (string) - Grid prefixing strategy (e.g., 'autoplace')\r\n\r\n**`options.browsers`** (string)  \r\nBrowser targets for optimization (e.g., 'last 2 versions, > 1%, not dead')\r\n\r\n**`options.stage`** (number)  \r\nCSS feature stage (0-4, default: 3)\r\n\r\n## Example\r\n\r\n### Input CSS\r\n\r\n```css\r\n:root {\r\n  --animate-duration: 1s;\r\n}\r\n\r\n.animate {\r\n  animation-duration: var(--animate-duration);\r\n  animation-delay: var(--animate-delay);\r\n}\r\n\r\n@keyframes bounce {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n```\r\n\r\n### Output CSS\r\n\r\n```css\r\n:root {\r\n  --animate-duration: 1.5s;     /* User's value */\r\n  --animate-delay: 200ms;        /* User's value */\r\n  --animate-repeat: 2;           /* User's value */\r\n}\r\n\r\n.animate {\r\n  -webkit-animation-duration: var(--animate-duration);  /* Prefixed */\r\n  animation-duration: var(--animate-duration);\r\n  -webkit-animation-delay: var(--animate-delay);        /* Prefixed */\r\n  animation-delay: var(--animate-delay);\r\n}\r\n\r\n@-webkit-keyframes bounce {                             /* Prefixed */\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n\r\n@keyframes bounce {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(-20px); }\r\n}\r\n```\r\n\r\n## How It Works\r\n\r\nThe plugin processes CSS in three stages:\r\n\r\n1. **Root Processing**: Injects or updates CSS variables in `:root`\r\n2. **Declaration Processing**: Adds `-webkit-` prefixes to animation properties\r\n3. **AtRule Processing**: Adds `-webkit-keyframes` for @keyframes rules\r\n\r\n## What Gets Prefixed\r\n\r\n### Animation Properties\r\n- `animation`\r\n- `animation-name`\r\n- `animation-duration`\r\n- `animation-timing-function`\r\n- `animation-delay`\r\n- `animation-iteration-count`\r\n- `animation-direction`\r\n- `animation-fill-mode`\r\n- `animation-play-state`\r\n\r\n### At-Rules\r\n- `@keyframes` → `@-webkit-keyframes`\r\n\r\n### Flexbox (if enabled)\r\n- `display: flex` → `display: -webkit-flex`\r\n\r\n## Browser Compatibility\r\n\r\nThis plugin adds vendor prefixes for:\r\n- ✅ Chrome/Edge (Blink)\r\n- ✅ Safari (WebKit)\r\n- ✅ Older browsers requiring `-webkit-` prefixes\r\n\r\n## Use Cases\r\n\r\n1. **With tailwind-motions**: Automatically configured\r\n2. **Standalone**: Process any CSS with animation customization\r\n3. **Build tools**: Integrate into PostCSS pipelines\r\n4. **Custom workflows**: Fine-tune animation properties\r\n\r\n## Contributing\r\n\r\nIssues and pull requests are welcome!\r\n\r\nRepository: https://github.com/dumptyd/animated-css-kit\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","_rev":"1-beabea051bd1029ae7033e5ff05e6107"}