You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
2.5 KiB
158 lines
2.5 KiB
# 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).
|
|
|