postcss-double-position-gradients 3.0.4 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changes to PostCSS Double Position Gradients
 
+### 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
+
 ### 3.0.4 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

package/README.md

@@ -1,8 +1,8 @@
 # PostCSS Double Position Gradients [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
 [<img alt="NPM Version" src="https://img.shields.io/npm/v/postcss-double-position-gradients.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/badge/double-position-gradients.svg" height="20">][css-url]
-[<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
+[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/double-position-gradients.svg" height="20">][css-url]
+[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
 [PostCSS Double Position Gradients] lets you use double-position gradients in
 CSS, following the [CSS Image Values and Replaced Content] specification.
@@ -92,8 +92,32 @@ 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
-[git-url]: https://gitter.im/postcss/postcss
+[discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/postcss-double-position-gradients
 
 [CSS Image Values and Replaced Content]: https://www.w3.org/TR/css-images-4/#color-stop-syntax

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";const e=require("postcss-value-parser"),t=/(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i,r=/^(repeating-)?(conic|linear|radial)-gradient$/i,n=e=>"div"===e.type&&","===e.value;function a(t){try{return!1!==e.unit(null==t?void 0:t.value)}catch(e){return!1}}module.exports=function(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&&a(o)&&a(t)){const r={type:l.type,value:l.value},a={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,[a,r])}})),!1}));const s=c.toString();if(s!==i.value){if(o)return void i.cloneBefore({value:s});i.value=s}}}},module.exports.postcss=!0;
+"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 s(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!==i.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(!s(t.value))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name&&s(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;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type));let n=!1;r.forEach(((t,r,i)=>{if("word"===t.type&&a.includes(t.value)&&(n=!0),"div"===t.type&&","===t.value&&(n=!1),n)return;const s=Object(i[r-1]),c=Object(i[r-2]),u=Object(i[r+1]);if(c.type&&l(s)&&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();if(c!==t.value){if(e.preserve)return void t.cloneBefore({value:c});t.value=c}}});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 @@
-const e=require("postcss-value-parser"),t=/(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i,r=/^(repeating-)?(conic|linear|radial)-gradient$/i,n=e=>"div"===e.type&&","===e.value;function a(t){try{return!1!==e.unit(null==t?void 0:t.value)}catch(e){return!1}}module.exports=function(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&&a(o)&&a(t)){const r={type:l.type,value:l.value},a={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,[a,r])}})),!1}));const s=c.toString();if(s!==i.value){if(o)return void i.cloneBefore({value:s});i.value=s}}}},module.exports.postcss=!0;
+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"],i=e=>"div"===e.type&&","===e.value;function s(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))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 l;try{l=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===l)return;l.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;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)&&(a=!0),"div"===t.type&&","===t.value&&(a=!1),a)return;const l=Object(o[r-1]),c=Object(o[r-2]),u=Object(o[r+1]);if(c.type&&s(l)&&s(t)){const r=c,n={type:"div",value:",",before:i(u)?u.before:"",after:i(u)?"":" "};e.nodes.splice(e.nodes.indexOf(t)-1,0,n,r)}}))}));const c=l.toString();if(c!==a.value){if(e.preserve)return void a.cloneBefore({value:c});a.value=c}}});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,62 +1,74 @@
 {
-  "name": "postcss-double-position-gradients",
-  "version": "3.0.4",
-  "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",
-  "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.3"
-  },
-  "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.1",
+	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"license": "CC0-1.0",
+	"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.4"
+	},
+	"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"
+	}
 }