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

feat(isRgbColor): add allowSpaces option to allow/disallow spaces between color values #2029

Merged
merged 21 commits into from
Jun 22, 2024
Merged

feat(isRgbColor): add allowSpaces option to allow/disallow spaces between color values #2029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
56db78f
fix: isRgbColor now strips spaces
a-h-i Aug 15, 2022
b3beff3
isRgbColor no longer ignores spacing between rgba? at start
a-h-i Aug 16, 2022
bae863f
updates isRGB test cases
a-h-i Aug 17, 2022
cbe2bc6
Fixes typo
a-h-i Aug 17, 2022
bc534c1
adds strict mode to preserve old behaviour
a-h-i Aug 18, 2022
4eeb798
updates README.md with isRgbColor strict param
a-h-i Aug 19, 2022
414f743
implements optional options param for isRgbColor
a-h-i Aug 19, 2022
0cc22f8
updates readme
a-h-i Aug 22, 2022
6a40c9e
Update README.md
a-h-i Aug 22, 2022
9343713
Update README.md
a-h-i Aug 23, 2022
4673f58
flips order of object arguments check
a-h-i Aug 26, 2022
5325127
adds more isRgbColor test examples
a-h-i Aug 26, 2022
1b982fe
removes strict support for arguments array
a-h-i Aug 26, 2022
dd2b080
sets options default in function signature
a-h-i Aug 26, 2022
e10d3a1
options object defaults now in signature
a-h-i Aug 26, 2022
15f80b8
Revert "options object defaults now in signature"
a-h-i Aug 26, 2022
718872e
Revert "sets options default in function signature"
a-h-i Aug 26, 2022
b27bff7
Revert "removes strict support for arguments array"
a-h-i Aug 26, 2022
7e5225c
changes strict to be options object only param
a-h-i Aug 26, 2022
dbd5260
Update src/lib/isRgbColor.js
a-h-i Aug 30, 2022
bfca688
changes strict to allowSpaces
a-h-i Aug 30, 2022
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ Validator | Description
**isPort(str)** | check if the string is a valid port number.
**isPostalCode(str, locale)** | check if the string is a postal code.<br/><br/>`locale` is one of `['AD', 'AT', 'AU', 'AZ', 'BA', 'BE', 'BG', 'BR', 'BY', 'CA', 'CH', 'CN', 'CZ', 'DE', 'DK', 'DO', 'DZ', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HT', 'HU', 'ID', 'IE', 'IL', 'IN', 'IR', 'IS', 'IT', 'JP', 'KE', 'KR', 'LI', 'LK', 'LT', 'LU', 'LV', 'MG', 'MT', 'MX', 'MY', 'NL', 'NO', 'NP', 'NZ', 'PL', 'PR', 'PT', 'RO', 'RU', 'SA', 'SE', 'SG', 'SI', 'SK', 'TH', 'TN', 'TW', 'UA', 'US', 'ZA', 'ZM']` OR `'any'`. If 'any' is used, function will check if any of the locales match. Locale list is `validator.isPostalCodeLocales`.
**isRFC3339(str)** | check if the string is a valid [RFC 3339][RFC 3339] date.
**isRgbColor(str [, includePercentValues])** | check if the string is a rgb or rgba color.<br/><br/>`includePercentValues` defaults to `true`. If you don't want to allow to set `rgb` or `rgba` values with percents, like `rgb(5%,5%,5%)`, or `rgba(90%,90%,90%,.3)`, then set it to false.
**isRgbColor(str [,options])** | check if the string is a rgb or rgba color.<br/></br>`options` is an object with the following properties<br/><br/>`includePercentValues` defaults to `true`. If you don't want to allow to set `rgb` or `rgba` values with percents, like `rgb(5%,5%,5%)`, or `rgba(90%,90%,90%,.3)`, then set it to false.<br/><br/>`allowSpaces` defaults to `true`, which prohibits whitespace. If set to false, whitespace between color values is allowed, such as `rgb(255, 255, 255)` or even `rgba(255, 128, 0, 0.7)`.
**isSemVer(str)** | check if the string is a Semantic Versioning Specification (SemVer).
**isSurrogatePair(str)** | check if the string contains any surrogate pairs chars.
**isUppercase(str)** | check if the string is uppercase.
Expand Down
25 changes: 24 additions & 1 deletion src/lib/isRgbColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,35 @@
/* eslint-disable prefer-rest-params */
import assertString from './util/assertString';

const rgbColor = /^rgb\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){2}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\)$/;
const rgbaColor = /^rgba\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/;
const rgbColorPercent = /^rgb\((([0-9]%|[1-9][0-9]%|100%),){2}([0-9]%|[1-9][0-9]%|100%)\)$/;
const rgbaColorPercent = /^rgba\((([0-9]%|[1-9][0-9]%|100%),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/;
const startsWithRgb = /^rgba?/;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you add this? Isn't it already checked in the first section of the other regexes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see. It's because the newly added test is invalid. Why is that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so that we can check that it does not haves spaces between r g b and a only for the rest of the string

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured 'r g b( 0, 251, 222 )' failing validation but 'rgb( 0, 251, 222 )' passing is more inline with what an rgb color string is


export default function isRgbColor(str, includePercentValues = true) {
export default function isRgbColor(str, options) {
assertString(str);
// default options to true for percent and false for spaces
let allowSpaces = false;
let includePercentValues = true;
if (typeof options !== 'object') {
if (arguments.length >= 2) {
includePercentValues = arguments[1];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
includePercentValues = arguments[1];
opitons.includePercentValues = arguments[1];

}
} else {
allowSpaces = options.allowSpaces !== undefined ? options.allowSpaces : allowSpaces;
includePercentValues = options.includePercentValues !== undefined ?
options.includePercentValues : includePercentValues;
}

if (allowSpaces) {
// make sure it starts with continous rgba? without spaces before stripping
if (!startsWithRgb.test(str)) {
return false;
}
// strip all whitespace
str = str.replace(/\s/g, '');
}

if (!includePercentValues) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (!includePercentValues) {
if (!options.includePercentValues) {

return rgbColor.test(str) || rgbaColor.test(str);
Expand Down
197 changes: 197 additions & 0 deletions test/validators.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4580,9 +4580,53 @@ describe('Validators', () => {
'rgba(3%,3%,101%,0.3)',
'rgb(101%,101%,101%) additional invalid string part',
'rgba(3%,3%,101%,0.3) additional invalid string part',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
'rg ba(0, 251, 22, 0.5)',
'rgb( 255,255 ,255)',
'rgba(255, 255, 255, 0.5)',
'rgba(255, 255, 255, 0.5)',
'rgb(5%, 5%, 5%)',
],
});

// test empty options object
test({
validator: 'isRgbColor',
args: [{}],
valid: [
'rgb(0,0,0)',
'rgb(255,255,255)',
'rgba(0,0,0,0)',
'rgba(255,255,255,1)',
'rgba(255,255,255,.1)',
'rgba(255,255,255,0.1)',
'rgb(5%,5%,5%)',
'rgba(5%,5%,5%,.3)',
],
invalid: [
'rgb(0,0,0,)',
'rgb(0,0,)',
'rgb(0,0,256)',
'rgb()',
'rgba(0,0,0)',
'rgba(255,255,255,2)',
'rgba(255,255,255,.12)',
'rgba(255,255,256,0.1)',
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'rgba(3,3,3%,.3)',
'rgb(101%,101%,101%)',
'rgba(3%,3%,101%,0.3)',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
'rg ba(0, 251, 22, 0.5)',
'rgb( 255,255 ,255)',
'rgba(255, 255, 255, 0.5)',
'rgba(255, 255, 255, 0.5)',
'rgb(5%, 5%, 5%)',
],
});
// test where includePercentValues is given as false
test({
validator: 'isRgbColor',
Expand All @@ -4594,6 +4638,159 @@ describe('Validators', () => {
invalid: [
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
],
});

// test where includePercentValues is given as false as part of options object
test({
validator: 'isRgbColor',
args: [{ includePercentValues: false }],
valid: [
'rgb(5,5,5)',
'rgba(5,5,5,.3)',
],
invalid: [
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'r g b( 0, 251, 222 )',
'rgba(255, 255, 255 ,0.2)',
'r g ba( 0, 251, 222 )',
],
});

// test where include percent is true explciitly
test({
validator: 'isRgbColor',
args: [true],
valid: [
'rgb(5,5,5)',
'rgba(5,5,5,.3)',
'rgb(0,0,0)',
'rgb(255,255,255)',
'rgba(0,0,0,0)',
'rgba(255,255,255,1)',
'rgba(255,255,255,.1)',
'rgba(255,255,255,0.1)',
'rgb(5%,5%,5%)',
'rgba(5%,5%,5%,.3)',
'rgb(5%,5%,5%)',
'rgba(255,255,255,0.5)',
],
invalid: [
'rgba(255, 255, 255, 0.5)',
'rgb(5%, 5%, 5%)',
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
'rgb(0,0,0,)',
'rgb(0,0,)',
'rgb(0,0,256)',
'rgb()',
'rgba(0,0,0)',
'rgba(255,255,255,2)',
'rgba(255,255,255,.12)',
'rgba(255,255,256,0.1)',
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'rgba(3,3,3%,.3)',
'rgb(101%,101%,101%)',
'rgba(3%,3%,101%,0.3)',
],
});

// test where percent value is false and allowSpaces is true as part of options object
test({
validator: 'isRgbColor',
args: [{ includePercentValues: false, allowSpaces: true }],
valid: [
'rgb(5,5,5)',
'rgba(5,5,5,.3)',
'rgba(255,255,255,0.2)',
'rgba(255, 255, 255 ,0.2)',
],
invalid: [
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'rgba(5% ,5%, 5%)',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
'rgb(0,0,)',
'rgb()',
'rgb(4,4,5%)',
'rgb(5%,5%,5%)',
'rgba(3,3,3%,.3)',
'rgb(101%, 101%, 101%)',
'rgba(3%,3%,101%,0.3)',
],

});

// test where both are true as part of options object
test({
validator: 'isRgbColor',
args: [{ includePercentValues: true, allowSpaces: true }],
valid: [
'rgb( 5, 5, 5)',
'rgba(5, 5, 5, .3)',
'rgb(0, 0, 0)',
'rgb(255, 255, 255)',
'rgba(0, 0, 0, 0)',
'rgba(255, 255, 255, 1)',
'rgba(255, 255, 255, .1)',
'rgba(255, 255, 255, 0.1)',
'rgb(5% ,5% ,5%)',
'rgba(5%,5%,5%, .3)',
],
invalid: [
'r g b( 0, 251, 222 )',
'rgb(4,4,5%)',
'rgb(101%,101%,101%)',

],
});

// test where allowSpaces is false as part of options object
test({
validator: 'isRgbColor',
args: [{ includePercentValues: true, allowSpaces: false }],
valid: [
'rgb(5,5,5)',
'rgba(5,5,5,.3)',
'rgb(0,0,0)',
'rgb(255,255,255)',
'rgba(0,0,0,0)',
'rgba(255,255,255,1)',
'rgba(255,255,255,.1)',
'rgba(255,255,255,0.1)',
'rgb(5%,5%,5%)',
'rgba(5%,5%,5%,.3)',

],
invalid: [
'rgb( 255,255 ,255)',
'rgba(255, 255, 255, 0.5)',
'rgb(5%, 5%, 5%)',
'rgba(255, 255, 255, 0.5)',
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'r g b( 0, 251, 222 )',
'r g ba( 0, 251, 222 )',
'rgb(0,0,0,)',
'rgb(0,0,)',
'rgb(0,0,256)',
'rgb()',
'rgba(0,0,0)',
'rgba(255,255,255,2)',
'rgba(255,255,255,.12)',
'rgba(255,255,256,0.1)',
'rgb(4,4,5%)',
'rgba(5%,5%,5%)',
'rgba(3,3,3%,.3)',
'rgb(101%,101%,101%)',
'rgba(3%,3%,101%,0.3)',
],
});
});
Expand Down
Loading