fix: do not import css or react JS unless needed (#773)

SgtPooki · web-flow · commit 78d4d4507d88 · 2025-06-23T15:41:18.000-04:00
* feat: do not import css unless needed

* chore: fix lint and tests

* feat: dont download JS for UI unless needed

* chore: lint and build working

* chore: remove old test code

* chore: undo unnecessary tsconfig.json changes
diff --git a/build.js b/build.js
@@ -74,7 +74,7 @@ const injectHtmlPages = async (metafile, revision) => {
       jsFile = jsFile[0]
     }
 
-    let cssFile = Object.keys(metafile.outputs).filter(file => file.endsWith('.css') && (file.includes(baseName) || file.includes('index')))
+    let cssFile = Object.keys(metafile.outputs).filter(file => file.endsWith('.css') && (file.includes(baseName) || file.includes('app')))
     if (cssFile.length > 1) {
       // override injection of index.css to the basename file
       cssFile = cssFile.find(file => file.includes(baseName))
@@ -96,8 +96,13 @@ const injectHtmlPages = async (metafile, revision) => {
       }
     }
 
+    // only inject CSS for non-index.html files, or if explicitly requested
     if (htmlContent.includes('<%= CSS_STYLES %>')) {
-      if (cssFile != null) {
+      if (baseName === 'index') {
+        // for index.html, don't inject CSS - it will be injected dynamically by JavaScript
+        htmlContent = htmlContent.replace(/<%= CSS_STYLES %>/g, '')
+        console.log(`Removed CSS injection from ${path.relative(process.cwd(), htmlFilePath)} - will be injected dynamically.`)
+      } else if (cssFile != null) {
         const cssTag = `<link rel="stylesheet" href="/${path.basename(cssFile)}">`
         htmlContent = htmlContent.replace(/<%= CSS_STYLES %>/g, cssTag)
         console.log(`Injected ${path.basename(cssFile)} into ${path.relative(process.cwd(), htmlFilePath)}.`)
@@ -184,16 +189,34 @@ const modifyBuiltFiles = {
   name: 'modify-built-files',
   setup (build) {
     build.onEnd(async (result) => {
+      const metafile = result.metafile
+
       // Cache the Git revision once
       const revision = gitRevision()
 
       // Run copyPublicFiles first to make sure public assets are in place
       await copyPublicFiles()
 
-      await injectHtmlPages(result.metafile, revision)
+      await injectHtmlPages(metafile, revision)
 
       // Modify the redirects file last
       await modifyRedirects()
+
+      // create a CSS config file we will use to get the proper CSS filename
+      const indexCssFile = Object.keys(metafile.outputs).find(file => file.endsWith('.css') && file.includes('app'))
+      if (indexCssFile) {
+        const cssConfigContent = `export const CSS_FILENAME = '${path.basename(indexCssFile)}'`
+        await fs.writeFile(path.resolve('dist/ipfs-sw-css-config.js'), cssConfigContent)
+        console.log(`Created dist/ipfs-sw-css-config.js with CSS filename: ${path.basename(indexCssFile)}`)
+      }
+
+      // create an app chunk config file we will use to get the proper app chunk filename for importing all the UI dynamically
+      const appChunkFile = Object.keys(metafile.outputs).find(file => file.endsWith('.js') && file.includes('app'))
+      if (appChunkFile) {
+        const appConfigContent = `export const APP_FILENAME = '${path.basename(appChunkFile)}'`
+        await fs.writeFile(path.resolve('dist/ipfs-sw-app-config.js'), appConfigContent)
+        console.log(`Created dist/ipfs-sw-app-config.js with app chunk filename: ${path.basename(appChunkFile)}`)
+      }
     })
   }
 }
@@ -219,7 +242,7 @@ const excludeFilesPlugin = (extensions) => ({
  * @type {esbuild.BuildOptions}
  */
 export const buildOptions = {
-  entryPoints: ['src/index.tsx', 'src/sw.ts', 'src/ipfs-sw-*.ts', 'src/ipfs-sw-*.css'],
+  entryPoints: ['src/index.tsx', 'src/sw.ts', 'src/app.tsx', 'src/ipfs-sw-*.ts', 'src/ipfs-sw-*.css'],
   bundle: true,
   outdir: 'dist',
   loader: {
diff --git a/src/lib/css-injector.ts b/src/lib/css-injector.ts
@@ -0,0 +1,19 @@
+/**
+ * Dynamically injects a CSS file into the document head
+ *
+ * @param cssFilename - The filename of the CSS file to inject
+ */
+export function injectCSS (cssFilename: string): void {
+  // Check if CSS is already injected to avoid duplicates
+  const existingLink = document.querySelector(`link[href="/${cssFilename}"]`)
+  if (existingLink) {
+    return
+  }
+
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = `/${cssFilename}`
+  link.type = 'text/css'
+
+  document.head.appendChild(link)
+}
diff --git a/test/node.ts b/test/node.ts
@@ -46,12 +46,11 @@ describe(`verify-dist at ${distRoot}`, () => {
     {
       filePath: 'index.html',
       content: [
-        /ipfs-sw-index-.*\.css/,
         'id="root"'
       ]
     },
     {
-      globPath: 'ipfs-sw-index-*.css',
+      globPath: 'ipfs-sw-app-*.css',
       content: ['47vh']
     }
   ]

Original file line number	Diff line number	Diff line change
@@ -46,12 +46,11 @@ describe(`verify-dist at ${distRoot}`, () => {
`46`	`46`	`{`
`47`	`47`	`filePath: 'index.html',`
`48`	`48`	`content: [`
`49`		`- /ipfs-sw-index-.*\.css/,`
`50`	`49`	`'id="root"'`
`51`	`50`	`]`
`52`	`51`	`},`
`53`	`52`	`{`
`54`		`- globPath: 'ipfs-sw-index-*.css',`
	`53`	`+ globPath: 'ipfs-sw-app-*.css',`
`55`	`54`	`content: ['47vh']`
`56`	`55`	`}`
`57`	`56`	`]`