diff --git a/CHANGELOG.md b/CHANGELOG.md index 7006b2004..d30e76ba1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## main +## 19.2.1 +### ✨ Features and improvements +* Skip running color match regex for hex color or rgb, if not required [#186](https://github.com/maplibre/maplibre-style-spec/pull/186) ## 19.2.0 diff --git a/package-lock.json b/package-lock.json index e82cedf72..3ecea399c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@maplibre/maplibre-gl-style-spec", - "version": "19.2.0", + "version": "19.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@maplibre/maplibre-gl-style-spec", - "version": "19.2.0", + "version": "19.2.1", "license": "ISC", "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", diff --git a/package.json b/package.json index 2cab6f000..020b45a0f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@maplibre/maplibre-gl-style-spec", "description": "a specification for maplibre gl styles", - "version": "19.2.0", + "version": "19.2.1", "author": "MapLibre", "keywords": [ "mapbox", diff --git a/src/util/parse_css_color.ts b/src/util/parse_css_color.ts index 589056d42..c8a59eb66 100644 --- a/src/util/parse_css_color.ts +++ b/src/util/parse_css_color.ts @@ -44,63 +44,67 @@ export function parseCssColor(input: string): RGBColor | undefined { } // #f0c, #f0cf, #ff00cc, #ff00ccff - const hexRegexp = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/; - if (hexRegexp.test(input)) { - const step = input.length < 6 ? 1 : 2; - let i = 1; - return [ // eslint-disable-line no-return-assign - parseHex(input.slice(i, i += step)), - parseHex(input.slice(i, i += step)), - parseHex(input.slice(i, i += step)), - parseHex(input.slice(i, i + step) || 'ff'), - ]; + if (input.startsWith('#')) { + const hexRegexp = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/; + if (hexRegexp.test(input)) { + const step = input.length < 6 ? 1 : 2; + let i = 1; + return [ // eslint-disable-line no-return-assign + parseHex(input.slice(i, i += step)), + parseHex(input.slice(i, i += step)), + parseHex(input.slice(i, i += step)), + parseHex(input.slice(i, i + step) || 'ff'), + ]; + } } // rgb(128 0 0), rgb(50% 0% 0%), rgba(255,0,255,0.6), rgb(255 0 255 / 60%), rgb(100% 0% 100% /.6) - const rgbRegExp = /^rgba?\(\s*([\de.+-]+)(%)?(?:\s+|\s*(,)\s*)([\de.+-]+)(%)?(?:\s+|\s*(,)\s*)([\de.+-]+)(%)?(?:\s*([,\/])\s*([\de.+-]+)(%)?)?\s*\)$/; - const rgbMatch = input.match(rgbRegExp); - if (rgbMatch) { - const [ - _, // eslint-disable-line @typescript-eslint/no-unused-vars - r, // - rp, // % (optional) - f1, // , (optional) - g, // - gp, // % (optional) - f2, // , (optional) - b, // - bp, // % (optional) - f3, // ,|/ (optional) - a, // (optional) - ap, // % (optional) - ] = rgbMatch; + if (input.startsWith('rgb')) { + const rgbRegExp = /^rgba?\(\s*([\de.+-]+)(%)?(?:\s+|\s*(,)\s*)([\de.+-]+)(%)?(?:\s+|\s*(,)\s*)([\de.+-]+)(%)?(?:\s*([,\/])\s*([\de.+-]+)(%)?)?\s*\)$/; + const rgbMatch = input.match(rgbRegExp); + if (rgbMatch) { + const [ + _, // eslint-disable-line @typescript-eslint/no-unused-vars + r, // + rp, // % (optional) + f1, // , (optional) + g, // + gp, // % (optional) + f2, // , (optional) + b, // + bp, // % (optional) + f3, // ,|/ (optional) + a, // (optional) + ap, // % (optional) + ] = rgbMatch; - const argFormat = [f1 || ' ', f2 || ' ', f3].join(''); - if ( - argFormat === ' ' || - argFormat === ' /' || - argFormat === ',,' || - argFormat === ',,,' - ) { - const valFormat = [rp, gp, bp].join(''); - const maxValue = - (valFormat === '%%%') ? 100 : - (valFormat === '') ? 255 : 0; - if (maxValue) { - const rgba: RGBColor = [ - clamp(+r / maxValue, 0, 1), - clamp(+g / maxValue, 0, 1), - clamp(+b / maxValue, 0, 1), - a ? parseAlpha(+a, ap) : 1, - ]; - if (validateNumbers(rgba)) { - return rgba; + const argFormat = [f1 || ' ', f2 || ' ', f3].join(''); + if ( + argFormat === ' ' || + argFormat === ' /' || + argFormat === ',,' || + argFormat === ',,,' + ) { + const valFormat = [rp, gp, bp].join(''); + const maxValue = + (valFormat === '%%%') ? 100 : + (valFormat === '') ? 255 : 0; + if (maxValue) { + const rgba: RGBColor = [ + clamp(+r / maxValue, 0, 1), + clamp(+g / maxValue, 0, 1), + clamp(+b / maxValue, 0, 1), + a ? parseAlpha(+a, ap) : 1, + ]; + if (validateNumbers(rgba)) { + return rgba; + } + // invalid numbers } - // invalid numbers + // values must be all numbers or all percentages } - // values must be all numbers or all percentages + return; // comma optional syntax requires no commas at all } - return; // comma optional syntax requires no commas at all } // hsl(120 50% 80%), hsla(120deg,50%,80%,.9), hsl(12e1 50% 80% / 90%)