Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: parse modern css color alpha with or without % #352

Merged
merged 2 commits into from
Aug 17, 2024
Merged

fix: parse modern css color alpha with or without % #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec5aa92
fix: parse modern css color alpha with or without %
gka Aug 17, 2024
7c6bde4
build
gka Aug 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 108 additions & 96 deletions dist/chroma-light.cjs
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

Loading