https://github.com/vitaliyr/postcss-prefix-keyframe

PostCSS plugin for prefixing keyframes
https://github.com/vitaliyr/postcss-prefix-keyframe

Last synced: 3 days ago
JSON representation

PostCSS plugin for prefixing keyframes

• Host: GitHub
• URL: https://github.com/vitaliyr/postcss-prefix-keyframe
• Owner: VitaliyR
• License: mit
• Created: 2021-04-21T15:26:14.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-04-21T15:42:42.000Z (over 3 years ago)
• Last Synced: 2024-09-23T01:53:08.720Z (12 days ago)
• Language: JavaScript
• Size: 63.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Prefix Keyframe

[PostCSS] plugin for prefixing keyframes.

[PostCSS]: https://github.com/postcss/postcss

```css

@keyframes loader {

  0% {

    transform: scale(0);

  }

  40% {

    transform: scale(1.0);

  }

}

.animation {

  animation: loader 1.2s 500ms infinite ease-in-out both;

}

.animation-2 {

  animation-name: loader;

}

```

```css

@keyframes prefixed-loader {

  0% {

    transform: scale(0);

  }

  40% {

    transform: scale(1.0);

  }

}

.animation {

  animation: prefixed-loader 1.2s 500ms infinite ease-in-out both;

}

.animation-2 {

  animation-name: prefixed-loader;

}

```

## Usage

**Step 1:** Install plugin:

```sh

npm install --save-dev postcss postcss-prefix-keyframe

```

**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`

in the project root, `"postcss"` section in `package.json`

or `postcss` in bundle config.

If you do not use PostCSS, add it according to [official docs]

and set this plugin in settings.

**Step 3:** Add the plugin to plugins list:

Better to put above autoprefixer. Also, be aware, if you are using outdated version of autoprefixer,

prefixed rules, like `-webkit-keyframes` wont be processed. In this case, you just need to

update autoprefixer version.

```diff

module.exports = {

  plugins: [

+   require('postcss-prefix-keyframe')({ prefix: 'prefix-' }}),

    require('autoprefixer')

  ]

}

```

## Options

* `prefix` *String* - appends to the beginning of the at-rule and animation name

[official docs]: https://github.com/postcss/postcss#usage