|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- # PostCSS Discard Overridden [![Build Status][ci-img]][ci]
-
- [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
- [ci-img]: https://travis-ci.org/Justineo/postcss-discard-overridden.svg
- [ci]: https://travis-ci.org/Justineo/postcss-discard-overridden
-
- ```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
-
- ```js
- postcss([ require('postcss-discard-overridden') ])
- ```
-
- See [PostCSS] docs for examples for your environment.
|