2.0.0

Author: jonathantneal

plugins/postcss-double-position-gradients/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

plugins/postcss-double-position-gradients/.gitignore

@@ -1,10 +1,11 @@
+dist
 node_modules
-index.*.*
 package-lock.json
 *.log*
 *.result.css
 .*
 !.editorconfig
+!.gitattributes
 !.gitignore
 !.rollup.js
 !.tape.js

plugins/postcss-double-position-gradients/.rollup.js

@@ -1,16 +1,9 @@
-import babel from 'rollup-plugin-babel';
+import pkg from './package.json'
 
 export default {
-	input: 'index.js',
-	output: [
-		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
-		{ file: 'index.es.mjs', format: 'es', sourcemap: true }
-	],
-	plugins: [
-		babel({
-			presets: [
-				['@babel/env', { modules: false, targets: { node: 6 } }]
-			]
-		})
-	]
-};
+	...pkg.rollup,
+	plugins: pkg.rollup.plugins.map(plugin => require(plugin)()),
+	onwarn(warning, warn) {
+		if (warning.code !== 'UNRESOLVED_IMPORT') warn(warning)
+	}
+}

plugins/postcss-double-position-gradients/.tape.js

@@ -1,11 +1,9 @@
 module.exports = {
-	'postcss-double-position-gradients': {
-		'basic': {
-			message: 'supports basic usage'
-		},
-		'basic:preserve': {
-			message: 'supports { preserve: false } usage',
-			options: { preserve: false }
-		}
+	'basic': {
+		message: 'supports basic usage'
+	},
+	'basic:preserve': {
+		message: 'supports { preserve: false } usage',
+		options: { preserve: false }
 	}
 };

plugins/postcss-double-position-gradients/.travis.yml

@@ -3,7 +3,7 @@
 language: node_js
 
 node_js:
-  - 6
+  - 10
 
 install:
   - npm install --ignore-scripts

plugins/postcss-double-position-gradients/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes to PostCSS Double Position Gradients
 
+### 2.0.0 (April 25, 2020)
+
+- Updated: `postcss` to 7.0.27 (patch)
+- Updated: `postcss-value-parser` to 3.2.1 (major)
+- Updated: Support for Node 10+ (major)
+
 ### 1.0.0 (October 28, 2018)
 
 - Initial version

plugins/postcss-double-position-gradients/CONTRIBUTING.md

@@ -26,7 +26,7 @@ scope and avoid unrelated commits.
    cd postcss-double-position-gradients
 
    # Assign the original repo to a remote called "upstream"
-   git remote add upstream git@github.com:jonathantneal/postcss-double-position-gradients.git
+   git remote add upstream git@github.com:csstools/postcss-double-position-gradients.git
 
    # Install the tools necessary for testing
    npm install

plugins/postcss-double-position-gradients/INSTALL.md

@@ -165,6 +165,6 @@ grunt.initConfig({
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS CLI]: https://github.com/postcss/postcss-cli
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
-[PostCSS Double Position Gradients]: https://github.com/jonathantneal/postcss-double-position-gradients
+[PostCSS Double Position Gradients]: https://github.com/csstools/postcss-double-position-gradients
 [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
 [React App Rewired]: https://github.com/timarney/react-app-rewired

plugins/postcss-double-position-gradients/README.md

@@ -1,8 +1,9 @@
 # PostCSS Double Position Gradients [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
-[![NPM Version][npm-img]][npm-url]
-[![Build Status][cli-img]][cli-url]
-[![Support Chat][git-img]][git-url]
+[<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://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
 CSS, following the [CSS Image Values and Replaced Content] specification.
@@ -92,13 +93,11 @@ postcssDoublePositionGradients({ preserve: false })
 }
 ```
 
-[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-double-position-gradients/master.svg
-[cli-url]: https://travis-ci.org/jonathantneal/postcss-double-position-gradients
-[git-img]: https://img.shields.io/badge/support-chat-blue.svg
+[css-url]: https://cssdb.org/#double-position-gradients
+[cli-url]: https://travis-ci.org/csstools/postcss-double-position-gradients
 [git-url]: https://gitter.im/postcss/postcss
-[npm-img]: https://img.shields.io/npm/v/postcss-double-position-gradients.svg
 [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
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Double Position Gradients]: https://github.com/jonathantneal/postcss-double-position-gradients
+[PostCSS Double Position Gradients]: https://github.com/csstools/postcss-double-position-gradients

plugins/postcss-double-position-gradients/index.js

@@ -1,50 +1,78 @@
 {
   "name": "postcss-double-position-gradients",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Use double-position gradients in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
-  "repository": "jonathantneal/postcss-double-position-gradients",
-  "homepage": "https://github.com/jonathantneal/postcss-double-position-gradients#readme",
-  "bugs": "https://github.com/jonathantneal/postcss-double-position-gradients/issues",
-  "main": "index.cjs.js",
-  "module": "index.es.mjs",
+  "repository": "csstools/postcss-double-position-gradients",
+  "homepage": "https://github.com/csstools/postcss-double-position-gradients#readme",
+  "bugs": "https://github.com/csstools/postcss-double-position-gradients/issues",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "files": [
-    "index.cjs.js",
-    "index.cjs.js.map",
-    "index.es.mjs",
-    "index.es.mjs.map"
+    "dist"
   ],
   "scripts": {
-    "prepublishOnly": "npm test",
-    "pretest": "rollup -c .rollup.js --silent",
-    "test": "npm run test:js && npm run test:tape",
-    "test:js": "eslint *.js --cache --ignore-path .gitignore --quiet",
-    "test:tape": "postcss-tape"
+    "build": "npx rollup -c .rollup.js",
+    "build:watch": "npx rollup -c .rollup.js --watch",
+    "lint": "npx eslint --cache src",
+    "lint:fix": "npx eslint --cache --fix",
+    "pretest": "npm install && npm run build",
+    "test": "npm run lint && npm run tape",
+    "tape": "npx postcss-tape",
+    "prepublishOnly": "npm test"
   },
   "engines": {
-    "node": ">=6.0.0"
+    "node": ">=10.0.0"
   },
   "dependencies": {
-    "postcss": "^7.0.5",
-    "postcss-values-parser": "^2.0.0"
+    "postcss": "^7.0.27",
+    "postcss-values-parser": "^3.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-config-dev": "^2.0.0",
-    "postcss-tape": "^2.2.0",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "postcss-tape": "^5.0.2",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.66.6",
-    "rollup-plugin-babel": "^4.0.3"
+    "rollup": "^2.7.2",
+    "rollup-plugin-babel": "^4.4.0"
+  },
+  "babel": {
+    "presets": [
+      [
+        "@babel/env",
+        {
+          "targets": "maintained node versions"
+        }
+      ]
+    ]
   },
   "eslintConfig": {
-    "extends": "dev",
+    "env": {
+      "es6": true,
+      "node": true
+    },
+    "extends": "eslint:recommended",
     "parser": "babel-eslint"
   },
+  "rollup": {
+    "input": "src/index.js",
+    "plugins": [
+      "rollup-plugin-babel"
+    ],
+    "output": [
+      {
+        "file": "dist/index.js",
+        "format": "cjs"
+      },
+      {
+        "file": "dist/index.mjs",
+        "format": "esm"
+      }
+    ]
+  },
   "keywords": [
     "postcss",
     "css",

plugins/postcss-double-position-gradients/package.json

@@ -0,0 +1,18 @@
+import postcss from 'postcss'
+import onCSSDeclaration from './onCSSDeclaration'
+import options from './options'
+
+/** Transform double-position gradients in CSS. */
+const postcssPlugin = postcss.plugin('postcss-double-position-gradients', /** @type {PostCSSPluginInitializer} */ opts => {
+	if ('preserve' in Object(opts)) options.preserve = Boolean(opts.preserve)
+
+	return root => {
+		root.walkDecls(onCSSDeclaration)
+	}
+})
+
+export default postcssPlugin
+
+/** @typedef {import('postcss').Root} CSSRoot */ 
+/** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */ 
+/** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */ 

plugins/postcss-double-position-gradients/src/index.js

@@ -0,0 +1,31 @@
+import { parse } from 'postcss-values-parser'
+import onCSSFunction from './onCSSFunction'
+import options from './options'
+
+/** @type {(decl: CSSDeclaration) => void} Transform double-position gradients in CSS Declarations. */
+const onCSSDeclaration = decl => {
+	const { value: originalValue } = decl
+
+	if (hasGradientFunction(originalValue)) {
+		const valueAST = parse(originalValue, { ignoreUnknownWords: true })
+
+		valueAST.walkType('func', onCSSFunction)
+
+		const modifiedValue = String(valueAST)
+
+		if (modifiedValue !== originalValue) {
+			if (options.preserve) decl.cloneBefore({ value: modifiedValue })
+			else decl.value = modifiedValue
+		}
+	}
+}
+
+export default onCSSDeclaration
+
+/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
+const createRegExpTest = Function.bind.bind(RegExp.prototype.test)
+
+/** Return whether the value has a lab() or lch() function. */
+const hasGradientFunction = createRegExpTest(/(repeating-)?(conic|linear|radial)-gradient\([\W\w]*\)/i)
+
+/** @typedef {import('postcss').Declaration} CSSDeclaration */

plugins/postcss-double-position-gradients/src/onCSSDeclaration.js

@@ -0,0 +1,36 @@
+import Punctuation from 'postcss-values-parser/lib/nodes/Punctuation';
+
+/** @type {(decl: CSSFunction) => void} Transform lab() and lch() functions. */
+const onCSSFunction = func => {
+	/** @type {{ name: string, nodes: CSSNode[] }} */
+	const { name, nodes } = func
+	
+	if (isGradientFunctionName(name)) {
+		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 (isDoublePositionLength) {
+				// insert the fallback colors
+				const color = node2back.clone();
+				const comma = new Punctuation({ value: ',', raws: isPunctuationCommaNode(node1next) ? { ...node1next.clone().raws } : { before: '', after: '' } })
+
+				func.insertBefore(node, [comma, color]);
+			}
+		})
+	}
+}
+
+export default onCSSFunction
+
+/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
+const createRegExpTest = Function.bind.bind(RegExp.prototype.test)
+
+/** Return whether the function name is `lab` or `lch`. */
+const isGradientFunctionName = createRegExpTest(/^(repeating-)?(conic|linear|radial)-gradient$/i)
+
+const isPunctuationCommaNode = node => node.type === 'punctuation' && node.value === ','

plugins/postcss-double-position-gradients/src/onCSSFunction.js

@@ -0,0 +1,4 @@
+export default {
+	/** Whether to preserve the original hexa. */
+	preserve: true
+}

plugins/postcss-double-position-gradients/src/options.js

@@ -3,5 +3,5 @@
 }
 
 .test-conic-gradient {
-	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
+	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }