https://github.com/retyui/postcss-animations
PostCSS plugin that adds `@keyframes` from animate.css, tuesday.css, magic.css, mimic.css
https://github.com/retyui/postcss-animations
css-animations postcss-animations postcss-plugin
Last synced: 10 months ago
JSON representation
PostCSS plugin that adds `@keyframes` from animate.css, tuesday.css, magic.css, mimic.css
- Host: GitHub
- URL: https://github.com/retyui/postcss-animations
- Owner: retyui
- License: mit
- Created: 2017-03-17T10:13:54.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-11-20T10:34:02.000Z (about 1 year ago)
- Last Synced: 2025-04-09T15:03:26.403Z (10 months ago)
- Topics: css-animations, postcss-animations, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 167 KB
- Stars: 40
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-animations
[](https://www.npmjs.com/package/postcss-animations)
[](https://github.com/retyui/postcss-animations/actions/workflows/nodejs.yml)
PostCSS plugin that adds `@keyframes` from:
- [](https://www.npmjs.com/package/postcss-animation.css-data) [postcss-animation.css-data](https://github.com/retyui/postcss-animation.css-data)
- [](https://www.npmjs.com/package/postcss-magic.css-data) [postcss-magic.css-data](https://github.com/retyui/postcss-magic.css-data)
- [](https://www.npmjs.com/package/postcss-mimic.css-data) [postcss-mimic.css-data](https://github.com/retyui/postcss-mimic.css-data)
- [](https://www.npmjs.com/package/postcss-tuesday.css-data) [postcss-tuesday.css-data](https://github.com/retyui/postcss-tuesday.css-data)
### Install
```bash
yarn add -D postcss-animations
# and the animation data set you need
yarn add -D postcss-animation.css-data postcss-magic.css-data postcss-mimic.css-data postcss-tuesday.css-data
```
**Input:**
```css
:root {
--fade-in-animation-name: tdFadeOut; /* add css variables support (Disabled default) */
}
.tdFadeIn {
animation-name: tdFadeIn;
}
.tdFadeOut {
animation-name: var(--fade-in-animation-name); /* or css variables */
}
```
**Output:**
```css
:root {
--fade-in-animation-name: tdFadeOut;
}
.tdFadeIn {
animation-name: tdFadeIn;
}
.tdFadeOut {
animation-name: var(--fade-in-animation-name);
}
@keyframes tdFadeIn {
/* ... */
}
@keyframes tdFadeOut {
/* will be added if 'disableCheckCssVariables: false' */
/* ... */
}
```
### Usage
```js
const fs = require("fs");
const postcss = require("postcss");
const postcssAnimations = require("postcss-animations");
const [from, to] = ["./src/style.css", "./dist/style.css"];
const CSS = fs.readFileSync(from);
const PLUGINS = [
postcssAnimations({
data: [
require("postcss-animation.css-data"),
require("postcss-magic.css-data"),
require("postcss-mimic.css-data"),
require("postcss-tuesday.css-data"),
],
checkDuplications: true,
disableCheckCssVariables: true,
}),
];
(async () => {
try {
const { css, messages } = await postcss(PLUGINS).process(CSS, { from, to });
messages
.filter(({ type }) => type === "warning")
.map((msg) => console.log(msg.toString()));
console.log(css);
fs.writeFileSync(to, css);
} catch (e) {
console.error(e);
}
})();
```
### Options
#### `data: Array<{[animationName: string]: string}> | {[animationName: string]: string}`
`data` is a simple object where:
- `key`: animation name
- `value`: css code of animation
```js
// Plain object
const data = {
myAnimationName: `@keyframes myAnimationName { 0%{opacity:1;} 100%{opacity:0;} }`,
};
// or Array
const data = [
{
myAnimationName: `@keyframes myAnimationName { 0%{opacity:1;} 100%{opacity:0;} }`,
},
require("postcss-animation.css-data"),
];
```
#### `disableCheckCssVariables: boolean`
Disable checking and search variables css `var(--name)` (default: `true`)
#### `checkDuplications: boolean`
Display a warning if find duplicate name of the animation (default: `true`)
---
### [Animista](http://animista.net) support example:
```js
const {
css: parseFromCss,
files: parseFromFile,
} = require("css-parse-keyframes");
postcss([
require("postcss-animations")({
data: [
// your Generated code
parseFromCss(
"@keyframes scale-up-center {0% { transform: scale(0.5); } 100% { transform: scale(1); }}"
),
// or saved
parseFromFile("./animista-demo.css"),
parseFromFile(["./animista-text.css", "./animista-base.css"]),
],
}),
]);
```