postcss-animations

postcss-animations

PostCSS plugin that adds @keyframes from:

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

Install

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:

: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:

: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

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

// 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 support example:

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