@csstools/postcss-progressive-custom-properties 1.0.0 → 1.3.0

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,20 @@
1
1
  # Changes to PostCSS Progressive Custom Properties
2
2
 
3
- ## 1.0.0 Unreleased
3
+ ## 1.3.0 (March 7, 2022)
4
+
5
+ - Add matching rules for `color-mix`
6
+ - Fix matching rules for gradient functions
7
+ - Reduce matchers size
8
+
9
+ ## 1.2.0 (February 15, 2022)
10
+
11
+ - More matching rules for [double position gradients](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme).
12
+
13
+ ## 1.1.0 (February 12, 2022)
14
+
15
+ - No longer uses custom properties in `@supports` rules.
16
+ - Implement AST matching for values and units and generate minimal `@supports` for select features.
17
+
18
+ ## 1.0.0 (February 6, 2022)
4
19
 
5
20
  Initial release
package/README.md CHANGED
@@ -28,7 +28,7 @@ The solution is to wrap Custom Property declarations in an `@supports` rule.
28
28
  --a-color: red;
29
29
  }
30
30
 
31
- @supports (--a-color: oklch(40% 0.234 0.39 / var(--opacity-50))) {
31
+ @supports (color: oklch(0% 0 0)) {
32
32
  :root {
33
33
  --a-color: oklch(40% 0.234 0.39 / var(--opacity-50));
34
34
  }
@@ -94,6 +94,14 @@ postcss([
94
94
  ]).process(YOUR_CSS /*, processOptions */);
95
95
  ```
96
96
 
97
+ ## @supports
98
+
99
+ This plugin wraps Custom Property override declarations in an `@supports` rule.
100
+ With PostCSS 8 this trigger declaration visitors to run again.
101
+
102
+ Make sure your plugin detects and ignores values inside relevant `@supports` rules.
103
+
104
+
97
105
  [PostCSS Progressive Custom Properties] runs in all Node environments, with special instructions for:
98
106
 
99
107
  | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
@@ -0,0 +1,2 @@
1
+ import type { Node } from 'postcss-value-parser';
2
+ export declare function doublePositionGradients(node: Node): Array<string>;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";const e=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const s=[],t=new Set;e.each((o=>{if("decl"!==o.type)return;if(!o.variable)return;if("initial"===o.value.trim())return;if(""===o.value.trim())return;if(!t.has(o.prop.toString()))return void t.add(o.prop.toString());const n=r.atRule({name:"supports",params:`(${o.prop}: ${o.value})`,source:e.source,raws:{before:"\n\n",after:"\n"}}),p=e.clone();p.removeAll(),p.raws.before="\n",p.append(o.clone()),o.remove(),n.append(p),s.push(n)})),0!==s.length&&s.reverse().forEach((r=>{e.after(r)}))}});e.postcss=!0,module.exports=e;
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=e(require("postcss-value-parser"));const a=[{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color-mix(in oklch, #000, #fff)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function p(e,r){if(e.isVariable&&r)return!0;if(e.type!==r.type)return!1;if(function(e,r){if("space"===e.type&&"space"===r.type&&e.value.trim()===r.value.trim())return!1;if(e.dimension&&r.dimension)return e.dimension.unit!==r.dimension.unit;if(e.value!==r.value)return!0;return!1}(e,r))return!1;if(e.nodes&&r.nodes){for(let a=0;a<e.nodes.length;a++){let t=a,i=a;for(;e.nodes[t]&&"space"===e.nodes[t].type;)t++;for(;r.nodes[i]&&"space"===r.nodes[i].type;)i++;if(!!e.nodes[t]!=!!r.nodes[i])return!1;if(!p(e.nodes[t],r.nodes[i]))return!1}return!0}return!0}const t=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function i(e){const i=[],o=[];a.forEach((r=>{e.indexOf(r.sniff)>-1&&o.push(r)}));try{r.default(e).walk((e=>{try{e.dimension=r.default.unit(e.value)}finally{!1===e.dimension&&delete e.dimension}for(let r=0;r<o.length;r++){const a=o[r];for(let r=0;r<a.matchers.length;r++){if(p(a.matchers[r],e))return void i.push(`(${a.property}: ${a.supports})`)}}i.push(...function(e){const r=[];if("function"===e.type&&("conic-gradient"===e.value||"linear-gradient"===e.value||"radial-gradient"===e.value||"repeating-conic-gradient"===e.value||"repeating-linear-gradient"===e.value||"repeating-radial-gradient"===e.value)){let a=0,p=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&t.includes(s.value)&&(p=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value){if("word"!==s.type&&"function"!==s.type||a++,i)switch(e.value){case"conic-gradient":r.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":r.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":r.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":r.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":r.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":r.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!p&&3===a)switch(e.value){case"conic-gradient":r.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":r.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":r.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":r.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":r.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":r.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else a=0,p=!1}}return r}(e))}))}catch(e){}return Array.from(new Set(i))}const o=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const a=[],p=new Set;e.each((t=>{if("decl"!==t.type)return;if(!t.variable)return;if("initial"===t.value.trim())return;if(""===t.value.trim())return;if(!p.has(t.prop.toString()))return void p.add(t.prop.toString());const o=i(t.value);if(!o.length)return;const s=r.atRule({name:"supports",params:o.join(" and "),source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(t.clone()),t.remove(),s.append(l),a.push(s)})),0!==a.length&&a.reverse().forEach((r=>{e.after(r)}))}});o.postcss=!0,module.exports=o;
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- const e=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const t=[],s=new Set;e.each((o=>{if("decl"!==o.type)return;if(!o.variable)return;if("initial"===o.value.trim())return;if(""===o.value.trim())return;if(!s.has(o.prop.toString()))return void s.add(o.prop.toString());const n=r.atRule({name:"supports",params:`(${o.prop}: ${o.value})`,source:e.source,raws:{before:"\n\n",after:"\n"}}),p=e.clone();p.removeAll(),p.raws.before="\n",p.append(o.clone()),o.remove(),n.append(p),t.push(n)})),0!==t.length&&t.reverse().forEach((r=>{e.after(r)}))}});e.postcss=!0;export{e as default};
1
+ import e from"postcss-value-parser";const r=[{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color-mix(in oklch, #000, #fff)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function a(e,r){if(e.isVariable&&r)return!0;if(e.type!==r.type)return!1;if(function(e,r){if("space"===e.type&&"space"===r.type&&e.value.trim()===r.value.trim())return!1;if(e.dimension&&r.dimension)return e.dimension.unit!==r.dimension.unit;if(e.value!==r.value)return!0;return!1}(e,r))return!1;if(e.nodes&&r.nodes){for(let p=0;p<e.nodes.length;p++){let t=p,i=p;for(;e.nodes[t]&&"space"===e.nodes[t].type;)t++;for(;r.nodes[i]&&"space"===r.nodes[i].type;)i++;if(!!e.nodes[t]!=!!r.nodes[i])return!1;if(!a(e.nodes[t],r.nodes[i]))return!1}return!0}return!0}const p=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function t(t){const i=[],o=[];r.forEach((e=>{t.indexOf(e.sniff)>-1&&o.push(e)}));try{e(t).walk((r=>{try{r.dimension=e.unit(r.value)}finally{!1===r.dimension&&delete r.dimension}for(let e=0;e<o.length;e++){const p=o[e];for(let e=0;e<p.matchers.length;e++){if(a(p.matchers[e],r))return void i.push(`(${p.property}: ${p.supports})`)}}i.push(...function(e){const r=[];if("function"===e.type&&("conic-gradient"===e.value||"linear-gradient"===e.value||"radial-gradient"===e.value||"repeating-conic-gradient"===e.value||"repeating-linear-gradient"===e.value||"repeating-radial-gradient"===e.value)){let a=0,t=!1,i=!1;e:for(let o=0;o<e.nodes.length;o++){const s=e.nodes[o];if("word"===s.type&&p.includes(s.value)&&(t=!0),"div"!==s.type||","!==s.value.trim())if("word"!==s.type||"in"!==s.value){if("word"!==s.type&&"function"!==s.type||a++,i)switch(e.value){case"conic-gradient":r.push("(background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":r.push("(background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":r.push("(background: radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":r.push("(background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":r.push("(background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":r.push("(background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px))");break e}if(!t&&3===a)switch(e.value){case"conic-gradient":r.push("(background: conic-gradient(red 0deg, red 0deg 1deg, red 2deg))");break e;case"linear-gradient":r.push("(background: linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"radial-gradient":r.push("(background: radial-gradient(red, red 1px 2px, red 3px))");break e;case"repeating-conic-gradient":r.push("(background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg))");break e;case"repeating-linear-gradient":r.push("(background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%))");break e;case"repeating-radial-gradient":r.push("(background: repeating-radial-gradient(red, red 1px 2px, red 3px))");break e}}else i=!0;else a=0,t=!1}}return r}(r))}))}catch(e){}return Array.from(new Set(i))}const i=()=>({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const a=[],p=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim())return;if(""===i.value.trim())return;if(!p.has(i.prop.toString()))return void p.add(i.prop.toString());const o=t(i.value);if(!o.length)return;const s=r.atRule({name:"supports",params:o.join(" and "),source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(i.clone()),i.remove(),s.append(l),a.push(s)})),0!==a.length&&a.reverse().forEach((r=>{e.after(r)}))}});i.postcss=!0;export{i as default};
@@ -0,0 +1 @@
1
+ export declare function matches(a: any, b: any): boolean;
@@ -0,0 +1,33 @@
1
+ export declare const matchers: ({
2
+ supports: string;
3
+ property: string;
4
+ sniff: string;
5
+ matchers: {
6
+ type: string;
7
+ value: string;
8
+ nodes: ({
9
+ type: string;
10
+ value: string;
11
+ isVariable?: undefined;
12
+ } | {
13
+ type: string;
14
+ value?: undefined;
15
+ isVariable?: undefined;
16
+ } | {
17
+ type: string;
18
+ isVariable: boolean;
19
+ value?: undefined;
20
+ })[];
21
+ }[];
22
+ } | {
23
+ supports: string;
24
+ property: string;
25
+ sniff: string;
26
+ matchers: {
27
+ type: string;
28
+ value: string;
29
+ dimension: {
30
+ unit: string;
31
+ };
32
+ }[];
33
+ })[];
@@ -0,0 +1 @@
1
+ export declare function supportConditionsFromValue(value: string): Array<string>;
package/package.json CHANGED
@@ -1,60 +1,69 @@
1
1
  {
2
- "name": "@csstools/postcss-progressive-custom-properties",
3
- "version": "1.0.0",
4
- "description": "Correctly declare progressive enhancements for CSS Custom Properties.",
5
- "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
- "license": "CC0-1.0",
7
- "engines": {
8
- "node": "^12 || ^14 || >=16"
9
- },
10
- "main": "dist/index.cjs",
11
- "module": "dist/index.mjs",
12
- "types": "dist/index.d.ts",
13
- "exports": {
14
- ".": {
15
- "import": "./dist/index.mjs",
16
- "require": "./dist/index.cjs",
17
- "default": "./dist/index.mjs"
18
- }
19
- },
20
- "files": [
21
- "CHANGELOG.md",
22
- "LICENSE.md",
23
- "README.md",
24
- "dist"
25
- ],
26
- "scripts": {
27
- "build": "rollup -c ../../rollup/default.js",
28
- "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
29
- "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
30
- "prepublishOnly": "npm run clean && npm run build && npm run test",
31
- "stryker": "stryker run --logLevel error",
32
- "test": "node .tape.mjs && npm run test:exports",
33
- "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs",
34
- "test:cli": "bash ./test/cli/test.sh",
35
- "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
36
- },
37
- "peerDependencies": {
38
- "postcss": "^8.3"
39
- },
40
- "keywords": [
41
- "postcss",
42
- "css",
43
- "postcss-plugin",
44
- "utility",
45
- "custom",
46
- "properties",
47
- "declarations",
48
- "variables",
49
- "vars",
50
- "progressive"
51
- ],
52
- "repository": {
53
- "type": "git",
54
- "url": "https://github.com/csstools/postcss-plugins.git",
55
- "directory": "plugins/postcss-progressive-custom-properties"
56
- },
57
- "volta": {
58
- "extends": "../../package.json"
59
- }
2
+ "name": "@csstools/postcss-progressive-custom-properties",
3
+ "description": "Correctly declare progressive enhancements for CSS Custom Properties.",
4
+ "version": "1.3.0",
5
+ "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
+ "license": "CC0-1.0",
7
+ "engines": {
8
+ "node": "^12 || ^14 || >=16"
9
+ },
10
+ "main": "dist/index.cjs",
11
+ "module": "dist/index.mjs",
12
+ "types": "dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.cjs",
17
+ "default": "./dist/index.mjs"
18
+ }
19
+ },
20
+ "files": [
21
+ "CHANGELOG.md",
22
+ "LICENSE.md",
23
+ "README.md",
24
+ "dist"
25
+ ],
26
+ "dependencies": {
27
+ "postcss-value-parser": "^4.2.0"
28
+ },
29
+ "peerDependencies": {
30
+ "postcss": "^8.3"
31
+ },
32
+ "scripts": {
33
+ "build": "node ./generate/matchers.mjs && eslint --fix ./src/matchers.ts && rollup -c ../../rollup/default.js",
34
+ "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
35
+ "docs": "node ../../.github/bin/generate-docs/install.mjs",
36
+ "lint": "npm run lint:eslint && npm run lint:package-json",
37
+ "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
38
+ "lint:package-json": "node ../../.github/bin/format-package-json.mjs",
39
+ "prepublishOnly": "npm run clean && npm run build && npm run test",
40
+ "test": "node .tape.mjs && npm run test:exports",
41
+ "test:cli": "bash ./test/cli/test.sh",
42
+ "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
43
+ "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
44
+ },
45
+ "repository": {
46
+ "type": "git",
47
+ "url": "https://github.com/csstools/postcss-plugins.git",
48
+ "directory": "plugins/postcss-progressive-custom-properties"
49
+ },
50
+ "keywords": [
51
+ "css",
52
+ "custom",
53
+ "declarations",
54
+ "postcss",
55
+ "postcss-plugin",
56
+ "progressive",
57
+ "properties",
58
+ "utility",
59
+ "variables",
60
+ "vars"
61
+ ],
62
+ "csstools": {
63
+ "exportName": "postcssProgressiveCustomProperties",
64
+ "humanReadableName": "PostCSS Progressive Custom Properties"
65
+ },
66
+ "volta": {
67
+ "extends": "../../package.json"
68
+ }
60
69
  }