postcss-sort-media-queries 3.11.12 → 4.2.1

package/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.2.1] 2021-11-28
+
+- Update **postcss** to [8.4.4](https://github.com/postcss/postcss/releases/tag/8.4.4)
+- Update dev dependencies
+
+## [4.1.0] 2021-09-13
+
+- Add module for browser
+
+## [4.0.0] 2021-09-13
+
+- Add [sort-css-media-queries#configuration-options](https://github.com/dutchenkoOleg/sort-css-media-queries#configuration-options) support
+
+## [3.12.13] 2021-09-12
+
+- Update **postcss** to [8.3.6](https://github.com/postcss/postcss/releases/tag/8.3.6)
+  - Fixed column in `missed semicolon` error (by @Gusted).
+- Update **sort-css-media-queries** to [v2.0.4](https://github.com/dutchenkoOleg/sort-css-media-queries/releases/tag/v2.0.4)
+  - Fix package dependencies
+- Update dev dependencies
+- Fixed dependencies vulnerabilities
+- Add online demo
+
 ## [3.11.12] 2021-06-10
 
 - Update **postcss** to [postcss/releases/tag/8.3.1](https://github.com/postcss/postcss/releases/tag/8.3.1)

package/README.md

@@ -1,197 +1,219 @@
-# PostCSS Sort Media Queries
-
-[PostCSS]:          https://github.com/postcss/postcss
-[ci-img]:           https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg
-[ci]:               https://travis-ci.org/solversgroup/postcss-sort-media-queries
-[MIT]:              https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE
-[official docs]:    https://github.com/postcss/postcss#usage
-[Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md
-
-[![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]
-[![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
-
-[PostCSS] plugin for combine and sort CSS media queries with **mobile first** or **desktop first** methods.
-
-> **Combine** same media queries into one - is a unexpected side effect for this plugin 🧬
-
-## Examples
-
-### Mobile first sorting
-
-```css
-/* before */
-@media screen and (max-width: 640px) {
-  .head { color: #cfcfcf }
-}
-@media screen and (max-width: 768px) {
-  .footer { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  .main { color: #cfcfcf }
-}
-@media screen and (min-width: 1280px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (min-width: 640px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  .footer { color: #cfcfcf }
-}
-
-/* after */
-@media screen and (min-width: 640px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (min-width: 1280px) {
-  .mobile-first { color: #cfcfcf }
-}
-@media screen and (max-width: 768px) {
-  .footer { color: #cfcfcf }
-}
-@media screen and (max-width: 640px) {
-  .head { color: #cfcfcf }
-  .main { color: #cfcfcf }
-  .footer { color: #cfcfcf }
-}
-```
-
-### Desktop first sorting
-
-```css
-/* before */
-@media screen and (max-width: 640px) {
-  .header { color: #cdcdcd }
-}
-@media screen and (min-width: 760px) {
-  .desktop-first { color: #cdcdcd }
-}
-@media screen and (max-width: 640px) {
-  .main { color: #cdcdcd }
-}
-@media screen and (min-width: 1280px) {
-  .desktop-first { color: #cdcdcd }
-}
-@media screen and (max-width: 760px) {
-  .footer { color: #cdcdcd }
-}
-@media screen and (max-width: 640px) {
-  .footer { color: #cdcdcd }
-}
-
-/* after */
-@media screen and (max-width: 760px) {
-  .footer { color: #cdcdcd }
-}
-@media screen and (max-width: 640px) {
-  .header { color: #cdcdcd }
-  .main { color: #cdcdcd }
-  .footer { color: #cdcdcd }
-}
-@media screen and (min-width: 760px) {
-  .desktop-first { color: #cdcdcd }
-}
-@media screen and (min-width: 1280px) {
-  .desktop-first { color: #cdcdcd }
-}
-```
-
-## Getting Started
-
-First thing's, install the module:
-
-```
-npm install postcss postcss-sort-media-queries --save-dev
-```
-
-## 🍳 Usage
-
-Check you project for existed PostCSS config: `postcss.config.js`
-in the project root, `"postcss"` section in `package.json`
-or `postcss` in bundle config.
-
-If you already use PostCSS, add the plugin to plugins list:
-
-```diff
-module.exports = {
-  plugins: [
-+   require('postcss-sort-media-queries')({
-+     // sort: 'mobile-first' default value
-+     sort: function(a, b) {
-+        // custom sorting function
-+     }
-+   }),
-    require('autoprefixer')
-  ]
-}
-```
-
-If you do not use PostCSS, add it according to [official docs]
-and set this plugin in settings.
-
-## 🍰 Options
-
-> Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
-
-### sort
-
-This option support **string** or **function** values.
-
-- `{string}` `'mobile-first'` - (default) mobile first sorting
-- `{string}` `'desktop-first'` - desktop first sorting
-- `{function}` your own sorting function
-
-#### `'mobile-first'`
-
-```js
-postcss([
-  sortMediaQueries({
-    sort: 'mobile-first' // default
-  })
-]).process(css);
-```
-
-#### `'desktop-first'`
-
-```js
-postcss([
-  sortMediaQueries({
-    sort: 'desktop-first'
-  })
-]).process(css);
-```
-
-#### Custom sort function
-```js
-postcss([
-  sortMediaQueries({
-    function(a, b) {
-      return a.localeCompare(b);
-    }
-  })
-]).process(css);
-```
-
-In this example, all your media queries will sort by A-Z order.
-
-This sorting function is directly passed to Array#sort() method of an array of all your media queries.
-
-## Changelog
-
-See [Releases history]
-
-## License
-
-[MIT]
-
-## Other PostCSS plugins
-
-- [`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
-
-## Thanks 💪
-
-- Andrey Sitnik [@ai](https://github.com/ai)
-- Jakub Caban [@Lustmored](https://github.com/Lustmored)
-- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
-- Kai Falkowski [@SassNinja](https://github.com/SassNinja)
-- Олег Дутченко [@dutchenkoOleg](https://github.com/dutchenkoOleg)
+# PostCSS Sort Media Queries
+
+[PostCSS]:          https://github.com/postcss/postcss
+[ci-img]:           https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg
+[ci]:               https://travis-ci.org/solversgroup/postcss-sort-media-queries
+[MIT]:              https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE
+[official docs]:    https://github.com/postcss/postcss#usage
+[Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md
+
+[![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]
+[![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
+
+[PostCSS] plugin for combine and sort CSS media queries with **mobile first** or **desktop first** methods.
+
+> **Combine** same media queries into one - is a unexpected side effect for this plugin 🧬
+
+## Online demo
+
+And here is the [online demo](https://postcss-sort-media-queries.github.io)
+
+## Examples
+
+### Mobile first sorting
+
+```css
+/* before */
+@media screen and (max-width: 640px) {
+  .head { color: #cfcfcf }
+}
+@media screen and (max-width: 768px) {
+  .footer { color: #cfcfcf }
+}
+@media screen and (max-width: 640px) {
+  .main { color: #cfcfcf }
+}
+@media screen and (min-width: 1280px) {
+  .mobile-first { color: #cfcfcf }
+}
+@media screen and (min-width: 640px) {
+  .mobile-first { color: #cfcfcf }
+}
+@media screen and (max-width: 640px) {
+  .footer { color: #cfcfcf }
+}
+
+/* after */
+@media screen and (min-width: 640px) {
+  .mobile-first { color: #cfcfcf }
+}
+@media screen and (min-width: 1280px) {
+  .mobile-first { color: #cfcfcf }
+}
+@media screen and (max-width: 768px) {
+  .footer { color: #cfcfcf }
+}
+@media screen and (max-width: 640px) {
+  .head { color: #cfcfcf }
+  .main { color: #cfcfcf }
+  .footer { color: #cfcfcf }
+}
+```
+
+### Desktop first sorting
+
+```css
+/* before */
+@media screen and (max-width: 640px) {
+  .header { color: #cdcdcd }
+}
+@media screen and (min-width: 760px) {
+  .desktop-first { color: #cdcdcd }
+}
+@media screen and (max-width: 640px) {
+  .main { color: #cdcdcd }
+}
+@media screen and (min-width: 1280px) {
+  .desktop-first { color: #cdcdcd }
+}
+@media screen and (max-width: 760px) {
+  .footer { color: #cdcdcd }
+}
+@media screen and (max-width: 640px) {
+  .footer { color: #cdcdcd }
+}
+
+/* after */
+@media screen and (max-width: 760px) {
+  .footer { color: #cdcdcd }
+}
+@media screen and (max-width: 640px) {
+  .header { color: #cdcdcd }
+  .main { color: #cdcdcd }
+  .footer { color: #cdcdcd }
+}
+@media screen and (min-width: 760px) {
+  .desktop-first { color: #cdcdcd }
+}
+@media screen and (min-width: 1280px) {
+  .desktop-first { color: #cdcdcd }
+}
+```
+
+## Getting Started
+
+First thing's, install the module:
+
+```
+npm install postcss postcss-sort-media-queries --save-dev
+```
+
+## 🍳 Usage
+
+Check you project for existed PostCSS config: `postcss.config.js`
+in the project root, `"postcss"` section in `package.json`
+or `postcss` in bundle config.
+
+If you already use PostCSS, add the plugin to plugins list:
+
+```diff
+module.exports = {
+  plugins: [
++   require('postcss-sort-media-queries')({
++     // sort: 'mobile-first' default value
++     sort: function(a, b) {
++        // custom sorting function
++     }
++   }),
+    require('autoprefixer')
+  ]
+}
+```
+
+If you do not use PostCSS, add it according to [official docs]
+and set this plugin in settings.
+
+## 🍰 Options
+
+> Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
+
+### sort
+
+This option support **string** or **function** values.
+
+- `{string}` `'mobile-first'` - (default) mobile first sorting
+- `{string}` `'desktop-first'` - desktop first sorting
+- `{function}` your own sorting function
+
+#### `'mobile-first'`
+
+```js
+postcss([
+  sortMediaQueries({
+    sort: 'mobile-first' // default
+  })
+]).process(css);
+```
+
+#### `'desktop-first'`
+
+```js
+postcss([
+  sortMediaQueries({
+    sort: 'desktop-first'
+  })
+]).process(css);
+```
+
+#### Custom sort function
+```js
+postcss([
+  sortMediaQueries({
+    function(a, b) {
+      return a.localeCompare(b);
+    }
+  })
+]).process(css);
+```
+
+In this example, all your media queries will sort by A-Z order.
+
+This sorting function is directly passed to Array#sort() method of an array of all your media queries.
+
+### Sort configuration
+
+By this configuration you can control sorting behaviour.
+
+```js
+postcss([
+  sortMediaQueries({
+    configuration: {
+      unitlessMqAlwaysFirst: true, // or false
+    }
+  })
+]).process(css);
+```
+
+Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
+
+---
+
+## Changelog
+
+See [Releases history]
+
+## License
+
+[MIT]
+
+## Other PostCSS plugins
+
+- [`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
+
+## Thanks 💪
+
+- Andrey Sitnik [@ai](https://github.com/ai)
+- Jakub Caban [@Lustmored](https://github.com/Lustmored)
+- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
+- Kai Falkowski [@SassNinja](https://github.com/SassNinja)
+- Олег Дутченко [@dutchenkoOleg](https://github.com/dutchenkoOleg)

package/browser.js

@@ -0,0 +1,54 @@
+function sortAtRules(queries, sort, sortCSSmq) {
+  if (typeof sort !== 'function') {
+    sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
+  }
+
+  return queries.sort(sort)
+}
+
+module.exports = (opts = {}) => {
+
+  opts = Object.assign(
+    {
+      sort: 'mobile-first',
+      configuration: {
+        unitlessMqAlwaysFirst: false,
+      },
+    },
+    opts
+  )
+
+  const createSort = require('sort-css-media-queries/lib/create-sort');
+  const sortCSSmq = createSort(opts.configuration);
+
+  return {
+    postcssPlugin: 'postcss-sort-media-queries',
+    OnceExit(root, { AtRule }) {
+
+      let atRules = [];
+
+      root.walkAtRules('media', atRule => {
+        let query = atRule.params
+
+        if (!atRules[query]) {
+          atRules[query] = new AtRule({
+            name: atRule.name,
+            params: atRule.params,
+            source: atRule.source
+          })
+        }
+
+        atRule.nodes.forEach(node => {
+          atRules[query].append(node.clone())
+        })
+
+        atRule.remove()
+      })
+
+      sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
+        root.append(atRules[query])
+      })
+    }
+  }
+}
+module.exports.postcss = true

package/index.js

@@ -1,49 +1,52 @@
-const sortCSSmq = require('sort-css-media-queries')
-
-function sortAtRules (queries, sort) {
-  if (typeof sort !== 'function') {
-    sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
-  }
-
-  return queries.sort(sort)
-}
-
-module.exports = (opts = {}) => {
-  opts = Object.assign(
-    {
-      sort: 'mobile-first'
-    },
-    opts
-  )
-
-  return {
-    postcssPlugin: 'postcss-sort-media-queries',
-    OnceExit (root, { AtRule }) {
-
-      let atRules = [];
-
-      root.walkAtRules('media', atRule => {
-        let query = atRule.params
-
-        if (!atRules[query]) {
-          atRules[query] = new AtRule({
-            name: atRule.name,
-            params: atRule.params,
-            source: atRule.source
-          })
-        }
-
-        atRule.nodes.forEach(node => {
-          atRules[query].append(node.clone())
-        })
-
-        atRule.remove()
-      })
-
-      sortAtRules(Object.keys(atRules), opts.sort).forEach(query => {
-        root.append(atRules[query])
-      })
-    }
-  }
-}
-module.exports.postcss = true
+function sortAtRules(queries, sort, sortCSSmq) {
+  if (typeof sort !== 'function') {
+    sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
+  }
+
+  return queries.sort(sort)
+}
+
+module.exports = (opts = {}) => {
+
+  opts = Object.assign(
+    {
+      sort: 'mobile-first',
+      configuration: false,
+    },
+    opts
+  )
+
+  const createSort = require('sort-css-media-queries/lib/create-sort');
+  const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
+
+  return {
+    postcssPlugin: 'postcss-sort-media-queries',
+    OnceExit (root, { AtRule }) {
+
+      let atRules = [];
+
+      root.walkAtRules('media', atRule => {
+        let query = atRule.params
+
+        if (!atRules[query]) {
+          atRules[query] = new AtRule({
+            name: atRule.name,
+            params: atRule.params,
+            source: atRule.source
+          })
+        }
+
+        atRule.nodes.forEach(node => {
+          atRules[query].append(node.clone())
+        })
+
+        atRule.remove()
+      })
+
+      sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
+        root.append(atRules[query])
+      })
+    }
+  }
+}
+module.exports.postcss = true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-sort-media-queries",
-  "version": "3.11.12",
+  "version": "4.2.1",
   "description": "PostCSS plugin for combine and sort CSS media queries with mobile first or desktop first methods.",
   "keywords": [
     "postcss",
@@ -30,25 +30,25 @@
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "sort-css-media-queries": "1.5.4"
+    "sort-css-media-queries": "2.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
-    "eslint": "^7.28.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.3.0",
     "eslint-ci": "^1.0.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "husky": "^6.0.0",
-    "jest": "^27.0.4",
+    "eslint-plugin-jest": "^25.3.0",
+    "husky": "^7.0.4",
+    "jest": "^27.3.1",
     "jest-ci": "^0.1.1",
-    "jest-cli": "^27.0.4",
-    "lint-staged": "^11.0.0",
-    "postcss": "^8.3.1",
+    "jest-cli": "^27.3.1",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-media-minmax": "^5.0.0",
-    "postcss-nested": "^5.0.5"
+    "postcss-nested": "^5.0.6"
   },
   "peerDependencies": {
-    "postcss": "^8.3.1"
+    "postcss": "^8.4.4"
   },
   "husky": {
     "hooks": {
@@ -81,5 +81,8 @@
         "statements": 100
       }
     }
+  },
+  "sortCssMQ": {
+    "unitlessMqAlwaysFirst": false
   }
 }