Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

postcss-lab-function

Package Overview
Dependencies
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-lab-function - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

4

CHANGELOG.md
# Changes to PostCSS Lab Function
### 3.0.1 (April 12, 2020)
- Updated: Ownership moved to CSSTools.
### 3.0.0 (April 12, 2020)

@@ -4,0 +8,0 @@

172

dist/index.cjs.js

@@ -9,80 +9,10 @@ 'use strict';

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
/** @type {(decl: CSSFunction) => void} Transform lab() and lch() functions. */
var visitor = function visitor(node) {
const visitor = node => {
/** @type {{ name: string, nodes: CSSNode[] }} */
var name = node.name,
nodes = node.nodes;
const {
name,
nodes
} = node;

@@ -97,6 +27,6 @@ if (isColorFunctionName(name)) {

var slashNode = nodes[3];
const slashNode = nodes[3];
/** @type {CSSNumber} Alpha channel. */
var alphaNode = nodes[4];
const alphaNode = nodes[4];

@@ -132,17 +62,9 @@ if (alphaNode) {

var _nodes = _slicedToArray(nodes, 3),
channelNode1 = _nodes[0],
channelNode2 = _nodes[1],
channelNode3 = _nodes[2];
const [channelNode1, channelNode2, channelNode3] = nodes;
/** Corresponding Color transformer. */
var toRGB = isLabColorFunctionName(name) ? convertColors.lab2rgb : convertColors.lch2rgb;
const toRGB = isLabColorFunctionName(name) ? convertColors.lab2rgb : convertColors.lch2rgb;
/** RGB channels from the source color. */
var rgbValues = toRGB.apply(void 0, _toConsumableArray([channelNode1.value, channelNode2.value, channelNode3.value].map(function (channelNumber) {
return parseFloat(channelNumber);
}))).map(function (channelValue) {
return Math.max(Math.min(parseInt(channelValue * 2.55), 255), 0);
});
const rgbValues = toRGB(...[channelNode1.value, channelNode2.value, channelNode3.value].map(channelNumber => parseFloat(channelNumber))).map(channelValue => Math.max(Math.min(parseInt(channelValue * 2.55), 255), 0));
channelNode3.replaceWith(channelNode3.clone({

@@ -161,79 +83,59 @@ value: String(rgbValues[2])

};
var commaNode = postcssValuesParser.parse(',').first;
const commaNode = postcssValuesParser.parse(',').first;
/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
var createRegExpTest = Function.bind.bind(RegExp.prototype.test);
const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
/** Return whether the function name is `lab` or `lch`. */
var isColorFunctionName = createRegExpTest(/^(lab|lch)$/i);
const isColorFunctionName = createRegExpTest(/^(lab|lch)$/i);
/** Return whether the function name is `calc`. */
var isCalcFunctionName = createRegExpTest(/^calc$/i);
const isCalcFunctionName = createRegExpTest(/^calc$/i);
/** Return whether the function name is `lab`. */
var isLabColorFunctionName = createRegExpTest(/^lab$/i);
const isLabColorFunctionName = createRegExpTest(/^lab$/i);
/** Return whether the unit is alpha-like. */
var isAlphaLikeUnit = createRegExpTest(/^%?$/i);
const isAlphaLikeUnit = createRegExpTest(/^%?$/i);
/** Return whether the unit is hue-like. */
var isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
/** @type {(node: CSSFunction) => boolean} Return whether the node is an Alpha-like unit. */
var isAlphaValue = function isAlphaValue(node) {
return isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
};
const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
/** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */
var isCalc = function isCalc(node) {
return node.type === 'func' && isCalcFunctionName(node.name);
};
const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name);
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */
var isHue = function isHue(node) {
return isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
};
const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */
var isNumber = function isNumber(node) {
return isCalc(node) || node.type === 'numeric' && node.unit === '';
};
const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === '';
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */
var isPercentage = function isPercentage(node) {
return isCalc(node) || node.type === 'numeric' && node.unit === '%';
};
const isPercentage = node => isCalc(node) || node.type === 'numeric' && node.unit === '%';
/** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */
var isSlash = function isSlash(node) {
return node.type === 'operator' && node.value === '/';
};
const isSlash = node => node.type === 'operator' && node.value === '/';
/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lab() function. */
var isLabFunctionContents = function isLabFunctionContents(nodes) {
return nodes.every(function (node, index) {
return typeof labFunctionContents[index] === 'function' && labFunctionContents[index](node);
});
};
const isLabFunctionContents = nodes => nodes.every((node, index) => typeof labFunctionContents[index] === 'function' && labFunctionContents[index](node));
/** Set of nodes in a lab() function. */
var labFunctionContents = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
const labFunctionContents = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lch() function. */
var isLchFunctionContents = function isLchFunctionContents(nodes) {
return nodes.every(function (node, index) {
return typeof lchFunctionContents[index] === 'function' && lchFunctionContents[index](node);
});
};
const isLchFunctionContents = nodes => nodes.every((node, index) => typeof lchFunctionContents[index] === 'function' && lchFunctionContents[index](node));
/** Set of nodes in a lch() function. */
var lchFunctionContents = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
const lchFunctionContents = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
/** @typedef {import('postcss-values-parser').Func} CSSFunction */

@@ -256,9 +158,11 @@

var visitor$1 = function visitor$1(decl) {
var value = decl.value;
const visitor$1 = decl => {
const {
value
} = decl;
if (hasAnyColorFunction(value)) {
var valueAST = postcssValuesParser.parse(value);
const valueAST = postcssValuesParser.parse(value);
valueAST.walkFuncs(visitor);
var newValue = String(valueAST);
const newValue = String(valueAST);
if (options.preserve) decl.cloneBefore({

@@ -271,6 +175,6 @@ value: newValue

var createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
/** Return whether the value has a lab() or lch() function. */
var hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(lab|lch)\(/i);
const hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(lab|lch)\(/i);
/** @typedef {import('postcss').Declaration} CSSDeclaration */

@@ -280,7 +184,7 @@

var plugin = postcss.plugin('postcss-lab-function',
const plugin = postcss.plugin('postcss-lab-function',
/** @type {PostCSSPluginInitializer} */
function (opts) {
opts => {
options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
return function (root) {
return root => {
root.walkDecls(visitor$1);

@@ -287,0 +191,0 @@ };

@@ -5,80 +5,10 @@ import postcss from 'postcss';

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
/** @type {(decl: CSSFunction) => void} Transform lab() and lch() functions. */
var visitor = function visitor(node) {
const visitor = node => {
/** @type {{ name: string, nodes: CSSNode[] }} */
var name = node.name,
nodes = node.nodes;
const {
name,
nodes
} = node;

@@ -93,6 +23,6 @@ if (isColorFunctionName(name)) {

var slashNode = nodes[3];
const slashNode = nodes[3];
/** @type {CSSNumber} Alpha channel. */
var alphaNode = nodes[4];
const alphaNode = nodes[4];

@@ -128,17 +58,9 @@ if (alphaNode) {

var _nodes = _slicedToArray(nodes, 3),
channelNode1 = _nodes[0],
channelNode2 = _nodes[1],
channelNode3 = _nodes[2];
const [channelNode1, channelNode2, channelNode3] = nodes;
/** Corresponding Color transformer. */
var toRGB = isLabColorFunctionName(name) ? lab2rgb : lch2rgb;
const toRGB = isLabColorFunctionName(name) ? lab2rgb : lch2rgb;
/** RGB channels from the source color. */
var rgbValues = toRGB.apply(void 0, _toConsumableArray([channelNode1.value, channelNode2.value, channelNode3.value].map(function (channelNumber) {
return parseFloat(channelNumber);
}))).map(function (channelValue) {
return Math.max(Math.min(parseInt(channelValue * 2.55), 255), 0);
});
const rgbValues = toRGB(...[channelNode1.value, channelNode2.value, channelNode3.value].map(channelNumber => parseFloat(channelNumber))).map(channelValue => Math.max(Math.min(parseInt(channelValue * 2.55), 255), 0));
channelNode3.replaceWith(channelNode3.clone({

@@ -157,79 +79,59 @@ value: String(rgbValues[2])

};
var commaNode = parse(',').first;
const commaNode = parse(',').first;
/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
var createRegExpTest = Function.bind.bind(RegExp.prototype.test);
const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
/** Return whether the function name is `lab` or `lch`. */
var isColorFunctionName = createRegExpTest(/^(lab|lch)$/i);
const isColorFunctionName = createRegExpTest(/^(lab|lch)$/i);
/** Return whether the function name is `calc`. */
var isCalcFunctionName = createRegExpTest(/^calc$/i);
const isCalcFunctionName = createRegExpTest(/^calc$/i);
/** Return whether the function name is `lab`. */
var isLabColorFunctionName = createRegExpTest(/^lab$/i);
const isLabColorFunctionName = createRegExpTest(/^lab$/i);
/** Return whether the unit is alpha-like. */
var isAlphaLikeUnit = createRegExpTest(/^%?$/i);
const isAlphaLikeUnit = createRegExpTest(/^%?$/i);
/** Return whether the unit is hue-like. */
var isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i);
/** @type {(node: CSSFunction) => boolean} Return whether the node is an Alpha-like unit. */
var isAlphaValue = function isAlphaValue(node) {
return isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
};
const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
/** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */
var isCalc = function isCalc(node) {
return node.type === 'func' && isCalcFunctionName(node.name);
};
const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name);
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */
var isHue = function isHue(node) {
return isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
};
const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */
var isNumber = function isNumber(node) {
return isCalc(node) || node.type === 'numeric' && node.unit === '';
};
const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === '';
/** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */
var isPercentage = function isPercentage(node) {
return isCalc(node) || node.type === 'numeric' && node.unit === '%';
};
const isPercentage = node => isCalc(node) || node.type === 'numeric' && node.unit === '%';
/** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */
var isSlash = function isSlash(node) {
return node.type === 'operator' && node.value === '/';
};
const isSlash = node => node.type === 'operator' && node.value === '/';
/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lab() function. */
var isLabFunctionContents = function isLabFunctionContents(nodes) {
return nodes.every(function (node, index) {
return typeof labFunctionContents[index] === 'function' && labFunctionContents[index](node);
});
};
const isLabFunctionContents = nodes => nodes.every((node, index) => typeof labFunctionContents[index] === 'function' && labFunctionContents[index](node));
/** Set of nodes in a lab() function. */
var labFunctionContents = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
const labFunctionContents = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lch() function. */
var isLchFunctionContents = function isLchFunctionContents(nodes) {
return nodes.every(function (node, index) {
return typeof lchFunctionContents[index] === 'function' && lchFunctionContents[index](node);
});
};
const isLchFunctionContents = nodes => nodes.every((node, index) => typeof lchFunctionContents[index] === 'function' && lchFunctionContents[index](node));
/** Set of nodes in a lch() function. */
var lchFunctionContents = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
const lchFunctionContents = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
/** @typedef {import('postcss-values-parser').Func} CSSFunction */

@@ -252,9 +154,11 @@

var visitor$1 = function visitor$1(decl) {
var value = decl.value;
const visitor$1 = decl => {
const {
value
} = decl;
if (hasAnyColorFunction(value)) {
var valueAST = parse(value);
const valueAST = parse(value);
valueAST.walkFuncs(visitor);
var newValue = String(valueAST);
const newValue = String(valueAST);
if (options.preserve) decl.cloneBefore({

@@ -267,6 +171,6 @@ value: newValue

var createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
/** Return whether the value has a lab() or lch() function. */
var hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(lab|lch)\(/i);
const hasAnyColorFunction = createRegExpTest$1(/(^|[^\w-])(lab|lch)\(/i);
/** @typedef {import('postcss').Declaration} CSSDeclaration */

@@ -276,7 +180,7 @@

var plugin = postcss.plugin('postcss-lab-function',
const plugin = postcss.plugin('postcss-lab-function',
/** @type {PostCSSPluginInitializer} */
function (opts) {
opts => {
options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
return function (root) {
return root => {
root.walkDecls(visitor$1);

@@ -283,0 +187,0 @@ };

{
"name": "postcss-lab-function",
"version": "3.0.0",
"version": "3.0.1",
"description": "Use lab() and lch() color functions in CSS",
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
"license": "CC0-1.0",
"repository": "jonathantneal/postcss-lab-function",
"homepage": "https://github.com/jonathantneal/postcss-lab-function#readme",
"bugs": "https://github.com/jonathantneal/postcss-lab-function/issues",
"repository": "csstools/postcss-lab-function",
"homepage": "https://github.com/csstools/postcss-lab-function#readme",
"bugs": "https://github.com/csstools/postcss-lab-function/issues",
"main": "dist/index.cjs.js",

@@ -20,2 +20,3 @@ "module": "dist/index.esm.mjs",

"lint:fix": "npx eslint --cache --fix",
"pretest": "npm install && npm run build",
"test": "npm run lint && npm run tape",

@@ -41,14 +42,20 @@ "tape": "npx postcss-tape"

},
"eslintConfig": {
"parser": "babel-eslint",
"ignorePatterns": [
"dist",
"node_modules"
]
},
"babel": {
"presets": [
"@babel/env"
[
"@babel/env",
{
"targets": "maintained node versions"
}
]
]
},
"eslintConfig": {
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parser": "babel-eslint"
},
"rollup": {

@@ -55,0 +62,0 @@ "input": "src/index.js",

@@ -5,3 +5,3 @@ # PostCSS Lab Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]

[<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/jonathantneal/postcss-lab-function/master.svg" height="20">][cli-url]
[<img alt="build status" src="https://img.shields.io/travis/csstools/postcss-lab-function/master.svg" height="20">][cli-url]
[<img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]

@@ -87,3 +87,3 @@

[cli-url]: https://travis-ci.org/jonathantneal/postcss-lab-function
[cli-url]: https://travis-ci.org/csstools/postcss-lab-function
[css-url]: https://cssdb.org/#lab-function

@@ -98,2 +98,2 @@ [git-url]: https://gitter.im/postcss/postcss

[PostCSS Loader]: https://github.com/postcss/postcss-loader
[PostCSS Lab Function]: https://github.com/jonathantneal/postcss-lab-function
[PostCSS Lab Function]: https://github.com/csstools/postcss-lab-function
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc