Add ability to enforce BEM classes with prefix

[wagtail]

Add ability to enforce BEM classes with prefix

[thibaudcolas]

Discussed in UI team:

• Torchbox has this set up with selector-class-pattern.
• We need to try this without a plugin and see what happens
• Then try a plugin if needed

[thibaudcolas]

Here is what the Torchbox configuration would return for Wagtail (335 issues total, shortened to only keep unique entries):

# client/scss/components/_breadcrumb.scss
.arrow_right_icon
.home_icon
# client/scss/components/_forms.scss
.collection_choice_field
.choice_field
.model_choice_field
.typed_choice_field
.boolean_field
.date_field
.time_field
.date_time_field
.url_field
.daterange_field
.model_multiple_choice_field
.checkbox_select_multiple
.multiple_choice_field
.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10
.col11
.col12
.widget-draftail_rich_text_area
.block_field
# client/scss/components/_workflow-timeline.scss
.workflow-timeline__item--in_progress
# client/scss/elements/_forms.scss
.radio_select
.image_field
.file_field
# client/scss/layouts/_404.scss
.page404__bg
.page404__wrapper
.page404__logo
.page404__text-container
.page404__header
.page404__text
.page404__button
# client/scss/layouts/_groups-edit.scss
.admin_page_chooser
# client/scss/layouts/_home.scss
# client/scss/layouts/_modeladmin.scss
# client/scss/layouts/_page-editor.scss
.object-layout_big-part
.object-layout_small-part
# client/scss/layouts/_workflow-edit.scss
# client/scss/overrides/_vendor.datetimepicker.scss
.xdsoft_datetimepicker
.xdsoft_datepicker
.xdsoft_timepicker
.xdsoft_mounthpicker
.xdsoft_next
.xdsoft_prev
.xdsoft_today_button
.xdsoft_time_box
.xdsoft_label
.xdsoft_select
.xdsoft_monthselect
.xdsoft_yearselect
.xdsoft_option
.xdsoft_current
.xdsoft_month
.xdsoft_year
.xdsoft_calendar
.xdsoft_default
.xdsoft_other_month
.xdsoft_disabled
.xdsoft_today
.xdsoft_noselect
.xdsoft_inline
.xdsoft_scroller_box
.xdsoft_scrollbar
.xdsoft_scroller
# client/scss/overrides/_vendor.tagit.scss
.admin_tag_widget
# # client/src/components/Draftail/Draftail.scss
.Draftail-Editor
.Draftail-Editor__wrapper
.Draftail-ToolbarButton
.Draftail-Editor--focus
.public-DraftEditor-content
.public-DraftEditorPlaceholder-root
.Draftail-Toolbar
.Draftail-block--blockquote
# # client/src/components/PageExplorer/PageExplorer.scss
.c-page-explorer__header__title
.c-page-explorer__header__title__inner
.c-page-explorer__header__select
.c-page-explorer__header__select-icon
# # client/src/components/PageExplorer/PageExplorerItem.scss
.c-page-explorer__item__link
.c-page-explorer__item__title
.c-page-explorer__item__action
.c-page-explorer__item__action--small
# # client/src/components/Draftail/CommentableEditor/CommentableEditor.scss
.Draftail-ToolbarGroup
.Draftail-CommentControl
# # client/src/components/Draftail/EditorFallback/EditorFallback.scss
.EditorFallback__textarea
.EditorFallback__error
# # client/src/components/Draftail/Tooltip/Tooltip.scss
.Tooltip
.Tooltip--top
.Tooltip--left
.Tooltip--top-left
.Tooltip__link
.Tooltip__button
# # client/src/components/Draftail/blocks/EmbedBlock.scss
.EmbedBlock__link
# # client/src/components/Draftail/blocks/ImageBlock.scss
.ImageBlock__field
.ImageBlock__field__input
.ImageBlock__alt
# # client/src/components/Draftail/blocks/MediaBlock.scss
.MediaBlock
.MediaBlock__icon-wrapper
.MediaBlock__icon
.MediaBlock__img
# # client/src/components/Draftail/decorators/TooltipEntity.scss
.TooltipEntity
# # client/src/components/Sidebar/modules/WagtailBranding.scss
# # client/src/components/StreamField/scss/components/c-sf-block.scss
.c-sf-block__header__title
.c-sf-block__header__icon
.c-sf-block__actions__single

I could see this helping for cases where we use double __.

[lb-]

We would probably have to ignore some folders - e.g. overrides and draftail as we may not have control over these classes for external libraries and Django.