postcss-sort-media-queries 4.4.1 → 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.
Files changed (3) hide show
  1. package/README-UZ.md +266 -265
  2. package/README.md +260 -259
  3. package/package.json +95 -95
package/README-UZ.md CHANGED
@@ -1,265 +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
- [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
9
- [![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
10
-
11
- <img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
12
-
13
- 🌏 [**English**](README.md) ▫ **O'zbek**
14
-
15
- [PostCSS] CSS media so'rovlarini **mobil qurilma** va **ish stoli kompyuter** metodologiyalari bilan ularni saralash va birlashtirish uchun xizmat qiladi.
16
-
17
-
18
-
19
- > 5.0.0 plaginini qo'llab-quvvatlaydigan [Media funksiyasi turlari: “diapazon”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)
20
-
21
-
22
- ## Mundarija
23
-
24
- - [Onlayn demo](#onlayn-demo)
25
- - [Misollar](#misollar)
26
- - [Mobil qurilmalarni tartiblash](#mobil-qurilmalarni-tartiblash)
27
- - [Ish stoli kompyuter qurilmalarni tartiblash](#ish-stoli-kompyuter-qurilmalarni-tartiblash)
28
- - [O'rnatish](#ornatish)
29
- - [Foydalanish](#foydalanish)
30
- - [Optsiyalar](#optsiyalar)
31
- - [Saralash](#saralash)
32
- - [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi)
33
- - [Saralash konfiguratsiyasi](#saralash-konfiguratsiyasi)
34
- - [O'zgarishlar jurnali](#ozgarishlar-jurnali)
35
- - [Litsenziya](#litsenziya)
36
- - [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari)
37
- - [Rahmat 💪](#rahmat)
38
-
39
-
40
- ## Onlayn demo
41
-
42
- Bu yerda: [onlayn demo](https://postcss-sort-media-queries.github.io)
43
-
44
-
45
- ## Misollar
46
-
47
- ### Mobil qurilmalarni tartiblash
48
-
49
- **oldin**
50
-
51
- ```css
52
- @media screen and (max-width: 640px) {
53
- .head { color: #cfcfcf }
54
- }
55
- @media screen and (max-width: 768px) {
56
- .footer { color: #cfcfcf }
57
- }
58
- @media screen and (max-width: 640px) {
59
- .main { color: #cfcfcf }
60
- }
61
- @media screen and (min-width: 1280px) {
62
- .mobile-first { color: #cfcfcf }
63
- }
64
- @media screen and (min-width: 640px) {
65
- .mobile-first { color: #cfcfcf }
66
- }
67
- @media screen and (max-width: 640px) {
68
- .footer { color: #cfcfcf }
69
- }
70
- ```
71
-
72
- **keyin**
73
-
74
- ```css
75
- @media screen and (min-width: 640px) {
76
- .mobile-first { color: #cfcfcf }
77
- }
78
- @media screen and (min-width: 1280px) {
79
- .mobile-first { color: #cfcfcf }
80
- }
81
- @media screen and (max-width: 768px) {
82
- .footer { color: #cfcfcf }
83
- }
84
- @media screen and (max-width: 640px) {
85
- /* birlashtirilgan */
86
- .head { color: #cfcfcf }
87
- .main { color: #cfcfcf }
88
- .footer { color: #cfcfcf }
89
- }
90
- ```
91
-
92
- ### Ish stoli kompyuter qurilmalarni tartiblash
93
-
94
- **oldin**
95
- ```css
96
- @media screen and (max-width: 640px) {
97
- .header { color: #cdcdcd }
98
- }
99
- @media screen and (min-width: 760px) {
100
- .desktop-first { color: #cdcdcd }
101
- }
102
- @media screen and (max-width: 640px) {
103
- .main { color: #cdcdcd }
104
- }
105
- @media screen and (min-width: 1280px) {
106
- .desktop-first { color: #cdcdcd }
107
- }
108
- @media screen and (max-width: 760px) {
109
- .footer { color: #cdcdcd }
110
- }
111
- @media screen and (max-width: 640px) {
112
- .footer { color: #cdcdcd }
113
- }
114
- ```
115
-
116
- **keyin**
117
-
118
- ```css
119
- @media screen and (max-width: 760px) {
120
- .footer { color: #cdcdcd }
121
- }
122
- @media screen and (max-width: 640px) {
123
- /* combined */
124
- .header { color: #cdcdcd }
125
- .main { color: #cdcdcd }
126
- .footer { color: #cdcdcd }
127
- }
128
- @media screen and (min-width: 760px) {
129
- .desktop-first { color: #cdcdcd }
130
- }
131
- @media screen and (min-width: 1280px) {
132
- .desktop-first { color: #cdcdcd }
133
- }
134
- ```
135
-
136
- ## O'rnatish
137
-
138
- Birinchi navbatda, modulni o'rnating:
139
-
140
- ```
141
- npm install postcss postcss-sort-media-queries --save-dev
142
- ```
143
-
144
- ## Foydalanish
145
-
146
- Mavjud PostCSS konfiguratsiyasi uchun loyihangizni tekshiring: `postcss.config.js`
147
- loyiha ildizida, `package.json` ichidagi `"postcss"` bo`limida
148
- yoki to'plam konfiguratsiyasida "postcss".
149
-
150
- Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo'shing:
151
-
152
- ```diff
153
- module.exports = {
154
- plugins: [
155
- + require('postcss-sort-media-queries')({
156
- + sort: 'mobile-first', // default value
157
- + }),
158
- require('autoprefixer')
159
- ]
160
- }
161
- ```
162
-
163
- yoki maxsus tartiblash funksiyasi bilan
164
- ```diff
165
- module.exports = {
166
- plugins: [
167
- + require('postcss-sort-media-queries')({
168
- + sort: function(a, b) {
169
- + // custom sorting function
170
- + }
171
- + }),
172
- require('autoprefixer')
173
- ]
174
- }
175
- ```
176
-
177
- Agar siz PostCSS-dan foydalanmasangiz, uni [official docs] ga
178
- muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating.
179
-
180
-
181
- ## Optsiyalar
182
-
183
- > Saralash asosida ishlaydi, funktsiyasi [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries)
184
-
185
- ### Saralash
186
-
187
- Ushbu parametr **string** yoki **funktsiya** qiymatlarini qo'llab-quvvatlaydi.
188
-
189
- - `{string}` `'mobile-first'` - (standart) mobil qurilmalarni tartiblash
190
- - `{string}` `'desktop-first'` - kompyuter qurilmalarni tartiblash
191
- - `{function}` o'zingizning saralash funksiyangiz
192
-
193
- #### `'mobil-qurilmalar'`
194
-
195
- ```js
196
- postcss([
197
- sortMediaQueries({
198
- sort: 'mobile-first' // standart
199
- })
200
- ]).process(css);
201
- ```
202
-
203
- #### `'kompyuter-qurilmalar'`
204
-
205
- ```js
206
- postcss([
207
- sortMediaQueries({
208
- sort: 'desktop-first'
209
- })
210
- ]).process(css);
211
- ```
212
-
213
- ### Maxsus tartiblash funksiyasi
214
- ```js
215
- postcss([
216
- sortMediaQueries({
217
- function(a, b) {
218
- return a.localeCompare(b);
219
- }
220
- })
221
- ]).process(css);
222
- ```
223
-
224
- Ishbu misolda barcha media so'rovlaringiz A dan Z gacha tartib bo'yicha saralanadi
225
-
226
- Ushbu tartiblash funksiyasi to'g'ridan-to'g'ri barcha media so'rovlaringiz qatorini Array#sort() usuliga o'tkaziladi.
227
-
228
- ### Saralash konfiguratsiyasi
229
-
230
- Ushbu konfiguratsiya orqali siz tartiblash xatti-harakatlarini boshqarishingiz mumkin.
231
-
232
- ```js
233
- postcss([
234
- sortMediaQueries({
235
- configuration: {
236
- unitlessMqAlwaysFirst: true, // yoki false
237
- }
238
- })
239
- ]).process(css);
240
- ```
241
-
242
- Yoki muqobil ravishda loyihangiz ildizida “sort-css-mq.config.json” faylini yarating. Yoki “package.json”ingizga “sortCssMQ: {}” xususiyatini qo‘shing.
243
-
244
- ---
245
-
246
- ## O'zgarishlar jurnali
247
-
248
- Bu yerda: [Releases history]
249
-
250
- ## Litsenziya
251
-
252
- [MIT]
253
-
254
- ## Boshqa PostCSS plaginlari
255
-
256
- - [`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`)
257
-
258
- ## Rahmat
259
-
260
- - Andrey Sitnik [@ai](https://github.com/ai)
261
- - Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
262
- - Jakub Caban [@Lustmored](https://github.com/Lustmored)
263
- - Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
264
- - Kai Falkowski [@SassNinja](https://github.com/SassNinja)
265
- - Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1)
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
+ [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
9
+ ![license](https://img.shields.io/badge/License-MIT-orange.svg)
10
+ [![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](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,259 +1,260 @@
1
- # PostCSS Sort Media Queries
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
- [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
9
- [![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
10
-
11
- <img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
12
-
13
- 🌏 **English** ▫ [**O'zbek**](README-UZ.md)
14
-
15
- [PostCSS] plugin for sorting and combining CSS media queries with **mobile first** / **desktop first** methodologies.
16
-
17
- > From 5.0.0 plugin support [Media Feature Types: “range”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)
18
-
19
- ## Table of Contents
20
-
21
- - [Online demo](#online-demo)
22
- - [Examples](#examples)
23
- - [Mobile first sorting](#mobile-first-sorting)
24
- - [Desktop first sorting](#desktop-first-sorting)
25
- - [Install](#install)
26
- - [Usage](#usage)
27
- - [Options](#options)
28
- - [sort](#sort)
29
- - [Custom sort function](#custom-sort-function)
30
- - [Sort configuration](#sort-configuration)
31
- - [Changelog](#changelog)
32
- - [License](#license)
33
- - [Other PostCSS plugins](#other-postcss-plugins)
34
- - [Thanks 💪](#thanks)
35
-
36
- ## Online demo
37
-
38
- And here is the [online demo](https://postcss-sort-media-queries.github.io)
39
-
40
- ## Examples
41
-
42
- ### Mobile first sorting
43
-
44
- **before**
45
-
46
- ```css
47
- @media screen and (max-width: 640px) {
48
- .head { color: #cfcfcf }
49
- }
50
- @media screen and (max-width: 768px) {
51
- .footer { color: #cfcfcf }
52
- }
53
- @media screen and (max-width: 640px) {
54
- .main { color: #cfcfcf }
55
- }
56
- @media screen and (min-width: 1280px) {
57
- .mobile-first { color: #cfcfcf }
58
- }
59
- @media screen and (min-width: 640px) {
60
- .mobile-first { color: #cfcfcf }
61
- }
62
- @media screen and (max-width: 640px) {
63
- .footer { color: #cfcfcf }
64
- }
65
- ```
66
-
67
- **after**
68
-
69
- ```css
70
- @media screen and (min-width: 640px) {
71
- .mobile-first { color: #cfcfcf }
72
- }
73
- @media screen and (min-width: 1280px) {
74
- .mobile-first { color: #cfcfcf }
75
- }
76
- @media screen and (max-width: 768px) {
77
- .footer { color: #cfcfcf }
78
- }
79
- @media screen and (max-width: 640px) {
80
- /* combined */
81
- .head { color: #cfcfcf }
82
- .main { color: #cfcfcf }
83
- .footer { color: #cfcfcf }
84
- }
85
- ```
86
-
87
- ### Desktop first sorting
88
-
89
- **before**
90
- ```css
91
- @media screen and (max-width: 640px) {
92
- .header { color: #cdcdcd }
93
- }
94
- @media screen and (min-width: 760px) {
95
- .desktop-first { color: #cdcdcd }
96
- }
97
- @media screen and (max-width: 640px) {
98
- .main { color: #cdcdcd }
99
- }
100
- @media screen and (min-width: 1280px) {
101
- .desktop-first { color: #cdcdcd }
102
- }
103
- @media screen and (max-width: 760px) {
104
- .footer { color: #cdcdcd }
105
- }
106
- @media screen and (max-width: 640px) {
107
- .footer { color: #cdcdcd }
108
- }
109
- ```
110
-
111
- **after**
112
-
113
- ```css
114
- @media screen and (max-width: 760px) {
115
- .footer { color: #cdcdcd }
116
- }
117
- @media screen and (max-width: 640px) {
118
- /* combined */
119
- .header { color: #cdcdcd }
120
- .main { color: #cdcdcd }
121
- .footer { color: #cdcdcd }
122
- }
123
- @media screen and (min-width: 760px) {
124
- .desktop-first { color: #cdcdcd }
125
- }
126
- @media screen and (min-width: 1280px) {
127
- .desktop-first { color: #cdcdcd }
128
- }
129
- ```
130
-
131
- ## Install
132
-
133
- First thing's, install the module:
134
-
135
- ```
136
- npm install postcss postcss-sort-media-queries --save-dev
137
- ```
138
-
139
- ## Usage
140
-
141
- Check you project for existed PostCSS config: `postcss.config.js`
142
- in the project root, `"postcss"` section in `package.json`
143
- or `postcss` in bundle config.
144
-
145
- If you already use PostCSS, add the plugin to plugins list:
146
-
147
- ```diff
148
- module.exports = {
149
- plugins: [
150
- + require('postcss-sort-media-queries')({
151
- + sort: 'mobile-first', // default value
152
- + }),
153
- require('autoprefixer')
154
- ]
155
- }
156
- ```
157
-
158
- or with custom sort function
159
- ```diff
160
- module.exports = {
161
- plugins: [
162
- + require('postcss-sort-media-queries')({
163
- + sort: function(a, b) {
164
- + // custom sorting function
165
- + }
166
- + }),
167
- require('autoprefixer')
168
- ]
169
- }
170
- ```
171
-
172
- If you do not use PostCSS, add it according to [official docs]
173
- and set this plugin in settings.
174
-
175
- ## Options
176
-
177
- > Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
178
-
179
- ### sort
180
-
181
- This option support **string** or **function** values.
182
-
183
- - `{string}` `'mobile-first'` - (default) mobile first sorting
184
- - `{string}` `'desktop-first'` - desktop first sorting
185
- - `{function}` your own sorting function
186
-
187
- #### `'mobile-first'`
188
-
189
- ```js
190
- postcss([
191
- sortMediaQueries({
192
- sort: 'mobile-first' // default
193
- })
194
- ]).process(css);
195
- ```
196
-
197
- #### `'desktop-first'`
198
-
199
- ```js
200
- postcss([
201
- sortMediaQueries({
202
- sort: 'desktop-first'
203
- })
204
- ]).process(css);
205
- ```
206
-
207
- ### Custom sort function
208
- ```js
209
- postcss([
210
- sortMediaQueries({
211
- function(a, b) {
212
- return a.localeCompare(b);
213
- }
214
- })
215
- ]).process(css);
216
- ```
217
-
218
- In this example, all your media queries will sort by A-Z order.
219
-
220
- This sorting function is directly passed to Array#sort() method of an array of all your media queries.
221
-
222
- ### Sort configuration
223
-
224
- By this configuration you can control sorting behaviour.
225
-
226
- ```js
227
- postcss([
228
- sortMediaQueries({
229
- configuration: {
230
- unitlessMqAlwaysFirst: true, // or false
231
- }
232
- })
233
- ]).process(css);
234
- ```
235
-
236
- Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
237
-
238
- ---
239
-
240
- ## Changelog
241
-
242
- See [Releases history]
243
-
244
- ## License
245
-
246
- [MIT]
247
-
248
- ## Other PostCSS plugins
249
-
250
- - [`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
251
-
252
- ## Thanks
253
-
254
- - Andrey Sitnik [@ai](https://github.com/ai)
255
- - Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
256
- - Jakub Caban [@Lustmored](https://github.com/Lustmored)
257
- - Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
258
- - Kai Falkowski [@SassNinja](https://github.com/SassNinja)
259
- - Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1)
1
+ # PostCSS Sort Media Queries
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
+ [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
9
+ ![license](https://img.shields.io/badge/License-MIT-orange.svg)
10
+ [![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](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** ▫ [**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)
36
+
37
+ ## Online demo
38
+
39
+ And here is the [online demo](https://postcss-sort-media-queries.github.io)
40
+
41
+ ## Examples
42
+
43
+ ### Mobile first sorting
44
+
45
+ **before**
46
+
47
+ ```css
48
+ @media screen and (max-width: 640px) {
49
+ .head { color: #cfcfcf }
50
+ }
51
+ @media screen and (max-width: 768px) {
52
+ .footer { color: #cfcfcf }
53
+ }
54
+ @media screen and (max-width: 640px) {
55
+ .main { color: #cfcfcf }
56
+ }
57
+ @media screen and (min-width: 1280px) {
58
+ .mobile-first { color: #cfcfcf }
59
+ }
60
+ @media screen and (width > 640px) {
61
+ .mobile-first { color: #cfcfcf }
62
+ }
63
+ @media screen and (max-width: 640px) {
64
+ .footer { color: #cfcfcf }
65
+ }
66
+ ```
67
+
68
+ **after**
69
+
70
+ ```css
71
+ @media screen and (width > 640px) {
72
+ .mobile-first { color: #cfcfcf }
73
+ }
74
+ @media screen and (min-width: 1280px) {
75
+ .mobile-first { color: #cfcfcf }
76
+ }
77
+ @media screen and (max-width: 768px) {
78
+ .footer { color: #cfcfcf }
79
+ }
80
+ @media screen and (max-width: 640px) {
81
+ /* combined */
82
+ .head { color: #cfcfcf }
83
+ .main { color: #cfcfcf }
84
+ .footer { color: #cfcfcf }
85
+ }
86
+ ```
87
+
88
+ ### Desktop first sorting
89
+
90
+ **before**
91
+ ```css
92
+ @media screen and (width < 640px) {
93
+ .header { color: #cdcdcd }
94
+ }
95
+ @media screen and (min-width: 760px) {
96
+ .desktop-first { color: #cdcdcd }
97
+ }
98
+ @media screen and (width < 640px) {
99
+ .main { color: #cdcdcd }
100
+ }
101
+ @media screen and (min-width: 1280px) {
102
+ .desktop-first { color: #cdcdcd }
103
+ }
104
+ @media screen and (max-width: 760px) {
105
+ .footer { color: #cdcdcd }
106
+ }
107
+ @media screen and (max-width: 640px) {
108
+ .footer { color: #cdcdcd }
109
+ }
110
+ ```
111
+
112
+ **after**
113
+
114
+ ```css
115
+ @media screen and (max-width: 760px) {
116
+ .footer { color: #cdcdcd }
117
+ }
118
+ @media screen and (width < 640px) {
119
+ /* combined */
120
+ .header { color: #cdcdcd }
121
+ .main { color: #cdcdcd }
122
+ .footer { color: #cdcdcd }
123
+ }
124
+ @media screen and (min-width: 760px) {
125
+ .desktop-first { color: #cdcdcd }
126
+ }
127
+ @media screen and (min-width: 1280px) {
128
+ .desktop-first { color: #cdcdcd }
129
+ }
130
+ ```
131
+
132
+ ## Install
133
+
134
+ First thing's, install the module:
135
+
136
+ ```
137
+ npm install postcss postcss-sort-media-queries --save-dev
138
+ ```
139
+
140
+ ## Usage
141
+
142
+ Check you project for existed PostCSS config: `postcss.config.js`
143
+ in the project root, `"postcss"` section in `package.json`
144
+ or `postcss` in bundle config.
145
+
146
+ If you already use PostCSS, add the plugin to plugins list:
147
+
148
+ ```diff
149
+ module.exports = {
150
+ plugins: [
151
+ + require('postcss-sort-media-queries')({
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')({
164
+ + sort: function(a, b) {
165
+ + // custom sorting function
166
+ + }
167
+ + }),
168
+ require('autoprefixer')
169
+ ]
170
+ }
171
+ ```
172
+
173
+ If you do not use PostCSS, add it according to [official docs]
174
+ and set this plugin in settings.
175
+
176
+ ## Options
177
+
178
+ > Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
179
+
180
+ ### sort
181
+
182
+ This option support **string** or **function** values.
183
+
184
+ - `{string}` `'mobile-first'` - (default) mobile first sorting
185
+ - `{string}` `'desktop-first'` - desktop first sorting
186
+ - `{function}` your own sorting function
187
+
188
+ #### `'mobile-first'`
189
+
190
+ ```js
191
+ postcss([
192
+ sortMediaQueries({
193
+ sort: 'mobile-first' // default
194
+ })
195
+ ]).process(css);
196
+ ```
197
+
198
+ #### `'desktop-first'`
199
+
200
+ ```js
201
+ postcss([
202
+ sortMediaQueries({
203
+ sort: 'desktop-first'
204
+ })
205
+ ]).process(css);
206
+ ```
207
+
208
+ ### Custom sort function
209
+ ```js
210
+ postcss([
211
+ sortMediaQueries({
212
+ function(a, b) {
213
+ return a.localeCompare(b);
214
+ }
215
+ })
216
+ ]).process(css);
217
+ ```
218
+
219
+ In this example, all your media queries will sort by A-Z order.
220
+
221
+ This sorting function is directly passed to Array#sort() method of an array of all your media queries.
222
+
223
+ ### Sort configuration
224
+
225
+ By this configuration you can control sorting behaviour.
226
+
227
+ ```js
228
+ postcss([
229
+ sortMediaQueries({
230
+ configuration: {
231
+ unitlessMqAlwaysFirst: true, // or false
232
+ }
233
+ })
234
+ ]).process(css);
235
+ ```
236
+
237
+ Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
238
+
239
+ ---
240
+
241
+ ## Changelog
242
+
243
+ See [Releases history]
244
+
245
+ ## License
246
+
247
+ [MIT]
248
+
249
+ ## Other PostCSS plugins
250
+
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
252
+
253
+ ## Thanks
254
+
255
+ - Andrey Sitnik [@ai](https://github.com/ai)
256
+ - Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
257
+ - Jakub Caban [@Lustmored](https://github.com/Lustmored)
258
+ - Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
259
+ - Kai Falkowski [@SassNinja](https://github.com/SassNinja)
260
+ - Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
package/package.json CHANGED
@@ -1,95 +1,95 @@
1
- {
2
- "name": "postcss-sort-media-queries",
3
- "version": "4.4.1",
4
- "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
5
- "keywords": [
6
- "postcss",
7
- "postcss-plugin",
8
- "css",
9
- "css-optimizations",
10
- "sort",
11
- "mobile-first",
12
- "desktop-first",
13
- "mediaquery",
14
- "media-queries",
15
- "mq",
16
- "responsive-css",
17
- "combine-media-query",
18
- "sort-media-query",
19
- "css-mqpacker",
20
- "node-css-mqpacker"
21
- ],
22
- "author": "Yunus Gaziyev <yunusga@yandex.ru>",
23
- "license": "MIT",
24
- "repository": {
25
- "type": "git",
26
- "url": "https://github.com/solversgroup/postcss-sort-media-queries.git"
27
- },
28
- "bugs": {
29
- "url": "https://github.com/solversgroup/postcss-sort-media-queries/issues"
30
- },
31
- "homepage": "https://github.com/solversgroup/postcss-sort-media-queries",
32
- "scripts": {
33
- "test": "jest-ci --coverage && eslint-ci .",
34
- "refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
35
- },
36
- "engines": {
37
- "node": ">=10.0.0"
38
- },
39
- "dependencies": {
40
- "sort-css-media-queries": "2.1.0"
41
- },
42
- "devDependencies": {
43
- "autoprefixer": "^10.4.0",
44
- "eslint": "^8.3.0",
45
- "eslint-ci": "^1.0.0",
46
- "eslint-plugin-jest": "^25.3.0",
47
- "husky": "^7.0.4",
48
- "jest": "^27.3.1",
49
- "jest-ci": "^0.1.1",
50
- "jest-cli": "^27.3.1",
51
- "lint-staged": "^12.1.2",
52
- "postcss": "^8.4.4",
53
- "postcss-flexbugs-fixes": "^5.0.2",
54
- "postcss-media-minmax": "^5.0.0",
55
- "postcss-nested": "^5.0.6"
56
- },
57
- "peerDependencies": {
58
- "postcss": "^8.4.16"
59
- },
60
- "husky": {
61
- "hooks": {
62
- "pre-commit": "lint-staged"
63
- }
64
- },
65
- "lint-staged": {
66
- "*.js": "eslint --fix"
67
- },
68
- "eslintConfig": {
69
- "parserOptions": {
70
- "ecmaVersion": 2017
71
- },
72
- "env": {
73
- "node": true,
74
- "es6": true
75
- },
76
- "extends": [
77
- "eslint:recommended",
78
- "plugin:jest/recommended"
79
- ],
80
- "rules": {
81
- "jest/expect-expect": "off"
82
- }
83
- },
84
- "jest": {
85
- "testEnvironment": "node",
86
- "coverageThreshold": {
87
- "global": {
88
- "statements": 100
89
- }
90
- }
91
- },
92
- "sortCssMQ": {
93
- "unitlessMqAlwaysFirst": false
94
- }
95
- }
1
+ {
2
+ "name": "postcss-sort-media-queries",
3
+ "version": "5.0.0",
4
+ "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
5
+ "keywords": [
6
+ "postcss",
7
+ "postcss-plugin",
8
+ "css",
9
+ "css-optimizations",
10
+ "sort",
11
+ "mobile-first",
12
+ "desktop-first",
13
+ "mediaquery",
14
+ "media-queries",
15
+ "mq",
16
+ "responsive-css",
17
+ "combine-media-query",
18
+ "sort-media-query",
19
+ "css-mqpacker",
20
+ "node-css-mqpacker"
21
+ ],
22
+ "author": "Yunus Gaziyev <yunusga@yandex.ru>",
23
+ "license": "MIT",
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "https://github.com/solversgroup/postcss-sort-media-queries.git"
27
+ },
28
+ "bugs": {
29
+ "url": "https://github.com/solversgroup/postcss-sort-media-queries/issues"
30
+ },
31
+ "homepage": "https://github.com/solversgroup/postcss-sort-media-queries",
32
+ "scripts": {
33
+ "test": "jest-ci --coverage && eslint-ci .",
34
+ "refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
35
+ },
36
+ "engines": {
37
+ "node": ">=10.0.0"
38
+ },
39
+ "dependencies": {
40
+ "sort-css-media-queries": "2.2.0"
41
+ },
42
+ "devDependencies": {
43
+ "autoprefixer": "^10.4.0",
44
+ "eslint": "^8.3.0",
45
+ "eslint-ci": "^1.0.0",
46
+ "eslint-plugin-jest": "^25.3.0",
47
+ "husky": "^7.0.4",
48
+ "jest": "^27.3.1",
49
+ "jest-ci": "^0.1.1",
50
+ "jest-cli": "^27.3.1",
51
+ "lint-staged": "^12.1.2",
52
+ "postcss": "^8.4.23",
53
+ "postcss-flexbugs-fixes": "^5.0.2",
54
+ "postcss-media-minmax": "^5.0.0",
55
+ "postcss-nested": "^5.0.6"
56
+ },
57
+ "peerDependencies": {
58
+ "postcss": "^8.4.23"
59
+ },
60
+ "husky": {
61
+ "hooks": {
62
+ "pre-commit": "lint-staged"
63
+ }
64
+ },
65
+ "lint-staged": {
66
+ "*.js": "eslint --fix"
67
+ },
68
+ "eslintConfig": {
69
+ "parserOptions": {
70
+ "ecmaVersion": 2017
71
+ },
72
+ "env": {
73
+ "node": true,
74
+ "es6": true
75
+ },
76
+ "extends": [
77
+ "eslint:recommended",
78
+ "plugin:jest/recommended"
79
+ ],
80
+ "rules": {
81
+ "jest/expect-expect": "off"
82
+ }
83
+ },
84
+ "jest": {
85
+ "testEnvironment": "node",
86
+ "coverageThreshold": {
87
+ "global": {
88
+ "statements": 100
89
+ }
90
+ }
91
+ },
92
+ "sortCssMQ": {
93
+ "unitlessMqAlwaysFirst": false
94
+ }
95
+ }