@csstools/postcss-contrast-color-function 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changes to PostCSS Contrast Color Function
+
+### 1.0.0
+
+_March 31, 2024_
+
+- Initial version
+- Updated [`@csstools/color-helpers`](https://github.com/csstools/postcss-plugins/tree/main/packages/color-helpers) to [`4.1.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/color-helpers/CHANGELOG.md#410) (minor)
+- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.2.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#320) (minor)
+- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.6.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#163) (patch)

package/LICENSE.md

@@ -0,0 +1,18 @@
+MIT No Attribution (MIT-0)
+
+Copyright © CSSTools Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# PostCSS Contrast Color 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-contrast-color-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/contrast-color-function.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/contrast-color-function.svg" height="20">][css-url] 
+
+```bash
+npm install @csstools/postcss-contrast-color-function --save-dev
+```
+
+[PostCSS Contrast Color Function] lets you dynamically specify a text color with adequate contrast following the [CSS Color 5 Specification].
+
+```pcss
+.dynamic {
+	color: contrast-color(oklch(82% 0.2 330));
+}
+
+.max {
+	color: contrast-color(oklch(30% 0.2 79) max);
+}
+
+/* becomes */
+
+.dynamic {
+	color: color(display-p3 0.15441 0 0.16001);
+	color: contrast-color(oklch(82% 0.2 330));
+}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: more) {.dynamic {
+	color: rgb(0, 0, 0);
+}
+	}
+}@supports not (color: contrast-color(red max)) {@media (prefers-contrast: less) {.dynamic {
+	color: color(display-p3 0.29262 0 0.30192);
+}
+	}
+}
+
+.max {
+	color: rgb(255, 255, 255);
+	color: contrast-color(oklch(30% 0.2 79) max);
+}
+```
+
+## Usage
+
+Add [PostCSS Contrast Color Function] to your project:
+
+```bash
+npm install postcss @csstools/postcss-contrast-color-function --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssContrastColorFunction = require('@csstools/postcss-contrast-color-function');
+
+postcss([
+	postcssContrastColorFunction(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Contrast Color Function] runs in all Node environments, with special
+instructions for:
+
+- [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 notation
+is preserved. By default, it is preserved.
+
+```js
+postcssContrastColorFunction({ preserve: false })
+```
+
+```pcss
+.dynamic {
+	color: contrast-color(oklch(82% 0.2 330));
+}
+
+.max {
+	color: contrast-color(oklch(30% 0.2 79) max);
+}
+
+/* becomes */
+
+.dynamic {
+	color: color(display-p3 0.15441 0 0.16001);
+}@media (prefers-contrast: more) {.dynamic {
+	color: rgb(0, 0, 0);
+}
+}@media (prefers-contrast: less) {.dynamic {
+	color: color(display-p3 0.29262 0 0.30192);
+}
+}
+
+.max {
+	color: rgb(255, 255, 255);
+}
+```
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#contrast-color-function
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-contrast-color-function
+
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Contrast Color Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function
+[CSS Color 5 Specification]: https://drafts.csswg.org/css-color-5/#contrast-color

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/utilities"),r=require("@csstools/css-tokenizer"),s=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-color-parser"),n=require("@csstools/color-helpers");const a=/^contrast-color$/i;function parseContrastColor(e){if(!s.isFunctionNode(e)||!a.test(e.getName()))return!1;const o=e.value.filter((e=>!s.isWhitespaceNode(e)&&!s.isCommentNode(e)));if(o.length>2)return!1;const t=o[0],n=o[1];return!!t&&(n?!(!s.isTokenNode(n)||n.value[0]!==r.TokenType.Ident||"max"!==n.value[4].value.toLowerCase())&&[t,"max"]:[t])}var c;!function(e){e[e.MORE=0]="MORE",e[e.LESS=1]="LESS",e[e.NO_PREFERENCE=2]="NO_PREFERENCE"}(c||(c={}));const l=/\bcontrast-color\(/i;function transformContrastColor(e,o,a=0){const i=s.replaceComponentValues(s.parseCommaSeparatedListOfComponentValues(r.tokenize({css:e})),(e=>{const a=parseContrastColor(e);if(!a)return;const[l,i]=a;if("max"===i){const o=t.color(e);if(!o)return;return t.serializeRGB(o,!0)}if(i)return;const u=t.color(new s.FunctionNode([r.TokenType.Function,"contrast-color(",-1,-1,{value:"contrast-color"}],[r.TokenType.CloseParen,")",-1,-1,void 0],[l,new s.TokenNode([r.TokenType.Ident,"max",-1,-1,{value:"max"}])]));if(!u)return;if(o===c.MORE)return t.serializeRGB(u,!0);const p=t.color(l);if(!p)return;let f=0;const m=t.color(t.serializeRGB(p,!0));if(!m)return;{const e=n.contrast_ratio_wcag_2_1(m.channels,[0,0,0]),r=n.contrast_ratio_wcag_2_1(m.channels,[1,1,1]);f=o===c.LESS?e>=r?.3:.9:e>=r?.2:.95}const v=t.color(new s.FunctionNode([r.TokenType.Function,"oklch(",-1,-1,{value:"oklch"}],[r.TokenType.CloseParen,")",-1,-1,void 0],[new s.TokenNode([r.TokenType.Ident,"from",-1,-1,{value:"from"}]),l,new s.TokenNode([r.TokenType.Number,f.toString(),-1,-1,{value:f,type:r.NumberType.Number}]),new s.TokenNode([r.TokenType.Ident,"c",-1,-1,{value:"c"}]),new s.TokenNode([r.TokenType.Ident,"h",-1,-1,{value:"h"}])]));if(!v)return;const d=t.color(t.serializeRGB(v,!0));if(!d)return;return n.contrast_ratio_wcag_2_1(m.channels,d.channels)<4.5?t.serializeRGB(u,!0):t.serializeP3(v,!0)})),u=s.stringify(i);return u===e?e:a>10?u:l.test(u)?transformContrastColor(u,o,a+1):u}const basePlugin=e=>({postcssPlugin:"postcss-contrast-color-function",prepare:()=>({postcssPlugin:"postcss-contrast-color-function",Declaration(r,{atRule:s}){const t=r.parent;if(!t)return;if(!l.test(r.value))return;if(o.hasFallback(r))return;if(o.hasSupportsAtRuleAncestor(r,l))return;const n=transformContrastColor(r.value,c.NO_PREFERENCE);if(n===r.value)return;const a=transformContrastColor(r.value,c.LESS);if(a===r.value)return;const i=transformContrastColor(r.value,c.MORE);if(i!==r.value){if(r.cloneBefore({value:n}),n!==a){const o=t.clone();o.removeAll(),o.append(r.clone({value:a}));const n=s({name:"media",params:"(prefers-contrast: less)",source:t.source});if(n.append(o),e?.preserve){const e=s({name:"supports",params:"not (color: contrast-color(red max))",source:t.source});e.append(n),t.after(e)}else t.after(n)}if(n!==i){const o=t.clone();o.removeAll(),o.append(r.clone({value:i}));const n=s({name:"media",params:"(prefers-contrast: more)",source:t.source});if(n.append(o),e?.preserve){const e=s({name:"supports",params:"not (color: contrast-color(red max))",source:t.source});e.append(n),t.after(e)}else t.after(n)}e?.preserve||r.remove()}}})});basePlugin.postcss=!0;const postcssPlugin=o=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-contrast-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { PluginCreator } from 'postcss';
+
+/** postcss-contrast-color-function plugin options */
+export declare type pluginOptions = {
+    /** Preserve the original notation. default: true */
+    preserve?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
+};
+
+declare const postcssPlugin: PluginCreator<pluginOptions>;
+export default postcssPlugin;
+
+export { }

package/dist/index.mjs

@@ -0,0 +1 @@
+import r from"@csstools/postcss-progressive-custom-properties";import{hasFallback as o,hasSupportsAtRuleAncestor as e}from"@csstools/utilities";import{TokenType as s,tokenize as t,NumberType as n}from"@csstools/css-tokenizer";import{isFunctionNode as c,isWhitespaceNode as a,isCommentNode as l,isTokenNode as u,replaceComponentValues as i,parseCommaSeparatedListOfComponentValues as p,FunctionNode as f,TokenNode as m,stringify as v}from"@csstools/css-parser-algorithms";import{color as C,serializeRGB as E,serializeP3 as d}from"@csstools/css-color-parser";import{contrast_ratio_wcag_2_1 as g}from"@csstools/color-helpers";const P=/^contrast-color$/i;function parseContrastColor(r){if(!c(r)||!P.test(r.getName()))return!1;const o=r.value.filter((r=>!a(r)&&!l(r)));if(o.length>2)return!1;const e=o[0],t=o[1];return!!e&&(t?!(!u(t)||t.value[0]!==s.Ident||"max"!==t.value[4].value.toLowerCase())&&[e,"max"]:[e])}var h;!function(r){r[r.MORE=0]="MORE",r[r.LESS=1]="LESS",r[r.NO_PREFERENCE=2]="NO_PREFERENCE"}(h||(h={}));const R=/\bcontrast-color\(/i;function transformContrastColor(r,o,e=0){const c=i(p(t({css:r})),(r=>{const e=parseContrastColor(r);if(!e)return;const[t,c]=e;if("max"===c){const o=C(r);if(!o)return;return E(o,!0)}if(c)return;const a=C(new f([s.Function,"contrast-color(",-1,-1,{value:"contrast-color"}],[s.CloseParen,")",-1,-1,void 0],[t,new m([s.Ident,"max",-1,-1,{value:"max"}])]));if(!a)return;if(o===h.MORE)return E(a,!0);const l=C(t);if(!l)return;let u=0;const i=C(E(l,!0));if(!i)return;{const r=g(i.channels,[0,0,0]),e=g(i.channels,[1,1,1]);u=o===h.LESS?r>=e?.3:.9:r>=e?.2:.95}const p=C(new f([s.Function,"oklch(",-1,-1,{value:"oklch"}],[s.CloseParen,")",-1,-1,void 0],[new m([s.Ident,"from",-1,-1,{value:"from"}]),t,new m([s.Number,u.toString(),-1,-1,{value:u,type:n.Number}]),new m([s.Ident,"c",-1,-1,{value:"c"}]),new m([s.Ident,"h",-1,-1,{value:"h"}])]));if(!p)return;const v=C(E(p,!0));if(!v)return;return g(i.channels,v.channels)<4.5?E(a,!0):d(p,!0)})),a=v(c);return a===r?r:e>10?a:R.test(a)?transformContrastColor(a,o,e+1):a}const basePlugin=r=>({postcssPlugin:"postcss-contrast-color-function",prepare:()=>({postcssPlugin:"postcss-contrast-color-function",Declaration(s,{atRule:t}){const n=s.parent;if(!n)return;if(!R.test(s.value))return;if(o(s))return;if(e(s,R))return;const c=transformContrastColor(s.value,h.NO_PREFERENCE);if(c===s.value)return;const a=transformContrastColor(s.value,h.LESS);if(a===s.value)return;const l=transformContrastColor(s.value,h.MORE);if(l!==s.value){if(s.cloneBefore({value:c}),c!==a){const o=n.clone();o.removeAll(),o.append(s.clone({value:a}));const e=t({name:"media",params:"(prefers-contrast: less)",source:n.source});if(e.append(o),r?.preserve){const r=t({name:"supports",params:"not (color: contrast-color(red max))",source:n.source});r.append(e),n.after(r)}else n.after(e)}if(c!==l){const o=n.clone();o.removeAll(),o.append(s.clone({value:l}));const e=t({name:"media",params:"(prefers-contrast: more)",source:n.source});if(e.append(o),r?.preserve){const r=t({name:"supports",params:"not (color: contrast-color(red max))",source:n.source});r.append(e),n.after(r)}else n.after(e)}r?.preserve||s.remove()}}})});basePlugin.postcss=!0;const postcssPlugin=o=>{const e=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-contrast-color-function",plugins:[r(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -0,0 +1,75 @@
+{
+	"name": "@csstools/postcss-contrast-color-function",
+	"description": "Dynamically specify a text color with adequate contrast",
+	"version": "1.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "antonio@laguna.es",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "romainmenke@gmail.com"
+		}
+	],
+	"license": "MIT-0",
+	"funding": [
+		{
+			"type": "github",
+			"url": "https://github.com/sponsors/csstools"
+		},
+		{
+			"type": "opencollective",
+			"url": "https://opencollective.com/csstools"
+		}
+	],
+	"engines": {
+		"node": "^14 || ^16 || >=18"
+	},
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"@csstools/color-helpers": "^4.1.0",
+		"@csstools/css-color-parser": "^1.6.3",
+		"@csstools/css-parser-algorithms": "^2.6.1",
+		"@csstools/css-tokenizer": "^2.2.4",
+		"@csstools/postcss-progressive-custom-properties": "^3.2.0",
+		"@csstools/utilities": "^1.0.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.4"
+	},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-contrast-color-function#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-contrast-color-function"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"contrast",
+		"contrast-color",
+		"css",
+		"postcss-plugin",
+		"wcag"
+	]
+}