CSS Extraction & Disable Style Injection (#2655)

Co-authored-by: origami-z <[email protected]>

.changeset/early-jars-speak.md

@@ -0,0 +1,12 @@
+---
+"@salt-ds/core": minor
+"@salt-ds/icons": minor
+"@salt-ds/lab": minor
+"@salt-ds/styles": minor
+---
+
+Supports turning off style injection via `SaltProvider`.
+
+```
+<SaltProvider enableStyleInjection={false} /** other props*/ >
+```

.prettierignore

@@ -18,6 +18,8 @@ storybook-static
 # Autogenerated CSS
 /packages/ag-grid-theme/uitk-ag-theme.css
 /packages/ag-grid-theme/salt-ag-theme.css
+/docs/css/salt-core.css
+/docs/css/salt-lab.css
 
 /site/snapshots
 /docs/public/mockServiceWorker.js

.storybook/preview.tsx

@@ -106,6 +106,15 @@ export const globalTypes: GlobalTypes = {
       title: "Scaffold",
     },
   },
+  styleInjection: {
+    name: "Component Style Injection",
+    description: "Turn on/off component style injection",
+    defaultValue: "enable",
+    toolbar: {
+      items: ["disable", "enable"],
+      title: "Component Style Injection",
+    },
+  },
 };
 
 export const argTypes: ArgTypes = {
@@ -144,8 +153,14 @@ export const parameters: Parameters = {
       ...rest
     }: ComponentProps<typeof DocsContainer>) => (
       <DocsContainer context={context} {...rest}>
-        {/* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */}
-        <SaltProvider mode={context.store.globals.globals?.mode}>
+        <SaltProvider
+          /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+          mode={context.store.globals.globals?.mode}
+          enableStyleInjection={
+            /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+            context.store.globals.globals?.styleInjection === "enable"
+          }
+        >
           {children}
         </SaltProvider>
       </DocsContainer>

docs/components/QAContainer.tsx

@@ -16,6 +16,7 @@ const withBaseName = makePrefixer("saltQAContainer");
 export interface QAContainerProps extends HTMLAttributes<HTMLDivElement> {
   cols?: number;
   height?: number;
+  enableStyleInjection?: boolean;
   imgSrc?: string;
   itemPadding?: number;
   itemWidthAuto?: boolean;
@@ -65,6 +66,7 @@ export const QAContainer = ({
   children,
   className,
   cols = 3,
+  enableStyleInjection = true,
   height,
   itemPadding,
   itemWidthAuto,
@@ -107,10 +109,18 @@ export const QAContainer = ({
       ) : (
         DensityValues.map((d, i) => (
           <Fragment key={i}>
-            <SaltProvider mode="light" density={d}>
+            <SaltProvider
+              mode="light"
+              density={d}
+              enableStyleInjection={enableStyleInjection}
+            >
               <BackgroundBlock background="white">{children}</BackgroundBlock>
             </SaltProvider>
-            <SaltProvider mode="dark" density={d}>
+            <SaltProvider
+              mode="dark"
+              density={d}
+              enableStyleInjection={enableStyleInjection}
+            >
               <BackgroundBlock>{children}</BackgroundBlock>
             </SaltProvider>
           </Fragment>

docs/components/QAContainerNoStyleInjection.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { QAContainer, QAContainerProps } from "./QAContainer";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import coreCss from "../css/salt-core.css?inline";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import iconCss from "../../packages/icons/src/icon/Icon.css?inline";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import labCss from "../css/salt-lab.css?inline";
+
+export const useDynamicStyleSheet = (styleSheet: string, id: string): void => {
+  useEffect(() => {
+    const styleElement = document.createElement("style");
+    styleElement.id = id;
+    styleElement.innerHTML = styleSheet;
+    document.head.append(styleElement);
+    return () => styleElement.remove();
+  }, [styleSheet, id]);
+};
+
+export interface QAContainerNoStyleInjectionProps extends QAContainerProps {
+  enableStyleInjection: false;
+}
+
+export const QAContainerNoStyleInjection = (
+  props: QAContainerNoStyleInjectionProps
+) => {
+  // order is important!
+  useDynamicStyleSheet(String(iconCss), "salt-icon-css");
+  useDynamicStyleSheet(String(coreCss), "salt-core-css");
+  useDynamicStyleSheet(String(labCss), "salt-lab-css");
+
+  return <QAContainer {...props} enableStyleInjection={false} />;
+};

docs/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./AllRenderer";
 export * from "./BackgroundBlock";
 export * from "./QAContainer";
+export * from "./QAContainerNoStyleInjection";