Add ability to block selectors that select data attributes

[lb-]

Overview

• The Wagtail development documentation advises that classes should be used for styles and data attributes should be used for JS. https://docs.wagtail.org/en/latest/contributing/ui_guidelines.html#html-guidelines
• As the CSS side of this is not enforced it means that it is up to any core contributor to remember this when reviewing new code, it would be much easier if this was flagged as a linting error instead.

Proposed solution

Add 'selector-max-attribute': [0, { ignoreAttributes: ['/^(?!data-).*/'] }], - which only blocks the use of data-* attributes when applying styles to components.

All other usage should still be allowed, such as hidden, aria-hidden, disabled, type etc.

Additional details

• https://stylelint.io/user-guide/rules/list/selector-max-attribute/

Issues in Wagtail Core

The following 11 issues will be flagged in Wagtail core if this rule is applied.

• data-tabs-animate on the tabs can be resolved by using classes instead (or just drop this feature as it is unused)
• tippy styles - probably would be left as is and this rule would be ignored in the overrides folder as we have no control over these components
• Wagtail bird 'parts' can be resolved using BEM classes

client/scss/components/_tabs.scss
 69:3  ✖  Expected ".w-tabs[data-tabs-animate] .w-tabs__panel" to have no more than 0 attribute selectors             selector-max-attribute
 72:5  ✖  Expected ".w-tabs[data-tabs-animate] .w-tabs__panel.animate-in" to have no more than 0 attribute selectors  selector-max-attribute

client/scss/overrides/_vendor.tippy.scss
  8:1  ✖  Expected ".tippy-box[data-placement^='top'] > .tippy-arrow::before" to have no more than 0 attribute selectors     selector-max-attribute
 12:1  ✖  Expected ".tippy-box[data-placement^='bottom'] > .tippy-arrow::before" to have no more than 0 attribute selectors  selector-max-attribute
 16:1  ✖  Expected ".tippy-box[data-placement^='left'] > .tippy-arrow::before" to have no more than 0 attribute selectors    selector-max-attribute
 20:1  ✖  Expected ".tippy-box[data-placement^='right'] > .tippy-arrow::before" to have no more than 0 attribute selectors   selector-max-attribute
 25:1  ✖  Expected ".tippy-box[data-theme='dropdown']" to have no more than 0 attribute selectors                            selector-max-attribute
 28:3  ✖  Expected ".tippy-box[data-theme='dropdown'] .tippy-content" to have no more than 0 attribute selectors             selector-max-attribute

client/src/components/Sidebar/modules/WagtailBranding.scss
 54:7  ✖  Expected ".sidebar-wagtail-branding--wagging:hover [data-part='tail']" to have no more than 0 attribute selectors         selector-max-attribute
 60:7  ✖  Expected ".sidebar-wagtail-branding--wagging:hover [data-part='eye--open']" to have no more than 0 attribute selectors    selector-max-attribute
 64:7  ✖  Expected ".sidebar-wagtail-branding--wagging:hover [data-part='eye--closed']" to have no more than 0 attribute selectors  selector-max-attribute

[lb-]

This recently came up when reviewing a PR - see comment - https://github.com/wagtail/wagtail/pull/8671#discussion_r897822527

[Scotchester]

Makes sense to me!

[thibaudcolas]

I’m not 100% convinced data- attributes don’t have a place in stylesheets, but in my mind if they did have a place it’d only be in a few specific cases – so I quite like the idea of outright enforcing they aren’t used ever.

If we did this, I think we could use selector-attribute-disallowed-list? "selector-attribute-name-disallowed-list": ["/^data-/"],

[lb-]

Thanks Thibaud. selector-attribute-name-disallowed-list is way better! Don't know what I was thinking haha.