postcss-color-functional-notation 3.0.0 → 4.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 [<img alt="NPM Version" src="https://img.shields.io/npm/v/postcss-color-functional-notation.svg" height="20">][npm-url]
 [<img alt="CSS Standard Status" src="https://cssdb.org/badge/lab-function.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://img.shields.io/travis/csstools/postcss-color-functional-notation/master.svg" height="20">][cli-url]
+[<img alt="Build Status" src="https://github.com/csstools/postcss-color-functional-notation/workflows/test/badge.svg" height="20">][cli-url]
 [<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
 
 [PostCSS Color Functional Notation] lets you use space and slash separated
@@ -36,14 +36,6 @@ npm install postcss-color-functional-notation --save-dev
 
 Use [PostCSS Color Functional Notation] to process your CSS:
 
-```js
-const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
-
-postcssColorFunctionalNotation.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
-
 ```js
 const postcss = require('postcss');
 const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
@@ -91,7 +83,7 @@ postcssImageSetFunction({ preserve: true })
 }
 ```
 
-[cli-url]: https://travis-ci.org/csstools/postcss-color-functional-notation
+[cli-url]: https://github.com/csstools/postcss-color-functional-notation/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#color-functional-notation
 [git-url]: https://gitter.im/postcss/postcss
 [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation

package/dist/index.cjs.js

@@ -1,8 +1,5 @@
 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var postcss = _interopDefault(require('postcss'));
 var postcssValuesParser = require('postcss-values-parser');
 
 /** @type {(decl: CSSFunction) => void} Transform a space and slash separated color function. */
@@ -19,10 +16,6 @@ const onCSSFunction = node => {
     const isRgbWithNumbers = isRgbColorFunctionName(name) && isRgbNumberFunctionContents(nodes);
     const isRgbWithPercents = isRgbColorFunctionName(name) && isRgbPercentFunctionContents(nodes);
 
-    if (name === 'hsl' && !isHsl) {
-      console.log([name, isHue(nodes[0])], nodes[0]);
-    }
-
     if (isHsl || isRgbWithNumbers || isRgbWithPercents) {
       // rename the Color function to `hsl` or `rgb`
       Object.assign(node, {
@@ -95,25 +88,25 @@ function to255ColorValue(value) {
 /** @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);
+const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
 /** Return whether the function name is `hsl()`, `hsla()`, `rgb()`, or `rgba()`. */
 
-const isColorFunctionName = createRegExpTest(/^(hsl|rgb)a?$/i);
+const isColorFunctionName = createRegExpTest$1(/^(hsl|rgb)a?$/i);
 /** Return whether the function name is `hsl()` or `hsla()`. */
 
-const isHslColorFunctionName = createRegExpTest(/^hsla?$/i);
+const isHslColorFunctionName = createRegExpTest$1(/^hsla?$/i);
 /** Return whether the function name is `rgb()` or `rgba()`. */
 
-const isRgbColorFunctionName = createRegExpTest(/^rgba?$/i);
+const isRgbColorFunctionName = createRegExpTest$1(/^rgba?$/i);
 /** Return whether the function name is `calc`. */
 
-const isCalcFunctionName = createRegExpTest(/^calc$/i);
+const isCalcFunctionName = createRegExpTest$1(/^calc$/i);
 /** Return whether the unit is alpha-like. */
 
-const isAlphaLikeUnit = createRegExpTest(/^%?$/i);
+const isAlphaLikeUnit = createRegExpTest$1(/^%?$/i);
 /** Return whether the unit is hue-like. */
 
-const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
+const isHueLikeUnit = createRegExpTest$1(/^(deg|grad|rad|turn)?$/i);
 /** @type {(node: CSSNumber) => boolean} Return whether the node is an Alpha-like unit. */
 
 const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
@@ -176,14 +169,29 @@ var options = {
 
 /** @type {(decl: CSSDeclaration) => void} Transform space and slash separated color functions in CSS Declarations. */
 
-const onCSSDeclaration = decl => {
+const onCSSDeclaration = (decl, {
+  result
+}) => {
   const {
     value: originalValue
   } = decl;
 
   if (hasAnyColorFunction(originalValue)) {
-    const valueAST = postcssValuesParser.parse(originalValue);
-    valueAST.walkFuncs(onCSSFunction);
+    let valueAST;
+
+    try {
+      valueAST = postcssValuesParser.parse(originalValue, {
+        ignoreUnknownWords: true
+      });
+    } catch (error) {
+      decl.warn(result, `Failed to parse value '${originalValue}' as a color function. Leaving the original value intact.`);
+    }
+
+    if (typeof valueAST === 'undefined') {
+      return;
+    }
+
+    valueAST.walkType('func', onCSSFunction);
     const modifiedValue = String(valueAST);
 
     if (modifiedValue !== originalValue) {
@@ -195,24 +203,26 @@ const onCSSDeclaration = decl => {
 };
 /** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
 
-const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
+const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
 /** Return whether the value has an `hsl()`, `hsla()`, `rgb()`, or `rgba()` function. */
 
-const hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(hsla?|rgba?)\(/i);
+const hasAnyColorFunction = createRegExpTest(/(^|[^\w-])(hsla?|rgba?)\(/i);
 /** @typedef {import('postcss').Declaration} CSSDeclaration */
 
 /** Transform space and slash separated color functions in CSS. */
 
-const postcssPlugin = postcss.plugin('postcss-color-functional-notation', opts => {
+function postcssColorFunctionalNotation(opts) {
   options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
-  return root => {
-    root.walkDecls(onCSSDeclaration);
+  return {
+    postcssPlugin: 'postcss-color-functional-notation',
+    Declaration: onCSSDeclaration
   };
-});
+}
+postcssColorFunctionalNotation.postcss = true;
 /** @typedef {import('postcss').Root} CSSRoot */
 
 /** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */
 
 /** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */
 
-module.exports = postcssPlugin;
+module.exports = postcssColorFunctionalNotation;

package/dist/index.esm.js

@@ -1,4 +1,3 @@
-import postcss from 'postcss';
 import { parse } from 'postcss-values-parser';
 
 /** @type {(decl: CSSFunction) => void} Transform a space and slash separated color function. */
@@ -15,10 +14,6 @@ const onCSSFunction = node => {
     const isRgbWithNumbers = isRgbColorFunctionName(name) && isRgbNumberFunctionContents(nodes);
     const isRgbWithPercents = isRgbColorFunctionName(name) && isRgbPercentFunctionContents(nodes);
 
-    if (name === 'hsl' && !isHsl) {
-      console.log([name, isHue(nodes[0])], nodes[0]);
-    }
-
     if (isHsl || isRgbWithNumbers || isRgbWithPercents) {
       // rename the Color function to `hsl` or `rgb`
       Object.assign(node, {
@@ -91,25 +86,25 @@ function to255ColorValue(value) {
 /** @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);
+const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
 /** Return whether the function name is `hsl()`, `hsla()`, `rgb()`, or `rgba()`. */
 
-const isColorFunctionName = createRegExpTest(/^(hsl|rgb)a?$/i);
+const isColorFunctionName = createRegExpTest$1(/^(hsl|rgb)a?$/i);
 /** Return whether the function name is `hsl()` or `hsla()`. */
 
-const isHslColorFunctionName = createRegExpTest(/^hsla?$/i);
+const isHslColorFunctionName = createRegExpTest$1(/^hsla?$/i);
 /** Return whether the function name is `rgb()` or `rgba()`. */
 
-const isRgbColorFunctionName = createRegExpTest(/^rgba?$/i);
+const isRgbColorFunctionName = createRegExpTest$1(/^rgba?$/i);
 /** Return whether the function name is `calc`. */
 
-const isCalcFunctionName = createRegExpTest(/^calc$/i);
+const isCalcFunctionName = createRegExpTest$1(/^calc$/i);
 /** Return whether the unit is alpha-like. */
 
-const isAlphaLikeUnit = createRegExpTest(/^%?$/i);
+const isAlphaLikeUnit = createRegExpTest$1(/^%?$/i);
 /** Return whether the unit is hue-like. */
 
-const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
+const isHueLikeUnit = createRegExpTest$1(/^(deg|grad|rad|turn)?$/i);
 /** @type {(node: CSSNumber) => boolean} Return whether the node is an Alpha-like unit. */
 
 const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
@@ -172,14 +167,29 @@ var options = {
 
 /** @type {(decl: CSSDeclaration) => void} Transform space and slash separated color functions in CSS Declarations. */
 
-const onCSSDeclaration = decl => {
+const onCSSDeclaration = (decl, {
+  result
+}) => {
   const {
     value: originalValue
   } = decl;
 
   if (hasAnyColorFunction(originalValue)) {
-    const valueAST = parse(originalValue);
-    valueAST.walkFuncs(onCSSFunction);
+    let valueAST;
+
+    try {
+      valueAST = parse(originalValue, {
+        ignoreUnknownWords: true
+      });
+    } catch (error) {
+      decl.warn(result, `Failed to parse value '${originalValue}' as a color function. Leaving the original value intact.`);
+    }
+
+    if (typeof valueAST === 'undefined') {
+      return;
+    }
+
+    valueAST.walkType('func', onCSSFunction);
     const modifiedValue = String(valueAST);
 
     if (modifiedValue !== originalValue) {
@@ -191,24 +201,26 @@ const onCSSDeclaration = decl => {
 };
 /** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
 
-const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
+const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
 /** Return whether the value has an `hsl()`, `hsla()`, `rgb()`, or `rgba()` function. */
 
-const hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(hsla?|rgba?)\(/i);
+const hasAnyColorFunction = createRegExpTest(/(^|[^\w-])(hsla?|rgba?)\(/i);
 /** @typedef {import('postcss').Declaration} CSSDeclaration */
 
 /** Transform space and slash separated color functions in CSS. */
 
-const postcssPlugin = postcss.plugin('postcss-color-functional-notation', opts => {
+function postcssColorFunctionalNotation(opts) {
   options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
-  return root => {
-    root.walkDecls(onCSSDeclaration);
+  return {
+    postcssPlugin: 'postcss-color-functional-notation',
+    Declaration: onCSSDeclaration
   };
-});
+}
+postcssColorFunctionalNotation.postcss = true;
 /** @typedef {import('postcss').Root} CSSRoot */
 
 /** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */
 
 /** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */
 
-export default postcssPlugin;
+export { postcssColorFunctionalNotation as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-color-functional-notation",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "Use space and slash separated color notation in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
@@ -19,23 +19,26 @@
     "lint:fix": "npx eslint --cache --fix",
     "pretest": "npm install && npm run build",
     "test": "npm run lint && npm run tape",
-    "tape": "npx postcss-tape"
+    "tape": "npx postcss-tape",
+    "prepublishOnly": "npm test"
   },
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=12"
   },
   "dependencies": {
-    "postcss": "^7.0.27",
-    "postcss-values-parser": "^3.2.0"
+    "postcss-values-parser": "6.0.1"
+  },
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
   "devDependencies": {
-    "@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",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "eslint": "^8.2.0",
+    "postcss": "^8.3.11",
+    "postcss-tape": "^6.0.1",
     "pre-commit": "^1.2.2",
-    "rollup": "^2.7.2",
+    "rollup": "^2.60.0",
     "rollup-plugin-babel": "^4.4.0"
   },
   "babel": {
@@ -54,7 +57,9 @@
       "node": true
     },
     "extends": "eslint:recommended",
-    "parser": "babel-eslint"
+    "parserOptions": {
+      "sourceType": "module"
+    }
   },
   "rollup": {
     "input": "src/index.js",
@@ -63,6 +68,7 @@
     ],
     "output": [
       {
+        "exports": "default",
         "file": "dist/index.cjs.js",
         "format": "cjs"
       },

package/CHANGELOG.md

@@ -1,28 +0,0 @@
-# Changes to PostCSS Color Functional Notation
-
-### 3.0.0 (April 25, 2020)
-
-- Updated: Support for Node 10+
-- Updated: `postcss` to 7.0.27 (patch)
-- Updated: `postcss-values-parser` to 3.2.0 (minor)
-
-### 2.0.1 (September 18, 2018)
-
-- Updated: PostCSS Values Parser 2 (patch for this project)
-
-### 2.0.0 (September 17, 2018)
-
-- Updated: Support for PostCSS v7+
-- Updated: Support for Node 6+
-
-### 1.0.2 (July 13, 2018)
-
-- Fixed: Poorly detected hsl() and rgb() now resolve correctly
-
-### 1.0.1 (May 11, 2018)
-
-- Fixed: A non-percentage 0 works alongside other percentages
-
-### 1.0.0 (May 7, 2018)
-
-- Initial version