fix(card): build lightdom at build time

Author: bennypowers

.changeset/brave-feet-sing.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-card": patch
+"@patternfly/pfe-cta": patch
+---
+
+build pfe-card and pfe-cta's light dom CSS during the `build` command

docs/demo/demo.ts

@@ -9,6 +9,8 @@ if (!HTMLIncludeElement.prototype.attributeChangedCallback.toString().includes('
   console.info('No need to patch <html-include>');
 } else {
   console.info('Patching <html-include>');
+  // @ts-expect-error: tla is available
+  await customElements.whenDefined('html-include');
   const isLinkAlreadyLoaded = (link: HTMLLinkElement) => {
     try {
       return !!(link.sheet && link.sheet.cssRules);

elements/pfe-card/demo/pfe-card.html

@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="/core/pfe-styles/pfe-context.min.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.min.css">
 <link rel="stylesheet" href="/core/pfe-styles/pfe.min.css">
-<link rel="stylesheet" href="/elements/pfe-card/pfe-card---lightdom.min.css">
+<link rel="stylesheet" href="/elements/pfe-card/pfe-card--lightdom.min.css">
 <link rel="stylesheet" href="/elements/pfe-card/demo/demo.css">
 
 <pfe-card color="lightest" border class="button-series">

elements/pfe-card/package.json

@@ -27,6 +27,7 @@
     "build:clean": "npm run clean",
     "build:esbuild": "node ../../scripts/build.js --include pfe-card",
     "build:analyze": "npm run analyze",
+    "build:lightdom": "sass pfe-card--lightdom.scss pfe-card--lightdom.min.css --style=compressed --load-path=../../node_modules",
     "build:types": "tsc -b .",
     "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",

elements/pfe-cta/package.json

@@ -26,7 +26,7 @@
     "build": "run-s build:*",
     "build:clean": "npm run clean",
     "build:esbuild": "node ../../scripts/build.js --include pfe-cta",
-    "build:lightdom": "sass pfe-cta--lightdom.scss pfe-cta--lightdom.css --load-path=../../node_modules",
+    "build:lightdom": "sass pfe-cta--lightdom.scss pfe-cta--lightdom.min.css --style=compressed --load-path=../../node_modules",
     "build:analyze": "npm run analyze",
     "build:types": "tsc -b .",
     "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",

package.json

@@ -29,6 +29,7 @@
     "build:analyze": "lerna run analyze --parallel",
     "build:styles": "npm run build --workspace @patternfly/pfe-styles",
     "build:core": "npm run build --workspace @patternfly/pfe-core",
+    "build:lightdom": "npm run build:lightdom --workspaces --if-present",
     "build:elements": "scripts/build.js",
     "build:types": "tsc -b",
     "build:docs": "run-s build:docs:*",