postcss-sort-media-queries 4.3.0 → 4.4.1

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 (5) hide show
  1. package/README-UZ.md +265 -0
  2. package/README.md +259 -219
  3. package/browser.js +54 -54
  4. package/index.js +52 -52
  5. package/package.json +95 -88
package/README-UZ.md ADDED
@@ -0,0 +1,265 @@
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)
package/README.md CHANGED
@@ -1,219 +1,259 @@
1
- # PostCSS Sort Media Queries
2
-
3
- [PostCSS]: https://github.com/postcss/postcss
4
- [ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg
5
- [ci]: https://travis-ci.org/solversgroup/postcss-sort-media-queries
6
- [MIT]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE
7
- [official docs]: https://github.com/postcss/postcss#usage
8
- [Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md
9
-
10
- [![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci]
11
- [![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
12
-
13
- [PostCSS] plugin for combine and sort CSS media queries with **mobile first** or **desktop first** methods.
14
-
15
- > **Combine** same media queries into one - is a unexpected side effect for this plugin 🧬
16
-
17
- ## Online demo
18
-
19
- And here is the [online demo](https://postcss-sort-media-queries.github.io)
20
-
21
- ## Examples
22
-
23
- ### Mobile first sorting
24
-
25
- ```css
26
- /* before */
27
- @media screen and (max-width: 640px) {
28
- .head { color: #cfcfcf }
29
- }
30
- @media screen and (max-width: 768px) {
31
- .footer { color: #cfcfcf }
32
- }
33
- @media screen and (max-width: 640px) {
34
- .main { color: #cfcfcf }
35
- }
36
- @media screen and (min-width: 1280px) {
37
- .mobile-first { color: #cfcfcf }
38
- }
39
- @media screen and (min-width: 640px) {
40
- .mobile-first { color: #cfcfcf }
41
- }
42
- @media screen and (max-width: 640px) {
43
- .footer { color: #cfcfcf }
44
- }
45
-
46
- /* after */
47
- @media screen and (min-width: 640px) {
48
- .mobile-first { color: #cfcfcf }
49
- }
50
- @media screen and (min-width: 1280px) {
51
- .mobile-first { color: #cfcfcf }
52
- }
53
- @media screen and (max-width: 768px) {
54
- .footer { color: #cfcfcf }
55
- }
56
- @media screen and (max-width: 640px) {
57
- .head { color: #cfcfcf }
58
- .main { color: #cfcfcf }
59
- .footer { color: #cfcfcf }
60
- }
61
- ```
62
-
63
- ### Desktop first sorting
64
-
65
- ```css
66
- /* before */
67
- @media screen and (max-width: 640px) {
68
- .header { color: #cdcdcd }
69
- }
70
- @media screen and (min-width: 760px) {
71
- .desktop-first { color: #cdcdcd }
72
- }
73
- @media screen and (max-width: 640px) {
74
- .main { color: #cdcdcd }
75
- }
76
- @media screen and (min-width: 1280px) {
77
- .desktop-first { color: #cdcdcd }
78
- }
79
- @media screen and (max-width: 760px) {
80
- .footer { color: #cdcdcd }
81
- }
82
- @media screen and (max-width: 640px) {
83
- .footer { color: #cdcdcd }
84
- }
85
-
86
- /* after */
87
- @media screen and (max-width: 760px) {
88
- .footer { color: #cdcdcd }
89
- }
90
- @media screen and (max-width: 640px) {
91
- .header { color: #cdcdcd }
92
- .main { color: #cdcdcd }
93
- .footer { color: #cdcdcd }
94
- }
95
- @media screen and (min-width: 760px) {
96
- .desktop-first { color: #cdcdcd }
97
- }
98
- @media screen and (min-width: 1280px) {
99
- .desktop-first { color: #cdcdcd }
100
- }
101
- ```
102
-
103
- ## Getting Started
104
-
105
- First thing's, install the module:
106
-
107
- ```
108
- npm install postcss postcss-sort-media-queries --save-dev
109
- ```
110
-
111
- ## 🍳 Usage
112
-
113
- Check you project for existed PostCSS config: `postcss.config.js`
114
- in the project root, `"postcss"` section in `package.json`
115
- or `postcss` in bundle config.
116
-
117
- If you already use PostCSS, add the plugin to plugins list:
118
-
119
- ```diff
120
- module.exports = {
121
- plugins: [
122
- + require('postcss-sort-media-queries')({
123
- + // sort: 'mobile-first' default value
124
- + sort: function(a, b) {
125
- + // custom sorting function
126
- + }
127
- + }),
128
- require('autoprefixer')
129
- ]
130
- }
131
- ```
132
-
133
- If you do not use PostCSS, add it according to [official docs]
134
- and set this plugin in settings.
135
-
136
- ## 🍰 Options
137
-
138
- > Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
139
-
140
- ### sort
141
-
142
- This option support **string** or **function** values.
143
-
144
- - `{string}` `'mobile-first'` - (default) mobile first sorting
145
- - `{string}` `'desktop-first'` - desktop first sorting
146
- - `{function}` your own sorting function
147
-
148
- #### `'mobile-first'`
149
-
150
- ```js
151
- postcss([
152
- sortMediaQueries({
153
- sort: 'mobile-first' // default
154
- })
155
- ]).process(css);
156
- ```
157
-
158
- #### `'desktop-first'`
159
-
160
- ```js
161
- postcss([
162
- sortMediaQueries({
163
- sort: 'desktop-first'
164
- })
165
- ]).process(css);
166
- ```
167
-
168
- #### Custom sort function
169
- ```js
170
- postcss([
171
- sortMediaQueries({
172
- function(a, b) {
173
- return a.localeCompare(b);
174
- }
175
- })
176
- ]).process(css);
177
- ```
178
-
179
- In this example, all your media queries will sort by A-Z order.
180
-
181
- This sorting function is directly passed to Array#sort() method of an array of all your media queries.
182
-
183
- ### Sort configuration
184
-
185
- By this configuration you can control sorting behaviour.
186
-
187
- ```js
188
- postcss([
189
- sortMediaQueries({
190
- configuration: {
191
- unitlessMqAlwaysFirst: true, // or false
192
- }
193
- })
194
- ]).process(css);
195
- ```
196
-
197
- Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
198
-
199
- ---
200
-
201
- ## Changelog
202
-
203
- See [Releases history]
204
-
205
- ## License
206
-
207
- [MIT]
208
-
209
- ## Other PostCSS plugins
210
-
211
- - [`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
-
213
- ## Thanks 💪
214
-
215
- - Andrey Sitnik [@ai](https://github.com/ai)
216
- - Jakub Caban [@Lustmored](https://github.com/Lustmored)
217
- - Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
218
- - Kai Falkowski [@SassNinja](https://github.com/SassNinja)
219
- - Олег Дутченко [@dutchenkoOleg](https://github.com/dutchenkoOleg)
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)
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,88 +1,95 @@
1
- {
2
- "name": "postcss-sort-media-queries",
3
- "version": "4.3.0",
4
- "description": "PostCSS plugin for combine and sort CSS media queries with mobile first or desktop first methods.",
5
- "keywords": [
6
- "postcss",
7
- "css",
8
- "postcss-plugin",
9
- "sort",
10
- "media-queries",
11
- "mediaquery",
12
- "mq",
13
- "optimization"
14
- ],
15
- "author": "Yunus Gaziev <yunusga@yandex.ru>",
16
- "license": "MIT",
17
- "repository": {
18
- "type": "git",
19
- "url": "https://github.com/solversgroup/postcss-sort-media-queries.git"
20
- },
21
- "bugs": {
22
- "url": "https://github.com/solversgroup/postcss-sort-media-queries/issues"
23
- },
24
- "homepage": "https://github.com/solversgroup/postcss-sort-media-queries",
25
- "scripts": {
26
- "test": "jest-ci --coverage && eslint-ci .",
27
- "refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
28
- },
29
- "engines": {
30
- "node": ">=10.0.0"
31
- },
32
- "dependencies": {
33
- "sort-css-media-queries": "2.1.0"
34
- },
35
- "devDependencies": {
36
- "autoprefixer": "^10.4.0",
37
- "eslint": "^8.3.0",
38
- "eslint-ci": "^1.0.0",
39
- "eslint-plugin-jest": "^25.3.0",
40
- "husky": "^7.0.4",
41
- "jest": "^27.3.1",
42
- "jest-ci": "^0.1.1",
43
- "jest-cli": "^27.3.1",
44
- "lint-staged": "^12.1.2",
45
- "postcss": "^8.4.4",
46
- "postcss-flexbugs-fixes": "^5.0.2",
47
- "postcss-media-minmax": "^5.0.0",
48
- "postcss-nested": "^5.0.6"
49
- },
50
- "peerDependencies": {
51
- "postcss": "^8.4.16"
52
- },
53
- "husky": {
54
- "hooks": {
55
- "pre-commit": "lint-staged"
56
- }
57
- },
58
- "lint-staged": {
59
- "*.js": "eslint --fix"
60
- },
61
- "eslintConfig": {
62
- "parserOptions": {
63
- "ecmaVersion": 2017
64
- },
65
- "env": {
66
- "node": true,
67
- "es6": true
68
- },
69
- "extends": [
70
- "eslint:recommended",
71
- "plugin:jest/recommended"
72
- ],
73
- "rules": {
74
- "jest/expect-expect": "off"
75
- }
76
- },
77
- "jest": {
78
- "testEnvironment": "node",
79
- "coverageThreshold": {
80
- "global": {
81
- "statements": 100
82
- }
83
- }
84
- },
85
- "sortCssMQ": {
86
- "unitlessMqAlwaysFirst": false
87
- }
88
- }
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
+ }