Fix schema-utils module not found error

Author: retyui

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 4.3.0
+
+- Fix [`schema-utils`](https://github.com/retyui/group-css-media-queries-loader/issues/11#issuecomment-926810847) not found error
+- Apply a PostCSS plugin guidelines [rule](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#14-keep-postcss-to-peerdependencies)
+
 ## 4.2.0
 
 - Auto-configure `sourceMap` option, based on [`.devtool`](https://webpack.js.org/configuration/devtool/#devtool)

package.json

@@ -1,11 +1,14 @@
 {
   "name": "group-css-media-queries-loader",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],
+  "dependencies": {
+    "schema-utils": "^2.0.0 || ^3.0.0"
+  },
   "peerDependencies": {
     "loader-utils": "^2.0.0 || ^1.0.0",
     "postcss": ">=8.1.0",
@@ -22,6 +25,9 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "postcss-loader": "^6.0.0"
+  },
   "scripts": {
     "prebuild": "rimraf ./lib",
     "build": "tsc",
@@ -30,9 +36,6 @@
     "test": "node ./test/test.js && cd example/webpack5 && yarn --ignore-engines && yarn build && cd ../..",
     "prepublishOnly": "npm run test"
   },
-  "optionalDependencies": {
-    "postcss-loader": "^6.0.0"
-  },
   "devDependencies": {
     "@tsconfig/node10": "^1.0.1",
     "@types/loader-utils": "^2.0.3",

src/group-css-media-queries.ts

@@ -1,12 +1,6 @@
-import {
-  AtRule,
-  atRule as postcssAtRule,
-  Plugin,
-  PluginCreator,
-} from "postcss";
+import type { AtRule, Plugin, PluginCreator } from "postcss";
 
 const EM_TO_PX_RATIO = 16;
-
 const MIN_WIDTH = "minWidth" as const;
 const MAX_WIDTH = "maxWidth" as const;
 const UNIT = "init" as const;
@@ -100,15 +94,11 @@ const sortMedia =
 function GroupCssMediaQueriesPostCssPlugin() {
   return {
     postcssPlugin: "group-css-media-queries",
-    Once(root) {
+    Once(root, { atRule: postcssAtRule }) {
       const medias: MediaQueries = {};
 
       root.walkAtRules("media", (atRule) => {
-        if (!(atRule.parent && atRule.parent.type === "root")) {
-          return;
-        }
-
-        if (atRule.name !== "media") {
+        if (atRule.parent?.type !== "root" || atRule.name !== "media") {
           return;
         }
 

src/index.ts

@@ -4,7 +4,7 @@ import {
   getRemainingRequest,
   getCurrentRequest,
 } from "loader-utils";
-import { validate } from "schema-utils";
+import schemaUtils from "schema-utils";
 import type { JSONSchema7 } from "schema-utils/declarations/validate";
 import type { LoaderContext } from "webpack";
 import type { LoaderOptions, SourceMap, AdditionalData } from "./types";
@@ -23,7 +23,10 @@ function GroupCssMediaQueriesLoader(
   // 2.x.x return empty `object` if empty query
   const loaderOptions = getOptions(this) || {};
 
-  validate(schema as JSONSchema7, loaderOptions, {
+  // 2.x.x schemaUtils(schema)
+  // 3.x.x schemaUtils.validate(schema)
+  // @ts-ignore
+  (schemaUtils.validate || schemaUtils)(schema as JSONSchema7, loaderOptions, {
     name: "group-css-media-queries-loader",
   });
 

yarn.lock

@@ -741,7 +741,7 @@ safe-buffer@^5.1.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-schema-utils@*, schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@*, "schema-utils@^2.0.0 || ^3.0.0", schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==