@csstools/postcss-color-mix-function 2.0.8 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changes to PostCSS Color Mix Function
2
2
 
3
+ ### 2.0.9
4
+
5
+ _December 31, 2023_
6
+
7
+ - Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#223) (patch)
8
+ - Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#250) (minor)
9
+ - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#151) (patch)
10
+
3
11
  ### 2.0.8
4
12
 
5
13
  _December 15, 2023_
@@ -17,10 +25,4 @@ _October 9, 2023_
17
25
  - 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)
18
26
  - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.2`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#302) (patch)
19
27
 
20
- ### 2.0.6
21
-
22
- _October 2, 2023_
23
-
24
- - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#133) (patch)
25
-
26
28
  [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function/CHANGELOG.md)
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PostCSS Color Mix Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
2
2
 
3
- [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-mix-function.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-mix.svg" height="20">][css-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]
3
+ [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-mix-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/color-mix.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-mix.svg" height="20">][css-url]
4
4
 
5
5
  ```bash
6
6
  npm install @csstools/postcss-color-mix-function --save-dev
@@ -20,6 +20,9 @@ npm install @csstools/postcss-color-mix-function --save-dev
20
20
  }
21
21
  ```
22
22
 
23
+ > [!NOTE]
24
+ > We can not dynamically resolve `var()` arguments in `color-mix()`, only static values will work.
25
+
23
26
  ## Usage
24
27
 
25
28
  Add [PostCSS Color Mix Function] to your project:
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&-1!==s.params.toLowerCase().indexOf("color-mix("))return!0;s=s.parent}else s=s.parent;return!1}const o=/(color-mix)\(/i,a=/^(color-mix)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-mix-function",Declaration:n=>{const i=n.value;if(!o.test(i))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.Experimental))return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;e?.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),e?.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),e?.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
1
+ "use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&-1!==s.params.toLowerCase().indexOf("color-mix("))return!0;s=s.parent}else s=s.parent;return!1}const o=/(color-mix)\(/i,a=/^(color-mix)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-mix-function",Declaration:n=>{const i=n.value;if(!o.test(i))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(!t.isFunctionNode(e)||!a.test(e.getName()))return;const s=r.color(e);return s&&!s.syntaxFlags.has(r.SyntaxFlag.Experimental)?r.serializeRGB(s):void 0})),c=t.stringify(u);if(c===i)return;let p=c;e?.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(!t.isFunctionNode(e)||!a.test(e.getName()))return;const s=r.color(e);return s&&!s.syntaxFlags.has(r.SyntaxFlag.Experimental)?r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s):void 0})))),n.cloneBefore({value:c}),e?.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),e?.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e}from"@csstools/css-tokenizer";import{color as r,SyntaxFlag as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as a}from"@csstools/css-color-parser";import{replaceComponentValues as i,parseCommaSeparatedListOfComponentValues as u,isFunctionNode as c,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&-1!==e.params.toLowerCase().indexOf("color-mix("))return!0;e=e.parent}else e=e.parent;return!1}const l=/(color-mix)\(/i,f=/^(color-mix)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const b=m.value;if(!l.test(b))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const g=e({css:b}),P=i(u(g),(s=>{if(c(s)&&f.test(s.getName())){const e=r(s);if(!e)return;if(e.syntaxFlags.has(t.Experimental))return;return o(e)}})),d=p(P);if(d===b)return;let v=d;s?.subFeatures.displayP3&&(v=p(i(u(g),(s=>{if(c(s)&&f.test(s.getName())){const e=r(s);if(!e)return;return n(e)?o(e):a(e)}})))),m.cloneBefore({value:d}),s?.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),s?.preserve||m.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:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
1
+ import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e}from"@csstools/css-tokenizer";import{color as r,SyntaxFlag as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as a}from"@csstools/css-color-parser";import{replaceComponentValues as i,parseCommaSeparatedListOfComponentValues as p,isFunctionNode as c,stringify as u}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&-1!==e.params.toLowerCase().indexOf("color-mix("))return!0;e=e.parent}else e=e.parent;return!1}const l=/(color-mix)\(/i,f=/^(color-mix)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const g=m.value;if(!l.test(g))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const b=e({css:g}),d=i(p(b),(s=>{if(!c(s)||!f.test(s.getName()))return;const e=r(s);return e&&!e.syntaxFlags.has(t.Experimental)?o(e):void 0})),v=u(d);if(v===g)return;let x=v;s?.subFeatures.displayP3&&(x=u(i(p(b),(s=>{if(!c(s)||!f.test(s.getName()))return;const e=r(s);return e&&!e.syntaxFlags.has(t.Experimental)?n(e)?o(e):a(e):void 0})))),m.cloneBefore({value:v}),s?.subFeatures.displayP3&&x!==v&&m.cloneBefore({value:x}),s?.preserve||m.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:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@csstools/postcss-color-mix-function",
3
3
  "description": "Use the color-mix function in CSS",
4
- "version": "2.0.8",
4
+ "version": "2.0.9",
5
5
  "contributors": [
6
6
  {
7
7
  "name": "Antonio Laguna",
@@ -48,9 +48,9 @@
48
48
  "dist"
49
49
  ],
50
50
  "dependencies": {
51
- "@csstools/css-color-parser": "^1.5.0",
52
- "@csstools/css-parser-algorithms": "^2.4.0",
53
- "@csstools/css-tokenizer": "^2.2.2",
51
+ "@csstools/css-color-parser": "^1.5.1",
52
+ "@csstools/css-parser-algorithms": "^2.5.0",
53
+ "@csstools/css-tokenizer": "^2.2.3",
54
54
  "@csstools/postcss-progressive-custom-properties": "^3.0.3"
55
55
  },
56
56
  "peerDependencies": {