Skip to content

Commit 7a16724

Browse files
committed
Add HTML color schema
1 parent 920ac1b commit 7a16724

File tree

2 files changed

+95
-0
lines changed

2 files changed

+95
-0
lines changed

src/htmlColorSchemaDefinition.test.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import expectInvalidFixture from './lib/expectInvalidFixture';
2+
import expectValidFixture from './lib/expectValidFixture';
3+
import htmlColorSchemaDefinition from './htmlColorSchemaDefinition';
4+
5+
describe('htmlColorSchemaDefinition', () => {
6+
it('validates various HTML colors', () => {
7+
const colorSchemaDefinition = {
8+
color: htmlColorSchemaDefinition,
9+
};
10+
11+
expectValidFixture(colorSchemaDefinition, { color: '#01f' });
12+
expectValidFixture(colorSchemaDefinition, { color: '#01fa' });
13+
expectValidFixture(colorSchemaDefinition, { color: '#0011ff' });
14+
expectValidFixture(colorSchemaDefinition, { color: '#0011ffaa' });
15+
16+
expectValidFixture(colorSchemaDefinition, { color: 'rgb(1, 12, 123)' });
17+
expectValidFixture(colorSchemaDefinition, { color: 'hsl(1, 12, 123)' });
18+
expectValidFixture(colorSchemaDefinition, { color: 'hwb(1, 12, 123)' });
19+
expectValidFixture(colorSchemaDefinition, { color: 'lab(1, 12, 123)' });
20+
21+
expectValidFixture(colorSchemaDefinition, { color: 'rgba(1, 12, 123, 1.0)' });
22+
expectValidFixture(colorSchemaDefinition, { color: 'hsla(1, 12, 123, 1.0)' });
23+
expectValidFixture(colorSchemaDefinition, { color: 'cmyk(1, 12, 123, 4)' });
24+
expectValidFixture(colorSchemaDefinition, { color: 'lch(1, 12, 123)' });
25+
26+
expectValidFixture(colorSchemaDefinition, { color: 'gray(4)' });
27+
28+
expectInvalidFixture(colorSchemaDefinition, { color: 'gray(123, 123)' }, []);
29+
expectInvalidFixture(colorSchemaDefinition, { color: 'rgb(1, 12, 123, 1.0)' }, []);
30+
expectInvalidFixture(colorSchemaDefinition, { color: 'hsl(1, 12, 123, 1.0)' }, []);
31+
expectInvalidFixture(colorSchemaDefinition, { color: 'cmyk(123, 123)' }, []);
32+
expectInvalidFixture(colorSchemaDefinition, { color: 'cmyk(123, 123, 123, 123, 123)' }, []);
33+
34+
expectValidFixture(colorSchemaDefinition, { color: 'red' });
35+
expectInvalidFixture(colorSchemaDefinition, { color: 'red(123, 123, 123, 123, 123)' }, []);
36+
expectValidFixture(colorSchemaDefinition, { color: 'lightblue' });
37+
});
38+
});

src/htmlColorSchemaDefinition.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* regex that matches any HTML color including the following formats:
3+
* - #rgb
4+
* - #rgba
5+
* - #rrggbb
6+
* - #rrggbbaa
7+
*/
8+
const hashColorRegexString = '#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})';
9+
10+
const colorSpace3 = 'rgb|hsl|hwb|lab|lch';
11+
const colorSpace4 = 'cmyk|rgba|hsla';
12+
const decimalRegex = '\\s*\\d{1,3}(\\.\\d+)?\\s*';
13+
14+
/**
15+
* regex that matches any HTML color including the following formats:
16+
* - rgb(r, g, b)
17+
* - hsl(h, s, l)
18+
* - hwb(h, w, b)
19+
* - lab(l, a, b)
20+
* - lch(l, c, h)
21+
*/
22+
23+
const threeDimensionalColorRegexString = `(${colorSpace3})\\(${decimalRegex},${decimalRegex},${decimalRegex}\\)`;
24+
/**
25+
* regex that matches any HTML color including the following formats:
26+
* - rgba(r, g, b, a)
27+
* - hsla(h, s, l, a)
28+
* - cmyk(c, m, y, k)
29+
*/
30+
const fourDimensionalColorRegexString = `(${colorSpace4})\\(${decimalRegex},${decimalRegex},${decimalRegex},${decimalRegex}\\)`;
31+
32+
/**
33+
* regex that matches any HTML color including the following formats:
34+
* - gray(g)
35+
*/
36+
37+
const grayColorRegexString = `gray\\(${decimalRegex}\\)`;
38+
39+
/** the regexes of above as array */
40+
41+
const colorRegexStrings = [
42+
hashColorRegexString,
43+
threeDimensionalColorRegexString,
44+
fourDimensionalColorRegexString,
45+
grayColorRegexString,
46+
];
47+
48+
const colorRegexString = colorRegexStrings.join('|');
49+
const colorRegex = new RegExp(`^(${colorRegexString})|\\w+$`, 'i');
50+
51+
const htmlColorSchemaDefinition: SchemaDefinition = {
52+
type: String,
53+
optional: true,
54+
regEx: colorRegex,
55+
};
56+
57+
export default htmlColorSchemaDefinition;

0 commit comments

Comments
 (0)