@@ -25,8 +25,8 @@ $ npm install postcss-sorting
25
25
26
26
``` json
27
27
{
28
- "sort-order" : " default" ,
29
- "empty-lines-between-children-rules" : 0
28
+ "sort-order" : " default" ,
29
+ "empty-lines-between-children-rules" : 0
30
30
}
31
31
```
32
32
@@ -49,14 +49,14 @@ Example: `{ "sort-order": [ "margin", "padding" ] }`
49
49
``` css
50
50
/* before */
51
51
p {
52
- padding : 0 ;
53
- margin : 0 ;
52
+ padding : 0 ;
53
+ margin : 0 ;
54
54
}
55
55
56
56
/* after */
57
57
p {
58
- margin : 0 ;
59
- padding : 0 ;
58
+ margin : 0 ;
59
+ padding : 0 ;
60
60
}
61
61
```
62
62
@@ -69,20 +69,20 @@ Example: `{ "sort-order": [ "position", "-webkit-box-sizing", "box-sizing", "wid
69
69
``` css
70
70
/* before */
71
71
div {
72
- -moz-box-sizing : border-box ;
73
- width : 100% ;
74
- box-sizing : border-box ;
75
- position : absolute ;
76
- -webkit-box-sizing : border-box ;
72
+ -moz-box-sizing : border-box ;
73
+ width : 100% ;
74
+ box-sizing : border-box ;
75
+ position : absolute ;
76
+ -webkit-box-sizing : border-box ;
77
77
}
78
78
79
79
/* after */
80
80
div {
81
- position : absolute ;
82
- -webkit-box-sizing : border-box ;
83
- -moz-box-sizing : border-box ;
84
- box-sizing : border-box ;
85
- width : 100% ;
81
+ position : absolute ;
82
+ -webkit-box-sizing : border-box ;
83
+ -moz-box-sizing : border-box ;
84
+ box-sizing : border-box ;
85
+ width : 100% ;
86
86
}
87
87
```
88
88
@@ -95,19 +95,19 @@ Example: `{ "sort-order": [ [ "margin", "padding" ], [ "border", "background" ]
95
95
``` css
96
96
/* before */
97
97
p {
98
- background : none ;
99
- border : 0 ;
100
- margin : 0 ;
101
- padding : 0 ;
98
+ background : none ;
99
+ border : 0 ;
100
+ margin : 0 ;
101
+ padding : 0 ;
102
102
}
103
103
104
104
/* after */
105
105
p {
106
- margin : 0 ;
107
- padding : 0 ;
106
+ margin : 0 ;
107
+ padding : 0 ;
108
108
109
- border : 0 ;
110
- background : none ;
109
+ border : 0 ;
110
+ background : none ;
111
111
}
112
112
```
113
113
@@ -124,24 +124,24 @@ Example: `{ "sort-order": ["@atrule", "@mixin", "border", "@some-rule hello", "@
124
124
``` scss
125
125
/* before */
126
126
.block {
127
- @some-rule hello ;
128
- border : none ;
129
- @mixin clearfix ;
130
- @media (min-width : 100px ) {
131
- display : none ;
132
- }
133
- @mixin island ;
127
+ @some-rule hello ;
128
+ border : none ;
129
+ @mixin clearfix ;
130
+ @media (min-width : 100px ) {
131
+ display : none ;
132
+ }
133
+ @mixin island ;
134
134
}
135
135
136
136
/* after */
137
137
.block {
138
- @media (min-width : 100px ) {
139
- display : none ;
140
- }
141
- @mixin island ;
142
- border : none ;
143
- @some-rule hello ;
144
- @mixin clearfix ;
138
+ @media (min-width : 100px ) {
139
+ display : none ;
140
+ }
141
+ @mixin island ;
142
+ border : none ;
143
+ @some-rule hello ;
144
+ @mixin clearfix ;
145
145
}
146
146
```
147
147
@@ -154,33 +154,33 @@ Example: `{ "sort-order": [ ["position", "top", "width"], ['>child'] ] }`
154
154
``` scss
155
155
/* before */
156
156
.block {
157
- position : absolute ;
157
+ position : absolute ;
158
158
159
- span {
160
- display : inline-block ;
161
- }
159
+ span {
160
+ display : inline-block ;
161
+ }
162
162
163
- width : 50% ;
163
+ width : 50% ;
164
164
165
- & __element {
166
- display : none ;
167
- }
165
+ & __element {
166
+ display : none ;
167
+ }
168
168
169
- top : 0 ;
169
+ top : 0 ;
170
170
}
171
171
172
172
/* after */
173
173
.block {
174
- position : absolute ;
175
- top : 0 ;
176
- width : 50% ;
177
-
178
- span {
179
- display : inline-block ;
180
- }
181
- & __element {
182
- display : none ;
183
- }
174
+ position : absolute ;
175
+ top : 0 ;
176
+ width : 50% ;
177
+
178
+ span {
179
+ display : inline-block ;
180
+ }
181
+ & __element {
182
+ display : none ;
183
+ }
184
184
}
185
185
```
186
186
@@ -193,23 +193,23 @@ Example: `{ "sort-order": [ ["$variable"], ["position", "top", "width", "height"
193
193
``` scss
194
194
/* before */
195
195
.block {
196
- position : absolute ;
197
- $width : 10px ;
198
- top : 0 ;
199
- $height : 20px ;
200
- height : $height ;
201
- width : $width ;
196
+ position : absolute ;
197
+ $width : 10px ;
198
+ top : 0 ;
199
+ $height : 20px ;
200
+ height : $height ;
201
+ width : $width ;
202
202
}
203
203
204
204
/* after */
205
205
.block {
206
- $width : 10px ;
207
- $height : 20px ;
206
+ $width : 10px ;
207
+ $height : 20px ;
208
208
209
- position : absolute ;
210
- top : 0 ;
211
- width : $width ;
212
- height : $height ;
209
+ position : absolute ;
210
+ top : 0 ;
211
+ width : $width ;
212
+ height : $height ;
213
213
}
214
214
```
215
215
@@ -223,13 +223,13 @@ So, with this value:
223
223
224
224
``` json
225
225
{
226
- "sort-order" : [
227
- [" $variable" ],
228
- [" position" ],
229
- [" ..." , " border" ],
230
- [" @mixin" ],
231
- [" font" ]
232
- ]
226
+ "sort-order" : [
227
+ [" $variable" ],
228
+ [" position" ],
229
+ [" ..." , " border" ],
230
+ [" @mixin" ],
231
+ [" font" ]
232
+ ]
233
233
}
234
234
```
235
235
@@ -257,36 +257,36 @@ Example: `{ "empty-lines-between-children-rules": 1, "sort-order": [ ["..."], ["
257
257
``` scss
258
258
/* before */
259
259
.block {
260
- position : absolute ;
260
+ position : absolute ;
261
261
262
- span {
263
- display : inline-block ;
264
- }
262
+ span {
263
+ display : inline-block ;
264
+ }
265
265
266
266
267
- & __element {
268
- display : none ;
269
- }
270
- & :hover {
271
- top : 0 ;
272
- }
267
+ & __element {
268
+ display : none ;
269
+ }
270
+ & :hover {
271
+ top : 0 ;
272
+ }
273
273
}
274
274
275
275
/* after */
276
276
.block {
277
- position : absolute ;
277
+ position : absolute ;
278
278
279
- span {
280
- display : inline-block ;
281
- }
279
+ span {
280
+ display : inline-block ;
281
+ }
282
282
283
- & __element {
284
- display : none ;
285
- }
283
+ & __element {
284
+ display : none ;
285
+ }
286
286
287
- & :hover {
288
- top : 0 ;
289
- }
287
+ & :hover {
288
+ top : 0 ;
289
+ }
290
290
}
291
291
```
292
292
@@ -313,13 +313,13 @@ var postcss = require('gulp-postcss');
313
313
var sorting = require (' postcss-sorting' );
314
314
315
315
gulp .task (' css' , function () {
316
- return gulp .src (' ./css/src/*.css' ).pipe (
317
- postcss ([
318
- sorting ({ /* options */ })
319
- ])
320
- ).pipe (
321
- gulp .dest (' ./css' )
322
- );
316
+ return gulp .src (' ./css/src/*.css' ).pipe (
317
+ postcss ([
318
+ sorting ({ /* options */ })
319
+ ])
320
+ ).pipe (
321
+ gulp .dest (' ./css' )
322
+ );
323
323
});
324
324
```
325
325
@@ -337,16 +337,16 @@ Enable PostCSS Sorting within your Gruntfile:
337
337
grunt .loadNpmTasks (' grunt-postcss' );
338
338
339
339
grunt .initConfig ({
340
- postcss: {
341
- options: {
342
- processors: [
343
- require (' postcss-sorting' )({ /* options */ })
344
- ]
345
- },
346
- dist: {
347
- src: ' css/*.css'
348
- }
349
- }
340
+ postcss: {
341
+ options: {
342
+ processors: [
343
+ require (' postcss-sorting' )({ /* options */ })
344
+ ]
345
+ },
346
+ dist: {
347
+ src: ' css/*.css'
348
+ }
349
+ }
350
350
});
351
351
```
352
352
0 commit comments