From 7fa4a590735c3b0c4be292c7b9b67112db853013 Mon Sep 17 00:00:00 2001
From: Leonardo Matos <leomp120894@gmail.com>
Date: Sun, 23 Jan 2022 13:34:38 -0300
Subject: [PATCH] Simpler/smaller selectors with :where :is

Note: https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility doesn't match current [browserlist](https://github.com/picocss/pico/blob/master/package.json#L98-L102) entirely, I will continue the PR checking same microoptin on other files if you agree we can avoid 100% support for following browsers:

- Safari 13.1                   0.530%
- Samsung 14.0             2.258%
- Samsung 13.0             0.198%
- Internet Explorer 11    0.748% (just mentioning, not supported already as it can't handle CSS props)

https://browserslist.dev/?q=Pj0gMC41JSwgbGFzdCAyIG1ham9yIHZlcnNpb25zLCBub3QgZGVhZA%3D%3D
---
 scss/content/_form.scss | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/scss/content/_form.scss b/scss/content/_form.scss
index bd9a52ec..2c1a2f6d 100644
--- a/scss/content/_form.scss
+++ b/scss/content/_form.scss
@@ -174,20 +174,16 @@ textarea {
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
-select,
-textarea {
-  &:active,
-  &:focus {
+:where(select, textarea) {
+  &:is(:active, :focus) {
     --background-color: var(--form-element-active-background-color);
   }
 }
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
-select,
-textarea {
-  &:active,
-  &:focus {
+:where(select, textarea) {
+  &:is(:active, :focus) {
     --border-color: var(--form-element-active-border-color);
   }
 }
@@ -213,10 +209,7 @@ textarea {
 }
 
 // Aria-invalid
-input,
-select,
-textarea {
-
+:where(input, select, textarea) {
   &:not([type="checkbox"]):not([type="radio"]) {
     &[aria-invalid] {
       @if $enable-important {
@@ -280,9 +273,7 @@ textarea {
 }
 
 [dir="rtl"] {
-  input,
-  select,
-  textarea {
+  :where(input, select, textarea) {
     &:not([type="checkbox"]):not([type="radio"]) {
       &[aria-invalid],
       &[aria-invalid="true"],
@@ -339,9 +330,7 @@ select {
 }
 
 // Helper
-input,
-select,
-textarea {
+:where(input, select, textarea) {
   + small {
     display: block;
     width: 100%;
@@ -353,9 +342,7 @@ textarea {
 
 // Styles for Input inside a label
 label {
-  & > input,
-  & > select,
-  & > textarea {
+  > :where(input, select, textarea) {
     margin-top: calc(var(--spacing) * 0.25);
   }
 }