fix: use zero specific css selectors for common classes to allow user…

… to override styles (#209)
uploadcare · Aug 2, 2022 · 959931b · 959931b
1 parent db9b64c
commit 959931b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 27 deletions.
diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css
@@ -1,4 +1,4 @@
-.lr-cldtr-common,
+:where(.lr-cldtr-common),
 :host {
   /* Theme settings >>> */
   --rgb-primary-accent: 6, 2, 196;
@@ -61,38 +61,39 @@
   --shadow-base: 0px 5px 15px rgba(var(--rgb-shadow), 0.1), 0px 1px 4px rgba(var(--rgb-shadow), 0.15);
 }
 
-.lr-cldtr-common :is([can-handle-paste]:hover, [can-handle-paste]:focus),
+:where(.lr-cldtr-common) :is([can-handle-paste]:hover, [can-handle-paste]:focus),
 :host :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
   --can-handle-paste: 'true';
 }
 
-.lr-cldtr-common :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover),
+:where(.lr-cldtr-common)
+  :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover),
 :host :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) {
   --filter-effect: var(--hover-filter) !important;
   --opacity-effect: var(--hover-opacity) !important;
   --color-effect: var(--hover-color-rgb) !important;
 }
 
-.lr-cldtr-common :is([tabindex]:active, [with-effects]:active),
+:where(.lr-cldtr-common) :is([tabindex]:active, [with-effects]:active),
 :host :is([tabindex]:active, [with-effects]:active) {
   --filter-effect: var(--down-filter) !important;
   --opacity-effect: var(--down-opacity) !important;
   --color-effect: var(--down-color-rgb) !important;
 }
 
-.lr-cldtr-common :is([tabindex][active], [with-effects][active]),
+:where(.lr-cldtr-common) :is([tabindex][active], [with-effects][active]),
 :host :is([tabindex][active], [with-effects][active]) {
   --filter-effect: var(--active-filter) !important;
   --opacity-effect: var(--active-opacity) !important;
   --color-effect: var(--active-color-rgb) !important;
 }
 
-.lr-cldtr-common [hidden-scrollbar]::-webkit-scrollbar,
+:where(.lr-cldtr-common) [hidden-scrollbar]::-webkit-scrollbar,
 :host [hidden-scrollbar]::-webkit-scrollbar {
   display: none;
 }
 
-.lr-cldtr-common [hidden-scrollbar],
+:where(.lr-cldtr-common) [hidden-scrollbar],
 :host [hidden-scrollbar] {
   -ms-overflow-style: none;
   scrollbar-width: none;

diff --git a/blocks/CloudImageEditor/src/css/icons.css b/blocks/CloudImageEditor/src/css/icons.css
@@ -1,26 +1,25 @@
 /* stylelint-disable string-no-newline */
-.lr-cldtr-common lr-icon {
+:where(.lr-cldtr-common) lr-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
 
-.lr-cldtr-common lr-icon svg {
+:where(.lr-cldtr-common) lr-icon svg {
   width: unset;
   height: unset;
 }
 
-.lr-cldtr-common lr-icon:not([raw]) path {
+:where(.lr-cldtr-common) lr-icon:not([raw]) path {
   stroke-linejoin: round;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.2;
 }
 
-.lr-cldtr-icons,
-.lr-cldtr-common,
+:where(.lr-cldtr-icons, .lr-cldtr-common),
 :host {
   --icon-rotate: 'M13.5.399902L12 1.9999l1.5 1.6M12.0234 2H14.4C16.3882 2 18 3.61178 18 5.6V8M4 17h9c.5523 0 1-.4477 1-1V7c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44771-1 1v9c0 .5523.44771 1 1 1z';
   --icon-mirror: 'M5.00042.399902l-1.5 1.599998 1.5 1.6M15.0004.399902l1.5 1.599998-1.5 1.6M3.51995 2H16.477M8.50042 16.7V6.04604c0-.30141-.39466-.41459-.5544-.159L1.28729 16.541c-.12488.1998.01877.459.2544.459h6.65873c.16568 0 .3-.1343.3-.3zm2.99998 0V6.04604c0-.30141.3947-.41459.5544-.159L18.7135 16.541c.1249.1998-.0187.459-.2544.459h-6.6587c-.1657 0-.3-.1343-.3-.3z';

diff --git a/blocks/CloudImageEditor/src/css/l10n.css b/blocks/CloudImageEditor/src/css/l10n.css
@@ -1,5 +1,4 @@
-.lr-cldtr-l10n_en-US,
-.lr-cldtr-common,
+:where(.lr-cldtr-l10n_en-US, .lr-cldtr-common),
 :host {
   --l10n-cancel: 'Cancel';
   --l10n-apply: 'Apply';

diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css
@@ -1,5 +1,4 @@
-.lr-wgt-theme,
-.lr-wgt-common,
+:where(.lr-wgt-theme, .lr-wgt-common),
 :host {
   color: var(--clr-txt);
 

diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css
diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css
@@ -1,5 +1,4 @@
-.lr-wgt-l10n_en-US,
-.lr-wgt-common,
+:where(.lr-wgt-l10n_en-US, .lr-wgt-common),
 :host {
   --l10n-upload-file: 'Upload file';
   --l10n-upload-files: 'Upload files';

diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css
@@ -1,5 +1,4 @@
-.lr-wgt-theme,
-.lr-wgt-common,
+:where(.lr-wgt-theme, .lr-wgt-common),
 :host {
   /* Base values */
 
@@ -166,16 +165,14 @@
 }
 
 @media only screen and (max-height: 600px) {
-  .lr-wgt-theme,
-  .lr-wgt-common,
+  :where(.lr-wgt-theme, .lr-wgt-common),
   :host {
     --modal-max-h: 100%;
   }
 }
 
 @media only screen and (max-width: 800px) {
-  .lr-wgt-theme,
-  .lr-wgt-common,
+  :where(.lr-wgt-theme, .lr-wgt-common),
   :host {
     --modal-max-w: 100%;
     --modal-max-h: 100%;

diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css
@@ -1,6 +1,6 @@
 @import url('../../../blocks/themes/lr-basic/index.css');
 
-.lr-wgt-common,
+:where(.lr-wgt-common),
 :host {
   --cfg-multiple: 0;
   --cfg-confirm-upload: 0;