New Rule: `no-invalid-hex-colors`

[lumirlumir]

Rule details

Disallow invalid hex colors.

What type of rule is this?

Warns about a potential problem

Example code

/* Not OK */

a { color: #00; }

a { color: #fff1az; }

a { color: #12345aa; }

/* OK */

a { color: #000; }

a { color: #000f; }

a { color: #fff1a0; }

a { color: #123450aa; }

Prior Art

stylelint: https://stylelint.io/user-guide/rules/color-no-invalid-hex

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

Longhand hex colors can be either 6 or 8 (with alpha channel) hexadecimal characters. And their shorthand variants are 3 and 4 characters respectively.

So, if a hex color does not follow these formats, it won't be recognized as a valid hex color.

[nzakas]

I think this might already be caught by no-invalid-properties. Can you double-check?

[lumirlumir]

I've looked into it and found that it works well with named properties.

However, it doesn't work for custom properties as shown below:

/* eslint css/no-invalid-properties: "error" */

:root {
	--color-1: #1;
	--color-2: #12;
	--color-3: #12345;
	--color-4: #1234567;
}

The existing Stylelint rule checks for custom properties:

I wonder if another CSS rule can check this behavior?