Add HTML color schema

Author: opyh

src/htmlColorSchemaDefinition.test.ts

@@ -0,0 +1,38 @@
+import expectInvalidFixture from './lib/expectInvalidFixture';
+import expectValidFixture from './lib/expectValidFixture';
+import htmlColorSchemaDefinition from './htmlColorSchemaDefinition';
+
+describe('htmlColorSchemaDefinition', () => {
+  it('validates various HTML colors', () => {
+    const colorSchemaDefinition = {
+      color: htmlColorSchemaDefinition,
+    };
+
+    expectValidFixture(colorSchemaDefinition, { color: '#01f' });
+    expectValidFixture(colorSchemaDefinition, { color: '#01fa' });
+    expectValidFixture(colorSchemaDefinition, { color: '#0011ff' });
+    expectValidFixture(colorSchemaDefinition, { color: '#0011ffaa' });
+
+    expectValidFixture(colorSchemaDefinition, { color: 'rgb(1, 12, 123)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'hsl(1, 12, 123)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'hwb(1, 12, 123)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'lab(1, 12, 123)' });
+
+    expectValidFixture(colorSchemaDefinition, { color: 'rgba(1, 12, 123, 1.0)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'hsla(1, 12, 123, 1.0)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'cmyk(1, 12, 123, 4)' });
+    expectValidFixture(colorSchemaDefinition, { color: 'lch(1, 12, 123)' });
+
+    expectValidFixture(colorSchemaDefinition, { color: 'gray(4)' });
+
+    expectInvalidFixture(colorSchemaDefinition, { color: 'gray(123, 123)' }, []);
+    expectInvalidFixture(colorSchemaDefinition, { color: 'rgb(1, 12, 123, 1.0)' }, []);
+    expectInvalidFixture(colorSchemaDefinition, { color: 'hsl(1, 12, 123, 1.0)' }, []);
+    expectInvalidFixture(colorSchemaDefinition, { color: 'cmyk(123, 123)' }, []);
+    expectInvalidFixture(colorSchemaDefinition, { color: 'cmyk(123, 123, 123, 123, 123)' }, []);
+
+    expectValidFixture(colorSchemaDefinition, { color: 'red' });
+    expectInvalidFixture(colorSchemaDefinition, { color: 'red(123, 123, 123, 123, 123)' }, []);
+    expectValidFixture(colorSchemaDefinition, { color: 'lightblue' });
+  });
+});

src/htmlColorSchemaDefinition.ts

@@ -0,0 +1,57 @@
+/**
+ * regex that matches any HTML color including the following formats:
+ * - #rgb
+ * - #rgba
+ * - #rrggbb
+ * - #rrggbbaa
+ */
+const hashColorRegexString = '#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})';
+
+const colorSpace3 = 'rgb|hsl|hwb|lab|lch';
+const colorSpace4 = 'cmyk|rgba|hsla';
+const decimalRegex = '\\s*\\d{1,3}(\\.\\d+)?\\s*';
+
+/**
+ * regex that matches any HTML color including the following formats:
+ * - rgb(r, g, b)
+ * - hsl(h, s, l)
+ * - hwb(h, w, b)
+ * - lab(l, a, b)
+ * - lch(l, c, h)
+ */
+
+const threeDimensionalColorRegexString = `(${colorSpace3})\\(${decimalRegex},${decimalRegex},${decimalRegex}\\)`;
+/**
+ * regex that matches any HTML color including the following formats:
+ * - rgba(r, g, b, a)
+ * - hsla(h, s, l, a)
+ * - cmyk(c, m, y, k)
+*/
+const fourDimensionalColorRegexString = `(${colorSpace4})\\(${decimalRegex},${decimalRegex},${decimalRegex},${decimalRegex}\\)`;
+
+/**
+ * regex that matches any HTML color including the following formats:
+ * - gray(g)
+ */
+
+const grayColorRegexString = `gray\\(${decimalRegex}\\)`;
+
+/** the regexes of above as array */
+
+const colorRegexStrings = [
+  hashColorRegexString,
+  threeDimensionalColorRegexString,
+  fourDimensionalColorRegexString,
+  grayColorRegexString,
+];
+
+const colorRegexString = colorRegexStrings.join('|');
+const colorRegex = new RegExp(`^(${colorRegexString})|\\w+$`, 'i');
+
+const htmlColorSchemaDefinition: SchemaDefinition = {
+  type: String,
+  optional: true,
+  regEx: colorRegex,
+};
+
+export default htmlColorSchemaDefinition;