refactor build to better handle fonts and css (finos#1122)

ScottLogic · Jan 11, 2024 · 6ed4a5b · 6ed4a5b
1 parent 7743733
commit 6ed4a5b
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 2,486 deletions.
diff --git a/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js b/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js
diff --git a/vuu-ui/packages/vuu-icons/index.ts b/vuu-ui/packages/vuu-icons/index.ts
@@ -0,0 +1 @@
+export * from "./src/VuuLogo";
diff --git a/vuu-ui/packages/vuu-icons/package.json b/vuu-ui/packages/vuu-icons/package.json
@@ -2,7 +2,7 @@
   "name": "@finos/vuu-icons",
   "version": "0.0.26",
   "description": "css embedded svg icons plus icon components for Vuu",
-  "main": "src/index.ts",
+  "main": "index.ts",
   "license": "Apache-2.0",
   "style": "index.css",
   "scripts": {

diff --git a/vuu-ui/packages/vuu-icons/src/index.ts b/vuu-ui/packages/vuu-icons/src/index.ts
diff --git a/vuu-ui/packages/vuu-table-types/package.json b/vuu-ui/packages/vuu-table-types/package.json
@@ -6,9 +6,6 @@
     "build": "node ../../scripts/run-build.mjs"
   },
   "types": "index.d.ts",
-  "files": [
-    "index.d.ts"
-  ],
   "devDependencies": {
     "@finos/vuu-protocol-types": "0.0.26"
   },

diff --git a/...i/packages/vuu-theme/fonts/NunitoSans.css → vuu-ui/packages/vuu-theme/NunitoSans.css b/...i/packages/vuu-theme/fonts/NunitoSans.css → vuu-ui/packages/vuu-theme/NunitoSans.css
@@ -5,7 +5,7 @@
   font-weight: 300;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -16,7 +16,7 @@
   font-weight: 400;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -27,7 +27,7 @@
   font-weight: 500;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -38,7 +38,7 @@
   font-weight: 600;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -49,7 +49,7 @@
   font-weight: 700;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -60,12 +60,12 @@
   font-weight: 800;
   font-stretch: 100%;
   font-display: swap;
-  src: url(./NunitoSansv15Latin.woff2) format('woff2');
+  src: url(./fonts/NunitoSansv15Latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* This font contains the variation of the 'a' character, which can be applied with `font-feature-settings` as per Figma */
 @font-face {
   font-family: 'Nunito Sans A-Variant';
-  src: url('./NunitoSans-Regular.woff') format('opentype');
+  src: url('./fonts/NunitoSans-Regular.woff') format('opentype');
 }
diff --git a/...packages/vuu-theme/fonts/SomeTypeMono.css → vuu-ui/packages/vuu-theme/SomeTypeMono.css b/...packages/vuu-theme/fonts/SomeTypeMono.css → vuu-ui/packages/vuu-theme/SomeTypeMono.css
@@ -3,6 +3,6 @@
     font-style: normal;
     font-weight: 500;
     font-display: swap;
-    src: url(./SomeTypeMonov1-500.woff2) format('woff2');
+    src: url(./fonts/SomeTypeMonov1-500.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
diff --git a/vuu-ui/packages/vuu-theme/fonts/NunitoSansv15.woff2 b/vuu-ui/packages/vuu-theme/fonts/NunitoSansv15.woff2
diff --git a/vuu-ui/packages/vuu-theme/index.css b/vuu-ui/packages/vuu-theme/index.css
@@ -1,5 +1,5 @@
-@import url(fonts/NunitoSans.css);
-@import url(fonts/SomeTypeMono.css);
+@import url(NunitoSans.css);
+@import url(SomeTypeMono.css);
 @import url(css/global.css);
 @import url(css/theme.css);
 @import url(css/components/components.css);
diff --git a/vuu-ui/packages/vuu-theme/package.json b/vuu-ui/packages/vuu-theme/package.json
@@ -3,6 +3,9 @@
   "version": "0.0.26",
   "license": "Apache-2.0",
   "style": "index.css",
+  "files": [
+    "fonts"
+  ],
   "scripts": {
     "build": "node ../../scripts/run-build.mjs"
   }

diff --git a/vuu-ui/scripts/build.mjs b/vuu-ui/scripts/build.mjs
@@ -20,7 +20,8 @@ const defaultConfig = {
 };
 
 const workerTS = "src/worker.ts";
-const indexTS = "src/index.ts";
+const indexTS = "index.ts";
+const indexSrcTS = "src/index.ts";
 const indexDTS = "index.d.ts";
 const indexJS = "src/index.js";
 const indexCSS = "index.css";
@@ -75,16 +76,36 @@ export default async function main(customConfig) {
   const jsonOutput = getCommandLineArg("--json");
   const outdir = `${DIST_PATH}/${packageName}${debug ? "-debug" : ""}`;
 
+  const FONT_FILES = ["*.woff", "*.woff2"];
+
   const hasWorker = fs.existsSync(workerTS);
   const hasReadme = fs.existsSync(README);
+  const isTypeScriptSrc = fs.existsSync(indexSrcTS);
   const isTypeScript = fs.existsSync(indexTS);
   const isTypeLib = fs.existsSync(indexDTS);
   const isJavaScript = fs.existsSync(indexJS);
+  const hasRootCss = fs.existsSync(indexCSS);
+
+  const getEntryPoints = () => {
+    const entryPoint = isTypeScriptSrc
+      ? indexSrcTS
+      : isTypeScript
+      ? indexTS
+      : isJavaScript
+      ? indexJS
+      : indexCSS;
+    const entryPoints = [entryPoint];
+    // We may have a top-level css as well as typescript (icons)
+    if (hasRootCss && !entryPoint.endsWith(".css")) {
+      entryPoints.push(indexCSS);
+    }
+    return entryPoints;
+  };
 
   const buildConfig = {
-    entryPoints: [isTypeScript ? indexTS : isJavaScript ? indexJS : indexCSS],
+    entryPoints: getEntryPoints(),
     env: development ? "development" : "production",
-    external: external.concat(externalVuu),
+    external: external.concat(externalVuu).concat(FONT_FILES),
     outdir: `${outdir}/esm`,
     name: scopedPackageName,
     target,
@@ -95,23 +116,31 @@ export default async function main(customConfig) {
     fs.mkdirSync(outdir, { recursive: true });
   }
 
-  const GeneratedFiles = /^(worker|index)\.(js|css)(\.map)|(esm)?$/;
+  const GeneratedFiles = /^((worker|index)\.(js|css))|((\.map)|(esm))$/;
 
   async function writePackageJSON(options) {
     return new Promise((resolve, reject) => {
       const {
-        files = getDefaultFilesToPublish(options),
+        files: filesFromPackageJson,
         // eslint-disable-next-line no-unused-vars
         main,
         // eslint-disable-next-line no-unused-vars
         scripts,
+        style: styleFromPackageJson,
         types,
         ...packageRest
       } = packageJson;
-      if (files) {
+
+      let files = getDefaultFilesToPublish(options);
+      let defaultStyle = undefined;
+
+      if (filesFromPackageJson) {
         const filesToPublish = isTypeLib
           ? [indexDTS]
-          : files.filter((fileName) => !GeneratedFiles.test(fileName));
+          : filesFromPackageJson.filter(
+              (fileName) => !GeneratedFiles.test(fileName)
+            );
+        files = filesToPublish.concat(files);
         if (filesToPublish.length) {
           filesToPublish.forEach((fileName) => {
             const filePath = fileName.replace(/^\//, "./");
@@ -128,11 +157,21 @@ export default async function main(customConfig) {
           });
         }
       }
-      const newPackage = { ...packageRest, files };
+
+      const cssFile = files.find((f) => f.endsWith(".css"));
+      if (cssFile) {
+        defaultStyle = cssFile;
+      }
+
+      const newPackage = {
+        ...packageRest,
+        files,
+        style: styleFromPackageJson ?? defaultStyle,
+      };
 
       if (isTypeLib) {
         newPackage.types = types;
-      } else {
+      } else if (options.includeJS) {
         newPackage.module = "esm/index.js";
         if (cjs) {
           newPackage.main = "cjs/index.js";
@@ -255,7 +294,6 @@ export default async function main(customConfig) {
 
   if (jsOut || cssOut) {
     await writeMetaFile(esmOutput.result.metafile, outdir);
-
     if (cssOut) {
       relocateCSSToPackageRoot();
       if (jsonResult) {

diff --git a/vuu-ui/scripts/esbuild.mjs b/vuu-ui/scripts/esbuild.mjs
@@ -18,6 +18,7 @@ export async function build(config) {
     target = ["es2020", "chrome79"],
     write = true,
   } = config;
+
   return esbuild({
     entryPoints,
     banner,

diff --git a/vuu-ui/tsconfig.json b/vuu-ui/tsconfig.json
@@ -29,7 +29,7 @@
     "global.d.ts",
     "packages/vuu-data-test/src/UpdateGenerator.ts",
     "sample-apps/standalone-table/index.tsx"
-  ],
+, "packages/vuu-icons/index.ts"  ],
   "exclude": ["**/*.cy.*", "**/*.test.*"],
   "references": [
     { "path": "packages/vuu-codemirror" },