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.

README.md 4.0 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. # PostCSS Initial
  2. [![CSS Standard Status][css-img]][css] [![Build Status][ci-img]][ci] [![NPM Module][npm-img]][npm] [![David DM][david-img]][david]
  3. <img align="right" width="135" height="95"
  4. title="Philosopher’s stone, logo of PostCSS"
  5. src="http://postcss.github.io/postcss/logo-leftp.png">
  6. [PostCSS] plugin to fallback `initial` keyword. Very useful in combination with
  7. [postcss-autoreset][reset].
  8. [PostCSS]: https://github.com/postcss/postcss
  9. [css-img]: https://jonathantneal.github.io/css-db/badge/css-cascade-all-shorthand.svg
  10. [css]: https://jonathantneal.github.io/css-db/#css-cascade-all-shorthand
  11. [ci-img]: https://travis-ci.org/maximkoretskiy/postcss-initial.svg
  12. [ci]: https://travis-ci.org/maximkoretskiy/postcss-initial
  13. [npm-img]: https://badge.fury.io/js/postcss-initial.svg
  14. [npm]: https://www.npmjs.com/package/postcss-initial
  15. [david-img]: https://david-dm.org/maximkoretskiy/postcss-initial.svg
  16. [david]: https://david-dm.org/maximkoretskiy/postcss-initial
  17. [reset]: https://github.com/maximkoretskiy/postcss-autoreset
  18. ```css
  19. a {
  20. animation: initial;
  21. background: initial;
  22. white-space: initial;
  23. }
  24. p {
  25. background: url(/img1.png),
  26. url(/img2.png);
  27. background-repeat: initial no-repeat
  28. }
  29. ```
  30. ```css
  31. a {
  32. animation: none 0s ease 0s 1 normal none running;
  33. animation: initial;
  34. background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  35. background: initial;
  36. white-space: normal;
  37. white-space: initial;
  38. }
  39. p {
  40. background: url(/img1.png),
  41. url(/img2.png);
  42. background-repeat: repeat no-repeat
  43. }
  44. ```
  45. **Killer feature!**
  46. Universal reset from future css!
  47. ```css
  48. a {
  49. all: initial;
  50. }
  51. ```
  52. ```css
  53. a {
  54. animation: none 0s ease 0s 1 normal none running;
  55. backface-visibility: visible;
  56. background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  57. border: medium none currentColor;
  58. border-collapse: separate;
  59. border-image: none;
  60. border-radius: 0;
  61. border-spacing: 0;
  62. bottom: auto;
  63. box-shadow: none;
  64. box-sizing: content-box;
  65. caption-side: top;
  66. clear: none;
  67. clip: auto;
  68. color: #000;
  69. columns: auto;
  70. column-count: auto;
  71. column-fill: balance;
  72. column-gap: normal;
  73. column-rule: medium none currentColor;
  74. column-span: 1;
  75. column-width: auto;
  76. content: normal;
  77. counter-increment: none;
  78. counter-reset: none;
  79. cursor: auto;
  80. direction: ltr;
  81. display: inline;
  82. empty-cells: show;
  83. float: none;
  84. font-family: serif;
  85. font-size: medium;
  86. font-style: normal;
  87. font-variant: normal;
  88. font-weight: normal;
  89. font-stretch: normal;
  90. line-height: normal;
  91. height: auto;
  92. hyphens: none;
  93. left: auto;
  94. letter-spacing: normal;
  95. list-style: disc outside none;
  96. margin: 0;
  97. max-height: none;
  98. max-width: none;
  99. min-height: 0;
  100. min-width: 0;
  101. opacity: 1;
  102. orphans: 2;
  103. outline: medium none invert;
  104. overflow: visible;
  105. overflow-x: visible;
  106. overflow-y: visible;
  107. padding: 0;
  108. page-break-after: auto;
  109. page-break-before: auto;
  110. page-break-inside: auto;
  111. perspective: none;
  112. perspective-origin: 50% 50%;
  113. position: static;
  114. right: auto;
  115. tab-size: 8;
  116. table-layout: auto;
  117. text-align: left;
  118. text-align-last: auto;
  119. text-decoration: none;
  120. text-indent: 0;
  121. text-shadow: none;
  122. text-transform: none;
  123. top: auto;
  124. transform: none;
  125. transform-origin: 50% 50% 0;
  126. transform-style: flat;
  127. transition: none 0s ease 0s;
  128. unicode-bidi: normal;
  129. vertical-align: baseline;
  130. visibility: visible;
  131. white-space: normal;
  132. widows: 2;
  133. width: auto;
  134. word-spacing: normal;
  135. z-index: auto;
  136. all: initial;
  137. }
  138. ```
  139. ## Options
  140. ### reset
  141. Takes `string`.
  142. Describes what subset of rules should be unsetted with `all` property (to reduce code weight).
  143. Possible subsets: `all`, `inherited`.
  144. Default value: `'all'`.
  145. ### replace
  146. Takes `boolean`.
  147. Replace the `initial` with the fallback instead of adding it.
  148. Default value: `false`.
  149. ## Usage
  150. ```js
  151. postcss([ require('postcss-initial')({
  152. reset: 'inherited' // reset only inherited rules
  153. }) ])
  154. ```
  155. See [PostCSS] docs for examples for your environment.
  156. ## [Changelog](./CHANGELOG.md)