From 0ec22561a9d8fa50ff21c07889904ee4d460d3c4 Mon Sep 17 00:00:00 2001
From: shawn <shawnsandy04@gmail.com>
Date: Tue, 5 Nov 2024 05:49:03 -0500
Subject: [PATCH] fix(css): add :where() selector to reduce data-flex
 specificity

- wrapped all data-flex column selectors with :where() pseudo-class
- reduces specificity weight of grid column classes from [0,1,1] to [0,0,1]
- affects column layouts from cols-2 through cols-12
- changes applied to both scss and compiled css files
---
 libs/react/fpkit/src/sass/_grid.scss  | 22 +++++++++++-----------
 libs/react/fpkit/src/styles/index.css | 22 +++++++++++-----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/libs/react/fpkit/src/sass/_grid.scss b/libs/react/fpkit/src/sass/_grid.scss
index 72f7aba3..86ebae06 100644
--- a/libs/react/fpkit/src/sass/_grid.scss
+++ b/libs/react/fpkit/src/sass/_grid.scss
@@ -42,47 +42,47 @@
   justify-content: end;
 }
 
-[data-flex~='cols-2'] {
+:where([data-flex~='cols-2']) {
   --col-w: 50%;
 }
 
-[data-flex~='cols-3'] {
+:where([data-flex~='cols-3']) {
   --col-w: 33%;
 }
 
-[data-flex~='cols-4'] {
+:where([data-flex~='cols-4']) {
   --col-w: 25%;
 }
 
-[data-flex~='cols-5'] {
+:where([data-flex~='cols-5']) {
   --col-w: 20%;
 }
 
-[data-flex~='cols-6'] {
+:where([data-flex~='cols-6']) {
   --col-w: 16%;
 }
 
-[data-flex~='cols-7'] {
+:where([data-flex~='cols-7']) {
   --col-w: 14%;
 }
 
-[data-flex~='cols-8'] {
+:where([data-flex~='cols-8']) {
   --col-w: 12%;
 }
 
-[data-flex~='cols-9'] {
+:where([data-flex~='cols-9']) {
   --col-w: 11%;
 }
 
-[data-flex~='cols-10'] {
+:where([data-flex~='cols-10']) {
   --col-w: 10%;
 }
 
-[data-flex~='cols-11'] {
+:where([data-flex~='cols-11']) {
   --col-w: 9%;
 }
 
-[data-flex~='cols-12'] {
+:where([data-flex~='cols-12']) {
   --col-w: 8%;
 }
 
diff --git a/libs/react/fpkit/src/styles/index.css b/libs/react/fpkit/src/styles/index.css
index 1417f6d8..5d00d40a 100644
--- a/libs/react/fpkit/src/styles/index.css
+++ b/libs/react/fpkit/src/styles/index.css
@@ -1104,47 +1104,47 @@ footer > div {
   justify-content: end;
 }
 
-[data-flex~=cols-2] {
+:where([data-flex~=cols-2]) {
   --col-w: 50%;
 }
 
-[data-flex~=cols-3] {
+:where([data-flex~=cols-3]) {
   --col-w: 33%;
 }
 
-[data-flex~=cols-4] {
+:where([data-flex~=cols-4]) {
   --col-w: 25%;
 }
 
-[data-flex~=cols-5] {
+:where([data-flex~=cols-5]) {
   --col-w: 20%;
 }
 
-[data-flex~=cols-6] {
+:where([data-flex~=cols-6]) {
   --col-w: 16%;
 }
 
-[data-flex~=cols-7] {
+:where([data-flex~=cols-7]) {
   --col-w: 14%;
 }
 
-[data-flex~=cols-8] {
+:where([data-flex~=cols-8]) {
   --col-w: 12%;
 }
 
-[data-flex~=cols-9] {
+:where([data-flex~=cols-9]) {
   --col-w: 11%;
 }
 
-[data-flex~=cols-10] {
+:where([data-flex~=cols-10]) {
   --col-w: 10%;
 }
 
-[data-flex~=cols-11] {
+:where([data-flex~=cols-11]) {
   --col-w: 9%;
 }
 
-[data-flex~=cols-12] {
+:where([data-flex~=cols-12]) {
   --col-w: 8%;
 }