prevent styles from escaping shadow dom and add warning

https://coveord.atlassian.net/browse/KIT-3925
coveo · Feb 14, 2025 · 76f94d2 · 76f94d2
1 parent d5dd436
commit 76f94d2
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 9 deletions.
diff --git a/packages/atomic/dev/header.js b/packages/atomic/dev/header.js
@@ -28,7 +28,6 @@ const getCurrentExample = () =>
 
 const makeLinks = () => {
   return links
-    .filter((link) => link.href !== window.location.pathname)
     .map(
       (link) =>
         `<li>
@@ -41,7 +40,20 @@ const example = getCurrentExample();
 const styleTag = document.createElement('style');
 styleTag.innerHTML = `
   html {
+  @layer base {
+    .styles-error {
+      display: none;
+    }
+  }
+
+  body{
+  margin: 0;}
+
+  header {
+  min-height: 130px;
+  }
     nav {
+
       padding: 10px 20px;
       font-family: var(--atomic-font-family);
       span {
@@ -64,7 +76,10 @@ styleTag.innerHTML = `
 styleTag.setAttribute('nonce', '1234567890');
 
 header.innerHTML = `
+  <span class="styles-error block  font-bold text-error">If you can see this, our styles have escaped shadow DOM
+</span>
   <nav>
+
     <span>${example ? example.label : ''} example</span>
     <ul>
       ${makeLinks()}

diff --git a/.../atomic/src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.pcss b/.../atomic/src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.pcss
diff --git a/...s/atomic/src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.tsx b/...s/atomic/src/components/commerce/facets/atomic-commerce-facets/atomic-commerce-facets.tsx
@@ -30,7 +30,6 @@ import {CommerceBindings as Bindings} from '../../atomic-commerce-interface/atom
  */
 @Component({
   tag: 'atomic-commerce-facets',
-  styleUrl: 'atomic-commerce-facets.pcss',
   shadow: false,
 })
 export class AtomicCommerceFacets implements InitializableComponent<Bindings> {

diff --git a/packages/atomic/src/components/common/template-system/cell-mobile.pcss b/packages/atomic/src/components/common/template-system/cell-mobile.pcss
@@ -70,7 +70,6 @@
       @apply set-font-size-base;
 
       margin-top: 1.25rem;
-      max-height: 2.5rem;
       @apply line-clamp-2;
     }
 
@@ -145,7 +144,6 @@
       @apply set-font-size-base;
 
       margin-top: 1rem;
-      max-height: 2.5rem;
       @apply line-clamp-2;
     }
 
@@ -226,7 +224,6 @@
       @apply set-font-size-base;
 
       margin-top: 0.75rem;
-      max-height: 1.25rem;
       @apply line-clamp-1;
     }
 

diff --git a/...ents/search/facets/atomic-automatic-facet-generator/atomic-automatic-facet-generator.pcss b/...ents/search/facets/atomic-automatic-facet-generator/atomic-automatic-facet-generator.pcss
diff --git a/...nents/search/facets/atomic-automatic-facet-generator/atomic-automatic-facet-generator.tsx b/...nents/search/facets/atomic-automatic-facet-generator/atomic-automatic-facet-generator.tsx
@@ -28,7 +28,6 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
  */
 @Component({
   tag: 'atomic-automatic-facet-generator',
-  styleUrl: 'atomic-automatic-facet-generator.pcss',
   shadow: false,
 })
 export class AtomicAutomaticFacetGenerator implements InitializableComponent {

diff --git a/packages/atomic/src/themes/coveo.css b/packages/atomic/src/themes/coveo.css
@@ -56,6 +56,7 @@
   --animate-scale-up-modal: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
 
   --spacing: 0.25rem;
+  --tw-leading: 1.5;
 }
 
 @property --tw-ring-offset-shadow {

diff --git a/packages/atomic/src/utils/coveo.tw.css b/packages/atomic/src/utils/coveo.tw.css
@@ -1,4 +1,4 @@
-@theme inline static {
+@theme static {
   /* Primary colors */
   --atomic-primary: #126ce0;
   --atomic-primary-light: #399ffe;