Suggestion: modular CSS regex checks

[ayala-io]

While working on PR https://github.com/validatorjs/validator.js/pull/1159, I found myself constantly refining how I checked for the CSS <number> value and often having to replace the same pattern in multiple places of the larger regex pattern for the isHSL() check. I realized I should have assembled the regex pattern in a modular way but then I thought this can be done at a more global level to support other CSS string validations (like isRgbColor()).

As a possible "feature request" or development direction, maybe it would be good to make a collection of common regex patterns that we can use to build more complex patterns. This is particularly applicable to CSS checks for isHSL() and isRgbColor() and other CSS-based checks which use the same <number>, <percentage>, and other value formats defined in the specification (see MDN documentation).

Now I'm not an expert in JS, so I'm not sure what would be the best way to achieve a modular regex pattern. A quick Google search led me to this: https://stackoverflow.com/questions/185510/how-can-i-concatenate-regex-literals-in-javascript which I suppose could be one way to do it.

[profnandaa]

There's something that @hamzahejja did here, I don't know if it goes in line with what you are talking about? And how can we use it in the cases you mentioned?

[ayala-io]

Thank you for pointing that out. I'll keep that in mind moving forward. I think that would serve as part of what I was suggesting to finally "glue" together the final regex pattern composed of re-usable, modular patterns.

The re-usable patterns would be a set of globally available regex patterns (or I guess you can say sub-patterns) concerning a CSS <number> or <percentage> or <integer>, or any other CSS types/properties (there are some validators like isInt() as a candidate for code reuse but I'm not sure if it would validate a CSS-based <integer>). Then when coding validators such as isHSL(), isRgbColor(), and potentially other new CSS validators defined in validator.js, one can use the available sub-patterns and combine them or augment them via @hamzahejja's function.

This of course depends on the need for more CSS validators, which could be discussed here.

[profnandaa]

I like the thinking 👍

./na

On Tue, Feb 25, 2020 at 12:26 PM Chris notifications@github.com wrote:

Thank you for pointing that out. I'll keep that in mind moving forward. I think that would serve as part of what I was suggesting to finally "glue" together the final regex pattern composed of re-usable, modular patterns.

The re-usable patterns would be a set of globally available regex patterns (or I guess you can say sub-patterns) concerning a CSS https://developer.mozilla.org/en-US/docs/Web/CSS/number or https://developer.mozilla.org/en-US/docs/Web/CSS/percentage or https://developer.mozilla.org/en-US/docs/Web/CSS/integer, or any other CSS types/properties (there are some validators like isInt() as a candidate for code reuse but I'm not sure if it validate a CSS-based

). Then when coding validators such as isHSL(), isRgbColor(), and potentially other new CSS validators defined in validator.js, one can use the available sub-patterns and combine them or augment them via @hamzahejja 's function. This of course depends on the need it for more CSS validators, which could be discussed here. — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or unsubscribe . -- Sent from a tiny device while on the move.