postcss-image-set-function - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

CHANGELOG.md

 # Changes to PostCSS image-set() Function
 
+### 3.0.0 (September 17, 2018)
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+
 ### 2.0.0 (May 7, 2018)
@@ -4,0 +9,0 @@

index.cjs.js

@@ -9,149 +9,139 @@ 'use strict';
 // return whether a node is a valid comma
-var getComma = (function (node) {
-  return Object(node).type === 'comma';
-});
+var getComma = (node => Object(node).type === 'comma');
 
-var imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i;
+const imageSetFunctionMatchRegExp = /^(-webkit-)?image-set$/i; // return a valid image
 
-// return a valid image
-var getImage = (function (node) {
-	return (
-		// <url> | <image()> | <cross-fade()> | <gradient>
-		// the image-set() function can not be nested inside of itself
-		Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false
-	);
-});
+var getImage = (node => // <url> | <image()> | <cross-fade()> | <gradient>
+// the image-set() function can not be nested inside of itself
+Object(node).type === 'func' && /^(cross-fade|image|(repeating-)?(conic|linear|radial)-gradient|url)$/i.test(node.value) && !(node.parent.parent && node.parent.parent.type === 'func' && imageSetFunctionMatchRegExp.test(node.parent.parent.value)) ? String(node) : Object(node).type === 'string' ? node.value : false);
 
-var dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 };
+const dpiRatios = {
+  dpcm: 2.54,
+  dpi: 1,
+  dppx: 96,
+  x: 96
+}; // return a valid @media rule
 
-// return a valid @media rule
-var getMedia = (function (node, mediasByDpr) {
-	if (Object(node).type === 'number' && node.unit in dpiRatios) {
-		// calculate min-device-pixel-ratio and min-resolution
-		var dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];
-		var dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;
+var getMedia = ((node, mediasByDpr) => {
+  if (Object(node).type === 'number' && node.unit in dpiRatios) {
+    // calculate min-device-pixel-ratio and min-resolution
+    const dpi = Number(node.value) * dpiRatios[node.unit.toLowerCase()];
+    const dpr = Math.floor(dpi / dpiRatios.x * 100) / 100;
 
-		if (dpi in mediasByDpr) {
-			return false;
-		} else {
-			var media = mediasByDpr[dpi] = postcss.atRule({
-				name: 'media',
-				params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`
-			});
-
-			return media;
-		}
-	} else {
-		return false;
-	}
+    if (dpi in mediasByDpr) {
+      return false;
+    } else {
+      const media = mediasByDpr[dpi] = postcss.atRule({
+        name: 'media',
+        params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`
+      });
+      return media;
+    }
+  } else {
+    return false;
+  }
 });
 
-var handleInvalidation = (function (opts, message, word) {
-	if (opts.oninvalid === 'warn') {
-		opts.decl.warn(opts.result, message, { word: String(word) });
-	} else if (opts.oninvalid === 'throw') {
-		throw opts.decl.error(message, { word: String(word) });
-	}
+var handleInvalidation = ((opts, message, word) => {
+  if (opts.oninvalid === 'warn') {
+    opts.decl.warn(opts.result, message, {
+      word: String(word)
+    });
+  } else if (opts.oninvalid === 'throw') {
+    throw opts.decl.error(message, {
+      word: String(word)
+    });
+  }
 });
 
-var processImageSet = (function (imageSetOptionNodes, decl, opts) {
-	var parent = decl.parent;
-	var mediasByDpr = {};
+var processImageSet = ((imageSetOptionNodes, decl, opts) => {
+  const parent = decl.parent;
+  const mediasByDpr = {};
+  let length = imageSetOptionNodes.length;
+  let index = -1;
 
-	var length = imageSetOptionNodes.length;
-	var index = -1;
+  while (index < length) {
+    const _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)],
+          comma = _ref[0],
+          value = _ref[1],
+          media = _ref[2]; // handle invalidations
 
-	while (index < length) {
-		var _ref = [index < 0 ? true : getComma(imageSetOptionNodes[index]), getImage(imageSetOptionNodes[index + 1]), getMedia(imageSetOptionNodes[index + 2], mediasByDpr)],
-		    comma = _ref[0],
-		    value = _ref[1],
-		    media = _ref[2];
+    if (!comma) {
+      return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]);
+    } else if (!value) {
+      return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]);
+    } else if (!media) {
+      return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]);
+    } // prepare @media { decl: <image> }
 
-		// handle invalidations
 
-		if (!comma) {
-			return handleInvalidation(opts, 'unexpected comma', imageSetOptionNodes[index]);
-		} else if (!value) {
-			return handleInvalidation(opts, 'unexpected image', imageSetOptionNodes[index + 1]);
-		} else if (!media) {
-			return handleInvalidation(opts, 'unexpected resolution', imageSetOptionNodes[index + 2]);
-		}
+    const parentClone = parent.clone().removeAll();
+    const declClone = decl.clone({
+      value
+    });
+    parentClone.append(declClone);
+    media.append(parentClone);
+    index += 3;
+  }
 
-		// prepare @media { decl: <image> }
-		var parentClone = parent.clone().removeAll();
-		var declClone = decl.clone({ value });
+  const medias = Object.keys(mediasByDpr).sort((a, b) => a - b).map(params => mediasByDpr[params]); // conditionally prepend previous siblings
 
-		parentClone.append(declClone);
-		media.append(parentClone);
+  if (medias.length) {
+    const firstDecl = medias[0].nodes[0].nodes[0];
 
-		index += 3;
-	}
+    if (medias.length === 1) {
+      decl.value = firstDecl.value;
+    } else {
+      const siblings = parent.nodes;
+      const previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);
 
-	var medias = Object.keys(mediasByDpr).sort(function (a, b) {
-		return a - b;
-	}).map(function (params) {
-		return mediasByDpr[params];
-	});
+      if (previousSiblings.length) {
+        const parentClone = parent.cloneBefore().removeAll();
+        parentClone.append(previousSiblings);
+      } // prepend any @media { decl: <image> } rules
 
-	// conditionally prepend previous siblings
-	if (medias.length) {
-		var firstDecl = medias[0].nodes[0].nodes[0];
 
-		if (medias.length === 1) {
-			decl.value = firstDecl.value;
-		} else {
-			var siblings = parent.nodes;
-			var previousSiblings = siblings.slice(0, siblings.indexOf(decl)).concat(firstDecl);
+      parent.before(medias.slice(1)); // conditionally remove the current rule
 
-			if (previousSiblings.length) {
-				var _parentClone = parent.cloneBefore().removeAll();
+      if (!opts.preserve) {
+        decl.remove(); // and then conditionally remove its parent
 
-				_parentClone.append(previousSiblings);
-			}
-
-			// prepend any @media { decl: <image> } rules
-			parent.before(medias.slice(1));
-
-			// conditionally remove the current rule
-			if (!opts.preserve) {
-				decl.remove();
-
-				// and then conditionally remove its parent
-				if (!parent.nodes.length) {
-					parent.remove();
-				}
-			}
-		}
-	}
+        if (!parent.nodes.length) {
+          parent.remove();
+        }
+      }
+    }
+  }
 });
 
-var imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/;
-var imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i;
+const imageSetValueMatchRegExp = /(^|[^\w-])(-webkit-)?image-set\(/;
+const imageSetFunctionMatchRegExp$1 = /^(-webkit-)?image-set$/i;
+var index = postcss.plugin('postcss-image-set-function', opts => {
+  // prepare options
+  const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true;
+  const oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore';
+  return (root, result) => {
+    // for every declaration
+    root.walkDecls(decl => {
+      const value = decl.value; // if a declaration likely uses an image-set() function
 
-var index = postcss.plugin('postcss-image-set-function', function (opts) {
-	// prepare options
-	var preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true;
-	var oninvalid = 'oninvalid' in Object(opts) ? opts.oninvalid : 'ignore';
+      if (imageSetValueMatchRegExp.test(value)) {
+        const ast = parser(value).parse(); // process every image-set() function
 
-	return function (root, result) {
-		// for every declaration
-		root.walkDecls(function (decl) {
-			var value = decl.value;
-
-			// if a declaration likely uses an image-set() function
-
-			if (imageSetValueMatchRegExp.test(value)) {
-				var ast = parser(value).parse();
-
-				// process every image-set() function
-				ast.walkType('func', function (node) {
-					if (imageSetFunctionMatchRegExp$1.test(node.value)) {
-						processImageSet(node.nodes.slice(1, -1), decl, { decl, oninvalid, preserve, result });
-					}
-				});
-			}
-		});
-	};
+        ast.walkType('func', node => {
+          if (imageSetFunctionMatchRegExp$1.test(node.value)) {
+            processImageSet(node.nodes.slice(1, -1), decl, {
+              decl,
+              oninvalid,
+              preserve,
+              result
+            });
+          }
+        });
+      }
+    });
+  };
 });
 
 module.exports = index;
+//# sourceMappingURL=index.cjs.js.map

package.json

 {
   "name": "postcss-image-set-function",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Display resolution-dependent images using the image-set() function in CSS",
@@ -11,6 +11,8 @@ "author": "Jonathan Neal <[e-mail]>",
   "main": "index.cjs.js",
-  "module": "index.es.js",
+  "module": "index.es.mjs",
   "files": [
     "index.cjs.js",
-    "index.es.js"
+    "index.cjs.js.map",
+    "index.es.mjs",
+    "index.es.mjs.map"
   ],
@@ -29,15 +31,15 @@ "scripts": {
   "dependencies": {
-    "postcss": "^6.0.22",
+    "postcss": "^7.0.2",
     "postcss-values-parser": "^1.5.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.19.1",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.6.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4"
+    "rollup": "^0.66.0",
+    "rollup-plugin-babel": "^4.0.1"
   },
@@ -44,0 +46,0 @@ "eslintConfig": {

README.md

@@ -6,3 +6,2 @@ # PostCSS image-set() Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 [![Build Status][cli-img]][cli-url]
-[![Windows Build Status][win-img]][win-url]
 [![Support Chat][git-img]][git-url]
@@ -53,3 +52,3 @@
 
-Add [PostCSS image-set() Function] to your build tool:
+Add [PostCSS image-set() Function] to your project:
 
@@ -60,117 +59,27 @@ ```bash
 
-#### Node
-
 Use [PostCSS image-set() Function] to process your CSS:
 
 ```js
-import postcssImageSetFunction from 'postcss-image-set-function';
+const postcssImageSetFunction = require('postcss-image-set-function');
 
-postcssImageSetFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);
+postcssImageSetFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
 ```
 
-#### PostCSS
+Or use it as a [PostCSS] plugin:
 
-Add [PostCSS] to your build tool:
-
-```bash
-npm install postcss --save-dev
-```
-
-Use [PostCSS image-set() Function] as a plugin:
-
 ```js
-import postcss from 'gulp-postcss';
-import postcssImageSetFunction from 'postcss-image-set-function';
+const postcss = require('postcss');
+const postcssImageSetFunction = require('postcss-image-set-function');
 
 postcss([
   postcssImageSetFunction(/* pluginOptions */)
-]).process(YOUR_CSS);
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-#### Webpack
+[PostCSS image-set() Function] runs in all Node environments, with special
+instructions for:
 
-Add [PostCSS Loader] to your build tool:
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- | --- |
 
-```bash
-npm install postcss-loader --save-dev
-```
-
-Use [PostCSS image-set() Function] in your Webpack configuration:
-
-```js
-import postcssImageSetFunction from 'postcss-image-set-function';
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [
-              postcssImageSetFunction(/* pluginOptions */)
-            ]
-          } }
-        ]
-      }
-    ]
-  }
-}
-```
-
-#### Gulp
-
-Add [Gulp PostCSS] to your build tool:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS image-set() Function] in your Gulpfile:
-
-```js
-import postcss from 'gulp-postcss';
-import postcssImageSetFunction from 'postcss-image-set-function';
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    postcssImageSetFunction(/* pluginOptions */)
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-#### Grunt
-
-Add [Grunt PostCSS] to your build tool:
-
-```bash
-npm install grunt-postcss --save-dev
-```
-
-Use [PostCSS image-set() Function] in your Gruntfile:
-
-```js
-import postcssImageSetFunction from 'postcss-image-set-function';
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       postcssImageSetFunction(/* pluginOptions */)
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
-
 ## Options
@@ -255,4 +164,2 @@
 [npm-url]: https://www.npmjs.com/package/postcss-image-set-function
-[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-image-set-function.svg
-[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-image-set-function
 
@@ -259,0 +166,0 @@ [CSS Images]: https://drafts.csswg.org/css-images-4/#image-set-notation

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43784

increased by81.24%

Number of package files

8

increased by33.33%

Worsened metrics

Lines of code

240

decreased by-2.44%

Number of lines in readme file

168

decreased by-35.63%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpicocolors@0.2.1(transitive)

• + Addedpostcss@7.0.39(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedpostcss@6.0.23(transitive)

• - Removedsupports-color@5.5.0(transitive)

• Updatedpostcss@^7.0.2