postcss-double-position-gradients 3.0.0 → 3.0.1

package/.github/workflows/test.yml

@@ -7,12 +7,12 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12, 16]
+        node: [12, 14, 16]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
 
-      - run: yarn install --ignore-scripts
-      - run: yarn run test
+      - run: npm install --ignore-scripts
+      - run: npm run test

package/.gitignore

@@ -1,6 +1,6 @@
 node_modules
 package-lock.json
-yarn.lock
+yarn-lock.json
 *.log*
 *.result.css
 .*

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changes to PostCSS Double Position Gradients
 
+### 3.0.1 (November 18, 2021)
+
+- Added: Safeguards against postcss-values-parser potentially throwing an error.
+
+- Fixed: Issue with some gradients creating an infinite loop.
+
+- Updated: `postcss-value-parser` to 6.0.1 (patch)
+- Updated: `eslint` to 8.2.0 (major)
+- Updated: `postcss` to 8.3.11 (patch)
+
+- Removed: yarn.lock is no longer version controlled
+
 ### 3.0.0 (September 17, 2021)
 
 - Updated: Support for PostCS 8+ (major).

package/README.md

@@ -2,7 +2,7 @@
 
 [<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="Build Status" src="https://github.com/csstools/postcss-double-position-gradients/workflows/test/badge.svg" height="20">][cli-url]
+[<img alt="Build Status" src="https://img.shields.io/travis/csstools/postcss-double-position-gradients/master.svg" height="20">][cli-url]
 [<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
 
 [PostCSS Double Position Gradients] lets you use double-position gradients in
@@ -94,7 +94,7 @@ postcssDoublePositionGradients({ preserve: false })
 ```
 
 [css-url]: https://cssdb.org/#double-position-gradients
-[cli-url]: https://github.com/csstools/postcss-double-position-gradients/actions/workflows/test.yml?query=workflow/test
+[cli-url]: https://travis-ci.org/csstools/postcss-double-position-gradients
 [git-url]: https://gitter.im/postcss/postcss
 [npm-url]: https://www.npmjs.com/package/postcss-double-position-gradients
 

package/index.js

@@ -1,10 +1,12 @@
-const {parse} = require("postcss-values-parser");
-const Punctuation = require("postcss-values-parser/lib/nodes/Punctuation");
+const { parse } = require('postcss-values-parser');
+const Punctuation = require('postcss-values-parser/lib/nodes/Punctuation');
 
 // whether the value has a lab() or lch() matcher
 const gradientRegExp = /(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i;
 const gradientPartsRegExp = /^(repeating-)?(conic|linear|radial)-gradient$/i;
 
+const isPunctuationCommaNode = node => node.type === 'punctuation' && node.value === ','
+
 /**
  * Transform double-position gradients in CSS.
  * @param {{preserve?: boolean}} opts
@@ -15,33 +17,48 @@ module.exports = function creator(opts) {
 
 	return {
 		postcssPlugin: 'postcss-double-position-gradients',
-		Declaration(decl) {
+		Declaration(decl, { result }) {
 			if (!gradientRegExp.test(decl.value)) {
 				return;
 			}
 
-			const valueAST = parse(decl.value, { ignoreUnknownWords: true });
+			let valueAST;
+
+			try {
+				valueAST = parse(decl.value, { ignoreUnknownWords: true });
+			} catch (error) {
+				decl.warn(
+					result,
+					`Failed to parse value '${decl.value}' as a CSS gradient. Leaving the original value intact.`
+				);
+			}
+
+			if (typeof valueAST === 'undefined') {
+				// Bail if there's an error
+				return;
+			}
 
 			valueAST.walkFuncs((func) => {
 				if (!gradientPartsRegExp.test(func.name)) {
 					return;
 				}
 
-				func.walkNumerics((node, index) => {
-					/** @type {import('postcss-values-parser').ChildNode} */
-					const node1back = Object(func.nodes[index - 1]);
-					/** @type {import('postcss-values-parser').ChildNode} */
-					const node2back = Object(func.nodes[index - 2]);
-					/** @type {import('postcss-values-parser').ChildNode} */
-					const node1next = Object(func.nodes[index + 1]);
+				const nodes = func.nodes;
+
+				nodes.slice(0).forEach((node, index, nodes) => {
+					const node1back = Object(nodes[index - 1]);
+					const node2back = Object(nodes[index - 2]);
+					const node1next = Object(nodes[index + 1]);
+
+					const isDoublePositionLength = node2back.type && node1back.type === 'numeric' && node.type === 'numeric';
 
 					// if the argument concludes a double-position gradient
-					if (node2back.type && node1back.type === 'numeric') {
+					if (isDoublePositionLength) {
 						// insert the fallback colors
 						const color = node2back.clone();
 						const comma = new Punctuation({
 							value: ',',
-							raws: node1next.type === 'punctuation' && node1next.value === ','
+							raws: isPunctuationCommaNode(node1next)
 								? Object.assign({}, node1next.clone().raws)
 								: { before: '', after: '' }
 						});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-double-position-gradients",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Use double-position gradients in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
@@ -19,14 +19,14 @@
     "node": ">=12"
   },
   "dependencies": {
-    "postcss-values-parser": "6.0.0"
+    "postcss-values-parser": "6.0.1"
   },
   "peerDependencies": {
     "postcss": "^8.3"
   },
   "devDependencies": {
-    "eslint": "7.32.0",
-    "postcss": "8.3.6",
+    "eslint": "8.2.0",
+    "postcss": "8.3.11",
     "postcss-tape": "6.0.1"
   },
   "eslintConfig": {

package/test/basic.css

@@ -17,3 +17,7 @@
 .test-conic-gradient-ignored {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg , gold 75% , #f06 0deg);
 }
+
+.test-linear-gradient-loop {
+	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 25%, transparent);
+}

package/test/basic.expect.css

@@ -19,3 +19,7 @@
 .test-conic-gradient-ignored {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg , gold 75% , #f06 0deg);
 }
+
+.test-linear-gradient-loop {
+	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 25%, transparent);
+}

package/test/basic.preserve.expect.css

@@ -17,3 +17,7 @@
 .test-conic-gradient-ignored {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg , gold 75% , #f06 0deg);
 }
+
+.test-linear-gradient-loop {
+	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 25%, transparent);
+}