New Rule: color-function-notation

[azat-io]

Rule details

Specify modern or legacy notation for color-functions.

What type of rule is this?

Warns about a potential problem

Example code

There are two ways to set color notation.

Legacy:

.test {
  color: rgba(12, 122, 231, 0.2);
  background: oklch(0, 0, 0);
}

Modern:

.test {
  color: rgba(12 122 231 / 0.2);
  background: oklch(0 0 0);
}

I think it would be good to have a rule to check this.

{
  rules: {
    'color-function-notation': ['error', 'modern'],
  },
}

Participation

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

[nzakas]

This seems like it's enforcing a stylistic preference? Is there any functional difference between legacy and modern styles?

[azat-io]

Yes, it's a stylistic change. Are stylistic rules planned to be maintained in a separate package?

[ota-meshi]

I don't think that object-shorthand rule in eslint/js belongs to the stylistic rules, but I think that whether it's object-shorthand or not is functionally the same. (the object-shorthand rule has been frozen for a different reason)
If the rules that enforce the modern CSS notation are stylistic rules, I think that the eslint/js rules should also be reviewed. What do you think?

[nzakas]

@ota-meshi these are two completely different concerns. @eslint/js has a lot of rules that we probably wouldn't include if building from scratch, but we aren't going to remove them due to compatibility issues.

For new packages, such as eslint/css, we are not going to include stylistic rules from the start. We don't plan on creating any plugins that focus specifically on stylistic rules -- we'll leave that to the ecosystem to produce if they so desire. In general, I think people should just use a source code formatter that does this automatically.