refactor: remove usage of CSS layers from base styles (#9659)

Author: web-padawan

.stylelintrc

@@ -2,17 +2,10 @@
   "extends": ["stylelint-config-vaadin"],
   "plugins": [
     "./custom-rules/stylelint/no-shorthand-with-unresolved-longhand.js",
-    "./custom-rules/stylelint/license-header.js",
-    "./custom-rules/stylelint/use-layers.js"
+    "./custom-rules/stylelint/license-header.js"
   ],
   "overrides": [
     { "files": ["**/*.js"], "customSyntax": "postcss-lit" },
-    {
-      "files": ["**/*-base-styles.js"],
-      "rules": {
-        "custom-rules/use-layers": ["^(vaadin\\.)?base$"]
-      }
-    },
     {
       "files": ["packages/vaadin-lumo-styles/**/*.css"],
       "rules": {

custom-rules/stylelint/use-layers.js

@@ -9,21 +9,19 @@ import { detailsSummary } from '@vaadin/details/src/styles/vaadin-details-summar
 export const accordionHeading = [
   detailsSummary('vaadin-accordion-heading'),
   css`
-    @layer base {
-      button {
-        align-items: center;
-        appearance: none;
-        background: transparent;
-        border: 0;
-        color: inherit;
-        cursor: inherit;
-        display: flex;
-        font: inherit;
-        gap: inherit;
-        outline: none;
-        padding: 0;
-        touch-action: manipulation;
-      }
+    button {
+      align-items: center;
+      appearance: none;
+      background: transparent;
+      border: 0;
+      color: inherit;
+      cursor: inherit;
+      display: flex;
+      font: inherit;
+      gap: inherit;
+      outline: none;
+      padding: 0;
+      touch-action: manipulation;
     }
   `,
 ];

packages/accordion/src/styles/vaadin-accordion-heading-base-styles.js

@@ -6,25 +6,23 @@
 import { css } from 'lit';
 
 export const accordionPanel = css`
-  @layer base {
-    :host {
-      display: block;
-    }
+  :host {
+    display: block;
+  }
 
-    :host([hidden]) {
-      display: none !important;
-    }
+  :host([hidden]) {
+    display: none !important;
+  }
 
-    [part='content'] {
-      box-sizing: border-box;
-    }
+  [part='content'] {
+    box-sizing: border-box;
+  }
 
-    :host(:not([opened])) [part='content'] {
-      display: none !important;
-    }
+  :host(:not([opened])) [part='content'] {
+    display: none !important;
+  }
 
-    :host([focus-ring]) {
-      --_focus-ring: 1;
-    }
+  :host([focus-ring]) {
+    --_focus-ring: 1;
   }
 `;