refactor: split :where() and :is() for better performance (#10312)

Author: vursen

packages/aura/aura.css

@@ -34,7 +34,8 @@
 @import './src/components/tabs.css';
 @import './src/components/upload.css';
 
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   cursor: default;
   /* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
   --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');

packages/aura/src/color-scheme.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-color-scheme: light;
   --aura-content-color-scheme: var(--aura-color-scheme);
   --aura-notification-color-scheme: var(--aura-color-scheme);

packages/aura/src/color.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-contrast: 1;
 
   --aura-accent-light: hsl(220, 80%, 47%);
@@ -80,7 +81,8 @@
   background-attachment: fixed;
 }
 
-:where(:root, :host),
+:where(:root),
+:where(:host),
 vaadin-button,
 vaadin-context-menu-item,
 vaadin-crud-edit,
@@ -115,7 +117,8 @@ vaadin-tab {
 }
 
 @supports (color: hsl(0 0 0)) {
-  :where(:root, :host) {
+  :where(:root),
+  :where(:host) {
     --_safari-17-deg: 1;
   }
 }

packages/aura/src/components/app-layout.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-app-layout-inset: 1.5vmin;
   --aura-app-layout-radius: var(--vaadin-radius-l);
   --_aura-mdl-border: 1px;

packages/aura/src/components/avatar.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
   --vaadin-avatar-background: var(--vaadin-background-container);
   --vaadin-avatar-font-weight: var(--aura-font-weight-medium);

packages/aura/src/components/button.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
 }
 

packages/aura/src/components/card.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
   --vaadin-card-padding: var(--vaadin-padding-l);
   --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);

packages/aura/src/components/checkbox-radio.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-radio-button-dot-size: 6px;
   --vaadin-checkbox-size: round(1lh - 2px, 2px);
   --vaadin-radio-button-size: round(1lh - 2px, 2px);

packages/aura/src/components/crud.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-crud-background: var(--aura-surface) padding-box;
 }
 

packages/aura/src/components/dashboard.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
   --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
   --vaadin-dashboard-header-gap: var(--vaadin-gap-xs);