feat(stylelint-rules): introduce component and theme layer restrictions

- Add `require-component-layer` rule to enforce @layer usage in component styles.
- Implement `allowed-layer-names` rule to restrict layer names in components.
- Create tests for component layer restrictions.
- Add `require-global-layer` rule to ensure global styles are within @layer kol-theme-global.
- Implement `allowed-layer-names` rule for themes to restrict layer names.
- Create tests for theme layer restrictions.
- Consolidate rules in index files for components and themes.
- Remove deprecated `css-must-be-in-layer` rule and related tests.
- Update pnpm workspace to include stylelint-rules package.

Author: deleonio

packages/components/.prettierignore

@@ -1,6 +1,3 @@
-src/assets/*.css
-src/assets/@leanup
-src/assets/codicons
-src/components.d.ts
-*.bak
-*.sass
+/assets/**
+/node_modules/**
+/src/components.d.ts

packages/components/src/components/@shared/_collapsible.mixin.scss

@@ -2,68 +2,66 @@
 
 /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */
 
-@layer kol-component {
-	.collapsible {
-		@media (prefers-reduced-motion) {
-			&__wrapper-animation,
-			&__wrapper {
-				transition: none !important;
-			}
+.collapsible {
+	@media (prefers-reduced-motion) {
+		&__wrapper-animation,
+		&__wrapper {
+			transition: none !important;
 		}
+	}
 
-		/* @see https://github.com/public-ui/kolibri/issues/5952 */
-		@media print {
-			:not(.collapsible--open) &__wrapper-animation {
-				display: none;
-			}
-		}
-		&__wrapper {
-			/* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */
-			transform: translateZ(0);
-			display: grid;
-			grid-template-rows: 0fr;
-			transition: grid-template-rows 0.3s;
+	/* @see https://github.com/public-ui/kolibri/issues/5952 */
+	@media print {
+		:not(.collapsible--open) &__wrapper-animation {
+			display: none;
 		}
+	}
+	&__wrapper {
+		/* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */
+		transform: translateZ(0);
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows 0.3s;
+	}
 
-		&__wrapper-animation {
-			opacity: 0;
-			transform: scaleY(0);
-			transform-origin: top;
-			min-height: 0;
+	&__wrapper-animation {
+		opacity: 0;
+		transform: scaleY(0);
+		transform-origin: top;
+		min-height: 0;
 
-			/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
-			visibility: hidden;
+		/* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */
+		visibility: hidden;
 
-			transition:
-				transform 0.3s,
-				opacity 0.3s,
-				visibility 0.3s;
-		}
+		transition:
+			transform 0.3s,
+			opacity 0.3s,
+			visibility 0.3s;
+	}
 
-		&--open &__wrapper {
-			grid-template-rows: 1fr;
-		}
+	&--open &__wrapper {
+		grid-template-rows: 1fr;
+	}
 
-		&--open &__wrapper-animation {
-			opacity: 1;
-			transform: scaleY(1);
+	&--open &__wrapper-animation {
+		opacity: 1;
+		transform: scaleY(1);
 
-			visibility: visible;
-		}
+		visibility: visible;
+	}
 
-		/*
-        * Inside a button, the caption text is always centered.
-        * So we have to align the text to the left.
-        */
-		&__heading-button button {
-			.kol-span {
-				align-items: flex-start;
-			}
+	/*
+    * Inside a button, the caption text is always centered.
+    * So we have to align the text to the left.
+    */
+	&__heading-button button {
+		.kol-span {
+			align-items: flex-start;
 		}
 	}
+}
 
-	.collapsible--open:focus-within {
-		position: relative;
-		z-index: 100;
-	}
+.collapsible--open:focus-within {
+	position: relative;
+	z-index: 100;
 }

packages/components/src/components/@shared/_field-control.mixin.scss

@@ -1,6 +1,5 @@
 @mixin kol-field-control {
 	.kol-field-control {
-		$base: &;
 		display: grid;
 
 		min-height: var(--a11y-min-size);

packages/components/src/components/@shared/_form-field.mixin.scss

@@ -2,33 +2,31 @@
 
 @mixin kol-form-field {
 	.kol-form-field {
-		$root: &;
-
 		display: grid;
 
 		&__label {
-			#{$root}:not(#{$root}--disabled) & {
+			.kol-form-field:not(.kol-form-field--disabled) & {
 				cursor: pointer;
 			}
 
 			&-text {
 				display: ruby;
 			}
 
-			#{$root}--disabled & {
+			.kol-form-field--disabled & {
 				opacity: 0.5;
 			}
 		}
 
 		&--required {
-			#{$root}__label-text:not(:has(> [name]))::after,
-			#{$root}__tooltip .span-label::after {
+			.kol-form-field__label-text:not(:has(> [name]))::after,
+			.kol-form-field__tooltip .span-label::after {
 				content: '*' / '';
 			}
 		}
 
 		&__hint {
-			#{$root}--disabled & {
+			.kol-form-field--disabled & {
 				opacity: 0.5;
 			}
 		}

packages/components/src/components/@shared/_global.scss

@@ -40,10 +40,8 @@
 	}
 
 	.kol-span {
-		$spanRoot: &;
-
 		&__label {
-			@at-root #{$spanRoot} &--hide-label & {
+			.kol-span--hide-label & {
 				display: none;
 			}
 		}

packages/components/src/components/@shared/_input-container.mixin.scss

@@ -1,6 +1,5 @@
 @mixin kol-input-container {
 	.kol-input-container {
-		$root: &;
 		background-color: transparent;
 		display: grid;
 		width: 100%;

packages/components/src/components/@shared/_link.mixin.scss

@@ -10,7 +10,6 @@
 	}
 
 	.#{$block-classname} {
-		$root: &;
 		display: inline-flex;
 		max-width: fit-content;
 

packages/components/src/components/@shared/_table-stateless.mixin.scss

@@ -11,16 +11,14 @@
 	@include kol-icon-styles();
 
 	.kol-table {
-		$root: &;
-
 		--kol-table-selection-col-width: var(--a11y-min-size);
 
 		display: block;
 		position: relative;
 		max-width: 100%;
 
 		&__scroll-container {
-			@at-root #{$root}:has(#{$root}__focus-element:focus) & {
+			.kol-table:has(.kol-table__focus-element:focus) & {
 				/* @see https://remysharp.com/til/css/focus-ring-default-styles */
 				outline: 5px auto Highlight;
 				outline: 5px auto -webkit-focus-ring-color;

packages/components/src/components/dialog/style.scss

@@ -3,9 +3,9 @@
 @use '../@shared/mixins' as *;
 @use '../tooltip/style.scss' as *;
 
-@include kol-card;
-
 @layer kol-component {
+	@include kol-card;
+
 	.kol-dialog,
 	.kol-modal {
 		min-height: var(--a11y-min-size);

packages/components/src/components/drawer/style.scss

@@ -7,8 +7,6 @@
 	@include kol-card;
 
 	.kol-drawer {
-		$root: &;
-
 		&__dialog {
 			padding: 0;
 			border: none;
@@ -24,7 +22,7 @@
 				max-width: 100vw;
 				height: 100vh;
 
-				#{$root}__content {
+				.kol-drawer__content {
 					height: 100%;
 				}
 			}
@@ -43,7 +41,7 @@
 				width: 100vw;
 				max-height: 100vh;
 
-				#{$root}__content {
+				.kol-drawer__content {
 					width: 100%;
 				}
 			}