postcss-double-position-gradients 3.0.1 → 3.0.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changes to PostCSS Double Position Gradients
 
+### 3.0.5 (February 5, 2022)
+
+- Improved `es module` and `commonjs` compatibility
+
+### 3.0.4 (January 2, 2022)
+
+- Removed Sourcemaps from package tarball.
+- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).
+
+### 3.0.3 (December 14, 2021)
+
+- Fixed: infinite loop in complex gradients.
+
+### 3.0.2 (December 13, 2021)
+
+- Changed: now uses `postcss-value-parser` for parsing.
+- Updated: documentation
+
 ### 3.0.1 (November 18, 2021)
 
 - Added: Safeguards against postcss-values-parser potentially throwing an error.

package/README.md

@@ -1,9 +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="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]
+[<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.
@@ -94,10 +93,9 @@ postcssDoublePositionGradients({ preserve: false })
 ```
 
 [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
+[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
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Double Position Gradients]: https://github.com/csstools/postcss-double-position-gradients
+[PostCSS Double Position Gradients]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.mjs

@@ -0,0 +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};

package/package.json

@@ -1,40 +1,47 @@
 {
   "name": "postcss-double-position-gradients",
-  "version": "3.0.1",
+  "version": "3.0.5",
   "description": "Use double-position gradients in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
-  "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": "index.js",
+  "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": {
-    "prepublishOnly": "npm test",
-    "lint": "eslint *.js --cache",
-    "lint:fix": "eslint *.js --cache --fix",
-    "test": "npm run lint && npm run tape",
-    "tape": "postcss-tape"
+    "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"
+    "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
-    "postcss-values-parser": "6.0.1"
-  },
-  "peerDependencies": {
-    "postcss": "^8.3"
+    "postcss-value-parser": "^4.2.0"
   },
   "devDependencies": {
-    "eslint": "8.2.0",
-    "postcss": "8.3.11",
-    "postcss-tape": "6.0.1"
+    "postcss": "^8.3.6",
+    "postcss-tape": "^6.0.1"
   },
-  "eslintConfig": {
-    "env": {
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended"
+  "peerDependencies": {
+    "postcss": "^8.4"
   },
   "keywords": [
     "postcss",
@@ -50,5 +57,13 @@
     "stop",
     "syntax",
     "repeating"
-  ]
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csstools/postcss-plugins.git",
+    "directory": "plugins/postcss-double-position-gradients"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
 }

package/.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = tab
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.{json,md,yml}]
-indent_size = 2
-indent_style = space

package/.gitattributes

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

package/.github/workflows/test.yml

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

package/.gitignore

@@ -1,11 +0,0 @@
-node_modules
-package-lock.json
-yarn-lock.json
-*.log*
-*.result.css
-.*
-!.editorconfig
-!.gitattributes
-!.gitignore
-!.tape.js
-!.github

package/.tape.js

@@ -1,9 +0,0 @@
-module.exports = {
-	'basic': {
-		message: 'supports basic usage'
-	},
-	'basic:preserve': {
-		message: 'supports { preserve: false } usage',
-		options: { preserve: false }
-	}
-};

package/CONTRIBUTING.md

@@ -1,65 +0,0 @@
-# Contributing to PostCSS Double Position Gradients
-
-You want to help? You rock! Now, take a moment to be sure your contributions
-make sense to everyone else.
-
-## Reporting Issues
-
-Found a problem? Want a new feature?
-
-- See if your issue or idea has [already been reported].
-- Provide a [reduced test case] or a [live example].
-
-Remember, a bug is a _demonstrable problem_ caused by _our_ code.
-
-## Submitting Pull Requests
-
-Pull requests are the greatest contributions, so be sure they are focused in
-scope and avoid unrelated commits.
-
-1. To begin; [fork this project], clone your fork, and add our upstream.
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone git@github.com:YOUR_USER/postcss-double-position-gradients.git
-
-   # Navigate to the newly cloned directory
-   cd postcss-double-position-gradients
-
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream git@github.com:csstools/postcss-double-position-gradients.git
-
-   # Install the tools necessary for testing
-   npm install
-   ```
-
-2. Create a branch for your feature or fix:
-   ```bash
-   # Move into a new branch for your feature
-   git checkout -b feature/thing
-   ```
-   ```bash
-   # Move into a new branch for your fix
-   git checkout -b fix/something
-   ```
-
-3. If your code follows our practices, then push your feature branch:
-   ```bash
-   # Test current code
-   npm test
-   ```
-   ```bash
-   # Push the branch for your new feature
-   git push origin feature/thing
-   ```
-   ```bash
-   # Or, push the branch for your update
-   git push origin update/something
-   ```
-
-That’s it! Now [open a pull request] with a clear title and description.
-
-[already been reported]: issues
-[fork this project]:     fork
-[live example]:          https://codepen.io/pen
-[open a pull request]:   https://help.github.com/articles/using-pull-requests/
-[reduced test case]:     https://css-tricks.com/reduced-test-cases/

package/INSTALL.md

@@ -1,170 +0,0 @@
-# Installing PostCSS Double Position Gradients
-
-[PostCSS Double Position Gradients] runs in all Node environments, with special instructions for:
-
-| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
-| --- | --- | --- | --- | --- | --- |
-
-## Node
-
-Add [PostCSS Double Position Gradients] to your project:
-
-```bash
-npm install postcss-double-position-gradients --save-dev
-```
-
-Use [PostCSS Double Position Gradients] to process your CSS:
-
-```js
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-postcssDoublePositionGradients.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
-
-```js
-const postcss = require('postcss');
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-postcss([
-  postcssDoublePositionGradients(/* pluginOptions */)
-]).process(YOUR_CSS /*, processOptions */);
-```
-
-## PostCSS CLI
-
-Add [PostCSS CLI] to your project:
-
-```bash
-npm install postcss-cli --save-dev
-```
-
-Use [PostCSS Double Position Gradients] in your `postcss.config.js` configuration file:
-
-```js
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-module.exports = {
-  plugins: [
-    postcssDoublePositionGradients(/* pluginOptions */)
-  ]
-}
-```
-
-## Webpack
-
-Add [PostCSS Loader] to your project:
-
-```bash
-npm install postcss-loader --save-dev
-```
-
-Use [PostCSS Double Position Gradients] in your Webpack configuration:
-
-```js
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [
-              postcssDoublePositionGradients(/* pluginOptions */)
-            ]
-          } }
-        ]
-      }
-    ]
-  }
-}
-```
-
-## Create React App
-
-Add [React App Rewired] and [React App Rewire PostCSS] to your project:
-
-```bash
-npm install react-app-rewired react-app-rewire-postcss --save-dev
-```
-
-Use [React App Rewire PostCSS] and [PostCSS Double Position Gradients] in your
-`config-overrides.js` file:
-
-```js
-const reactAppRewirePostcss = require('react-app-rewire-postcss');
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-module.exports = config => reactAppRewirePostcss(config, {
-  plugins: () => [
-    postcssDoublePositionGradients(/* pluginOptions */)
-  ]
-});
-```
-
-## Gulp
-
-Add [Gulp PostCSS] to your project:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS Double Position Gradients] in your Gulpfile:
-
-```js
-const postcss = require('gulp-postcss');
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    postcssDoublePositionGradients(/* pluginOptions */)
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-## Grunt
-
-Add [Grunt PostCSS] to your project:
-
-```bash
-npm install grunt-postcss --save-dev
-```
-
-Use [PostCSS Double Position Gradients] in your Gruntfile:
-
-```js
-const postcssDoublePositionGradients = require('postcss-double-position-gradients');
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       postcssDoublePositionGradients(/* pluginOptions */)
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
-
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[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/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

package/index.js

@@ -1,81 +0,0 @@
-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
- * @returns {import('postcss').Plugin}
- */
-module.exports = function creator(opts) {
-	const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true;
-
-	return {
-		postcssPlugin: 'postcss-double-position-gradients',
-		Declaration(decl, { result }) {
-			if (!gradientRegExp.test(decl.value)) {
-				return;
-			}
-
-			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;
-				}
-
-				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 (isDoublePositionLength) {
-						// insert the fallback colors
-						const color = node2back.clone();
-						const comma = new Punctuation({
-							value: ',',
-							raws: isPunctuationCommaNode(node1next)
-								? Object.assign({}, node1next.clone().raws)
-								: { before: '', after: '' }
-						});
-
-						func.insertBefore(node, [comma, color]);
-					}
-				})
-			})
-
-			const modifiedValue = String(valueAST);
-
-			if (modifiedValue !== decl.value) {
-				if (preserve) decl.cloneBefore({ value: modifiedValue });
-				else decl.value = modifiedValue;
-			}
-		}
-	}
-}
-
-module.exports.postcss = true;

package/test/basic.css

@@ -1,23 +0,0 @@
-.test-linear-gradient {
-	background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
-}
-
-.test-conic-gradient {
-	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
-}
-
-.test-invalid-function {
-	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
-}
-
-.test-linear-gradient-ignored {
-	background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
-}
-
-.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

@@ -1,25 +0,0 @@
-.test-linear-gradient {
-	background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
-	background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
-}
-
-.test-conic-gradient {
-	background-image: conic-gradient(yellowgreen 40%, gold 0deg , gold 75% , #f06 0deg);
-	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
-}
-
-.test-invalid-function {
-	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
-}
-
-.test-linear-gradient-ignored {
-	background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
-}
-
-.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

@@ -1,23 +0,0 @@
-.test-linear-gradient {
-	background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
-}
-
-.test-conic-gradient {
-	background-image: conic-gradient(yellowgreen 40%, gold 0deg , gold 75% , #f06 0deg);
-}
-
-.test-invalid-function {
-	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
-}
-
-.test-linear-gradient-ignored {
-	background-image: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
-}
-
-.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);
-}