项目原始demo,不改动
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
Це архівний репозитарій. Ви можете переглядати і клонувати файли, але не можете робити пуш або відкривати питання/запити.

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