postcss-lab-function - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

CHANGELOG.md

 # Changes to PostCSS Lab Function
 
+### 2.0.0 (September 17, 2018)
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+
 ### 1.1.0 (July 24, 2018)
@@ -4,0 +9,0 @@

index.cjs.js

@@ -9,158 +9,125 @@ 'use strict';
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+var index = postcss.plugin('postcss-lab-function', opts => {
+  const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
+  return root => {
+    root.walkDecls(decl => {
+      const value = decl.value;
 
-var index = postcss.plugin('postcss-lab-function', function (opts) {
-	var preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
+      if (colorAnyRegExp.test(value)) {
+        const ast = parser(value).parse();
+        ast.walkType('func', node => {
+          if (colorRegExp.test(node.value)) {
+            const children = node.nodes.slice(1, -1);
+            const isLab = labRegExp.test(node.value);
+            const isGray = grayRegExp.test(node.value);
+            const isFunctionalLAB = !isGray && matchFunctionalLAB(children);
+            const isFunctionalLCH = !isGray && matchFunctionalLCH(children);
+            const isFunctionalGray = isGray && matchFunctionalGray(children);
 
-	return function (root) {
-		root.walkDecls(function (decl) {
-			var value = decl.value;
+            if (isFunctionalLAB || isFunctionalLCH) {
+              node.value = 'rgb';
+              const slashNode = children[3];
+              const alphaNode = children[4];
 
+              if (alphaNode) {
+                if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
+                  alphaNode.unit = '';
+                  alphaNode.value = String(alphaNode.value / 100);
+                }
 
-			if (colorAnyRegExp.test(value)) {
-				var ast = parser(value).parse();
+                if (alphaNode.value === '1') {
+                  slashNode.remove();
+                  alphaNode.remove();
+                } else {
+                  node.value += 'a';
+                }
+              }
 
-				ast.walkType('func', function (node) {
-					if (colorRegExp.test(node.value)) {
-						var children = node.nodes.slice(1, -1);
-						var isLab = labRegExp.test(node.value);
-						var isGray = grayRegExp.test(node.value);
-						var isFunctionalLAB = !isGray && matchFunctionalLAB(children);
-						var isFunctionalLCH = !isGray && matchFunctionalLCH(children);
-						var isFunctionalGray = isGray && matchFunctionalGray(children);
+              if (isSlash(slashNode)) {
+                slashNode.replaceWith(newComma());
+              }
 
-						if (isFunctionalLAB || isFunctionalLCH) {
-							node.value = 'rgb';
+              const converter = isLab ? convertColors.lab2rgb : convertColors.lch2rgb;
+              const rgbValues = converter(...[children[0].value, children[1].value, children[2].value].map(number => parseFloat(number))).map(sourceValue => Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0));
+              children[0].value = String(rgbValues[0]);
+              children[1].value = String(rgbValues[1]);
+              children[2].value = String(rgbValues[2]);
+              node.nodes.splice(3, 0, [newComma()]);
+              node.nodes.splice(2, 0, [newComma()]);
+            } else if (isFunctionalGray) {
+              node.value = 'rgb';
+              const alphaNode = children[2];
+              const rgbValues = convertColors.lab2rgb(...[children[0].value, 0, 0].map(number => parseFloat(number))).map(sourceValue => Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0));
+              node.removeAll().append(newParen('(')).append(newNumber(rgbValues[0])).append(newComma()).append(newNumber(rgbValues[1])).append(newComma()).append(newNumber(rgbValues[2])).append(newParen(')'));
 
-							var slashNode = children[3];
-							var alphaNode = children[4];
+              if (alphaNode) {
+                if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
+                  alphaNode.unit = '';
+                  alphaNode.value = String(alphaNode.value / 100);
+                }
 
-							if (alphaNode) {
-								if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
-									alphaNode.unit = '';
-									alphaNode.value = String(alphaNode.value / 100);
-								}
+                if (alphaNode.value !== '1') {
+                  node.value += 'a';
+                  node.insertBefore(node.last, newComma()).insertBefore(node.last, alphaNode);
+                }
+              }
+            }
+          }
+        });
+        const newValue = String(ast);
 
-								if (alphaNode.value === '1') {
-									slashNode.remove();
-									alphaNode.remove();
-								} else {
-									node.value += 'a';
-								}
-							}
+        if (preserve) {
+          decl.cloneBefore({
+            value: newValue
+          });
+        } else {
+          decl.value = newValue;
+        }
+      }
+    });
+  };
+});
+const colorAnyRegExp = /(^|[^\w-])(lab|lch|gray)\(/i;
+const colorRegExp = /^(lab|lch|gray)$/i;
+const labRegExp = /^lab$/i;
+const grayRegExp = /^gray$/i;
+const alphaUnitMatch = /^%?$/i;
+const calcFuncMatch = /^calc$/i;
+const hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
 
-							if (isSlash(slashNode)) {
-								slashNode.replaceWith(newComma());
-							}
+const isAlphaValue = node => isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
 
-							var converter = isLab ? convertColors.lab2rgb : convertColors.lch2rgb;
+const isCalc = node => Object(node).type === 'func' && calcFuncMatch.test(node.value);
 
-							var rgbValues = converter.apply(undefined, _toConsumableArray([children[0].value, children[1].value, children[2].value].map(function (number) {
-								return parseFloat(number);
-							}))).map(function (sourceValue) {
-								return Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0);
-							});
+const isHue = node => isCalc(node) || Object(node).type === 'number' && hueUnitMatch.test(node.unit);
 
-							children[0].value = String(rgbValues[0]);
-							children[1].value = String(rgbValues[1]);
-							children[2].value = String(rgbValues[2]);
+const isNumber = node => isCalc(node) || Object(node).type === 'number' && node.unit === '';
 
-							node.nodes.splice(3, 0, [newComma()]);
-							node.nodes.splice(2, 0, [newComma()]);
-						} else if (isFunctionalGray) {
-							node.value = 'rgb';
+const isPercentage = node => isCalc(node) || Object(node).type === 'number' && node.unit === '%';
 
-							var _alphaNode = children[2];
+const isSlash = node => Object(node).type === 'operator' && node.value === '/';
 
-							var _rgbValues = convertColors.lab2rgb.apply(undefined, _toConsumableArray([children[0].value, 0, 0].map(function (number) {
-								return parseFloat(number);
-							}))).map(function (sourceValue) {
-								return Math.max(Math.min(parseInt(sourceValue * 2.55), 255), 0);
-							});
+const functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
+const functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
+const functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
 
-							node.removeAll().append(newParen('(')).append(newNumber(_rgbValues[0])).append(newComma()).append(newNumber(_rgbValues[1])).append(newComma()).append(newNumber(_rgbValues[2])).append(newParen(')'));
+const matchFunctionalLAB = children => children.every((child, index) => typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child));
 
-							if (_alphaNode) {
-								if (isPercentage(_alphaNode) && !isCalc(_alphaNode)) {
-									_alphaNode.unit = '';
-									_alphaNode.value = String(_alphaNode.value / 100);
-								}
+const matchFunctionalLCH = children => children.every((child, index) => typeof functionalLCHMatch[index] === 'function' && functionalLCHMatch[index](child));
 
-								if (_alphaNode.value !== '1') {
-									node.value += 'a';
+const matchFunctionalGray = children => children.every((child, index) => typeof functionalGrayMatch[index] === 'function' && functionalGrayMatch[index](child));
 
-									node.insertBefore(node.last, newComma()).insertBefore(node.last, _alphaNode);
-								}
-							}
-						}
-					}
-				});
+const newComma = () => parser.comma({
+  value: ','
+});
 
-				var newValue = String(ast);
+const newNumber = value => parser.number({
+  value
+});
 
-				if (preserve) {
-					decl.cloneBefore({ value: newValue });
-				} else {
-					decl.value = newValue;
-				}
-			}
-		});
-	};
+const newParen = value => parser.paren({
+  value
 });
 
-var colorAnyRegExp = /(^|[^\w-])(lab|lch|gray)\(/i;
-var colorRegExp = /^(lab|lch|gray)$/i;
-var labRegExp = /^lab$/i;
-var grayRegExp = /^gray$/i;
-var alphaUnitMatch = /^%?$/i;
-var calcFuncMatch = /^calc$/i;
-var hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
-
-var isAlphaValue = function isAlphaValue(node) {
-	return isCalc(node) || Object(node).type === 'number' && alphaUnitMatch.test(node.unit);
-};
-var isCalc = function isCalc(node) {
-	return Object(node).type === 'func' && calcFuncMatch.test(node.value);
-};
-var isHue = function isHue(node) {
-	return isCalc(node) || Object(node).type === 'number' && hueUnitMatch.test(node.unit);
-};
-var isNumber = function isNumber(node) {
-	return isCalc(node) || Object(node).type === 'number' && node.unit === '';
-};
-var isPercentage = function isPercentage(node) {
-	return isCalc(node) || Object(node).type === 'number' && node.unit === '%';
-};
-var isSlash = function isSlash(node) {
-	return Object(node).type === 'operator' && node.value === '/';
-};
-var functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
-var functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
-var functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
-var matchFunctionalLAB = function matchFunctionalLAB(children) {
-	return children.every(function (child, index) {
-		return typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child);
-	});
-};
-var matchFunctionalLCH = function matchFunctionalLCH(children) {
-	return children.every(function (child, index) {
-		return typeof functionalLCHMatch[index] === 'function' && functionalLCHMatch[index](child);
-	});
-};
-var matchFunctionalGray = function matchFunctionalGray(children) {
-	return children.every(function (child, index) {
-		return typeof functionalGrayMatch[index] === 'function' && functionalGrayMatch[index](child);
-	});
-};
-
-var newComma = function newComma() {
-	return parser.comma({ value: ',' });
-};
-var newNumber = function newNumber(value) {
-	return parser.number({ value });
-};
-var newParen = function newParen(value) {
-	return parser.paren({ value });
-};
-
 module.exports = index;
+//# sourceMappingURL=index.cjs.js.map

package.json

 {
   "name": "postcss-lab-function",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Use lab() and lch() color functions 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"
   ],
@@ -26,19 +28,19 @@ "scripts": {
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=6.0.0"
   },
   "dependencies": {
     "@csstools/convert-colors": "^1.4.0",
-    "postcss": "^6.0.23",
+    "postcss": "^7.0.2",
     "postcss-values-parser": "^1.5.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-preset-env": "^1.7.0",
-    "eslint": "^5.2.0",
+    "@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.63.4",
-    "rollup-plugin-babel": "^3.0.7"
+    "rollup": "^0.66.0",
+    "rollup-plugin-babel": "^4.0.1"
   },
@@ -45,0 +47,0 @@ "eslintConfig": {

README.md

@@ -6,3 +6,2 @@ # PostCSS Lab 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]
@@ -33,3 +32,3 @@
 
-Add [PostCSS Lab Function] to your build tool:
+Add [PostCSS Lab Function] to your project:
 
@@ -40,117 +39,27 @@ ```bash
 
-#### Node
-
 Use [PostCSS Lab Function] to process your CSS:
 
 ```js
-import postcssLabFunction from 'postcss-lab-function';
+const postcssLabFunction = require('postcss-lab-function');
 
-postcssLabFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);
+postcssLabFunction.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 Lab Function] as a plugin:
-
 ```js
-import postcss from 'gulp-postcss';
-import postcssLabFunction from 'postcss-lab-function';
+const postcss = require('postcss');
+const postcssLabFunction = require('postcss-lab-function');
 
 postcss([
   postcssLabFunction(/* pluginOptions */)
-]).process(YOUR_CSS);
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-#### Webpack
+[PostCSS Lab 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 Lab Function] in your Webpack configuration:
-
-```js
-import postcssLabFunction from 'postcss-lab-function';
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          { loader: 'postcss-loader', options: {
-            ident: 'postcss',
-            plugins: () => [
-              postcssLabFunction(/* pluginOptions */)
-            ]
-          } }
-        ]
-      }
-    ]
-  }
-}
-```
-
-#### Gulp
-
-Add [Gulp PostCSS] to your build tool:
-
-```bash
-npm install gulp-postcss --save-dev
-```
-
-Use [PostCSS Lab Function] in your Gulpfile:
-
-```js
-import postcss from 'gulp-postcss';
-import postcssLabFunction from 'postcss-lab-function';
-
-gulp.task('css', () => gulp.src('./src/*.css').pipe(
-  postcss([
-    postcssLabFunction(/* pluginOptions */)
-  ])
-).pipe(
-  gulp.dest('.')
-));
-```
-
-#### Grunt
-
-Add [Grunt PostCSS] to your build tool:
-
-```bash
-npm install grunt-postcss --save-dev
-```
-
-Use [PostCSS Lab Function] in your Gruntfile:
-
-```js
-import postcssLabFunction from 'postcss-lab-function';
-
-grunt.loadNpmTasks('grunt-postcss');
-
-grunt.initConfig({
-  postcss: {
-    options: {
-      use: [
-       postcssLabFunction(/* pluginOptions */)
-      ]
-    },
-    dist: {
-      src: '*.css'
-    }
-  }
-});
-```
-
 ## Options
@@ -164,3 +73,3 @@
 ```js
-postcssImageSetFunction({ preserve: true })
+postcssLabFunction({ preserve: true })
 ```
@@ -192,4 +101,2 @@
 [npm-url]: https://www.npmjs.com/package/postcss-lab-function
-[win-img]: https://img.shields.io/appveyor/ci/jonathantneal/postcss-lab-function.svg
-[win-url]: https://ci.appveyor.com/project/jonathantneal/postcss-lab-function
 
@@ -196,0 +103,0 @@ [CSS Color]: https://drafts.csswg.org/css-color/#specifying-lab-lch

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47145

increased by94%

Number of package files

8

increased by33.33%

Worsened metrics

Lines of code

210

decreased by-22.22%

Number of lines in readme file

104

decreased by-47.21%

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