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