Skip to content

Commit 64998ac

Browse files
hudochenkovhudochenkov
committed
Sort prefixed properties without explicit specifying in config #2 
1 parent 208c67e commit 64998ac

File tree

6 files changed

+59
-168
lines changed

6 files changed

+59
-168
lines changed

‎README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,32 @@ p {
5353
}
5454
```
5555

56+
##### Prefixed properties
57+
58+
Prefixed properties may not be in sort order. Plugin will look for unprefixed property and if it find one it will use that property order for prefixed property. It would be better not to write prefixed properties in CSS at all and delegate this job to [Autoprefixer].
59+
60+
Example: `{ "sort-order": [ "position", "-webkit-box-sizing", "box-sizing", "width" ] }`
61+
62+
```css
63+
/* before */
64+
div {
65+
-moz-box-sizing: border-box;
66+
width: 100%;
67+
box-sizing: border-box;
68+
position: absolute;
69+
-webkit-box-sizing: border-box;
70+
}
71+
72+
/* after */
73+
div {
74+
position: absolute;
75+
-webkit-box-sizing: border-box;
76+
-moz-box-sizing: border-box;
77+
box-sizing: border-box;
78+
width: 100%;
79+
}
80+
```
81+
5682
#### Grouping
5783

5884
Using array of arrays for `sort-order` separate content into groups by empty line.
@@ -289,3 +315,4 @@ This plugin is heavily inspired by [CSSComb]. Some code logic, tests and documen
289315
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
290316
[PreCSS]: https://github.com/jonathantneal/precss
291317
[postcss-scss]: https://github.com/postcss/postcss-scss
318+
[Autoprefixer]: https://github.com/postcss/autoprefixer

‎configs/default.json

Lines changed: 0 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,10 @@
3737
"float",
3838
"clear",
3939
"overflow",
40-
"-ms-overflow-x",
41-
"-ms-overflow-y",
4240
"overflow-x",
4341
"overflow-y",
4442
"-webkit-overflow-scrolling",
4543
"clip",
46-
"-webkit-box-sizing",
47-
"-moz-box-sizing",
4844
"box-sizing",
4945
"margin",
5046
"margin-top",
@@ -89,103 +85,39 @@
8985
"border-left-width",
9086
"border-left-style",
9187
"border-left-color",
92-
"-webkit-border-radius",
93-
"-moz-border-radius",
9488
"border-radius",
95-
"-webkit-border-top-left-radius",
96-
"-moz-border-radius-topleft",
9789
"border-top-left-radius",
98-
"-webkit-border-top-right-radius",
99-
"-moz-border-radius-topright",
10090
"border-top-right-radius",
101-
"-webkit-border-bottom-right-radius",
102-
"-moz-border-radius-bottomright",
10391
"border-bottom-right-radius",
104-
"-webkit-border-bottom-left-radius",
105-
"-moz-border-radius-bottomleft",
10692
"border-bottom-left-radius",
107-
"-webkit-border-image",
108-
"-moz-border-image",
109-
"-o-border-image",
11093
"border-image",
111-
"-webkit-border-image-source",
112-
"-moz-border-image-source",
113-
"-o-border-image-source",
11494
"border-image-source",
115-
"-webkit-border-image-slice",
116-
"-moz-border-image-slice",
117-
"-o-border-image-slice",
11895
"border-image-slice",
119-
"-webkit-border-image-width",
120-
"-moz-border-image-width",
121-
"-o-border-image-width",
12296
"border-image-width",
123-
"-webkit-border-image-outset",
124-
"-moz-border-image-outset",
125-
"-o-border-image-outset",
12697
"border-image-outset",
127-
"-webkit-border-image-repeat",
128-
"-moz-border-image-repeat",
129-
"-o-border-image-repeat",
13098
"border-image-repeat",
131-
"-webkit-border-top-image",
132-
"-moz-border-top-image",
133-
"-o-border-top-image",
13499
"border-top-image",
135-
"-webkit-border-right-image",
136-
"-moz-border-right-image",
137-
"-o-border-right-image",
138100
"border-right-image",
139-
"-webkit-border-bottom-image",
140-
"-moz-border-bottom-image",
141-
"-o-border-bottom-image",
142101
"border-bottom-image",
143-
"-webkit-border-left-image",
144-
"-moz-border-left-image",
145-
"-o-border-left-image",
146102
"border-left-image",
147-
"-webkit-border-corner-image",
148-
"-moz-border-corner-image",
149-
"-o-border-corner-image",
150103
"border-corner-image",
151-
"-webkit-border-top-left-image",
152-
"-moz-border-top-left-image",
153-
"-o-border-top-left-image",
154104
"border-top-left-image",
155-
"-webkit-border-top-right-image",
156-
"-moz-border-top-right-image",
157-
"-o-border-top-right-image",
158105
"border-top-right-image",
159-
"-webkit-border-bottom-right-image",
160-
"-moz-border-bottom-right-image",
161-
"-o-border-bottom-right-image",
162106
"border-bottom-right-image",
163-
"-webkit-border-bottom-left-image",
164-
"-moz-border-bottom-left-image",
165-
"-o-border-bottom-left-image",
166107
"border-bottom-left-image",
167108
"background",
168109
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
169110
"background-color",
170111
"background-image",
171112
"background-attachment",
172113
"background-position",
173-
"-ms-background-position-x",
174-
"-ms-background-position-y",
175114
"background-position-x",
176115
"background-position-y",
177-
"-webkit-background-clip",
178-
"-moz-background-clip",
179116
"background-clip",
180117
"background-origin",
181-
"-webkit-background-size",
182-
"-moz-background-size",
183-
"-o-background-size",
184118
"background-size",
185119
"background-repeat",
186120
"box-decoration-break",
187-
"-webkit-box-shadow",
188-
"-moz-box-shadow",
189121
"box-shadow",
190122
"color",
191123
"table-layout",
@@ -202,37 +134,26 @@
202134
"-ms-writing-mode",
203135
"vertical-align",
204136
"text-align",
205-
"-webkit-text-align-last",
206-
"-moz-text-align-last",
207-
"-ms-text-align-last",
208137
"text-align-last",
209138
"text-decoration",
210139
"text-emphasis",
211140
"text-emphasis-position",
212141
"text-emphasis-style",
213142
"text-emphasis-color",
214143
"text-indent",
215-
"-ms-text-justify",
216144
"text-justify",
217145
"text-outline",
218146
"text-transform",
219147
"text-wrap",
220-
"-ms-text-overflow",
221148
"text-overflow",
222149
"text-overflow-ellipsis",
223150
"text-overflow-mode",
224151
"text-shadow",
225152
"white-space",
226153
"word-spacing",
227-
"-ms-word-wrap",
228154
"word-wrap",
229-
"-ms-word-break",
230155
"word-break",
231-
"-moz-tab-size",
232-
"-o-tab-size",
233156
"tab-size",
234-
"-webkit-hyphens",
235-
"-moz-hyphens",
236157
"hyphens",
237158
"letter-spacing",
238159
"font",
@@ -249,8 +170,6 @@
249170
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
250171
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
251172
"-ms-interpolation-mode",
252-
"-webkit-filter",
253-
"-ms-filter",
254173
"filter",
255174
"resize",
256175
"cursor",
@@ -259,114 +178,34 @@
259178
"nav-right",
260179
"nav-down",
261180
"nav-left",
262-
"-webkit-transition",
263-
"-moz-transition",
264-
"-ms-transition",
265-
"-o-transition",
266181
"transition",
267-
"-webkit-transition-delay",
268-
"-moz-transition-delay",
269-
"-ms-transition-delay",
270-
"-o-transition-delay",
271182
"transition-delay",
272-
"-webkit-transition-timing-function",
273-
"-moz-transition-timing-function",
274-
"-ms-transition-timing-function",
275-
"-o-transition-timing-function",
276183
"transition-timing-function",
277-
"-webkit-transition-duration",
278-
"-moz-transition-duration",
279-
"-ms-transition-duration",
280-
"-o-transition-duration",
281184
"transition-duration",
282-
"-webkit-transition-property",
283-
"-moz-transition-property",
284-
"-ms-transition-property",
285-
"-o-transition-property",
286185
"transition-property",
287-
"-webkit-transform",
288-
"-moz-transform",
289-
"-ms-transform",
290-
"-o-transform",
291186
"transform",
292-
"-webkit-transform-origin",
293-
"-moz-transform-origin",
294-
"-ms-transform-origin",
295-
"-o-transform-origin",
296187
"transform-origin",
297-
"-webkit-animation",
298-
"-moz-animation",
299-
"-ms-animation",
300-
"-o-animation",
301188
"animation",
302-
"-webkit-animation-name",
303-
"-moz-animation-name",
304-
"-ms-animation-name",
305-
"-o-animation-name",
306189
"animation-name",
307-
"-webkit-animation-duration",
308-
"-moz-animation-duration",
309-
"-ms-animation-duration",
310-
"-o-animation-duration",
311190
"animation-duration",
312-
"-webkit-animation-play-state",
313-
"-moz-animation-play-state",
314-
"-ms-animation-play-state",
315-
"-o-animation-play-state",
316191
"animation-play-state",
317-
"-webkit-animation-timing-function",
318-
"-moz-animation-timing-function",
319-
"-ms-animation-timing-function",
320-
"-o-animation-timing-function",
321192
"animation-timing-function",
322-
"-webkit-animation-delay",
323-
"-moz-animation-delay",
324-
"-ms-animation-delay",
325-
"-o-animation-delay",
326193
"animation-delay",
327-
"-webkit-animation-iteration-count",
328-
"-moz-animation-iteration-count",
329-
"-ms-animation-iteration-count",
330-
"-o-animation-iteration-count",
331194
"animation-iteration-count",
332-
"-webkit-animation-direction",
333-
"-moz-animation-direction",
334-
"-ms-animation-direction",
335-
"-o-animation-direction",
336195
"animation-direction",
337196
"animation-fill-mode",
338197
"pointer-events",
339198
"unicode-bidi",
340199
"direction",
341-
"-webkit-columns",
342-
"-moz-columns",
343200
"columns",
344-
"-webkit-column-span",
345-
"-moz-column-span",
346201
"column-span",
347-
"-webkit-column-width",
348-
"-moz-column-width",
349202
"column-width",
350-
"-webkit-column-count",
351-
"-moz-column-count",
352203
"column-count",
353-
"-webkit-column-fill",
354-
"-moz-column-fill",
355204
"column-fill",
356-
"-webkit-column-gap",
357-
"-moz-column-gap",
358205
"column-gap",
359-
"-webkit-column-rule",
360-
"-moz-column-rule",
361206
"column-rule",
362-
"-webkit-column-rule-width",
363-
"-moz-column-rule-width",
364207
"column-rule-width",
365-
"-webkit-column-rule-style",
366-
"-moz-column-rule-style",
367208
"column-rule-style",
368-
"-webkit-column-rule-color",
369-
"-moz-column-rule-color",
370209
"column-rule-color",
371210
"break-before",
372211
"break-inside",
@@ -376,16 +215,11 @@
376215
"page-break-after",
377216
"orphans",
378217
"widows",
379-
"-ms-zoom",
380218
"zoom",
381219
"max-zoom",
382220
"min-zoom",
383221
"user-zoom",
384222
"orientation",
385-
"-webkit-user-select",
386-
"-moz-user-select",
387-
"-ms-user-select",
388-
"-o-user-select",
389223
"user-select",
390224
"fill",
391225
"stroke",

‎index.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,18 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
110110
sortName = '>child';
111111
}
112112

113+
// Trying to get property indexes from order's list
114+
var orderProperty = order[sortName];
115+
116+
// If no property in the list and this property is prefixed then trying to get parameters for unprefixed property
117+
if (!orderProperty && postcss.vendor.prefix(sortName)) {
118+
sortName = postcss.vendor.unprefixed(sortName);
119+
orderProperty = order[sortName];
120+
}
121+
113122
// If the declaration's property is in order's list, save its
114123
// group and property indexes. Otherwise set them to 10000, so
115124
// declaration appears at the bottom of a sorted list:
116-
var orderProperty = order[sortName];
117-
118125
node.groupIndex = orderProperty && orderProperty.group > -1 ? orderProperty.group : lastGroupIndex;
119126
node.propertyIndex = orderProperty && orderProperty.prop > -1 ? orderProperty.prop : lastPropertyIndex;
120127
node.initialIndex = index;

‎test/fixtures/prefixed.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
div {
2+
-moz-box-sizing: border-box;
3+
width: 100%;
4+
box-sizing: border-box;
5+
position: absolute;
6+
-webkit-box-sizing: border-box;
7+
}

‎test/fixtures/prefixed.expected.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
div {
2+
position: absolute;
3+
-webkit-box-sizing: border-box;
4+
-moz-box-sizing: border-box;
5+
box-sizing: border-box;
6+
width: 100%;
7+
}

‎test/test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,3 +180,12 @@ test('Should sort at-rules by name', t => {
180180
test('Should use default config if config is empty', t => {
181181
return run(t, 'without-specified-config');
182182
});
183+
184+
test('Should sort prefixed propertyes as unprefixed if first one not in order, but second one in', t => {
185+
return run(t, 'prefixed', { 'sort-order': [
186+
'position',
187+
'-webkit-box-sizing',
188+
'box-sizing',
189+
'width'
190+
] });
191+
});

0 commit comments

Comments
 (0)