postcss-sort-media-queries 4.3.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README-UZ.md +266 -0
- package/README.md +64 -23
- package/browser.js +54 -54
- package/index.js +52 -52
- package/package.json +16 -9
package/README-UZ.md
ADDED
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
# PostCSS tartiblash media so'rovlari
|
|
2
|
+
|
|
3
|
+
[PostCSS]: https://github.com/postcss/postcss
|
|
4
|
+
[MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE
|
|
5
|
+
[official docs]: https://github.com/postcss/postcss#usage
|
|
6
|
+
[Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/postcss-sort-media-queries) [](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/postcss-sort-media-queries)
|
|
11
|
+
|
|
12
|
+
<img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
|
|
13
|
+
|
|
14
|
+
🌏 [**English**](README.md) ▫ **O'zbek**
|
|
15
|
+
|
|
16
|
+
[PostCSS] CSS media so'rovlarini **mobil qurilma** va **ish stoli kompyuter** metodologiyalari bilan ularni saralash va birlashtirish uchun xizmat qiladi.
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
> 5.0.0 plaginini qo'llab-quvvatlaydigan [Media funksiyasi turlari: “diapazon”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## Mundarija
|
|
24
|
+
|
|
25
|
+
- [Onlayn demo](#onlayn-demo)
|
|
26
|
+
- [Misollar](#misollar)
|
|
27
|
+
- [Mobil qurilmalarni tartiblash](#mobil-qurilmalarni-tartiblash)
|
|
28
|
+
- [Ish stoli kompyuter qurilmalarni tartiblash](#ish-stoli-kompyuter-qurilmalarni-tartiblash)
|
|
29
|
+
- [O'rnatish](#ornatish)
|
|
30
|
+
- [Foydalanish](#foydalanish)
|
|
31
|
+
- [Optsiyalar](#optsiyalar)
|
|
32
|
+
- [Saralash](#saralash)
|
|
33
|
+
- [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi)
|
|
34
|
+
- [Saralash konfiguratsiyasi](#saralash-konfiguratsiyasi)
|
|
35
|
+
- [O'zgarishlar jurnali](#ozgarishlar-jurnali)
|
|
36
|
+
- [Litsenziya](#litsenziya)
|
|
37
|
+
- [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari)
|
|
38
|
+
- [Rahmat 💪](#rahmat)
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## Onlayn demo
|
|
42
|
+
|
|
43
|
+
Bu yerda: [onlayn demo](https://postcss-sort-media-queries.github.io)
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## Misollar
|
|
47
|
+
|
|
48
|
+
### Mobil qurilmalarni tartiblash
|
|
49
|
+
|
|
50
|
+
**oldin**
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
@media screen and (max-width: 640px) {
|
|
54
|
+
.head { color: #cfcfcf }
|
|
55
|
+
}
|
|
56
|
+
@media screen and (max-width: 768px) {
|
|
57
|
+
.footer { color: #cfcfcf }
|
|
58
|
+
}
|
|
59
|
+
@media screen and (max-width: 640px) {
|
|
60
|
+
.main { color: #cfcfcf }
|
|
61
|
+
}
|
|
62
|
+
@media screen and (min-width: 1280px) {
|
|
63
|
+
.mobile-first { color: #cfcfcf }
|
|
64
|
+
}
|
|
65
|
+
@media screen and (width > 640px) {
|
|
66
|
+
.mobile-first { color: #cfcfcf }
|
|
67
|
+
}
|
|
68
|
+
@media screen and (max-width: 640px) {
|
|
69
|
+
.footer { color: #cfcfcf }
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**keyin**
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
@media screen and (width > 640px) {
|
|
77
|
+
.mobile-first { color: #cfcfcf }
|
|
78
|
+
}
|
|
79
|
+
@media screen and (min-width: 1280px) {
|
|
80
|
+
.mobile-first { color: #cfcfcf }
|
|
81
|
+
}
|
|
82
|
+
@media screen and (max-width: 768px) {
|
|
83
|
+
.footer { color: #cfcfcf }
|
|
84
|
+
}
|
|
85
|
+
@media screen and (max-width: 640px) {
|
|
86
|
+
/* combined */
|
|
87
|
+
.head { color: #cfcfcf }
|
|
88
|
+
.main { color: #cfcfcf }
|
|
89
|
+
.footer { color: #cfcfcf }
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Ish stoli kompyuter qurilmalarni tartiblash
|
|
94
|
+
|
|
95
|
+
**oldin**
|
|
96
|
+
```css
|
|
97
|
+
@media screen and (width < 640px) {
|
|
98
|
+
.header { color: #cdcdcd }
|
|
99
|
+
}
|
|
100
|
+
@media screen and (min-width: 760px) {
|
|
101
|
+
.desktop-first { color: #cdcdcd }
|
|
102
|
+
}
|
|
103
|
+
@media screen and (width < 640px) {
|
|
104
|
+
.main { color: #cdcdcd }
|
|
105
|
+
}
|
|
106
|
+
@media screen and (min-width: 1280px) {
|
|
107
|
+
.desktop-first { color: #cdcdcd }
|
|
108
|
+
}
|
|
109
|
+
@media screen and (max-width: 760px) {
|
|
110
|
+
.footer { color: #cdcdcd }
|
|
111
|
+
}
|
|
112
|
+
@media screen and (max-width: 640px) {
|
|
113
|
+
.footer { color: #cdcdcd }
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
**keyin**
|
|
118
|
+
|
|
119
|
+
```css
|
|
120
|
+
@media screen and (max-width: 760px) {
|
|
121
|
+
.footer { color: #cdcdcd }
|
|
122
|
+
}
|
|
123
|
+
@media screen and (width < 640px) {
|
|
124
|
+
/* combined */
|
|
125
|
+
.header { color: #cdcdcd }
|
|
126
|
+
.main { color: #cdcdcd }
|
|
127
|
+
.footer { color: #cdcdcd }
|
|
128
|
+
}
|
|
129
|
+
@media screen and (min-width: 760px) {
|
|
130
|
+
.desktop-first { color: #cdcdcd }
|
|
131
|
+
}
|
|
132
|
+
@media screen and (min-width: 1280px) {
|
|
133
|
+
.desktop-first { color: #cdcdcd }
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## O'rnatish
|
|
138
|
+
|
|
139
|
+
Birinchi navbatda, modulni o'rnating:
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
npm install postcss postcss-sort-media-queries --save-dev
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Foydalanish
|
|
146
|
+
|
|
147
|
+
Mavjud PostCSS konfiguratsiyasi uchun loyihangizni tekshiring: `postcss.config.js`
|
|
148
|
+
loyiha ildizida, `package.json` ichidagi `"postcss"` bo`limida
|
|
149
|
+
yoki to'plam konfiguratsiyasida "postcss".
|
|
150
|
+
|
|
151
|
+
Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo'shing:
|
|
152
|
+
|
|
153
|
+
```diff
|
|
154
|
+
module.exports = {
|
|
155
|
+
plugins: [
|
|
156
|
+
+ require('postcss-sort-media-queries')({
|
|
157
|
+
+ sort: 'mobile-first', // default value
|
|
158
|
+
+ }),
|
|
159
|
+
require('autoprefixer')
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
yoki maxsus tartiblash funksiyasi bilan
|
|
165
|
+
```diff
|
|
166
|
+
module.exports = {
|
|
167
|
+
plugins: [
|
|
168
|
+
+ require('postcss-sort-media-queries')({
|
|
169
|
+
+ sort: function(a, b) {
|
|
170
|
+
+ // custom sorting function
|
|
171
|
+
+ }
|
|
172
|
+
+ }),
|
|
173
|
+
require('autoprefixer')
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Agar siz PostCSS-dan foydalanmasangiz, uni [official docs] ga
|
|
179
|
+
muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating.
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
## Optsiyalar
|
|
183
|
+
|
|
184
|
+
> Saralash asosida ishlaydi, funktsiyasi [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries)
|
|
185
|
+
|
|
186
|
+
### Saralash
|
|
187
|
+
|
|
188
|
+
Ushbu parametr **string** yoki **funktsiya** qiymatlarini qo'llab-quvvatlaydi.
|
|
189
|
+
|
|
190
|
+
- `{string}` `'mobile-first'` - (standart) mobil qurilmalarni tartiblash
|
|
191
|
+
- `{string}` `'desktop-first'` - kompyuter qurilmalarni tartiblash
|
|
192
|
+
- `{function}` o'zingizning saralash funksiyangiz
|
|
193
|
+
|
|
194
|
+
#### `'mobil-qurilmalar'`
|
|
195
|
+
|
|
196
|
+
```js
|
|
197
|
+
postcss([
|
|
198
|
+
sortMediaQueries({
|
|
199
|
+
sort: 'mobile-first' // standart
|
|
200
|
+
})
|
|
201
|
+
]).process(css);
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
#### `'kompyuter-qurilmalar'`
|
|
205
|
+
|
|
206
|
+
```js
|
|
207
|
+
postcss([
|
|
208
|
+
sortMediaQueries({
|
|
209
|
+
sort: 'desktop-first'
|
|
210
|
+
})
|
|
211
|
+
]).process(css);
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### Maxsus tartiblash funksiyasi
|
|
215
|
+
```js
|
|
216
|
+
postcss([
|
|
217
|
+
sortMediaQueries({
|
|
218
|
+
function(a, b) {
|
|
219
|
+
return a.localeCompare(b);
|
|
220
|
+
}
|
|
221
|
+
})
|
|
222
|
+
]).process(css);
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
Ishbu misolda barcha media so'rovlaringiz A dan Z gacha tartib bo'yicha saralanadi
|
|
226
|
+
|
|
227
|
+
Ushbu tartiblash funksiyasi to'g'ridan-to'g'ri barcha media so'rovlaringiz qatorini Array#sort() usuliga o'tkaziladi.
|
|
228
|
+
|
|
229
|
+
### Saralash konfiguratsiyasi
|
|
230
|
+
|
|
231
|
+
Ushbu konfiguratsiya orqali siz tartiblash xatti-harakatlarini boshqarishingiz mumkin.
|
|
232
|
+
|
|
233
|
+
```js
|
|
234
|
+
postcss([
|
|
235
|
+
sortMediaQueries({
|
|
236
|
+
configuration: {
|
|
237
|
+
unitlessMqAlwaysFirst: true, // yoki false
|
|
238
|
+
}
|
|
239
|
+
})
|
|
240
|
+
]).process(css);
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
Yoki muqobil ravishda loyihangiz ildizida “sort-css-mq.config.json” faylini yarating. Yoki “package.json”ingizga “sortCssMQ: {}” xususiyatini qo‘shing.
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
## O'zgarishlar jurnali
|
|
248
|
+
|
|
249
|
+
Bu yerda: [Releases history]
|
|
250
|
+
|
|
251
|
+
## Litsenziya
|
|
252
|
+
|
|
253
|
+
[MIT]
|
|
254
|
+
|
|
255
|
+
## Boshqa PostCSS plaginlari
|
|
256
|
+
|
|
257
|
+
- [`postcss-momentum-scrolling`](https://github.com/yunusga/postcss-momentum-scrolling) - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun **momentum** uslubidagi aylantirish harakatini qoʻshish uchun plagin (`-webkit-overflow-scrolling:touch`)
|
|
258
|
+
|
|
259
|
+
## Rahmat
|
|
260
|
+
|
|
261
|
+
- Andrey Sitnik [@ai](https://github.com/ai)
|
|
262
|
+
- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
|
|
263
|
+
- Jakub Caban [@Lustmored](https://github.com/Lustmored)
|
|
264
|
+
- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
|
|
265
|
+
- Kai Falkowski [@SassNinja](https://github.com/SassNinja)
|
|
266
|
+
- Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
|
package/README.md
CHANGED
|
@@ -1,18 +1,38 @@
|
|
|
1
1
|
# PostCSS Sort Media Queries
|
|
2
2
|
|
|
3
3
|
[PostCSS]: https://github.com/postcss/postcss
|
|
4
|
-
[
|
|
5
|
-
[ci]: https://travis-ci.org/solversgroup/postcss-sort-media-queries
|
|
6
|
-
[MIT]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE
|
|
4
|
+
[MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE
|
|
7
5
|
[official docs]: https://github.com/postcss/postcss#usage
|
|
8
|
-
[Releases history]: https://github.com/
|
|
6
|
+
[Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md
|
|
9
7
|
|
|
10
|
-
[](https://www.npmjs.com/package/postcss-sort-media-queries) [](https://www.npmjs.com/package/postcss-sort-media-queries) [](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
|
|
9
|
+
|
|
11
10
|
[](https://www.npmjs.com/package/postcss-sort-media-queries)
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
<img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
🌏 **English** ▫ [**O'zbek**](README-UZ.md)
|
|
15
|
+
|
|
16
|
+
[PostCSS] plugin for sorting and combining CSS media queries with **mobile first** / **desktop first** methodologies.
|
|
17
|
+
|
|
18
|
+
> From 5.0.0 plugin support [Media Feature Types: “range”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)
|
|
19
|
+
|
|
20
|
+
## Table of Contents
|
|
21
|
+
|
|
22
|
+
- [Online demo](#online-demo)
|
|
23
|
+
- [Examples](#examples)
|
|
24
|
+
- [Mobile first sorting](#mobile-first-sorting)
|
|
25
|
+
- [Desktop first sorting](#desktop-first-sorting)
|
|
26
|
+
- [Install](#install)
|
|
27
|
+
- [Usage](#usage)
|
|
28
|
+
- [Options](#options)
|
|
29
|
+
- [sort](#sort)
|
|
30
|
+
- [Custom sort function](#custom-sort-function)
|
|
31
|
+
- [Sort configuration](#sort-configuration)
|
|
32
|
+
- [Changelog](#changelog)
|
|
33
|
+
- [License](#license)
|
|
34
|
+
- [Other PostCSS plugins](#other-postcss-plugins)
|
|
35
|
+
- [Thanks 💪](#thanks)
|
|
16
36
|
|
|
17
37
|
## Online demo
|
|
18
38
|
|
|
@@ -22,8 +42,9 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
22
42
|
|
|
23
43
|
### Mobile first sorting
|
|
24
44
|
|
|
45
|
+
**before**
|
|
46
|
+
|
|
25
47
|
```css
|
|
26
|
-
/* before */
|
|
27
48
|
@media screen and (max-width: 640px) {
|
|
28
49
|
.head { color: #cfcfcf }
|
|
29
50
|
}
|
|
@@ -36,15 +57,18 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
36
57
|
@media screen and (min-width: 1280px) {
|
|
37
58
|
.mobile-first { color: #cfcfcf }
|
|
38
59
|
}
|
|
39
|
-
@media screen and (
|
|
60
|
+
@media screen and (width > 640px) {
|
|
40
61
|
.mobile-first { color: #cfcfcf }
|
|
41
62
|
}
|
|
42
63
|
@media screen and (max-width: 640px) {
|
|
43
64
|
.footer { color: #cfcfcf }
|
|
44
65
|
}
|
|
66
|
+
```
|
|
45
67
|
|
|
46
|
-
|
|
47
|
-
|
|
68
|
+
**after**
|
|
69
|
+
|
|
70
|
+
```css
|
|
71
|
+
@media screen and (width > 640px) {
|
|
48
72
|
.mobile-first { color: #cfcfcf }
|
|
49
73
|
}
|
|
50
74
|
@media screen and (min-width: 1280px) {
|
|
@@ -54,6 +78,7 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
54
78
|
.footer { color: #cfcfcf }
|
|
55
79
|
}
|
|
56
80
|
@media screen and (max-width: 640px) {
|
|
81
|
+
/* combined */
|
|
57
82
|
.head { color: #cfcfcf }
|
|
58
83
|
.main { color: #cfcfcf }
|
|
59
84
|
.footer { color: #cfcfcf }
|
|
@@ -62,15 +87,15 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
62
87
|
|
|
63
88
|
### Desktop first sorting
|
|
64
89
|
|
|
90
|
+
**before**
|
|
65
91
|
```css
|
|
66
|
-
|
|
67
|
-
@media screen and (max-width: 640px) {
|
|
92
|
+
@media screen and (width < 640px) {
|
|
68
93
|
.header { color: #cdcdcd }
|
|
69
94
|
}
|
|
70
95
|
@media screen and (min-width: 760px) {
|
|
71
96
|
.desktop-first { color: #cdcdcd }
|
|
72
97
|
}
|
|
73
|
-
@media screen and (
|
|
98
|
+
@media screen and (width < 640px) {
|
|
74
99
|
.main { color: #cdcdcd }
|
|
75
100
|
}
|
|
76
101
|
@media screen and (min-width: 1280px) {
|
|
@@ -82,12 +107,16 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
82
107
|
@media screen and (max-width: 640px) {
|
|
83
108
|
.footer { color: #cdcdcd }
|
|
84
109
|
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
**after**
|
|
85
113
|
|
|
86
|
-
|
|
114
|
+
```css
|
|
87
115
|
@media screen and (max-width: 760px) {
|
|
88
116
|
.footer { color: #cdcdcd }
|
|
89
117
|
}
|
|
90
|
-
@media screen and (
|
|
118
|
+
@media screen and (width < 640px) {
|
|
119
|
+
/* combined */
|
|
91
120
|
.header { color: #cdcdcd }
|
|
92
121
|
.main { color: #cdcdcd }
|
|
93
122
|
.footer { color: #cdcdcd }
|
|
@@ -100,7 +129,7 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io)
|
|
|
100
129
|
}
|
|
101
130
|
```
|
|
102
131
|
|
|
103
|
-
##
|
|
132
|
+
## Install
|
|
104
133
|
|
|
105
134
|
First thing's, install the module:
|
|
106
135
|
|
|
@@ -108,7 +137,7 @@ First thing's, install the module:
|
|
|
108
137
|
npm install postcss postcss-sort-media-queries --save-dev
|
|
109
138
|
```
|
|
110
139
|
|
|
111
|
-
##
|
|
140
|
+
## Usage
|
|
112
141
|
|
|
113
142
|
Check you project for existed PostCSS config: `postcss.config.js`
|
|
114
143
|
in the project root, `"postcss"` section in `package.json`
|
|
@@ -120,7 +149,18 @@ If you already use PostCSS, add the plugin to plugins list:
|
|
|
120
149
|
module.exports = {
|
|
121
150
|
plugins: [
|
|
122
151
|
+ require('postcss-sort-media-queries')({
|
|
123
|
-
+
|
|
152
|
+
+ sort: 'mobile-first', // default value
|
|
153
|
+
+ }),
|
|
154
|
+
require('autoprefixer')
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
or with custom sort function
|
|
160
|
+
```diff
|
|
161
|
+
module.exports = {
|
|
162
|
+
plugins: [
|
|
163
|
+
+ require('postcss-sort-media-queries')({
|
|
124
164
|
+ sort: function(a, b) {
|
|
125
165
|
+ // custom sorting function
|
|
126
166
|
+ }
|
|
@@ -133,7 +173,7 @@ module.exports = {
|
|
|
133
173
|
If you do not use PostCSS, add it according to [official docs]
|
|
134
174
|
and set this plugin in settings.
|
|
135
175
|
|
|
136
|
-
##
|
|
176
|
+
## Options
|
|
137
177
|
|
|
138
178
|
> Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
|
|
139
179
|
|
|
@@ -165,7 +205,7 @@ postcss([
|
|
|
165
205
|
]).process(css);
|
|
166
206
|
```
|
|
167
207
|
|
|
168
|
-
|
|
208
|
+
### Custom sort function
|
|
169
209
|
```js
|
|
170
210
|
postcss([
|
|
171
211
|
sortMediaQueries({
|
|
@@ -210,10 +250,11 @@ See [Releases history]
|
|
|
210
250
|
|
|
211
251
|
- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling) - plugin for adding **momentum** style scrolling behavior (`-webkit-overflow-scrolling:touch`) for elements with overflow (scroll, auto) on iOS
|
|
212
252
|
|
|
213
|
-
## Thanks
|
|
253
|
+
## Thanks
|
|
214
254
|
|
|
215
255
|
- Andrey Sitnik [@ai](https://github.com/ai)
|
|
256
|
+
- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
|
|
216
257
|
- Jakub Caban [@Lustmored](https://github.com/Lustmored)
|
|
217
258
|
- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
|
|
218
259
|
- Kai Falkowski [@SassNinja](https://github.com/SassNinja)
|
|
219
|
-
-
|
|
260
|
+
- Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
|
package/browser.js
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
function sortAtRules(queries, sort, sortCSSmq) {
|
|
2
|
-
if (typeof sort !== 'function') {
|
|
3
|
-
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
return queries.sort(sort)
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
module.exports = (opts = {}) => {
|
|
10
|
-
|
|
11
|
-
opts = Object.assign(
|
|
12
|
-
{
|
|
13
|
-
sort: 'mobile-first',
|
|
14
|
-
configuration: {
|
|
15
|
-
unitlessMqAlwaysFirst: false,
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
opts
|
|
19
|
-
)
|
|
20
|
-
|
|
21
|
-
const createSort = require('sort-css-media-queries/lib/create-sort');
|
|
22
|
-
const sortCSSmq = createSort(opts.configuration);
|
|
23
|
-
|
|
24
|
-
return {
|
|
25
|
-
postcssPlugin: 'postcss-sort-media-queries',
|
|
26
|
-
OnceExit(root, { AtRule }) {
|
|
27
|
-
|
|
28
|
-
let atRules = [];
|
|
29
|
-
|
|
30
|
-
root.walkAtRules('media', atRule => {
|
|
31
|
-
let query = atRule.params
|
|
32
|
-
|
|
33
|
-
if (!atRules[query]) {
|
|
34
|
-
atRules[query] = new AtRule({
|
|
35
|
-
name: atRule.name,
|
|
36
|
-
params: atRule.params,
|
|
37
|
-
source: atRule.source
|
|
38
|
-
})
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
atRule.nodes.forEach(node => {
|
|
42
|
-
atRules[query].append(node.clone())
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
atRule.remove()
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
|
|
49
|
-
root.append(atRules[query])
|
|
50
|
-
})
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
module.exports.postcss = true
|
|
1
|
+
function sortAtRules(queries, sort, sortCSSmq) {
|
|
2
|
+
if (typeof sort !== 'function') {
|
|
3
|
+
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
return queries.sort(sort)
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
module.exports = (opts = {}) => {
|
|
10
|
+
|
|
11
|
+
opts = Object.assign(
|
|
12
|
+
{
|
|
13
|
+
sort: 'mobile-first',
|
|
14
|
+
configuration: {
|
|
15
|
+
unitlessMqAlwaysFirst: false,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
opts
|
|
19
|
+
)
|
|
20
|
+
|
|
21
|
+
const createSort = require('sort-css-media-queries/lib/create-sort');
|
|
22
|
+
const sortCSSmq = createSort(opts.configuration);
|
|
23
|
+
|
|
24
|
+
return {
|
|
25
|
+
postcssPlugin: 'postcss-sort-media-queries',
|
|
26
|
+
OnceExit(root, { AtRule }) {
|
|
27
|
+
|
|
28
|
+
let atRules = [];
|
|
29
|
+
|
|
30
|
+
root.walkAtRules('media', atRule => {
|
|
31
|
+
let query = atRule.params
|
|
32
|
+
|
|
33
|
+
if (!atRules[query]) {
|
|
34
|
+
atRules[query] = new AtRule({
|
|
35
|
+
name: atRule.name,
|
|
36
|
+
params: atRule.params,
|
|
37
|
+
source: atRule.source
|
|
38
|
+
})
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
atRule.nodes.forEach(node => {
|
|
42
|
+
atRules[query].append(node.clone())
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
atRule.remove()
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
|
|
49
|
+
root.append(atRules[query])
|
|
50
|
+
})
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
module.exports.postcss = true
|
package/index.js
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
function sortAtRules(queries, sort, sortCSSmq) {
|
|
2
|
-
if (typeof sort !== 'function') {
|
|
3
|
-
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
return queries.sort(sort)
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
module.exports = (opts = {}) => {
|
|
10
|
-
|
|
11
|
-
opts = Object.assign(
|
|
12
|
-
{
|
|
13
|
-
sort: 'mobile-first',
|
|
14
|
-
configuration: false,
|
|
15
|
-
},
|
|
16
|
-
opts
|
|
17
|
-
)
|
|
18
|
-
|
|
19
|
-
const createSort = require('sort-css-media-queries/lib/create-sort');
|
|
20
|
-
const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
|
|
21
|
-
|
|
22
|
-
return {
|
|
23
|
-
postcssPlugin: 'postcss-sort-media-queries',
|
|
24
|
-
OnceExit (root, { AtRule }) {
|
|
25
|
-
|
|
26
|
-
let atRules = [];
|
|
27
|
-
|
|
28
|
-
root.walkAtRules('media', atRule => {
|
|
29
|
-
let query = atRule.params
|
|
30
|
-
|
|
31
|
-
if (!atRules[query]) {
|
|
32
|
-
atRules[query] = new AtRule({
|
|
33
|
-
name: atRule.name,
|
|
34
|
-
params: atRule.params,
|
|
35
|
-
source: atRule.source
|
|
36
|
-
})
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
atRule.nodes.forEach(node => {
|
|
40
|
-
atRules[query].append(node.clone())
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
atRule.remove()
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
|
|
47
|
-
root.append(atRules[query])
|
|
48
|
-
})
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
module.exports.postcss = true
|
|
1
|
+
function sortAtRules(queries, sort, sortCSSmq) {
|
|
2
|
+
if (typeof sort !== 'function') {
|
|
3
|
+
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
return queries.sort(sort)
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
module.exports = (opts = {}) => {
|
|
10
|
+
|
|
11
|
+
opts = Object.assign(
|
|
12
|
+
{
|
|
13
|
+
sort: 'mobile-first',
|
|
14
|
+
configuration: false,
|
|
15
|
+
},
|
|
16
|
+
opts
|
|
17
|
+
)
|
|
18
|
+
|
|
19
|
+
const createSort = require('sort-css-media-queries/lib/create-sort');
|
|
20
|
+
const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
postcssPlugin: 'postcss-sort-media-queries',
|
|
24
|
+
OnceExit (root, { AtRule }) {
|
|
25
|
+
|
|
26
|
+
let atRules = [];
|
|
27
|
+
|
|
28
|
+
root.walkAtRules('media', atRule => {
|
|
29
|
+
let query = atRule.params
|
|
30
|
+
|
|
31
|
+
if (!atRules[query]) {
|
|
32
|
+
atRules[query] = new AtRule({
|
|
33
|
+
name: atRule.name,
|
|
34
|
+
params: atRule.params,
|
|
35
|
+
source: atRule.source
|
|
36
|
+
})
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
atRule.nodes.forEach(node => {
|
|
40
|
+
atRules[query].append(node.clone())
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
atRule.remove()
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
|
|
47
|
+
root.append(atRules[query])
|
|
48
|
+
})
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
module.exports.postcss = true
|
package/package.json
CHANGED
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-sort-media-queries",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "PostCSS plugin for
|
|
3
|
+
"version": "5.0.0",
|
|
4
|
+
"description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"postcss",
|
|
7
|
-
"css",
|
|
8
7
|
"postcss-plugin",
|
|
8
|
+
"css",
|
|
9
|
+
"css-optimizations",
|
|
9
10
|
"sort",
|
|
10
|
-
"
|
|
11
|
+
"mobile-first",
|
|
12
|
+
"desktop-first",
|
|
11
13
|
"mediaquery",
|
|
14
|
+
"media-queries",
|
|
12
15
|
"mq",
|
|
13
|
-
"
|
|
16
|
+
"responsive-css",
|
|
17
|
+
"combine-media-query",
|
|
18
|
+
"sort-media-query",
|
|
19
|
+
"css-mqpacker",
|
|
20
|
+
"node-css-mqpacker"
|
|
14
21
|
],
|
|
15
|
-
"author": "Yunus
|
|
22
|
+
"author": "Yunus Gaziyev <yunusga@yandex.ru>",
|
|
16
23
|
"license": "MIT",
|
|
17
24
|
"repository": {
|
|
18
25
|
"type": "git",
|
|
@@ -30,7 +37,7 @@
|
|
|
30
37
|
"node": ">=10.0.0"
|
|
31
38
|
},
|
|
32
39
|
"dependencies": {
|
|
33
|
-
"sort-css-media-queries": "2.
|
|
40
|
+
"sort-css-media-queries": "2.2.0"
|
|
34
41
|
},
|
|
35
42
|
"devDependencies": {
|
|
36
43
|
"autoprefixer": "^10.4.0",
|
|
@@ -42,13 +49,13 @@
|
|
|
42
49
|
"jest-ci": "^0.1.1",
|
|
43
50
|
"jest-cli": "^27.3.1",
|
|
44
51
|
"lint-staged": "^12.1.2",
|
|
45
|
-
"postcss": "^8.4.
|
|
52
|
+
"postcss": "^8.4.23",
|
|
46
53
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
47
54
|
"postcss-media-minmax": "^5.0.0",
|
|
48
55
|
"postcss-nested": "^5.0.6"
|
|
49
56
|
},
|
|
50
57
|
"peerDependencies": {
|
|
51
|
-
"postcss": "^8.4.
|
|
58
|
+
"postcss": "^8.4.23"
|
|
52
59
|
},
|
|
53
60
|
"husky": {
|
|
54
61
|
"hooks": {
|