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

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

Last synced: 16 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/retyui/postcss-mimic.css-data
• Owner: retyui
• License: mit
• Created: 2017-09-29T06:23:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-10T16:59:05.000Z (over 6 years ago)
• Last Synced: 2024-10-13T15:09:10.816Z (about 1 month ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-mimic.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-mimic.css-data postcss-animations

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

```

## Use

```js

const postcss = require("postcss");

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

(async () => {

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

  const PLUGINS = [

    postcssAnimations({

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

      @keyframes tearDrop { }

    */

  } 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-tuesday.css-data](https://img.shields.io/npm/dm/postcss-tuesday.css-data.svg)](https://www.npmjs.com/package/postcss-tuesday.css-data) [postcss-tuesday.css-data](https://github.com/retyui/postcss-tuesday.css-data)

## Update data:

```bash

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

cd postcss-mimic.css-data

yarn

yarn build

```