postcss-magic.css-data

Package that adds `@keyframes` from magic.css.

Usage no npm install needed!

<script type="module">
  import postcssMagicCssData from 'https://cdn.skypack.dev/postcss-magic.css-data';
</script>

README

postcss-magic.css-data

Autogenerated data for postcss-animations plugin.

Parsed all @keyframes from magic.css.

Install

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

Use

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

(async () => {
  const CSS = `.my-openDownRightOut { animation-name: openDownRightOut; }`;
  const PLUGINS = [
    postcssAnimations({
      data: [require("postcss-magic.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-openDownRightOut { animation-name: openDownRightOut; }
          @keyframes openDownRightOut { }
        */
  } catch (e) {
    console.error(e);
  }
})();

Other animation data:

Update data:

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