A module to find HSL(a) color syntax substrings in a string with their offsets and their color instance.
This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.
npm install hsl-matcher
If you still want to use in CommonJS, you can use dynamic import()
to load.
const hslMatcher = await import('hsl-matcher');
// Fix compiling in typescript.
// https://github.com/microsoft/TypeScript/issues/43329#issuecomment-922544562
const hslMatcher = await (Function('return import("hsl-matcher")')()) as Promise<typeof import("hsl-matcher")>;
import hslMatcher from "hsl-matcher";
hslMatcher("hsl(240, 100%, 50%)"); // ✅ comma separated
// => { h: '240', s: '100%', l: '50%', a: undefined }
hslMatcher("hsl(240, 100%, 50%, 0.1)"); // ✅ comma separated with opacity
// => { h: '240', s: '100%', l: '50%', a: '0.1' }
hslMatcher("hsl(240, 100%, 50%, 10%)"); // ✅ comma separated with % opacity
// => { h: '240', s: '100%', l: '50%', a: '10%' }
hslMatcher("hsl(240, 100%, 50%, 10x)"); // => false // ❌
hslMatcher("hsl(240,100%,50%,0.1)"); // ✅ comma separated without spaces
hslMatcher("hsl(180deg, 100%, 50%, 0.1)"); // ✅ hue with 'deg'
hslMatcher("hsl(3.14rad, 100%, 50%, 0.1)"); // ✅ hue with 'rad'
hslMatcher("hsl(200grad, 100%, 50%, 0.1)"); // ✅ hue with 'grad'
hslMatcher("hsl(0.5turn, 100%, 50%, 0.1)"); // ✅ hue with 'turn'
hslMatcher("hsl(-240, -100%, -50%, -0.1)"); // ✅ negative values
hslMatcher("hsl(+240, +100%, +50%, +0.1)"); // ✅ explicit positive sign
hslMatcher("hsl(240.5, 99.99%, 49.999%, 0.9999)"); // ✅ non-integer values
hslMatcher("hsl(.9, .99%, .999%, .9999)"); // ✅ fraction w/o leading zero
hslMatcher("hsl(.9, .99%, .999%, )"); // => false // ❌
hslMatcher("hsl(0240, 0100%, 0050%, 01)"); // ✅ leading zeros
hslMatcher("hsl(240.0, 100.00%, 50.000%, 1.0000)"); // ✅ trailing decimal zeros
hslMatcher("hsl(2400, 1000%, 1000%, 10)"); // ✅ out of range values
hslMatcher("hsl(-2400.01deg, -1000.5%, -1000.05%, -100)"); // ✅ combination of above
hslMatcher("hsl(2.40e+2, 1.00e+2%, 5.00e+1%, 1E-3)"); // ✅ scientific notation
hslMatcher("hsl(240 100% 50%)"); // ✅ space separated (CSS Color Level 4)
hslMatcher("hsl(240 100% 50% / 0.1)"); // ✅ space separated with opacity
hslMatcher("hsla(240, 100%, 50%)"); // ✅ hsla() alias
hslMatcher("hsla(240, 100%, 50%, 0.1)"); // ✅ hsla() with opacity
hslMatcher("HSL(240Deg, 100%, 50%)"); // ✅ case insensitive
As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.