style: validate selector prefix by stylelint (#DS-3497)

Author: artembelik

.stylelintrc.js

@@ -2,6 +2,25 @@
 
 const KEBAB_CASE_PATTERN = '^_?[a-z0-9]+(-[a-z0-9]+)*$';
 
+const ALLOWED_PREFIXES = [
+    // Default
+    'kbq-',
+    // packages/docs-examples
+    'example-',
+    // packages/components-dev
+    'dev-',
+    // apps/docs
+    'docs-',
+    // Angular specific
+    'cdk-',
+    // Angular specific
+    'ng-',
+    // _layout.scss
+    'layout-',
+    // _layout.scss
+    'flex-'
+];
+
 /** @type {import('stylelint').Config} */
 const config = {
     defaultSeverity: 'error',
@@ -38,6 +57,12 @@ const config = {
                 ]
             }
         ],
+        'selector-class-pattern': [
+            `^_?(${ALLOWED_PREFIXES.join('|')})`,
+            {
+                resolveNestedSelectors: true
+            }
+        ],
 
         // SCSS rules
         'scss/operator-no-newline-after': null,

apps/docs/src/app/components/navbar/navbar.scss

@@ -62,8 +62,9 @@
             gap: var(--kbq-size-xxs);
         }
 
-        .kbq-button-icon,
-        .DocSearch-Button {
+        /* stylelint-disable-next-line selector-class-pattern */
+        .DocSearch-Button,
+        .kbq-button-icon {
             width: $size-5xl;
             height: $size-5xl;
         }

apps/docs/src/styles/_docsearch.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
 
 @use '@docsearch/css/dist/style';

packages/components/code-block/_code-block-theme.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use '../core/styles/common/tokens' as *;
 
 @function kbq-code-block-hljs-attr($attr) {

packages/components/code-block/code-block.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use './code-block-theme' as theme;
 
 .kbq-code-block {

packages/components/core/styles/visual/_layout-media.scss

@@ -1,5 +1,6 @@
 @mixin media-print {
     @media print {
+        /* stylelint-disable-next-line selector-class-pattern */
         .hide-print:not(.show-print):not(.show) {
             display: none !important;
         }

packages/components/scrollbar/_scrollbar-component-theme.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-scrollbar-component-theme() {

packages/components/scrollbar/scrollbar.component.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use '../core/styles/common/tokens' as *;
 
 @use './scrollbar-component-theme' as *;