/postcss-animation.css-data

PostCSS plugin that adds `@keyframes` from animate.css.

Primary LanguageJavaScriptMIT LicenseMIT

postcss-animation.css-data

Autogenerated data for postcss-animations plugin.

Parsed all @keyframes from magic.css.

Install

yarn add -D postcss-animation.css-data postcss-animations
# or npm i -D postcss-animation.css-data postcss-animations

Use

const postcss = require("postcss");
const postcssAnimations = require("postcss-animations");

(async () => {
  const CSS = `.my-jackInTheBox { animation-name: jackInTheBox; }`;
  const PLUGINS = [
    postcssAnimations({
      data: [require("postcss-animation.css-data")],
      checkDuplications: true,
      disableCheckCssVariables: true
    })
  ];

  try {
    const { css, messages } = await postcss(PLUGINS).process(
      CSS /*, {from,to}*/
    );
    messages.map(msg => console.log(msg.toString()));

    console.log(css);
    /*
      .my-jackInTheBox { animation-name: jackInTheBox; }
      @keyframes jackInTheBox { }
    */
  } catch (e) {
    console.error(e);
  }
})();

Other animation data:

Update data:

git clone https://github.com/retyui/postcss-animation.css-data
cd postcss-animation.css-data
yarn
yarn build