postcss-double-position-gradients 3.0.5 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changes to PostCSS Double Position Gradients
 
+### 3.1.0 (February 15, 2022)
+
+- Ignore values in relevant `@supports` rules.
+- Support double position gradients in Custom Properties.
+
+```css
+@supports (order: linear-gradient(90deg, black 25% 50%, blue 50% 75%)) {
+	.support {
+		/* is not processed */
+		order: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
+	}
+}
+```
+
 ### 3.0.5 (February 5, 2022)
 
 - Improved `es module` and `commonjs` compatibility

package/README.md

@@ -92,6 +92,30 @@ postcssDoublePositionGradients({ preserve: false })
 }
 ```
 
+### enableProgressiveCustomProperties
+
+The `enableProgressiveCustomProperties` option determines whether the original notation
+is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
+
+⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+
+```js
+postcssDoublePositionGradients({ enableProgressiveCustomProperties: false })
+```
+
+```pcss
+:root {
+	--a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
+}
+
+/* becomes */
+
+:root {
+	--a-gradient: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%); /* will never be used, not even in older browser */
+	--a-gradient: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
+}
+```
+
 [css-url]: https://cssdb.org/#double-position-gradients
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/postcss-double-position-gradients

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("postcss-value-parser"));const r=/(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i,n=/^(repeating-)?(conic|linear|radial)-gradient$/i,a=e=>"div"===e.type&&","===e.value;function i(e){try{return!1!==t.default.unit(null==e?void 0:e.value)}catch(e){return!1}}function o(e){const o=!("preserve"in Object(e))||Boolean(e.preserve);return{postcssPlugin:"postcss-double-position-gradients",Declaration(e,{result:l}){if(!r.test(e.value))return;let u;try{u=t.default(e.value)}catch(t){e.warn(l,`Failed to parse value '${e.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===u)return;u.walk((e=>{if("function"!==e.type||!n.test(e.value))return;return e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)).forEach(((t,r,n)=>{const o=Object(n[r-1]),l=Object(n[r-2]),u=Object(n[r+1]);if(l.type&&i(o)&&i(t)){const r={type:l.type,value:l.value},n={type:"div",value:",",before:a(u)?u.before:"",after:a(u)?"":" "};!function(e,t,...r){const n=e.findIndex((e=>e===t));e.splice.apply(e,[n-1,0].concat(Array.prototype.slice.call(...r,0)))}(e.nodes,t,[n,r])}})),!1}));const c=u.toString();if(c!==e.value){if(o)return void e.cloneBefore({value:c});e.value=c}}}}o.postcss=!0,module.exports=o;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),t=require("postcss-value-parser");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e),i=r(t);function a(e){return e.includes("conic-gradient(")||e.includes("linear-gradient(")||e.includes("radial-gradient(")||e.includes("repeating-conic-gradient(")||e.includes("repeating-linear-gradient(")||e.includes("repeating-radial-gradient(")}const s=e=>"div"===e.type&&","===e.value;function o(e){try{return!1!==i.default.unit(null==e?void 0:e.value)}catch(e){return!1}}const u=e=>({postcssPlugin:"postcss-double-position-gradients",Declaration(t,{result:r}){if(!a(t.value))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name&&a(t.params))return!0;t=t.parent}else t=t.parent;return!1}(t))return;let n;try{n=i.default(t.value)}catch(e){t.warn(r,`Failed to parse value '${t.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===n)return;n.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value)&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;return e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)).forEach(((t,r,n)=>{const i=Object(n[r-1]),a=Object(n[r-2]),u=Object(n[r+1]);if(a.type&&o(i)&&o(t)){const r={type:a.type,value:a.value},n={type:"div",value:",",before:s(u)?u.before:"",after:s(u)?"":" "};!function(e,t,...r){const n=e.findIndex((e=>e===t));e.splice.apply(e,[n-1,0].concat(Array.prototype.slice.call(...r,0)))}(e.nodes,t,[n,r])}})),!1}));const u=n.toString();if(u!==t.value){if(e.preserve)return void t.cloneBefore({value:u});t.value=u}}});u.postcss=!0;const l=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-double-position-gradients",plugins:[n.default(),u(t)]}:u(t)};l.postcss=!0,module.exports=l;

package/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-value-parser";const t=/(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i,r=/^(repeating-)?(conic|linear|radial)-gradient$/i,a=e=>"div"===e.type&&","===e.value;function n(t){try{return!1!==e.unit(null==t?void 0:t.value)}catch(e){return!1}}function i(i){const o=!("preserve"in Object(i))||Boolean(i.preserve);return{postcssPlugin:"postcss-double-position-gradients",Declaration(i,{result:l}){if(!t.test(i.value))return;let c;try{c=e(i.value)}catch(e){i.warn(l,`Failed to parse value '${i.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===c)return;c.walk((e=>{if("function"!==e.type||!r.test(e.value))return;return e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)).forEach(((t,r,i)=>{const o=Object(i[r-1]),l=Object(i[r-2]),c=Object(i[r+1]);if(l.type&&n(o)&&n(t)){const r={type:l.type,value:l.value},n={type:"div",value:",",before:a(c)?c.before:"",after:a(c)?"":" "};!function(e,t,...r){const a=e.findIndex((e=>e===t));e.splice.apply(e,[a-1,0].concat(Array.prototype.slice.call(...r,0)))}(e.nodes,t,[n,r])}})),!1}));const s=c.toString();if(s!==i.value){if(o)return void i.cloneBefore({value:s});i.value=s}}}}i.postcss=!0;export{i as default};
+import e from"@csstools/postcss-progressive-custom-properties";import t from"postcss-value-parser";function r(e){return e.includes("conic-gradient(")||e.includes("linear-gradient(")||e.includes("radial-gradient(")||e.includes("repeating-conic-gradient(")||e.includes("repeating-linear-gradient(")||e.includes("repeating-radial-gradient(")}const n=e=>"div"===e.type&&","===e.value;function i(e){try{return!1!==t.unit(null==e?void 0:e.value)}catch(e){return!1}}const a=e=>({postcssPlugin:"postcss-double-position-gradients",Declaration(a,{result:s}){if(!r(a.value))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name&&r(t.params))return!0;t=t.parent}else t=t.parent;return!1}(a))return;let o;try{o=t(a.value)}catch(e){a.warn(s,`Failed to parse value '${a.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value)&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;return e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)).forEach(((t,r,a)=>{const s=Object(a[r-1]),o=Object(a[r-2]),c=Object(a[r+1]);if(o.type&&i(s)&&i(t)){const r={type:o.type,value:o.value},i={type:"div",value:",",before:n(c)?c.before:"",after:n(c)?"":" "};!function(e,t,...r){const n=e.findIndex((e=>e===t));e.splice.apply(e,[n-1,0].concat(Array.prototype.slice.call(...r,0)))}(e.nodes,t,[i,r])}})),!1}));const c=o.toString();if(c!==a.value){if(e.preserve)return void a.cloneBefore({value:c});a.value=c}}});a.postcss=!0;const s=t=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},t);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-double-position-gradients",plugins:[e(),a(r)]}:a(r)};s.postcss=!0;export{s as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-double-position-gradients",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "Use double-position gradients in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
@@ -27,19 +27,17 @@
     "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
     "prepublishOnly": "npm run clean && npm run build && npm run test",
     "stryker": "stryker run --logLevel error",
-    "test": "postcss-tape --ci && npm run test:exports",
-    "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
+    "test": "node .tape.mjs && npm run test:exports",
+    "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+    "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
   },
   "engines": {
     "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
+    "@csstools/postcss-progressive-custom-properties": "^1.1.0",
     "postcss-value-parser": "^4.2.0"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
     "postcss": "^8.4"
   },