| # PostCSS Discard Overridden |
| |
| [PostCSS] plugin to discard overridden `@keyframes` or `@counter-style`. |
| |
| `@keyframes` or `@counter-style` will be overridden by those who share the same identifiers and appear later in stylesheets. So we can discard all of them except the last one. When defined inside a `@media` or `@supports` rule, `@keyframes` and `@counter-style` rules only override global rules in some of the client browsers so they need handled separately. This plugin has taken care of this and transforms the PostCss AST **safely**. |
| |
| [PostCSS]: https://github.com/postcss/postcss |
| |
| ```css |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @media (max-width: 500px) { |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @supports (display: flex) { |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| } |
| } |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| ``` |
| |
| ```css |
| @media (max-width: 500px) { |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 0.8; |
| } |
| } |
| @supports (display: flex) { |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| } |
| } |
| @-webkit-keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fade-in { |
| 0% { |
| opacity: 0; |
| } |
| 100% { |
| opacity: 1; |
| } |
| } |
| ``` |
| |
| ## Usage |
| |
| See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for |
| examples for your environment. |
| |
| ## Contributors |
| |
| See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md). |