Process all declarations when preserve: false

plugins/postcss-contrast-color-function/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Contrast Color Function
 
+### Unreleased (patch)
+
+- Don't skip processing duplicate declarations with `{ preserve: false }` 
+
 ### 2.0.7
 
 _December 27, 2024_

plugins/postcss-contrast-color-function/dist/index.cjs

@@ -1 +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)||!r.isTokenIdent(n.value)||"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;
+"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)||!r.isTokenIdent(n.value)||"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(e?.preserve&&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;

plugins/postcss-contrast-color-function/dist/index.mjs

@@ -1 +1 @@
-import r from"@csstools/postcss-progressive-custom-properties";import{hasFallback as o,hasSupportsAtRuleAncestor as e}from"@csstools/utilities";import{isTokenIdent as s,tokenize as t,TokenType as n,NumberType as c}from"@csstools/css-tokenizer";import{isFunctionNode as a,isWhitespaceNode as l,isCommentNode as u,isTokenNode as i,replaceComponentValues as p,parseCommaSeparatedListOfComponentValues as f,FunctionNode as m,TokenNode as v,stringify as C}from"@csstools/css-parser-algorithms";import{color as E,serializeRGB as d,serializeP3 as g}from"@csstools/css-color-parser";import{contrast_ratio_wcag_2_1 as P}from"@csstools/color-helpers";const h=/^contrast-color$/i;function parseContrastColor(r){if(!a(r)||!h.test(r.getName()))return!1;const o=r.value.filter((r=>!l(r)&&!u(r)));if(o.length>2)return!1;const e=o[0],t=o[1];return!!e&&(t?!(!i(t)||!s(t.value)||"max"!==t.value[4].value.toLowerCase())&&[e,"max"]:[e])}var R;!function(r){r[r.MORE=0]="MORE",r[r.LESS=1]="LESS",r[r.NO_PREFERENCE=2]="NO_PREFERENCE"}(R||(R={}));const N=/\bcontrast-color\(/i;function transformContrastColor(r,o,e=0){const s=p(f(t({css:r})),(r=>{const e=parseContrastColor(r);if(!e)return;const[s,t]=e;if("max"===t){const o=E(r);if(!o)return;return d(o,!0)}if(t)return;const a=E(new m([n.Function,"contrast-color(",-1,-1,{value:"contrast-color"}],[n.CloseParen,")",-1,-1,void 0],[s,new v([n.Ident,"max",-1,-1,{value:"max"}])]));if(!a)return;if(o===R.MORE)return d(a,!0);const l=E(s);if(!l)return;let u=0;const i=E(d(l,!0));if(!i)return;{const r=P(i.channels,[0,0,0]),e=P(i.channels,[1,1,1]);u=o===R.LESS?r>=e?.3:.9:r>=e?.2:.95}const p=E(new m([n.Function,"oklch(",-1,-1,{value:"oklch"}],[n.CloseParen,")",-1,-1,void 0],[new v([n.Ident,"from",-1,-1,{value:"from"}]),s,new v([n.Number,u.toString(),-1,-1,{value:u,type:c.Number}]),new v([n.Ident,"c",-1,-1,{value:"c"}]),new v([n.Ident,"h",-1,-1,{value:"h"}])]));if(!p)return;const f=E(d(p,!0));if(!f)return;return P(i.channels,f.channels)<4.5?d(a,!0):g(p,!0)})),a=C(s);return a===r?r:e>10?a:N.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(!N.test(s.value))return;if(o(s))return;if(e(s,N))return;const c=transformContrastColor(s.value,R.NO_PREFERENCE);if(c===s.value)return;const a=transformContrastColor(s.value,R.LESS);if(a===s.value)return;const l=transformContrastColor(s.value,R.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};
+import r from"@csstools/postcss-progressive-custom-properties";import{hasFallback as o,hasSupportsAtRuleAncestor as e}from"@csstools/utilities";import{isTokenIdent as s,tokenize as t,TokenType as n,NumberType as c}from"@csstools/css-tokenizer";import{isFunctionNode as a,isWhitespaceNode as l,isCommentNode as u,isTokenNode as i,replaceComponentValues as p,parseCommaSeparatedListOfComponentValues as f,FunctionNode as m,TokenNode as v,stringify as C}from"@csstools/css-parser-algorithms";import{color as E,serializeRGB as d,serializeP3 as g}from"@csstools/css-color-parser";import{contrast_ratio_wcag_2_1 as P}from"@csstools/color-helpers";const h=/^contrast-color$/i;function parseContrastColor(r){if(!a(r)||!h.test(r.getName()))return!1;const o=r.value.filter((r=>!l(r)&&!u(r)));if(o.length>2)return!1;const e=o[0],t=o[1];return!!e&&(t?!(!i(t)||!s(t.value)||"max"!==t.value[4].value.toLowerCase())&&[e,"max"]:[e])}var R;!function(r){r[r.MORE=0]="MORE",r[r.LESS=1]="LESS",r[r.NO_PREFERENCE=2]="NO_PREFERENCE"}(R||(R={}));const N=/\bcontrast-color\(/i;function transformContrastColor(r,o,e=0){const s=p(f(t({css:r})),(r=>{const e=parseContrastColor(r);if(!e)return;const[s,t]=e;if("max"===t){const o=E(r);if(!o)return;return d(o,!0)}if(t)return;const a=E(new m([n.Function,"contrast-color(",-1,-1,{value:"contrast-color"}],[n.CloseParen,")",-1,-1,void 0],[s,new v([n.Ident,"max",-1,-1,{value:"max"}])]));if(!a)return;if(o===R.MORE)return d(a,!0);const l=E(s);if(!l)return;let u=0;const i=E(d(l,!0));if(!i)return;{const r=P(i.channels,[0,0,0]),e=P(i.channels,[1,1,1]);u=o===R.LESS?r>=e?.3:.9:r>=e?.2:.95}const p=E(new m([n.Function,"oklch(",-1,-1,{value:"oklch"}],[n.CloseParen,")",-1,-1,void 0],[new v([n.Ident,"from",-1,-1,{value:"from"}]),s,new v([n.Number,u.toString(),-1,-1,{value:u,type:c.Number}]),new v([n.Ident,"c",-1,-1,{value:"c"}]),new v([n.Ident,"h",-1,-1,{value:"h"}])]));if(!p)return;const f=E(d(p,!0));if(!f)return;return P(i.channels,f.channels)<4.5?d(a,!0):g(p,!0)})),a=C(s);return a===r?r:e>10?a:N.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(!N.test(s.value))return;if(r?.preserve&&o(s))return;if(e(s,N))return;const c=transformContrastColor(s.value,R.NO_PREFERENCE);if(c===s.value)return;const a=transformContrastColor(s.value,R.LESS);if(a===s.value)return;const l=transformContrastColor(s.value,R.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};

plugins/postcss-contrast-color-function/src/index.ts

@@ -19,7 +19,7 @@ const basePlugin: PluginCreator<pluginOptions> = (opts) => {
 						return;
 					}
 
-					if (hasFallback(decl)) {
+					if (opts?.preserve && hasFallback(decl)) {
 						return;
 					}
 

plugins/postcss-contrast-color-function/test/_tape.mjs

@@ -5,6 +5,12 @@ postcssTape(plugin)({
 	basic: {
 		message: 'supports basic usage',
 	},
+	'basic:preserve-false': {
+		message: 'supports basic usage',
+		options: {
+			preserve: false,
+		},
+	},
 	'variables': {
 		message: 'supports progressive custom properties',
 	},

plugins/postcss-contrast-color-function/test/basic.preserve-false.expect.css

@@ -0,0 +1,169 @@
+.dynamic {
+	color: color(display-p3 0.15472 0 0.15897);
+}@media (prefers-contrast: more) {.dynamic {
+	color: rgb(0, 0, 0);
+}
+}@media (prefers-contrast: less) {.dynamic {
+	color: color(display-p3 0.29314 0 0.30019);
+}
+}
+
+.max {
+	color: rgb(0, 0, 0);
+}
+
+.both {
+	color: color-mix(in srgb, rgb(255, 255, 255), color(display-p3 0 0.10723 0.10958));
+}
+
+@media (prefers-contrast: more) {
+
+.both {
+	color: color-mix(in srgb, rgb(255, 255, 255), rgb(0, 0, 0));
+}
+}
+
+@media (prefers-contrast: less) {
+
+.both {
+	color: color-mix(in srgb, rgb(255, 255, 255), color(display-p3 0 0.21431 0.2182));
+}
+}
+
+
+.dynamic-green {
+	color: color(display-p3 0.82734 1 0.78138);
+}
+
+
+@media (prefers-contrast: more) {
+
+
+.dynamic-green {
+	color: rgb(255, 255, 255);
+}
+}
+
+
+@media (prefers-contrast: less) {
+
+
+.dynamic-green {
+	color: rgb(255, 255, 255);
+}
+}
+
+.max-green {
+	color: rgb(255, 255, 255);
+}
+
+.dynamic-lime {
+	color: color(display-p3 0.01598 0.11486 0);
+}
+
+@media (prefers-contrast: more) {
+
+.dynamic-lime {
+	color: rgb(0, 0, 0);
+}
+}
+
+@media (prefers-contrast: less) {
+
+.dynamic-lime {
+	color: color(display-p3 0.05256 0.22698 0);
+}
+}
+
+.max-lime {
+	color: rgb(0, 0, 0);
+}
+
+.dynamic-darkgreen {
+	color: color(display-p3 0.82734 1 0.78138);
+}
+
+@media (prefers-contrast: more) {
+
+.dynamic-darkgreen {
+	color: rgb(255, 255, 255);
+}
+}
+
+@media (prefers-contrast: less) {
+
+.dynamic-darkgreen {
+	color: color(display-p3 0.71003 0.96022 0.64341);
+}
+}
+
+.max-darkgreen {
+	color: rgb(255, 255, 255);
+}
+
+.manual-fallback {
+	color: white;
+	color: rgb(255, 255, 255);
+}
+
+.ignore {
+	color: contrast-color(darkgreen min);
+}
+
+.ignore {
+	color: contrast-color(var(--foo) max);
+}
+
+.ignore {
+	color: contrast-color(blue red);
+}
+
+.nested-dynamic {
+	color: color(display-p3 1 0.9049 0.91971);
+}
+
+@media (prefers-contrast: more) {
+
+.nested-dynamic {
+	color: rgb(255, 255, 255);
+}
+}
+
+@media (prefers-contrast: less) {
+
+.nested-dynamic {
+	color: color(display-p3 1 0.80648 0.83935);
+}
+}
+
+.nested-max {
+	color: rgb(255, 255, 255);
+}
+
+.nested-dynamic-max {
+	color: color(display-p3 0.93448 0.93448 0.93448);
+}
+
+@media (prefers-contrast: more) {
+
+.nested-dynamic-max {
+	color: rgb(255, 255, 255);
+}
+}
+
+@media (prefers-contrast: less) {
+
+.nested-dynamic-max {
+	color: color(display-p3 0.86982 0.86982 0.86982);
+}
+}
+
+.nested-max-dynamic {
+	color: rgb(255, 255, 255);
+}
+
+.nested-multiple-levels {
+	color: rgb(255, 255, 255);
+	background-color: rgb(0, 0, 0);
+	border-color: rgb(255, 255, 255);
+}