I’m working on updating the TinyColor RegExp and I recently added angles and percent based alpha into the mix to be able to compute CSS4 Module color strings.
Please have a look at the following sample snippet:
const ANGLES = 'deg|rad|grad|turn';
const CSS_INTEGER = '[-\+]?\d+%?';
const CSS_NUMBER = '[-\+]?\d*\.\d+%?';
const CSS_ANGLES = `[-\+]?\d*\.?\d+(?:${ANGLES})?`;
const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
const CSS_UNIT2 = `${CSS_UNIT}|(?:${CSS_ANGLES})`;
const PERMISSIVE_MATCH3 = `[\s|\(]+(${CSS_UNIT2})[,|\s]+(${CSS_UNIT})[,|\s]+(${CSS_UNIT})\s*\)?`;
const PERMISSIVE_MATCH4 = `[\s|\(]+(${CSS_UNIT2})[,|\s]+(${CSS_UNIT})[,|\s]+(${CSS_UNIT})[,|\s|\/]+(${CSS_UNIT})\s*\)?`;
const matchers = {
hsl: new RegExp(`[hsl|hsla]+(?:${PERMISSIVE_MATCH4})`),
hsl2: new RegExp(`[hsl|hsla]+(?:${PERMISSIVE_MATCH4})|(?:${PERMISSIVE_MATCH3})`),
hsl3: new RegExp(`[hsl|hsla]+(?:${PERMISSIVE_MATCH3})|(?:${PERMISSIVE_MATCH4})`),
};
console.log('hsl - null', matchers.hsl.exec('hsl(120, 100%, 50%)'));
console.log('hsl - correct', matchers.hsl.exec('hsla(120, 100%, 50%, 0.5)'));
console.log('hsl - null', matchers.hsl.exec('hsl(120deg 100% 50%)'));
console.log('hsl - correct', matchers.hsl.exec('hsl(120deg 100% 50% 50%)'));
console.log('hsl2 - wrong indexes', matchers.hsl2.exec('hsl(120, 100%, 50%)'));
console.log('hsl2 - correct', matchers.hsl2.exec('hsla(120, 100%, 50%, 0.5)'));
console.log('hsl2 - wrong indexes', matchers.hsl2.exec('hsl(120deg 100% 50%)'));
console.log('hsl2 - correct', matchers.hsl2.exec('hsl(120deg 100% 50% 50%)')); // returns correct
console.log('hsl3 - correct', matchers.hsl3.exec('hsl(120, 100%, 50%)'));
console.log('hsl3 - incomplete', matchers.hsl3.exec('hsla(120, 100%, 50%, 0.5)'));
console.log('hsl3 - correct', matchers.hsl3.exec('hsl(120deg 100% 50%)'));
console.log('hsl3 - incomplete', matchers.hsl3.exec('hsl(120deg 100% 50% 50%)'));I need to change PERMISSIVE_MATCH4 to work will matchers.hsl in all variations and return the matches in the same order and format:
output = [
'hsl(120deg 100% 50% 50%)', // the input capture
'120deg', // HUE first value
'100%', // SATURATION second value
'50%', // LIGHTNESS third value
'50%', // ALPHA last and OPTIONAL value
// ... other matches results
]
I’m open to suggestions and I thank you for any reply.