postcss-loader - npm Package Compare versions

Comparing version 6.2.1 to 7.0.0

dist/utils.js

@@ -104,18 +104,11 @@ "use strict";
   try {
-    if (!options || Object.keys(options).length === 0) {
-      // eslint-disable-next-line global-require, import/no-dynamic-require
-      const loadedPlugin = require(plugin);
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    let loadedPlugin = require(plugin);
 
-      if (loadedPlugin.default) {
-        return loadedPlugin.default;
-      }
+    if (loadedPlugin.default) {
+      loadedPlugin = loadedPlugin.default;
+    }
 
+    if (!options || Object.keys(options).length === 0) {
       return loadedPlugin;
-    } // eslint-disable-next-line global-require, import/no-dynamic-require
-
-
-    const loadedPlugin = require(plugin);
-
-    if (loadedPlugin.default) {
-      return loadedPlugin.default(options);
     }
@@ -122,0 +115,0 @@

package.json

 {
   "name": "postcss-loader",
-  "version": "6.2.1",
+  "version": "7.0.0",
   "description": "PostCSS loader for webpack",
@@ -16,3 +16,3 @@ "license": "MIT",
   "engines": {
-    "node": ">= 12.13.0"
+    "node": ">= 14.15.0"
   },
@@ -47,40 +47,40 @@ "scripts": {
     "klona": "^2.0.5",
-    "semver": "^7.3.5"
+    "semver": "^7.3.7"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^28.1.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.11",
+    "cssnano": "^5.1.7",
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.3.0",
+    "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
-    "husky": "^7.0.4",
-    "jest": "^27.3.1",
+    "eslint-plugin-import": "^2.26.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.0",
     "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "lint-staged": "^12.1.2",
-    "memfs": "^3.4.0",
+    "less-loader": "^11.0.0",
+    "lint-staged": "^12.4.1",
+    "memfs": "^3.4.1",
     "midas": "^2.0.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.1",
+    "postcss": "^8.4.13",
     "postcss-dark-theme-class": "^0.7.3",
-    "postcss-import": "^14.0.2",
-    "postcss-js": "^3.0.3",
+    "postcss-import": "^14.1.0",
+    "postcss-js": "^4.0.0",
     "postcss-nested": "^5.0.6",
     "postcss-short": "^5.0.0",
-    "prettier": "^2.5.0",
-    "sass": "^1.43.5",
-    "sass-loader": "^12.3.0",
+    "prettier": "^2.6.2",
+    "sass": "^1.51.0",
+    "sass-loader": "^13.0.0",
     "standard-version": "^9.3.2",
     "strip-ansi": "^6.0.0",
     "sugarss": "^4.0.1",
-    "webpack": "^5.64.4"
+    "webpack": "^5.72.1"
   },
@@ -87,0 +87,0 @@ "keywords": [

README.md

@@ -52,2 +52,14 @@ <div align="center">
 
+or
+
+```console
+yarn add -D postcss-loader postcss
+```
+
+or
+
+```console
+pnpm add -D postcss-loader postcss
+```
+
 Then add the plugin to your `webpack` config. For example:
@@ -134,14 +146,18 @@
 
-|                Name                 |         Type         |                Default                | Description                                  |
-| :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- |
-|        [`execute`](#execute)        |     `{Boolean}`      |              `undefined`              | Enable PostCSS Parser support in `CSS-in-JS` |
-| [`postcssOptions`](#postcssOptions) | `{Object\|Function}` | `defaults values for Postcss.process` | Set `PostCSS` options and plugins            |
-|      [`sourceMap`](#sourcemap)      |     `{Boolean}`      |          `compiler.devtool`           | Enables/Disables generation of source maps   |
-| [`implementation`](#implementation) | `{Function\|String}` |               `postcss`               | Setup PostCSS implementation to use          |
+- [`execute`](#execute)
+- [`postcssOptions`](#postcssOptions)
+- [`sourceMap`](#sourcemap)
+- [`implementation`](#implementation)
 
 ### `execute`
 
-Type: `Boolean`
+Type:
+
+```ts
+type execute = boolean;
+```
+
 Default: `undefined`
 
+Enable PostCSS Parser support in `CSS-in-JS`.
 If you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.
@@ -180,3 +196,24 @@
 
-Type: `Object|Function`
+Type:
+
+```ts
+type postcssOptions =
+  | {
+      from: string;
+      map: boolean | SourceMapOptions;
+      parser: string | object | (() => Parser);
+      stringifier: Stringifier | Syntax;
+      syntax: Syntax;
+      to: string;
+    }
+  | ((loaderContext: LoaderContext) => {
+      from: string;
+      map: boolean | SourceMapOptions;
+      parser: string | object | (() => Parser);
+      stringifier: Stringifier | Syntax;
+      syntax: Syntax;
+      to: string;
+    });
+```
+
 Default: `undefined`
@@ -192,3 +229,3 @@
 
-#### `Object`
+#### `object`
 
@@ -262,5 +299,5 @@ Setup `plugins`:
           postcssOptions: {
-            // Can be `String`
+            // Can be `string`
             syntax: "sugarss",
-            // Can be `Object`
+            // Can be `object`
             syntax: require("sugarss"),
@@ -288,7 +325,7 @@ },
           postcssOptions: {
-            // Can be `String`
+            // Can be `string`
             parser: "sugarss",
-            // Can be `Object`
+            // Can be `object`
             parser: require("sugarss"),
-            // Can be `Function`
+            // Can be `function`
             parser: require("sugarss").parse,
@@ -319,7 +356,7 @@ },
           postcssOptions: {
-            // Can be `String`
+            // Can be `string`
             stringifier: "sugarss",
-            // Can be `Object`
+            // Can be `object`
             stringifier: require("sugarss"),
-            // Can be `Function`
+            // Can be `function`
             stringifier: midas.stringifier,
@@ -334,3 +371,3 @@ },
 
-#### `Function`
+#### `function`
 
@@ -374,3 +411,8 @@ **webpack.config.js**
 
-Type: `Boolean|String`
+Type:
+
+```ts
+type config = boolean | string;
+```
+
 Default: `undefined`
@@ -392,3 +434,3 @@
 
-Using `Object` notation:
+Using `object` notation:
 
@@ -409,3 +451,3 @@ **postcss.config.js** (**recommend**)
 
-Using `Function` notation:
+Using `function` notation:
 
@@ -511,3 +553,3 @@ **postcss.config.js** (**recommend**)
 
-#### Boolean
+#### `boolean`
 
@@ -564,3 +606,8 @@ Enables/Disables autoloading config.
 
-Type: `Boolean`
+Type:
+
+```ts
+type sourceMap = boolean;
+```
+
 Default: depends on the `compiler.devtool` value
@@ -616,3 +663,10 @@
 
-Type: `Function | String`
+Type:
+
+```ts
+type implementation = object;
+```
+
+type of `implementation` should be the same as [postcss.d.ts](https://github.com/postcss/postcss/blob/main/lib/postcss.d.ts)
+
 Default: `postcss`
@@ -624,3 +678,3 @@
 
-#### Function
+#### `function`
 
@@ -952,12 +1006,15 @@ **webpack.config.js**
 ```js
-const customPlugin = () => (css, result) => {
-  result.messages.push({
-    type: "asset",
-    file: "sprite.svg",
-    content: "<svg>...</svg>",
-  });
+const postcssCustomPlugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcss-custom-plugin",
+    Once: (root, { result }) => {
+      result.messages.push({
+        type: "asset",
+        file: "sprite.svg",
+        content: "<svg>...</svg>",
+      });
+    },
+  };
 };
 
-const postcssPlugin = postcss.plugin("postcss-assets", customPlugin);
-
 module.exports = {
@@ -975,3 +1032,3 @@ module: {
               postcssOptions: {
-                plugins: [postcssPlugin()],
+                plugins: [postcssCustomPlugin()],
               },
@@ -1005,11 +1062,14 @@ },
 
-const customPlugin = () => (css, result) => {
-  result.messages.push({
-    type: "dependency",
-    file: path.resolve(__dirname, "path", "to", "file"),
-  });
+const postcssCustomPlugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcss-custom-plugin",
+    Once: (root, { result }) => {
+      result.messages.push({
+        type: "dependency",
+        file: path.resolve(__dirname, "path", "to", "file"),
+      });
+    },
+  };
 };
 
-const postcssPlugin = postcss.plugin("postcss-assets", customPlugin);
-
 module.exports = {
@@ -1027,3 +1087,3 @@ module: {
               postcssOptions: {
-                plugins: [postcssPlugin()],
+                plugins: [postcssCustomPlugin()],
               },
@@ -1039,2 +1099,4 @@ },
 
+Or you can use ready-made plugin [postcss-add-dependencies](https://www.npmjs.com/package/postcss-add-dependencies).
+
 2. Pass `loaderContext` in plugin.
@@ -1075,3 +1137,3 @@
   plugins: [
-    require("path/to/customPlugin")({
+    require("path/to/postcssCustomPlugin.js")({
       loaderContext: api.webpackLoaderContext,
@@ -1083,3 +1145,3 @@ }),
 
-**customPlugin.js**
+**postcssCustomPlugin.js**
 
@@ -1089,9 +1151,15 @@ ```js
 
-const customPlugin = (loaderContext) => (css, result) => {
-  loaderContext.webpack.addDependency(
-    path.resolve(__dirname, "path", "to", "file")
-  );
+const postcssCustomPlugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcss-custom-plugin",
+    Once: (root, { result }) => {
+      opts.loaderContext.addDependency(
+        path.resolve(__dirname, "path", "to", "file")
+      );
+    },
+  };
 };
 
-module.exports = postcss.plugin("postcss-assets", customPlugin);
+postcssCustomPlugin.postcss = true;
+module.exports = postcssCustomPlugin;
 ```
@@ -1098,0 +1166,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48492

increased by0.45%

Number of lines in readme file

1170

increased by6.17%

Number of low supply chain risk alerts

5

decreased by-16.67%

Worsened metrics

Lines of code

597

decreased by-0.67%

Dependency changes

• Updatedsemver@^7.3.7