Move component CSS inserts into custom elements

components/accordion/CHANGELOG.md

@@ -2,7 +2,8 @@
 
 <a href="https://www.npmjs.com/package/@cagov/ds-accordion">https://www.npmjs.com/package/@cagov/ds-accordion</a>
 
-
+## 2.0.3
+* Changes to how styles are inserted into the document.
 ## 2.0.2
 * Fixed new color palette accordions color contrast accessibility issues 
 ## 2.0.1

components/accordion/dist/index.js

@@ -1,5 +1,5 @@
 var styles =
-  '/* initial styles */\ncagov-accordion details {\n  border-radius: var(--radius-2, 5px) !important;\n  margin-bottom: 0;\n  min-height: var(--s-5, 3rem);\n  margin-top: 0.5rem;\n  border: solid var(--border-1, 1px) var(--gray-200, #d4d4d7) !important;\n}\ncagov-accordion details summary {\n  cursor: pointer;\n  padding: var(--s-1, 0.5rem) var(--s-5, 3rem) var(--s-1, 0.5rem) var(--s-2, 1rem);\n  background-color: var(--gray-50, #fafafa);\n  position: relative;\n  line-height: var(--s-4, 2rem);\n  margin: 0;\n  color: var(--primary-700, #165ac2);\n  font-size: var(--font-size-2, 1.125rem);\n  font-weight: bold;\n}\ncagov-accordion details summary:hover {\n  background-color: var(--gray-100, #fafafa);\n  color: var(--primary-900, #003688);\n}\ncagov-accordion details .accordion-body {\n  padding: var(--s-2, 1rem);\n}\n\n/* styles applied after custom element javascript runs */\ncagov-accordion:defined {\n  /* let it be open initially if details has open attribute */\n}\ncagov-accordion:defined details {\n  transition: height var(--animation-duration-2, 0.2s);\n  height: var(--s-5, 3rem);\n  overflow: hidden;\n}\ncagov-accordion:defined details[open] {\n  height: auto;\n}\ncagov-accordion:defined summary::-webkit-details-marker {\n  display: none;\n}\ncagov-accordion:defined details summary {\n  list-style: none;\n  /* hide default expansion triangle after js executes */\n  border-radius: var(--border-5, 5px) var(--border-5, 5px) 0 0;\n}\ncagov-accordion:defined details summary:focus {\n  outline-offset: -2px;\n  outline: solid 2px var(--accent2-500, #ac8227) !important;\n  background-color: var(--gray-100, #fafafa);\n}\ncagov-accordion:defined details .cagov-open-indicator {\n  background-color: var(--primary-700, #165ac2);\n  height: 3px;\n  width: 15px;\n  border-radius: var(--border-3, 3px);\n  position: absolute;\n  right: var(--s-2, 1rem);\n  top: 1.4rem;\n}\ncagov-accordion:defined details .cagov-open-indicator:before {\n  display: block;\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 3px;\n  width: 3px;\n  height: 15px;\n  border-radius: var(--border-3, 3px);\n  border: none;\n  box-shadow: 3px 0 0 0 var(--primary-700, #165ac2);\n  background: none;\n}\ncagov-accordion:defined details[open] .cagov-open-indicator:before {\n  display: none;\n}\n\n/*# sourceMappingURL=index.css.map */\n';
+  '/* initial styles */\ncagov-accordion details {\n  border-radius: var(--radius-2, 5px) !important;\n  margin-bottom: 0;\n  min-height: var(--s-5, 3rem);\n  margin-top: 0.5rem;\n  border: solid var(--border-1, 1px) var(--gray-200, #d4d4d7) !important;\n}\ncagov-accordion details summary {\n  cursor: pointer;\n  padding: var(--s-1, 0.5rem) var(--s-5, 3rem) var(--s-1, 0.5rem) var(--s-2, 1rem);\n  background-color: var(--gray-50, #fafafa);\n  position: relative;\n  line-height: var(--s-4, 2rem);\n  margin: 0;\n  color: var(--primary-700, #165ac2);\n  font-size: var(--font-size-2, 1.125rem);\n  font-weight: bold;\n}\ncagov-accordion details summary:hover {\n  background-color: var(--gray-100, #fafafa);\n  color: var(--primary-900, #003688);\n}\ncagov-accordion details .accordion-body {\n  padding: var(--s-2, 1rem);\n}\n\n/* styles applied after custom element javascript runs */\ncagov-accordion:defined {\n  /* let it be open initially if details has open attribute */\n}\ncagov-accordion:defined details {\n  transition: height var(--animation-duration-2, 0.2s);\n  height: var(--s-5, 3rem);\n  overflow: hidden;\n}\ncagov-accordion:defined details[open] {\n  height: auto;\n}\ncagov-accordion:defined summary::-webkit-details-marker {\n  display: none;\n}\ncagov-accordion:defined details summary {\n  list-style: none; /* hide default expansion triangle after js executes */\n  border-radius: var(--border-5, 5px) var(--border-5, 5px) 0 0;\n}\ncagov-accordion:defined details summary:focus {\n  outline-offset: -2px;\n  outline: solid 2px var(--accent2-500, #ac8227) !important;\n  background-color: var(--gray-100, #fafafa);\n}\ncagov-accordion:defined details .cagov-open-indicator {\n  background-color: var(--primary-700, #165ac2);\n  height: 3px;\n  width: 15px;\n  border-radius: var(--border-3, 3px);\n  position: absolute;\n  right: var(--s-2, 1rem);\n  top: 1.4rem;\n}\ncagov-accordion:defined details .cagov-open-indicator:before {\n  display: block;\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 3px;\n  width: 3px;\n  height: 15px;\n  border-radius: var(--border-3, 3px);\n  border: none;\n  box-shadow: 3px 0 0 0 var(--primary-700, #165ac2);\n  background: none;\n}\ncagov-accordion:defined details[open] .cagov-open-indicator:before {\n  display: none;\n}\n\n/*# sourceMappingURL=index.css.map */\n';
 
 /**
  * Accordion web component that collapses and expands content inside itself on click.
@@ -17,6 +17,17 @@ var styles =
  *
  */
 class CaGovAccordion extends window.HTMLElement {
+  constructor() {
+    super();
+
+    if (!document.querySelector('#cagov-accordion-styles')) {
+      const style = document.createElement('style');
+      style.id = 'cagov-accordion-styles';
+      style.textContent = styles;
+      document.querySelector('head').appendChild(style);
+    }
+  }
+
   connectedCallback() {
     this.summaryEl = this.querySelector('summary');
     // trigger the opening and closing height change animation on summary click
@@ -81,10 +92,7 @@ class CaGovAccordion extends window.HTMLElement {
     };
   }
 }
-window.customElements.define('cagov-accordion', CaGovAccordion);
 
-const style = document.createElement('style');
-style.textContent = styles;
-document.querySelector('head').appendChild(style);
+window.customElements.define('cagov-accordion', CaGovAccordion);
 
 export { CaGovAccordion };

components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cagov/ds-accordion",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Accordions are expandable sections of content. Each section contains a heading (H2 or H3), a plus button (+), and more body text when opened.",
   "main": "dist/index.js",
   "scripts": {

components/accordion/src/index.js

@@ -16,6 +16,17 @@ import styles from './css/index.css';
  *
  */
 export class CaGovAccordion extends window.HTMLElement {
+  constructor() {
+    super();
+
+    if (!document.querySelector('#cagov-accordion-styles')) {
+      const style = document.createElement('style');
+      style.id = 'cagov-accordion-styles';
+      style.textContent = styles;
+      document.querySelector('head').appendChild(style);
+    }
+  }
+
   connectedCallback() {
     this.summaryEl = this.querySelector('summary');
     // trigger the opening and closing height change animation on summary click
@@ -80,8 +91,5 @@ export class CaGovAccordion extends window.HTMLElement {
     };
   }
 }
-window.customElements.define('cagov-accordion', CaGovAccordion);
 
-const style = document.createElement('style');
-style.textContent = styles;
-document.querySelector('head').appendChild(style);
+window.customElements.define('cagov-accordion', CaGovAccordion);

components/back-to-top/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Back to top button changelog
 
+## 2.0.2
+* Changes to how styles are inserted into the document.
 
 ## 2.0.1
 * Updated color variables

components/back-to-top/dist/index.js

@@ -24,6 +24,13 @@ class CaGovBackToTop extends window.HTMLElement {
       lastScrollTop: 0,
       timer: null,
     };
+
+    if (!document.querySelector('#cagov-back-to-top-styles')) {
+      const style = document.createElement('style');
+      style.id = 'cagov-back-to-top-styles';
+      style.textContent = styles;
+      document.querySelector('head').appendChild(style);
+    }
   }
 
   connectedCallback() {
@@ -173,8 +180,4 @@ class CaGovBackToTop extends window.HTMLElement {
 
 window.customElements.define('cagov-back-to-top', CaGovBackToTop);
 
-const style = document.createElement('style');
-style.textContent = styles;
-document.querySelector('head').appendChild(style);
-
 export { CaGovBackToTop };

components/back-to-top/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cagov/ds-back-to-top",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

components/back-to-top/src/index.js

@@ -23,6 +23,13 @@ export class CaGovBackToTop extends window.HTMLElement {
       lastScrollTop: 0,
       timer: null,
     };
+
+    if (!document.querySelector('#cagov-back-to-top-styles')) {
+      const style = document.createElement('style');
+      style.id = 'cagov-back-to-top-styles';
+      style.textContent = styles;
+      document.querySelector('head').appendChild(style);
+    }
   }
 
   connectedCallback() {
@@ -171,7 +178,3 @@ export class CaGovBackToTop extends window.HTMLElement {
 }
 
 window.customElements.define('cagov-back-to-top', CaGovBackToTop);
-
-const style = document.createElement('style');
-style.textContent = styles;
-document.querySelector('head').appendChild(style);

components/combined-css/CHANGELOG.md

@@ -1,6 +1,9 @@
 # CHANGELOG for ds-compiled-css
 `ds-compiled-css`
 
+## 2.0.3
+* Changes to the way CSS-in-JS components insert styles into the document.
+
 ## 2.0.2
 * Updated color variables to go inline with new CEILAB color palette.