@csstools/postcss-hwb-function - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

CHANGELOG.md

 # Changes to PostCSS HWB Function
 
+### 2.0.0 (January 24, 2023)
+
+- Updated: Support for Node v14+ (major).
+
 ### 1.0.2 (July 8, 2022)
@@ -4,0 +8,0 @@

dist/hwb.d.ts

@@ -1,3 +0,3 @@
-declare type color = [number, number, number];
+type color = [number, number, number];
 export declare function hwbToRgb(hwb: color): color;
 export {};

dist/index.d.ts

 import type { PluginCreator } from 'postcss';
+/** postcss-hwb-function plugin options */
+export type pluginOptions = {
+    /** Preserve the original notation. default: false */
+    preserve?: boolean;
+};
 /** Transform hwb() functions in CSS. */
-declare const postcssPlugin: PluginCreator<{
-    preserve: boolean;
-}>;
+declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;

INSTALL.md

@@ -5,5 +5,12 @@ # Installing PostCSS HWB Function
 
-| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
-| --- | --- | --- | --- | --- | --- |
+- [Node](#node)
+- [PostCSS CLI](#postcss-cli)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
 
+
+
 ## Node
@@ -20,2 +27,3 @@
 ```js
+// commonjs
 const postcss = require('postcss');
@@ -29,2 +37,12 @@ const postcssHWBFunction = require('@csstools/postcss-hwb-function');
 
+```js
+// esm
+import postcss from 'postcss';
+import postcssHWBFunction from '@csstools/postcss-hwb-function';
+
+postcss([
+	postcssHWBFunction(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
 ## PostCSS CLI
@@ -50,2 +68,34 @@
 
+## PostCSS Load Config
+
+If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
+
+```bash
+npm install @csstools/postcss-hwb-function --save-dev
+```
+
+`package.json`:
+
+```json
+{
+	"postcss": {
+		"plugins": {
+			"@csstools/postcss-hwb-function": {}
+		}
+	}
+}
+```
+
+`.postcssrc.json`:
+
+```json
+{
+	"plugins": {
+		"@csstools/postcss-hwb-function": {}
+	}
+}
+```
+
+_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
+
 ## Webpack
@@ -80,2 +130,3 @@
 								plugins: [
+									// Other plugins,
 									[
@@ -98,22 +149,31 @@ "@csstools/postcss-hwb-function",
 
-## Create React App
+## Next.js
 
-Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
 
 ```bash
-npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-hwb-function --save-dev
+npm install @csstools/postcss-hwb-function --save-dev
 ```
 
-Use [React App Rewire PostCSS] and [PostCSS HWB Function] in your
-`config-overrides.js` file:
+Use [PostCSS HWB Function] in your `postcss.config.json` file:
 
-```js
-const reactAppRewirePostcss = require('react-app-rewire-postcss');
-const postcssHWBFunction = require('@csstools/postcss-hwb-function');
+```json
+{
+	"plugins": [
+		"@csstools/postcss-hwb-function"
+	]
+}
+```
 
-module.exports = config => reactAppRewirePostcss(config, {
-	plugins: () => [
-		postcssHWBFunction(/* pluginOptions */)
+```json5
+{
+	"plugins": [
+		[
+			"@csstools/postcss-hwb-function",
+			{
+				// Optionally add plugin options
+			}
+		]
 	]
-});
+}
 ```
@@ -181,3 +241,2 @@
 [PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function
-[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
-[React App Rewired]: https://github.com/timarney/react-app-rewired
+[Next.js]: https://nextjs.org

package.json

 {
 	"name": "@csstools/postcss-hwb-function",
 	"description": "Use hwb() color functions in CSS",
-	"version": "1.0.2",
+	"version": "2.0.0",
 	"author": "Jonathan Neal <[e-mail]>",
@@ -12,3 +12,3 @@ "license": "CC0-1.0",
 	"engines": {
-		"node": "^12 || ^14 || >=16"
+		"node": "^14 || ^16 || >=18"
 	},
@@ -36,7 +36,8 @@ "main": "dist/index.cjs",
 	"peerDependencies": {
-		"postcss": "^8.2"
+		"postcss": "^8.4"
 	},
 	"scripts": {
-		"build": "rollup -c ../../rollup/default.js",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"prebuild": "npm run clean",
+		"build": "rollup -c ../../rollup/default.mjs",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"docs": "node ../../.github/bin/generate-docs/install.mjs",
@@ -60,3 +61,2 @@ "lint": "npm run lint:eslint && npm run lint:package-json",
 		"color",
-		"colors",
 		"comma",
@@ -63,0 +63,0 @@ "css",

README.md

@@ -48,4 +48,4 @@ # PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- | --- |
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- |
 
@@ -52,0 +52,0 @@ ## Options

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

26372

increased by8.46%

Lines of code

54

increased by17.39%

No dependency changes