Countries no runtime CSS injection (jpmorganchase#3104)

.changeset/giant-mangos-drop.md

@@ -0,0 +1,9 @@
+---
+"@salt-ds/countries": minor
+---
+
+Expose a CSS file that allows Salt to be used without runtime CSS injection.
+
+```tsx
+import "@salt-ds/countries/css/salt-countries.css";
+```

.gitignore

@@ -45,4 +45,5 @@ yarn-error.log*
 
 # Autogenerated CSS
 /docs/css/salt-core.css
-/docs/css/salt-lab.css
+/docs/css/salt-lab.css
+/docs/css/salt-countries.css

docs/components/QAContainerNoStyleInjection.tsx

@@ -16,6 +16,11 @@ import iconCss from "../../packages/icons/src/icon/Icon.css?inline";
 // eslint-disable-next-line import/no-unresolved
 import labCss from "../css/salt-lab.css?inline";
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import countriesCss from "../css/salt-countries.css?inline";
+
 export const useDynamicStyleSheet = (styleSheet: string, id: string): void => {
   useEffect(() => {
     const styleElement = document.createElement("style");
@@ -37,6 +42,7 @@ export const QAContainerNoStyleInjection = (
   useDynamicStyleSheet(String(iconCss), "salt-icon-css");
   useDynamicStyleSheet(String(coreCss), "salt-core-css");
   useDynamicStyleSheet(String(labCss), "salt-lab-css");
+  useDynamicStyleSheet(String(countriesCss), "salt-countries-css");
 
   return <QAContainer {...props} enableStyleInjection={false} />;
 };

package.json

@@ -26,10 +26,11 @@
     "build:window": "modular build @salt-ds/window",
     "build:styles": "modular build @salt-ds/styles",
     "build:ag-grid-theme": "yarn workspace @salt-ds/ag-grid-theme build",
-    "bundle:css": "yarn bundle:core:css && yarn bundle:lab:css && yarn copy:icon:css",
+    "bundle:css": "yarn bundle:core:css && yarn bundle:lab:css && yarn copy:icon:css && yarn copy:countries:css",
     "bundle:core:css": "yarn workspace @salt-ds/core bundle:css",
     "bundle:lab:css": "yarn workspace @salt-ds/lab bundle:css",
     "copy:icon:css": "yarn workspace @salt-ds/icons copy:css",
+    "copy:countries:css": "yarn workspace @salt-ds/countries copy:css",
     "test": "vitest",
     "test:components": "cypress run --component --browser chrome --headless",
     "test:components:local": "cypress open --component --browser electron",

packages/countries/package.json

@@ -15,11 +15,13 @@
   "sideEffects": false,
   "files": [
     "saltCountries.css",
-    "saltSharpCountries.css"
+    "saltSharpCountries.css",
+    "css"
   ],
   "scripts": {
     "build": "yarn clean && node ./scripts/generateCountrySymbol.mjs '*.svg'",
-    "clean": "rimraf ./src/components"
+    "clean": "rimraf ./src/components",
+    "copy:css": "yarn node ./scripts/copyCss.mjs"
   },
   "dependencies": {
     "clsx": "^2.0.0"

packages/countries/scripts/copyCss.mjs

@@ -0,0 +1,25 @@
+import { copyFile, mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const srcFolder = path.join(__dirname, "../src");
+const buildFolder = path.join(__dirname, "../../../dist/salt-ds-countries");
+const cssFolder = path.join(buildFolder, "/css");
+const storybookFolder = path.join(__dirname, "../../../docs/css");
+
+try {
+  await mkdir(cssFolder, { recursive: true });
+  await copyFile(
+    path.join(srcFolder, "/country-symbol/CountrySymbol.css"),
+    path.join(cssFolder, "/salt-countries.css")
+  );
+  console.log(`salt-countries.css copied to: ${cssFolder} `);
+  await copyFile(
+    path.join(srcFolder, "/country-symbol/CountrySymbol.css"),
+    path.join(storybookFolder, "/salt-countries.css")
+  );
+  console.log(`salt-countries.css copied to: ${storybookFolder} `);
+} catch (err) {
+  console.error(err.message);
+}

packages/countries/stories/CountrySymbol.qa.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { StackLayout } from "@salt-ds/core";
-import { MX, countryMetaMap } from "@salt-ds/countries";
+import { MX, AD, GB, US, countryMetaMap } from "@salt-ds/countries";
+import { QAContainer, QAContainerNoStyleInjection } from "docs/components";
+
 import "@salt-ds/countries/saltCountries.css";
 import "@salt-ds/countries/saltSharpCountries.css";
-import { QAContainer } from "docs/components";
 
 export default {
   title: "Country Symbols/Country Symbol/Country Symbol QA",
@@ -25,6 +26,26 @@ CountrySymbolSizes.parameters = {
   chromatic: { disableSnapshot: false },
 };
 
+export const NoStyleInjection: StoryFn = () => {
+  return (
+    <QAContainerNoStyleInjection
+      height={500}
+      width={1500}
+      cols={4}
+      enableStyleInjection={false}
+    >
+      <AD size={1} />
+      <GB size={2} />
+      <MX size={3} />
+      <US size={4} />
+    </QAContainerNoStyleInjection>
+  );
+};
+
+NoStyleInjection.parameters = {
+  chromatic: { disableSnapshot: false },
+};
+
 export const CssBackground: StoryFn = () => {
   return (
     <QAContainer