Ensure SASS variable name matches BEM element

[MorevM]

Problem to solve

If a SASS variable reflects a BEM element selector, its name must match the name of the element.
This makes usage more obvious and understandable.

Examples

// ❌ incorrect
.the-block {
  $el: #{&}__item; // should be $item
}


// ✅ correct
.the-block {
  $element: #{&}__element; // matches the name
}

Proposed behavior

The rule checks the variable, and if it contains a string representation of the selector referring to the current component, it compares the variable name with the element.

Autofix is theoretically possible

It is not clear what to do if a variable contains a modifier:

.the-block {
  $item: #{&}__item--modifier;
}

Options

Maybe some option to deal with modifier selectors described above

Rule name ideas

element-variable-name?

Additional context

This is definitely worth doing after #1 is resolved, as a mechanism for resolving SASS variable values will be required.