postcss-animations


PostCSS plugin that adds @keyframes from:

-  postcss-animation.css-data
-  postcss-magic.css-data
-  postcss-mimic.css-data
-  postcss-tuesday.css-data

$3

``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' /
/ ... /
}
`

$3

`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);
}
})();
`

$3

#### 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)

---

$3

`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"]),
],
}),
]);
``