@csstools/postcss-color-mix-variadic-function-arguments 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changes to PostCSS Color Mix Variadic Function Arguments
+
+### 1.0.0
+
+_May 27, 2025_
+
+- Initial version
+- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`3.0.5`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#305) (patch)
+- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`3.0.10`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#3010) (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,91 @@
+# PostCSS Color Mix Variadic Function Arguments [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
+
+`npm install @csstools/postcss-color-mix-variadic-function-arguments --save-dev`
+
+[PostCSS Color Mix Variadic Function Arguments] lets you use the `color-mix()` function with any number of arguments following the [CSS Color 5 Specification].
+
+```css
+.red {
+	color: color-mix(in srgb, red);
+}
+
+.grey {
+	color: color-mix(in srgb, red, lime, blue);
+}
+
+/* becomes */
+
+.red {
+	color: rgb(255, 0, 0);
+}
+
+.grey {
+	color: rgb(85, 85, 85);
+}
+```
+
+> [!NOTE]
+> We can not dynamically resolve `var()` arguments in `color-mix()`, only static values will work.
+
+## Usage
+
+Add [PostCSS Color Mix Variadic Function Arguments] to your project:
+
+```bash
+npm install postcss @csstools/postcss-color-mix-variadic-function-arguments --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssColorMixVariadicFunctionArguments = require('@csstools/postcss-color-mix-variadic-function-arguments');
+
+postcss([
+	postcssColorMixVariadicFunctionArguments(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is not preserved.
+
+```js
+postcssColorMixVariadicFunctionArguments({ preserve: true })
+```
+
+```css
+.red {
+	color: color-mix(in srgb, red);
+}
+
+.grey {
+	color: color-mix(in srgb, red, lime, blue);
+}
+
+/* becomes */
+
+.red {
+	color: rgb(255, 0, 0);
+	color: color-mix(in srgb, red);
+}
+
+.grey {
+	color: rgb(85, 85, 85);
+	color: color-mix(in srgb, red, lime, blue);
+}
+```
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#color-mix-variadic-function-arguments
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-color-mix-variadic-function-arguments
+
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Color Mix Variadic Function Arguments]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-variadic-function-arguments
+[CSS Color 5 Specification]: https://www.w3.org/TR/css-color-5/#color-mix

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-color-parser"),r=require("@csstools/utilities"),t=require("@csstools/css-parser-algorithms"),o=require("@csstools/css-tokenizer");const a=/\bcolor-mix\(/i,i=/^color-mix$/i,basePlugin=s=>({postcssPlugin:"color-mix-variadic-function-arguments",Declaration(n){const l=n.value;if(!a.test(l))return;if(r.hasFallback(n))return;if(r.hasSupportsAtRuleAncestor(n,a))return;const u=o.tokenize({css:l}),c=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(s=>{if(!t.isFunctionNode(s)||!i.test(s.getName()))return;const r=e.color(s);return r&&!r.syntaxFlags.has(e.SyntaxFlag.Experimental)&&r.syntaxFlags.has(e.SyntaxFlag.ColorMixVariadic)?e.serializeRGB(r):void 0})),p=t.stringify(c);if(p===l)return;let m=p;s?.subFeatures.displayP3&&(m=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(s=>{if(!t.isFunctionNode(s)||!i.test(s.getName()))return;const r=e.color(s);return r&&!r.syntaxFlags.has(e.SyntaxFlag.Experimental)?e.colorDataFitsRGB_Gamut(r)?e.serializeRGB(r):e.serializeP3(r):void 0})))),n.cloneBefore({value:p}),s?.subFeatures.displayP3&&m!==p&&n.cloneBefore({value:m}),s?.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"color-mix-variadic-function-arguments",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import type { PluginCreator } from 'postcss';
+
+/** color-mix-variadic-function-arguments plugin options */
+export declare type pluginOptions = {
+    /** Preserve the original notation. default: false */
+    preserve?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
+    /** Toggle sub features. default: { displayP3: true } */
+    subFeatures?: {
+        /** Enable displayP3 fallbacks. default: true */
+        displayP3?: boolean;
+    };
+};
+
+declare const postcssPlugin: PluginCreator<pluginOptions>;
+export default postcssPlugin;
+
+export { }

package/dist/index.mjs

@@ -0,0 +1 @@
+import s from"@csstools/postcss-progressive-custom-properties";import{color as e,SyntaxFlag as r,serializeRGB as t,colorDataFitsRGB_Gamut as o,serializeP3 as i}from"@csstools/css-color-parser";import{hasFallback as a,hasSupportsAtRuleAncestor as n}from"@csstools/utilities";import{replaceComponentValues as c,parseCommaSeparatedListOfComponentValues as l,isFunctionNode as u,stringify as p}from"@csstools/css-parser-algorithms";import{tokenize as m}from"@csstools/css-tokenizer";const f=/\bcolor-mix\(/i,g=/^color-mix$/i,basePlugin=s=>({postcssPlugin:"color-mix-variadic-function-arguments",Declaration(v){const b=v.value;if(!f.test(b))return;if(a(v))return;if(n(v,f))return;const d=m({css:b}),x=c(l(d),(s=>{if(!u(s)||!g.test(s.getName()))return;const o=e(s);return o&&!o.syntaxFlags.has(r.Experimental)&&o.syntaxFlags.has(r.ColorMixVariadic)?t(o):void 0})),P=p(x);if(P===b)return;let F=P;s?.subFeatures.displayP3&&(F=p(c(l(d),(s=>{if(!u(s)||!g.test(s.getName()))return;const a=e(s);return a&&!a.syntaxFlags.has(r.Experimental)?o(a)?t(a):i(a):void 0})))),v.cloneBefore({value:P}),s?.subFeatures.displayP3&&F!==P&&v.cloneBefore({value:F}),s?.preserve||v.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"color-mix-variadic-function-arguments",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -0,0 +1,76 @@
+{
+	"name": "@csstools/postcss-color-mix-variadic-function-arguments",
+	"description": "Mix any number of colors with the color-mix function in CSS",
+	"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": ">=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/css-color-parser": "^3.0.10",
+		"@csstools/css-parser-algorithms": "^3.0.5",
+		"@csstools/css-tokenizer": "^3.0.4",
+		"@csstools/postcss-progressive-custom-properties": "^4.1.0",
+		"@csstools/utilities": "^2.0.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.4"
+	},
+	"scripts": {},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-variadic-function-arguments#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-color-mix-variadic-function-arguments"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"color-mix",
+		"css",
+		"interpolation",
+		"postcss-plugin",
+		"syntax",
+		"variadic"
+	]
+}