📎 Port selector-class-pattern from stylelint-stylistic

[dyc3]

Description

Add a new CSS lint rule implementing the same functionality as selector-class-pattern from stylelint-stylistic. Add an option to be able to specify a regex to match against. We don't usually add options on the first iteration of a new rule, but this is an exception since the functionality of the rule does not work without it.

Source: https://stylelint.io/user-guide/rules/selector-class-pattern/

Suggested name: useNamingConvention

Want to contribute? Lets you know you are interested! We will assign you to the issue to prevent several people to work on the same issue. Don't worry, we can unassign you later if you are no longer interested in the issue! Read our contributing guide and analyzer contributing guide.

[equinusocio]

On this, please consider native CSS features like nesting syntax (already supported by all major browsers) or custom selectors (which reached STAGE 1 last year and we may see it shipped this year).

Also this rule may interact with css.parser.cssModules configuration for the :global(.MyClass) and :local(.MyClass) selectors. So considering a pattern like .MyClass used in CSS modules, this could be an example:

@custom-selector :--headings h1, h2, h3, h4, h5, h6;
@custom-selector :--blocks .MyStack, .MyBox;

:global {
/* ↑ Ignored */
  .class-blue {}
 /* ↑ Not a valid selector */

  :local(.class-blue) {}
/* ↑ Ignored ↑ Not valid selector */

  :--headings, :--blocks {
    /* ↑ Ignored selectors */
    margin-block: 10dvh;
  }

  :local(.MyComponent) {
/* ↑ Ignored ↑ Valid selector */
    color: red;
  }

  :global(.MyNewClass) {
/* ↑ Ignored ↑ Valid selector */
    color: red;
  }


  .MyClass {
  /* ↑ Valid selector */
    color: red;
  }
}

[ematipico]

@dyc3

What do you think about using useNamingConvention instead? It seems there's already a great overlap with the original rule (the stylelint one), where users can specify a naming pattern inside their file.

In useNamingConvention , the one implemented for JavaScript, there's already the regex engine, which is not the same RegEx engine that users can use in JS.

This is an important limitation that users should be aware of. Simply, we can't use regular expressions coming from JS because they are different from the ones we can use in Rust. However, that's fine because the engine we use in useNamingConvention fits the use case.

I don't think this rule is beginner-friendly.

[dyc3]

That's a good point. Sure, let's use the name useNamingConvention, and I'll update the labels.