Migrated to postcss 8.0

.github/workflows/nodejs.yml

@@ -0,0 +1,33 @@
+name: Code Quality
+
+on:
+  push:
+    paths:
+      - ".github/**"
+      - "yarn.lock"
+      - "**.js"
+
+
+jobs:
+  test_and_lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ 10, 12, 14, 16 ]
+    steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - uses: actions/checkout@v2
+
+      - uses: actions/cache@master
+        id: node_modules_cache
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+
+      - run: yarn install --frozen-lockfile
+        if: steps.node_modules_cache.outputs.cache-hit != 'true'
+
+      - run: yarn test

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log
 
+## 4.0.0
+
+### ⚠ BREAKING CHANGES
+
+- Migrate to [postcss@8.x.x](https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users)
+- Minimum required [Node.js](https://nodejs.org/en/about/releases/) version is 10.0.0
+
 ## 3.0.0
+
 - Update babel
 - Update dependencies
 - Add test

README.md

@@ -35,18 +35,18 @@ module.exports = {
           "style-loader",
           {
             loader: "css-loader",
-            options: { sourceMap }
+            options: { sourceMap },
           },
           // 'group-css-media-queries-loader',
           // or with config
           {
             loader: "group-css-media-queries-loader",
-            options: { sourceMap }
-          }
-        ]
-      }
-    ]
-  }
+            options: { sourceMap },
+          },
+        ],
+      },
+    ],
+  },
 };
 ```
 

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "10.0.0",
+        },
+      },
+    ],
+  ],
+};

package.json

@@ -1,32 +1,34 @@
 {
   "name": "group-css-media-queries-loader",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "main": "lib/index.js",
   "files": [
     "lib"
   ],
-  "dependencies": {
-    "loader-utils": "^1.1.0"
-  },
   "peerDependencies": {
-    "postcss": ">=6.0.0",
+    "loader-utils": "^2.0.0 || ^1.0.0",
+    "postcss": ">=8.1.0",
     "webpack": ">=2.0.0"
   },
   "scripts": {
     "prebuild": "rimraf ./lib",
     "build": "babel src --out-dir lib",
-    "test": "npm run build && node ./test/test.js",
-    "prepublishOnly": "npm run build & npm run test"
+    "postbuild": "prettier --write ./lib",
+    "pretest": "npm run build",
+    "test": "node ./test/test.js",
+    "prepublishOnly": "npm run test"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "postcss": "^7.0.0",
-    "rimraf": "^2.6.2"
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "loader-utils": "^2.0.0",
+    "postcss": "^8.1.0",
+    "prettier": "^2.4.1",
+    "rimraf": "^3.0.2"
   },
   "engines": {
-    "node": ">=6.11.0"
+    "node": ">=10.0.0"
   },
   "repository": "https://github.com/retyui/group-css-media-queries-loader",
   "author": "David Narbutovich <vamnemne@gmail.com>",

src/group-css-media-queries.js

@@ -1,19 +1,19 @@
-const { plugin: postcssPlugin, atRule: postcssAtRule } = require("postcss");
+import { atRule as postcssAtRule } from "postcss";
 
 const EM_TO_PX_RATIO = 16;
 
 const MIN_WIDTH = "minWidth";
 const MAX_WIDTH = "maxWidth";
 const UNIT = "init";
 
-const mediaParamsToData = mediaQueries =>
+const mediaParamsToData = (mediaQueries) =>
   Object.entries(mediaQueries).map(([media, mediaQueryRules]) => {
     const mediaQueryData = {
       mediaQueryRules,
       params: media,
       [MIN_WIDTH]: false,
       [MAX_WIDTH]: false,
-      [UNIT]: false
+      [UNIT]: false,
     };
 
     if (media.includes("min-width")) {
@@ -44,9 +44,12 @@ const mediaParamsToData = mediaQueries =>
     return mediaQueryData;
   });
 
-const invertBoolResult = fn => (...args) => !fn(...args);
+const invertBoolResult =
+  (fn) =>
+  (...args) =>
+    !fn(...args);
 
-const sortMedia = dimensionKey => (a, b) => {
+const sortMedia = (dimensionKey) => (a, b) => {
   if (a[UNIT] === "em") {
     a[dimensionKey] *= EM_TO_PX_RATIO;
   }
@@ -56,68 +59,72 @@ const sortMedia = dimensionKey => (a, b) => {
   return a[dimensionKey] - b[dimensionKey];
 };
 
-const groupCssMediaQueries = postcssPlugin(
-  "group-css-media-queries",
-  () => root => {
-    const medias = {};
-    root.walkAtRules("media", atRule => {
-      if (!(atRule.parent && atRule.parent.type === "root")) {
-        return;
-      }
+function GroupCssMediaQueriesPostCssPlugin() {
+  return {
+    postcssPlugin: "group-css-media-queries",
+    Once(root) {
+      const medias = {};
 
-      if (atRule.name !== "media") {
-        return;
-      }
+      root.walkAtRules("media", (atRule) => {
+        if (!(atRule.parent && atRule.parent.type === "root")) {
+          return;
+        }
 
-      const { params: mediaParams } = atRule;
-      if (!medias[mediaParams]) {
-        medias[mediaParams] = [];
-      }
-      medias[mediaParams] = medias[mediaParams].concat(atRule);
-    });
-
-    const mediasData = mediaParamsToData(medias);
-
-    const onlyMinRules = mediasData.filter(
-      rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] === false
-    );
-    const onlyMaxRules = mediasData.filter(
-      rule => rule[MAX_WIDTH] !== false && rule[MIN_WIDTH] === false
-    );
-    const intervalRules = mediasData.filter(
-      rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] !== false
-    );
-    const tmp = [...onlyMinRules, ...onlyMaxRules, ...intervalRules];
-    const otherRules = mediasData.filter(rule => tmp.includes(rule) === false);
-
-    onlyMinRules.sort(sortMedia(MIN_WIDTH)); // ascending
-    onlyMaxRules.sort(invertBoolResult(sortMedia(MAX_WIDTH))); // descending
-
-    const sortedListRules = [
-      onlyMinRules,
-      onlyMaxRules,
-      intervalRules,
-      otherRules
-    ];
-
-    for (const rules of sortedListRules) {
-      for (const { params, mediaQueryRules } of rules) {
-        const newAtRule = postcssAtRule({
-          name: "media",
-          params
-        });
-
-        mediaQueryRules.forEach(mediaQueryRule => {
-          newAtRule.append(mediaQueryRule.nodes);
-          mediaQueryRule.remove();
-        });
-
-        root.append(newAtRule);
+        if (atRule.name !== "media") {
+          return;
+        }
+
+        const { params: mediaParams } = atRule;
+        if (!medias[mediaParams]) {
+          medias[mediaParams] = [];
+        }
+        medias[mediaParams] = medias[mediaParams].concat(atRule);
+      });
+
+      const mediasData = mediaParamsToData(medias);
+
+      const onlyMinRules = mediasData.filter(
+        (rule) => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] === false
+      );
+      const onlyMaxRules = mediasData.filter(
+        (rule) => rule[MAX_WIDTH] !== false && rule[MIN_WIDTH] === false
+      );
+      const intervalRules = mediasData.filter(
+        (rule) => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] !== false
+      );
+      const tmp = [...onlyMinRules, ...onlyMaxRules, ...intervalRules];
+      const otherRules = mediasData.filter(
+        (rule) => tmp.includes(rule) === false
+      );
+
+      onlyMinRules.sort(sortMedia(MIN_WIDTH)); // ascending
+      onlyMaxRules.sort(invertBoolResult(sortMedia(MAX_WIDTH))); // descending
+
+      const sortedListRules = [
+        onlyMinRules,
+        onlyMaxRules,
+        intervalRules,
+        otherRules,
+      ];
+
+      for (const rules of sortedListRules) {
+        for (const { params, mediaQueryRules } of rules) {
+          const newAtRule = postcssAtRule({
+            name: "media",
+            params,
+          });
+
+          mediaQueryRules.forEach((mediaQueryRule) => {
+            newAtRule.append(mediaQueryRule.nodes);
+            mediaQueryRule.remove();
+          });
+
+          root.append(newAtRule);
+        }
       }
-    }
-  }
-);
+    },
+  };
+}
 
-module.exports = {
-  groupCssMediaQueries
-};
+module.exports = GroupCssMediaQueriesPostCssPlugin;
+module.exports.postcss = true;