postcss-sort-media-queries 5.0.1 → 5.2.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.md +13 -0
- package/browser.js +54 -54
- package/index.js +75 -52
- package/package.json +95 -95
package/README.md
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
- [sort](#sort)
|
|
30
30
|
- [Custom sort function](#custom-sort-function)
|
|
31
31
|
- [Sort configuration](#sort-configuration)
|
|
32
|
+
- [Only Top Level](#only-top-level)
|
|
32
33
|
- [Changelog](#changelog)
|
|
33
34
|
- [License](#license)
|
|
34
35
|
- [Other PostCSS plugins](#other-postcss-plugins)
|
|
@@ -236,6 +237,18 @@ postcss([
|
|
|
236
237
|
|
|
237
238
|
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
|
+
### Only Top Level
|
|
241
|
+
|
|
242
|
+
Sort only top level media queries to prevent eject nested media queries from parent node
|
|
243
|
+
|
|
244
|
+
```js
|
|
245
|
+
postcss([
|
|
246
|
+
sortMediaQueries({
|
|
247
|
+
onlyTopLevel: true,
|
|
248
|
+
})
|
|
249
|
+
]).process(css);
|
|
250
|
+
```
|
|
251
|
+
|
|
239
252
|
---
|
|
240
253
|
|
|
241
254
|
## Changelog
|
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,75 @@
|
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
|
+
onlyTopLevel: false,
|
|
16
|
+
},
|
|
17
|
+
opts
|
|
18
|
+
)
|
|
19
|
+
|
|
20
|
+
const createSort = require('sort-css-media-queries/lib/create-sort');
|
|
21
|
+
const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
|
|
22
|
+
|
|
23
|
+
return {
|
|
24
|
+
postcssPlugin: 'postcss-sort-media-queries',
|
|
25
|
+
OnceExit (root, { AtRule }) {
|
|
26
|
+
|
|
27
|
+
let atRules = [];
|
|
28
|
+
|
|
29
|
+
root.walkAtRules('media', atRule => {
|
|
30
|
+
if (opts.onlyTopLevel && atRule.parent.type === 'root') {
|
|
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
|
+
if (!opts.onlyTopLevel) {
|
|
49
|
+
let query = atRule.params
|
|
50
|
+
|
|
51
|
+
if (!atRules[query]) {
|
|
52
|
+
atRules[query] = new AtRule({
|
|
53
|
+
name: atRule.name,
|
|
54
|
+
params: atRule.params,
|
|
55
|
+
source: atRule.source
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
atRule.nodes.forEach(node => {
|
|
60
|
+
atRules[query].append(node.clone())
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
atRule.remove()
|
|
64
|
+
}
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
if (atRules) {
|
|
68
|
+
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
|
|
69
|
+
root.append(atRules[query])
|
|
70
|
+
})
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
module.exports.postcss = true
|
package/package.json
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "postcss-sort-media-queries",
|
|
3
|
-
"version": "5.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/yunusga/postcss-sort-media-queries.git"
|
|
27
|
-
},
|
|
28
|
-
"bugs": {
|
|
29
|
-
"url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
|
|
30
|
-
},
|
|
31
|
-
"homepage": "https://github.com/yunusga/postcss-sort-media-queries",
|
|
32
|
-
"scripts": {
|
|
33
|
-
"test": "jest-ci --coverage && eslint
|
|
34
|
-
"refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
|
|
35
|
-
},
|
|
36
|
-
"engines": {
|
|
37
|
-
"node": ">=
|
|
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": "^
|
|
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
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "postcss-sort-media-queries",
|
|
3
|
+
"version": "5.2.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/yunusga/postcss-sort-media-queries.git"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://github.com/yunusga/postcss-sort-media-queries/issues"
|
|
30
|
+
},
|
|
31
|
+
"homepage": "https://github.com/yunusga/postcss-sort-media-queries",
|
|
32
|
+
"scripts": {
|
|
33
|
+
"test": "jest-ci --coverage && eslint",
|
|
34
|
+
"refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
|
|
35
|
+
},
|
|
36
|
+
"engines": {
|
|
37
|
+
"node": ">=14.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": "^13.2.1",
|
|
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
|
+
}
|