https://github.com/retyui/postcss-tuesday.css-data

PostCSS plugin that adds `@keyframes` from tuesday.css.
https://github.com/retyui/postcss-tuesday.css-data

animation-css postcss-animations postcss-tuesday tuesday-css

Last synced: over 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/retyui/postcss-tuesday.css-data
• Owner: retyui
• License: mit
• Created: 2017-03-17T10:18:10.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-05-10T16:55:20.000Z (about 8 years ago)
• Last Synced: 2025-03-09T00:07:01.973Z (over 1 year ago)
• Topics: animation-css, postcss-animations, postcss-tuesday, tuesday-css
• Language: JavaScript
• Size: 8.79 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# postcss-tuesday.css-data

Autogenerated data for [postcss-animations](https://github.com/retyui/postcss-animations) plugin.

Parsed all `@keyframes` from [magic.css](https://minimamente.com/example/magic_animations/).

## Install

```bash

yarn add -D postcss-tuesday.css-data postcss-animations

# or npm i -D postcss-tuesday.css-data postcss-animations

```

## Use

```js

const postcss = require("postcss");

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

(async () => {

  const CSS = `.my-tdExpandIn { animation-name: tdExpandIn; }`;

  const PLUGINS = [

    postcssAnimations({

      data: [require("postcss-tuesday.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-tdExpandIn { animation-name: tdExpandIn; }

      @keyframes tdExpandIn { }

    */

  } catch (e) {

    console.error(e);

  }

})();

```

## Other animation data:

* [![npm postcss-animation.css-data](https://img.shields.io/npm/dm/postcss-animation.css-data.svg)](https://www.npmjs.com/package/postcss-animation.css-data) [postcss-animation.css-data](https://github.com/retyui/postcss-animation.css-data)

* [![npm postcss-magic.css-data](https://img.shields.io/npm/dm/postcss-magic.css-data.svg)](https://www.npmjs.com/package/postcss-magic.css-data) [postcss-magic.css-data](https://github.com/retyui/postcss-magic.css-data)

* [![npm postcss-mimic.css-data](https://img.shields.io/npm/dm/postcss-mimic.css-data.svg)](https://www.npmjs.com/package/postcss-mimic.css-data) [postcss-mimic.css-data](https://github.com/retyui/postcss-mimic.css-data)

## Update data:

```bash

git clone https://github.com/retyui/postcss-tuesday.css-data

cd postcss-tuesday.css-data

yarn

yarn build

```