postcss-double-position-gradients 3.0.5 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changes to PostCSS Double Position Gradients
 
+### 3.1.2 (July 8, 2022)
+
+- Fix case insensitive matching.
+
+### 3.1.1 (March 7, 2022)
+
+- Add typescript support
+- Fix color functions.
+- Fix `at` keyword with `at 20px 20px` being interpreted as a double position color stop.
+
+### 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/has-supports-at-rule-ancestor.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from 'postcss';
+export declare function hasSupportsAtRuleAncestor(node: Node): boolean;

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),s=r(t);function i(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 a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"],o=e=>"div"===e.type&&","===e.value;function l(e){try{return!1!==s.default.unit(null==e?void 0:e.value)}catch(e){return!1}}const c=e=>({postcssPlugin:"postcss-double-position-gradients",Declaration(t,{result:r}){if(!i(t.value.toLowerCase()))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&i(t.params.toLowerCase()))return!0;t=t.parent}else t=t.parent;return!1}(t))return;let n;try{n=s.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.toLowerCase())&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type));let n=!1;r.forEach(((t,r,s)=>{if("word"===t.type&&a.includes(t.value.toLowerCase())&&(n=!0),"div"===t.type&&","===t.value&&(n=!1),n)return;const i=Object(s[r-1]),c=Object(s[r-2]),u=Object(s[r+1]);if(c.type&&l(i)&&l(t)){const r=c,n={type:"div",value:",",before:o(u)?u.before:"",after:o(u)?"":" "};e.nodes.splice(e.nodes.indexOf(t)-1,0,n,r)}}))}));const c=n.toString();c!==t.value&&(t.cloneBefore({value:c}),e.preserve||t.remove())}});c.postcss=!0;const u=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-double-position-gradients",plugins:[n.default(),c(t)]}:c(t)};u.postcss=!0,module.exports=u;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import type { PluginCreator } from 'postcss';
+declare type pluginOptions = {
+    preserve?: boolean;
+    enableProgressiveCustomProperties?: boolean;
+};
+declare const postcssPlugin: PluginCreator<pluginOptions>;
+export default postcssPlugin;

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=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"],s=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:o}){if(!r(a.value.toLowerCase()))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&r(t.params.toLowerCase()))return!0;t=t.parent}else t=t.parent;return!1}(a))return;let c;try{c=t(a.value)}catch(e){a.warn(o,`Failed to parse value '${a.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===c)return;c.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value.toLowerCase())&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type));let a=!1;r.forEach(((t,r,o)=>{if("word"===t.type&&n.includes(t.value.toLowerCase())&&(a=!0),"div"===t.type&&","===t.value&&(a=!1),a)return;const c=Object(o[r-1]),l=Object(o[r-2]),u=Object(o[r+1]);if(l.type&&i(c)&&i(t)){const r=l,n={type:"div",value:",",before:s(u)?u.before:"",after:s(u)?"":" "};e.nodes.splice(e.nodes.indexOf(t)-1,0,n,r)}}))}));const l=c.toString();l!==a.value&&(a.cloneBefore({value:l}),e.preserve||a.remove())}});a.postcss=!0;const o=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)};o.postcss=!0;export{o as default};

package/dist/is-gradient.d.ts

@@ -0,0 +1,2 @@
+export declare function includesGradientsFunction(str: string): boolean;
+export declare function isGradientsFunctions(str: string): boolean;

package/package.json

@@ -1,69 +1,78 @@
 {
-  "name": "postcss-double-position-gradients",
-  "version": "3.0.5",
-  "description": "Use double-position gradients in CSS",
-  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
-  "license": "CC0-1.0",
-  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme",
-  "bugs": "https://github.com/csstools/postcss-plugins/issues",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "files": [
-    "CHANGELOG.md",
-    "LICENSE.md",
-    "README.md",
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c ../../rollup/default.js",
-    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
-    "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"
-  },
-  "engines": {
-    "node": "^12 || ^14 || >=16"
-  },
-  "dependencies": {
-    "postcss-value-parser": "^4.2.0"
-  },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
-  "peerDependencies": {
-    "postcss": "^8.4"
-  },
-  "keywords": [
-    "postcss",
-    "css",
-    "postcss-plugin",
-    "double",
-    "position",
-    "gradients",
-    "linear",
-    "radial",
-    "conic",
-    "color",
-    "stop",
-    "syntax",
-    "repeating"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/csstools/postcss-plugins.git",
-    "directory": "plugins/postcss-double-position-gradients"
-  },
-  "volta": {
-    "extends": "../../package.json"
-  }
+	"name": "postcss-double-position-gradients",
+	"description": "Use double-position gradients in CSS",
+	"version": "3.1.2",
+	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"license": "CC0-1.0",
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/csstools"
+	},
+	"engines": {
+		"node": "^12 || ^14 || >=16"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs",
+			"default": "./dist/index.mjs"
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"@csstools/postcss-progressive-custom-properties": "^1.1.0",
+		"postcss-value-parser": "^4.2.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.2"
+	},
+	"scripts": {
+		"build": "rollup -c ../../rollup/default.js",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"docs": "node ../../.github/bin/generate-docs/install.mjs",
+		"lint": "npm run lint:eslint && npm run lint:package-json",
+		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run clean && npm run build && npm run test",
+		"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"
+	},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-double-position-gradients"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"color",
+		"conic",
+		"css",
+		"double",
+		"gradients",
+		"linear",
+		"position",
+		"postcss",
+		"postcss-plugin",
+		"radial",
+		"repeating",
+		"stop",
+		"syntax"
+	],
+	"csstools": {
+		"exportName": "postcssDoublePositionGradients",
+		"humanReadableName": "PostCSS Double Position Gradients"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
 }