@csstools/postcss-hwb-function 3.0.8 → 3.0.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changes to PostCSS HWB Function
 
+### 3.0.9
+
+_February 19, 2024_
+
+- Reuse code with `@csstools/utilities`
+- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.6.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#260) (minor)
+- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.1.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#310) (minor)
+- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#152) (patch)
+
 ### 3.0.8
 
 _December 31, 2023_
@@ -17,10 +26,4 @@ _December 15, 2023_
 - Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#240) (minor)
 - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#150) (minor)
 
-### 3.0.6
-
-_October 9, 2023_
-
-- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#140) (minor)
-
 [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function/CHANGELOG.md)

package/README.md

@@ -1,26 +1,30 @@
-# PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-hwb-function.svg" height="20">][npm-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
-<br><br>
-[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/hwb-function.svg" height="20">][css-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][css-url]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-hwb-function.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/hwb-function.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][css-url] 
 
-[PostCSS HWB Function] lets you use `hwb` color functions in
-CSS, following the [CSS Color] specification.
+```bash
+npm install @csstools/postcss-hwb-function --save-dev
+```
+
+[PostCSS HWB Function] lets you use the `hwb()` color function in CSS, following [CSS Color Module 4].
 
 ```pcss
 a {
 	color: hwb(194 0% 0%);
+}
+
+b {
 	color: hwb(194 0% 0% / .5);
 }
 
 /* becomes */
 
 a {
-	color: rgb(0, 195, 255);
-	color: rgba(0, 195, 255, .5);
+	color: rgb(0, 196, 255);
+}
+
+b {
+	color: rgba(0, 196, 255, 0.5);
 }
 ```
 
@@ -39,21 +43,26 @@ const postcss = require('postcss');
 const postcssHWBFunction = require('@csstools/postcss-hwb-function');
 
 postcss([
-  postcssHWBFunction(/* pluginOptions */)
+	postcssHWBFunction(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
 [PostCSS HWB Function] runs in all Node environments, with special
 instructions for:
 
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- |
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
 
 ## Options
 
 ### preserve
 
-The `preserve` option determines whether the original functional color notation
+The `preserve` option determines whether the original notation
 is preserved. By default, it is not preserved.
 
 ```js
@@ -63,15 +72,21 @@ postcssHWBFunction({ preserve: true })
 ```pcss
 a {
 	color: hwb(194 0% 0%);
+}
+
+b {
 	color: hwb(194 0% 0% / .5);
 }
 
 /* becomes */
 
 a {
-	color: rgb(0, 195, 255);
+	color: rgb(0, 196, 255);
 	color: hwb(194 0% 0%);
-	color: rgba(0, 195, 255, .5);
+}
+
+b {
+	color: rgba(0, 196, 255, 0.5);
 	color: hwb(194 0% 0% / .5);
 }
 ```
@@ -81,9 +96,6 @@ a {
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/@csstools/postcss-hwb-function
 
-[CSS Color]: https://drafts.csswg.org/css-color/#the-hwb-notation
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
 [PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function
+[CSS Color Module 4]: https://www.w3.org/TR/css-color-4/#the-hwb-notation

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-tokenizer");const s="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(s))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e<s;e++){const s=t.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===r)return!0}return!1}const o=/hwb\(/i,a=/^hwb$/i,postcssPlugin=n=>{const l="preserve"in Object(n)&&Boolean(n?.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(n,{postcss:p})=>{const c=n.value;if(!o.test(c))return;if(l&&hasSupportsAtRuleAncestor(n))return;if(hasFallback(n))return;const u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(r.tokenize({css:c})),(r=>{if(!t.isFunctionNode(r)||!a.test(r.getName()))return;const s=e.color(r);return s&&!(s.syntaxFlags.has(e.SyntaxFlag.Experimental)||s.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)||s.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax))?e.serializeRGB(s):void 0})),i=t.stringify(u);if(i!==c)if(n.variable&&l&&n.parent){const e=n.parent,t=p.atRule({name:"supports",params:s,source:n.source}),r=e.clone();r.removeAll(),r.append(n.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,s),n.replaceWith(n.clone({value:i}))}else l?n.cloneBefore({value:i}):n.replaceWith(n.clone({value:i}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-color-parser"),t=require("@csstools/utilities"),r=require("@csstools/css-parser-algorithms"),o=require("@csstools/css-tokenizer");const a=/\bhwb\(/i,n=/^hwb$/i,basePlugin=s=>({postcssPlugin:"postcss-hwb-function",Declaration:i=>{const c=i.value;if(!a.test(c))return;if(t.hasFallback(i))return;if(t.hasSupportsAtRuleAncestor(i,a))return;const l=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(o.tokenize({css:c})),(s=>{if(!r.isFunctionNode(s)||!n.test(s.getName()))return;const t=e.color(s);return t&&!(t.syntaxFlags.has(e.SyntaxFlag.Experimental)||t.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)||t.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax))?e.serializeRGB(t):void 0})),u=r.stringify(l);u!==c&&(i.cloneBefore({value:u}),s?.preserve||i.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-hwb-function",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.d.ts

@@ -1,9 +1,17 @@
 import type { PluginCreator } from 'postcss';
 
+/** postcss-hwb-function plugin options */
+export declare type basePluginOptions = {
+    /** Preserve the original notation. default: false */
+    preserve?: boolean;
+};
+
 /** postcss-hwb-function plugin options */
 export declare type pluginOptions = {
     /** Preserve the original notation. default: false */
     preserve?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
 };
 
 /** Transform hwb() functions in CSS. */

package/dist/index.mjs

@@ -1 +1 @@
-import{color as e,SyntaxFlag as t,serializeRGB as r}from"@csstools/css-color-parser";import{replaceComponentValues as s,parseCommaSeparatedListOfComponentValues as o,isFunctionNode as n,stringify as a}from"@csstools/css-parser-algorithms";import{tokenize as p}from"@csstools/css-tokenizer";const l="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(l))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e<s;e++){const s=t.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===r)return!0}return!1}const c=/hwb\(/i,u=/^hwb$/i,postcssPlugin=i=>{const f="preserve"in Object(i)&&Boolean(i?.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(i,{postcss:m})=>{const h=i.value;if(!c.test(h))return;if(f&&hasSupportsAtRuleAncestor(i))return;if(hasFallback(i))return;const v=s(o(p({css:h})),(s=>{if(!n(s)||!u.test(s.getName()))return;const o=e(s);return o&&!(o.syntaxFlags.has(t.Experimental)||o.syntaxFlags.has(t.HasNoneKeywords)||o.syntaxFlags.has(t.RelativeColorSyntax))?r(o):void 0})),d=a(v);if(d!==h)if(i.variable&&f&&i.parent){const e=i.parent,t=m.atRule({name:"supports",params:l,source:i.source}),r=e.clone();r.removeAll(),r.append(i.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,l),i.replaceWith(i.clone({value:d}))}else f?i.cloneBefore({value:d}):i.replaceWith(i.clone({value:d}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import s from"@csstools/postcss-progressive-custom-properties";import{color as o,SyntaxFlag as e,serializeRGB as t}from"@csstools/css-color-parser";import{hasFallback as r,hasSupportsAtRuleAncestor as i}from"@csstools/utilities";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as a,stringify as p}from"@csstools/css-parser-algorithms";import{tokenize as l}from"@csstools/css-tokenizer";const u=/\bhwb\(/i,m=/^hwb$/i,basePlugin=s=>({postcssPlugin:"postcss-hwb-function",Declaration:f=>{const g=f.value;if(!u.test(g))return;if(r(f))return;if(i(f,u))return;const v=n(c(l({css:g})),(s=>{if(!a(s)||!m.test(s.getName()))return;const r=o(s);return r&&!(r.syntaxFlags.has(e.Experimental)||r.syntaxFlags.has(e.HasNoneKeywords)||r.syntaxFlags.has(e.RelativeColorSyntax))?t(r):void 0})),b=p(v);b!==g&&(f.cloneBefore({value:b}),s?.preserve||f.remove())}});basePlugin.postcss=!0;const postcssPlugin=o=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},o);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-hwb-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -1,8 +1,18 @@
 {
 	"name": "@csstools/postcss-hwb-function",
 	"description": "Use hwb() color functions in CSS",
-	"version": "3.0.8",
-	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"version": "3.0.9",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "antonio@laguna.es",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "romainmenke@gmail.com"
+		}
+	],
 	"license": "MIT-0",
 	"funding": [
 		{
@@ -33,15 +43,16 @@
 	},
 	"files": [
 		"CHANGELOG.md",
-		"INSTALL.md",
 		"LICENSE.md",
 		"README.md",
 		"dist"
 	],
 	"dependencies": {
-		"@csstools/css-color-parser": "^1.5.1",
-		"@csstools/css-parser-algorithms": "^2.5.0",
-		"@csstools/css-tokenizer": "^2.2.3"
+		"@csstools/css-color-parser": "^1.5.2",
+		"@csstools/css-parser-algorithms": "^2.6.0",
+		"@csstools/css-tokenizer": "^2.2.3",
+		"@csstools/postcss-progressive-custom-properties": "^3.1.0",
+		"@csstools/utilities": "^1.0.0"
 	},
 	"peerDependencies": {
 		"postcss": "^8.4"
@@ -55,19 +66,12 @@
 	"bugs": "https://github.com/csstools/postcss-plugins/issues",
 	"keywords": [
 		"color",
-		"comma",
 		"css",
 		"design",
-		"functional",
-		"hsl",
-		"hsla",
 		"hwb",
 		"notation",
 		"postcss",
 		"postcss-plugin",
-		"rgb",
-		"rgba",
-		"space",
 		"syntax"
 	]
 }

package/INSTALL.md

@@ -1,235 +0,0 @@
-# Installing PostCSS HWB Function
-
-[PostCSS HWB Function] runs in all Node environments, with special instructions for:
-
-- [Node](#node)
-- [PostCSS CLI](#postcss-cli)
-- [PostCSS Load Config](#postcss-load-config)
-- [Webpack](#webpack)
-- [Next.js](#nextjs)
-- [Gulp](#gulp)
-- [Grunt](#grunt)
-
-
-
-## Node
-
-Add [PostCSS HWB Function] to your project:
-
-```bash
-npm install postcss @csstools/postcss-hwb-function --save-dev
-```
-
-Use it as a [PostCSS] plugin:
-
-```js
-// commonjs
-const postcss = require('postcss');
-const postcssHWBFunction = require('@csstools/postcss-hwb-function');
-
-postcss([
-	postcssHWBFunction(/* pluginOptions */)
-]).process(YOUR_CSS /*, processOptions */);
-```
-
-```js
-// esm
-import postcss from 'postcss';
-import postcssHWBFunction from '@csstools/postcss-hwb-function';
-
-postcss([
-	postcssHWBFunction(/* pluginOptions */)
-]).process(YOUR_CSS /*, processOptions */);
-```
-
-## PostCSS CLI
-
-Add [PostCSS CLI] to your project:
-
-```bash
-npm install postcss-cli @csstools/postcss-hwb-function --save-dev
-```
-
-Use [PostCSS HWB Function] in your `postcss.config.js` configuration file:
-
-```js
-const postcssHWBFunction = require('@csstools/postcss-hwb-function');
-
-module.exports = {
-	plugins: [
-		postcssHWBFunction(/* pluginOptions */)
-	]
-}
-```
-
-## 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
-
-_Webpack version 5_
-
-Add [PostCSS Loader] to your project:
-
-```bash
-npm install postcss-loader @csstools/postcss-hwb-function --save-dev
-```
-
-Use [PostCSS HWB Function] in your Webpack configuration:
-
-```js
-module.exports = {
-	module: {
-		rules: [
-			{
-				test: /\.css$/i,
-				use: [
-					"style-loader",
-					{
-						loader: "css-loader",
-						options: { importLoaders: 1 },
-					},
-					{
-						loader: "postcss-loader",
-						options: {
-							postcssOptions: {
-								plugins: [
-									// Other plugins,
-									[
-										"@csstools/postcss-hwb-function",
-										{
-											// Options
-										},
-									],
-								],
-							},
-						},
-					},
-				],
-			},
-		],
-	},
-};
-```
-
-## Next.js
-
-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 @csstools/postcss-hwb-function --save-dev
-```
-
-Use [PostCSS HWB Function] in your `postcss.config.json` file:
-
-```json
-{
-	"plugins": [
-		"@csstools/postcss-hwb-function"
-	]
-}
-```
-
-```json5
-{
-	"plugins": [
-		[
-			"@csstools/postcss-hwb-function",
-			{
-				// Optionally add plugin options
-			}
-		]
-	]
-}
-```
-
-## Gulp
-
-Add [Gulp PostCSS] to your project:
-
-```bash
-npm install gulp-postcss @csstools/postcss-hwb-function --save-dev
-```
-
-Use [PostCSS HWB Function] in your Gulpfile:
-
-```js
-const postcss = require('gulp-postcss');
-const postcssHWBFunction = require('@csstools/postcss-hwb-function');
-
-gulp.task('css', function () {
-	var plugins = [
-		postcssHWBFunction(/* pluginOptions */)
-	];
-
-	return gulp.src('./src/*.css')
-		.pipe(postcss(plugins))
-		.pipe(gulp.dest('.'));
-});
-```
-
-## Grunt
-
-Add [Grunt PostCSS] to your project:
-
-```bash
-npm install grunt-postcss @csstools/postcss-hwb-function --save-dev
-```
-
-Use [PostCSS HWB Function] in your Gruntfile:
-
-```js
-const postcssHWBFunction = require('@csstools/postcss-hwb-function');
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-	postcss: {
-		options: {
-			processors: [
-			postcssHWBFunction(/* pluginOptions */)
-			]
-		},
-		dist: {
-			src: '*.css'
-		}
-	}
-});
-```
-
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[PostCSS]: https://github.com/postcss/postcss
-[PostCSS CLI]: https://github.com/postcss/postcss-cli
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
-[PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function
-[Next.js]: https://nextjs.org