Skip to content

Commit

Permalink
fix: parse modern css color alpha with or without % (#352)
Browse files Browse the repository at this point in the history 
* fix: parse modern css color alpha with or without %
* build
  • Loading branch information
@gka
gka authored Aug 17, 2024
1 parent cb09f70 commit e20f5da
Show file tree
Hide file tree
Showing 6 changed files with 333 additions and 288 deletions.
204 changes: 108 additions & 96 deletions dist/chroma-light.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1005,42 +1005,75 @@
return [r, g, b ].concat( (rest.length > 0 && rest[0] < 1 ? [rest[0]] : []));
};

var RE_RGB = /^rgb\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\)$/;
var RE_RGB_LEGACY = /^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/;

var RE_RGBA =
/^rgba?\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\/\s*([01]|[01]?\.\d+)\)$/;
var RE_RGBA_LEGACY =
/^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/;

var RE_RGB_PCT =
/^rgb\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
var RE_RGB_PCT_LEGACY =
/^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;

var RE_RGBA_PCT =
/^rgba?\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
var RE_RGBA_PCT_LEGACY =
/^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;

var RE_HSL =
/^hsl\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
var RE_HSL_LEGACY =
/^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;

var RE_HSLA =
/^hsla?\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
var INT_OR_PCT = /((?:-?\d+)|(?:-?\d+(?:\.\d+)?)%|none)/.source;
var FLOAT_OR_PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%?)|none)/.source;
var PCT = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)%)|none)/.source;
var RE_S = /\s*/.source;
var SEP = /\s+/.source;
var COMMA = /\s*,\s*/.source;
var ANLGE = /((?:-?(?:\d+(?:\.\d*)?|\.\d+)(?:deg)?)|none)/.source;
var ALPHA = /\s*(?:\/\s*((?:[01]|[01]?\.\d+)|\d+(?:\.\d+)?%))?/.source;

// e.g. rgb(250 20 0), rgb(100% 50% 20%), rgb(100% 50% 20% / 0.5)
var RE_RGB = new RegExp(
'^rgba?\\(' +
RE_S +
[INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(SEP) +
ALPHA +
'\\)$'
);
var RE_RGB_LEGACY = new RegExp(
'^rgb\\(' +
RE_S +
[INT_OR_PCT, INT_OR_PCT, INT_OR_PCT].join(COMMA) +
RE_S +
'\\)$'
);
var RE_RGBA_LEGACY = new RegExp(
'^rgba\\(' +
RE_S +
[INT_OR_PCT, INT_OR_PCT, INT_OR_PCT, FLOAT_OR_PCT].join(COMMA) +
RE_S +
'\\)$'
);

var RE_HSL = new RegExp(
'^hsla?\\(' + RE_S + [ANLGE, PCT, PCT].join(SEP) + ALPHA + '\\)$'
);
var RE_HSL_LEGACY = new RegExp(
'^hsl?\\(' + RE_S + [ANLGE, PCT, PCT].join(COMMA) + RE_S + '\\)$'
);
var RE_HSLA_LEGACY =
/^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;

var RE_LAB =
/^lab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
var RE_LCH =
/^lch\(\s*(-?\d+(?:\.\d+)?%?) \s*((?:-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
var RE_OKLAB =
/^oklab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
var RE_OKLCH =
/^oklch\(\s*(-?\d+(?:\.\d+)?%?) \s*(?:(-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
var RE_LAB = new RegExp(
'^lab\\(' +
RE_S +
[FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
ALPHA +
'\\)$'
);
var RE_LCH = new RegExp(
'^lch\\(' +
RE_S +
[FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
ALPHA +
'\\)$'
);
var RE_OKLAB = new RegExp(
'^oklab\\(' +
RE_S +
[FLOAT_OR_PCT, FLOAT_OR_PCT, FLOAT_OR_PCT].join(SEP) +
ALPHA +
'\\)$'
);
var RE_OKLCH = new RegExp(
'^oklch\\(' +
RE_S +
[FLOAT_OR_PCT, FLOAT_OR_PCT, ANLGE].join(SEP) +
ALPHA +
'\\)$'
);

var round$2 = Math.round;

Expand Down Expand Up @@ -1084,80 +1117,62 @@
if ((m = css.match(RE_RGB)) || (m = css.match(RE_RGB_LEGACY))) {
var rgb = m.slice(1, 4);
for (var i = 0; i < 3; i++) {
rgb[i] = +rgb[i];
rgb[i] = +percentToAbsolute(noneToValue(rgb[i], 0), 0, 255);
}
rgb[3] = 1; // default alpha
rgb = roundRGB(rgb);
var alpha = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb[3] = alpha; // default alpha
return rgb;
}

// rgba(250,20,0,0.4)
if ((m = css.match(RE_RGBA)) || (m = css.match(RE_RGBA_LEGACY))) {
if ((m = css.match(RE_RGBA_LEGACY))) {
var rgb$1 = m.slice(1, 5);
for (var i$1 = 0; i$1 < 4; i$1++) {
rgb$1[i$1] = +rgb$1[i$1];
rgb$1[i$1] = +percentToAbsolute(rgb$1[i$1], 0, 255);
}
return rgb$1;
}

// rgb(100%,0%,0%)
if ((m = css.match(RE_RGB_PCT)) || (m = css.match(RE_RGB_PCT_LEGACY))) {
var rgb$2 = m.slice(1, 4);
for (var i$2 = 0; i$2 < 3; i$2++) {
rgb$2[i$2] = round$2(rgb$2[i$2] * 2.55);
}
rgb$2[3] = 1; // default alpha
return rgb$2;
}

// rgba(100%,0%,0%,0.4)
if ((m = css.match(RE_RGBA_PCT)) || (m = css.match(RE_RGBA_PCT_LEGACY))) {
var rgb$3 = m.slice(1, 5);
for (var i$3 = 0; i$3 < 3; i$3++) {
rgb$3[i$3] = round$2(rgb$3[i$3] * 2.55);
}
rgb$3[3] = +rgb$3[3];
return rgb$3;
}

// hsl(0,100%,50%)
if ((m = css.match(RE_HSL)) || (m = css.match(RE_HSL_LEGACY))) {
var hsl = m.slice(1, 4);
hsl[1] *= 0.01;
hsl[2] *= 0.01;
var rgb$4 = hsl2rgb(hsl);
for (var i$4 = 0; i$4 < 3; i$4++) {
rgb$4[i$4] = round$2(rgb$4[i$4]);
}
rgb$4[3] = 1;
return rgb$4;
hsl[0] = +noneToValue(hsl[0].replace('deg', ''), 0);
hsl[1] = +percentToAbsolute(noneToValue(hsl[1], 0), 0, 100) * 0.01;
hsl[2] = +percentToAbsolute(noneToValue(hsl[2], 0), 0, 100) * 0.01;
var rgb$2 = roundRGB(hsl2rgb(hsl));
var alpha$1 = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb$2[3] = alpha$1;
return rgb$2;
}

// hsla(0,100%,50%,0.5)
if ((m = css.match(RE_HSLA)) || (m = css.match(RE_HSLA_LEGACY))) {
if ((m = css.match(RE_HSLA_LEGACY))) {
var hsl$1 = m.slice(1, 4);
hsl$1[1] *= 0.01;
hsl$1[2] *= 0.01;
var rgb$5 = hsl2rgb(hsl$1);
for (var i$5 = 0; i$5 < 3; i$5++) {
rgb$5[i$5] = round$2(rgb$5[i$5]);
var rgb$3 = hsl2rgb(hsl$1);
for (var i$2 = 0; i$2 < 3; i$2++) {
rgb$3[i$2] = round$2(rgb$3[i$2]);
}
rgb$5[3] = +m[4]; // default alpha = 1
return rgb$5;
rgb$3[3] = +m[4]; // default alpha = 1
return rgb$3;
}

if ((m = css.match(RE_LAB))) {
var lab = m.slice(1, 4);
lab[0] = percentToAbsolute(lab[0], 0, 100);
lab[1] = percentToAbsolute(lab[1], -125, 125, true);
lab[2] = percentToAbsolute(lab[2], -125, 125, true);
lab[0] = percentToAbsolute(noneToValue(lab[0], 0), 0, 100);
lab[1] = percentToAbsolute(noneToValue(lab[1], 0), -125, 125, true);
lab[2] = percentToAbsolute(noneToValue(lab[2], 0), -125, 125, true);
// convert to D50 Lab whitepoint
var wp = getLabWhitePoint();
setLabWhitePoint('d50');
var rgb$6 = roundRGB(lab2rgb(lab));
var rgb$4 = roundRGB(lab2rgb(lab));
// convert back to original Lab whitepoint
setLabWhitePoint(wp);
rgb$6[3] = m[4] !== undefined ? +m[4] : 1;
return rgb$6;
var alpha$2 = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb$4[3] = alpha$2;
return rgb$4;
}

if ((m = css.match(RE_LCH))) {
Expand All @@ -1168,52 +1183,49 @@
// convert to D50 Lab whitepoint
var wp$1 = getLabWhitePoint();
setLabWhitePoint('d50');
var rgb$7 = roundRGB(lch2rgb(lch));
var rgb$5 = roundRGB(lch2rgb(lch));
// convert back to original Lab whitepoint
setLabWhitePoint(wp$1);
rgb$7[3] = m[4] !== undefined ? +m[4] : 1;
return rgb$7;
var alpha$3 = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb$5[3] = alpha$3;
return rgb$5;
}

if ((m = css.match(RE_OKLAB))) {
var oklab = m.slice(1, 4);
oklab[0] = percentToAbsolute(oklab[0], 0, 1);
oklab[1] = percentToAbsolute(oklab[1], -0.4, 0.4, true);
oklab[2] = percentToAbsolute(oklab[2], -0.4, 0.4, true);
var rgb$8 = roundRGB(oklab2rgb(oklab));
rgb$8[3] = m[4] !== undefined ? +m[4] : 1;
return rgb$8;
oklab[0] = percentToAbsolute(noneToValue(oklab[0], 0), 0, 1);
oklab[1] = percentToAbsolute(noneToValue(oklab[1], 0), -0.4, 0.4, true);
oklab[2] = percentToAbsolute(noneToValue(oklab[2], 0), -0.4, 0.4, true);
var rgb$6 = roundRGB(oklab2rgb(oklab));
var alpha$4 = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb$6[3] = alpha$4;
return rgb$6;
}

if ((m = css.match(RE_OKLCH))) {
var oklch = m.slice(1, 4);
oklch[0] = percentToAbsolute(oklch[0], 0, 1);
oklch[0] = percentToAbsolute(noneToValue(oklch[0], 0), 0, 1);
oklch[1] = percentToAbsolute(noneToValue(oklch[1], 0), 0, 0.4, false);
oklch[2] = +noneToValue(oklch[2].replace('deg', ''), 0);
var rgb$9 = roundRGB(oklch2rgb(oklch));
rgb$9[3] = m[4] !== undefined ? +m[4] : 1;
return rgb$9;
var rgb$7 = roundRGB(oklch2rgb(oklch));
var alpha$5 = m[4] !== undefined ? +percentToAbsolute(m[4], 0, 1) : 1;
rgb$7[3] = alpha$5;
return rgb$7;
}
};

css2rgb.test = function (s) {
return (
// modern
RE_RGB.test(s) ||
RE_RGBA.test(s) ||
RE_RGB_PCT.test(s) ||
RE_RGBA_PCT.test(s) ||
RE_HSL.test(s) ||
RE_HSLA.test(s) ||
RE_LAB.test(s) ||
RE_LCH.test(s) ||
RE_OKLAB.test(s) ||
RE_OKLCH.test(s) ||
// legacy
RE_RGB_LEGACY.test(s) ||
RE_RGBA_LEGACY.test(s) ||
RE_RGB_PCT_LEGACY.test(s) ||
RE_RGBA_PCT_LEGACY.test(s) ||
RE_HSL_LEGACY.test(s) ||
RE_HSLA_LEGACY.test(s)
);
Expand Down
2 changes: 1 addition & 1 deletion dist/chroma-light.min.cjs
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e20f5da

Please sign in to comment.