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

4 years ago
  1. # PostCSS Discard Overridden
  2. [PostCSS] plugin to discard overridden `@keyframes` or `@counter-style`.
  3. `@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**.
  4. [PostCSS]: https://github.com/postcss/postcss
  5. ```css
  6. @-webkit-keyframes fade-in {
  7. 0% {
  8. opacity: 0;
  9. }
  10. 100% {
  11. opacity: 0.8;
  12. }
  13. }
  14. @keyframes fade-in {
  15. 0% {
  16. opacity: 0;
  17. }
  18. 100% {
  19. opacity: 0.8;
  20. }
  21. }
  22. @media (max-width: 500px) {
  23. @-webkit-keyframes fade-in {
  24. 0% {
  25. opacity: 0;
  26. }
  27. 100% {
  28. opacity: 1;
  29. }
  30. }
  31. @keyframes fade-in {
  32. 0% {
  33. opacity: 0;
  34. }
  35. 100% {
  36. opacity: 1;
  37. }
  38. }
  39. @-webkit-keyframes fade-in {
  40. 0% {
  41. opacity: 0;
  42. }
  43. 100% {
  44. opacity: 0.8;
  45. }
  46. }
  47. @keyframes fade-in {
  48. 0% {
  49. opacity: 0;
  50. }
  51. 100% {
  52. opacity: 0.8;
  53. }
  54. }
  55. @supports (display: flex) {
  56. @-webkit-keyframes fade-in {
  57. 0% {
  58. opacity: 0;
  59. }
  60. 100% {
  61. opacity: 1;
  62. }
  63. }
  64. @keyframes fade-in {
  65. 0% {
  66. opacity: 0;
  67. }
  68. 100% {
  69. opacity: 1;
  70. }
  71. }
  72. }
  73. }
  74. @-webkit-keyframes fade-in {
  75. 0% {
  76. opacity: 0;
  77. }
  78. 100% {
  79. opacity: 1;
  80. }
  81. }
  82. @keyframes fade-in {
  83. 0% {
  84. opacity: 0;
  85. }
  86. 100% {
  87. opacity: 1;
  88. }
  89. }
  90. ```
  91. ```css
  92. @media (max-width: 500px) {
  93. @-webkit-keyframes fade-in {
  94. 0% {
  95. opacity: 0;
  96. }
  97. 100% {
  98. opacity: 0.8;
  99. }
  100. }
  101. @keyframes fade-in {
  102. 0% {
  103. opacity: 0;
  104. }
  105. 100% {
  106. opacity: 0.8;
  107. }
  108. }
  109. @supports (display: flex) {
  110. @-webkit-keyframes fade-in {
  111. 0% {
  112. opacity: 0;
  113. }
  114. 100% {
  115. opacity: 1;
  116. }
  117. }
  118. @keyframes fade-in {
  119. 0% {
  120. opacity: 0;
  121. }
  122. 100% {
  123. opacity: 1;
  124. }
  125. }
  126. }
  127. }
  128. @-webkit-keyframes fade-in {
  129. 0% {
  130. opacity: 0;
  131. }
  132. 100% {
  133. opacity: 1;
  134. }
  135. }
  136. @keyframes fade-in {
  137. 0% {
  138. opacity: 0;
  139. }
  140. 100% {
  141. opacity: 1;
  142. }
  143. }
  144. ```
  145. ## Usage
  146. See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
  147. examples for your environment.
  148. ## Contributors
  149. See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).