fix: css styles applied & config page collapse (#112)

* tmp

* fix: css styles are included now

* chore: temporary test of assets while I finagle webpack config

* chore: chunk css styles

* chore: reduce changes to minimal necessary

* fix: config initially collapsed in iframe only

* chore: pr comment - update webpack.config.js

package.json

@@ -55,6 +55,7 @@
     "css-loader": "^6.10.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.8.1",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.5.1",
     "rimraf": "^4.4.1",
@@ -66,5 +67,7 @@
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.8.0"
   },
-  "sideEffects": false
+  "sideEffects": [
+    "*.css"
+  ]
 }

src/components/config.tsx

@@ -84,9 +84,11 @@ export default (): JSX.Element | null => {
     return null
   }
 
+  const isInIframe = window.self !== window.top
+
   return (
     <main className='pa4-l bg-snow mw7 center pa4'>
-      <Collapsible collapsedLabel="View config" expandedLabel='Hide config' collapsed={true}>
+      <Collapsible collapsedLabel="View config" expandedLabel='Hide config' collapsed={isInIframe}>
         <LocalStorageInput localStorageKey={LOCAL_STORAGE_KEYS.config.gateways} label='Gateways' validationFn={urlValidationFn} defaultValue='[]' />
         <LocalStorageInput localStorageKey={LOCAL_STORAGE_KEYS.config.routers} label='Routers' validationFn={urlValidationFn} defaultValue='[]'/>
         <LocalStorageToggle localStorageKey={LOCAL_STORAGE_KEYS.config.autoReload} onLabel='Auto Reload' offLabel='Show Config' />

test/node.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
 import { constants } from 'node:fs'
-import { access } from 'node:fs/promises'
+import { access, readFile } from 'node:fs/promises'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { expect } from 'aegir/chai'
@@ -14,4 +14,11 @@ describe('verify-dist', async () => {
    */
     await expect(access(resolve(cwd, '../dist/ipfs-sw-sw.js'), constants.F_OK)).to.not.be.rejected()
   })
+
+  it('has css file with expected content', async () => {
+    await expect(access(resolve(cwd, '../dist/ipfs-sw-styles.css'), constants.F_OK)).to.not.be.rejected()
+    const contents = await readFile(resolve(cwd, '../dist/ipfs-sw-styles.css'), 'utf8')
+    expect(contents).to.include('47vh')
+    expect(contents).to.include('.local-storage-toggle input.status')
+  })
 })

webpack.config.js

@@ -3,6 +3,7 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import TerserPlugin from 'terser-webpack-plugin'
 import webpack from 'webpack'
 import BundleAnalyzerPlugin from 'webpack-bundle-analyzer'
@@ -21,6 +22,13 @@ const splitChunks = {
       priority: -10,
       chunks: 'all'
     },
+    styles: {
+      minChunks: 1,
+      name: 'styles',
+      type: 'css/mini-extract',
+      chunks: 'initial',
+      enforce: true
+    },
     sw: {
       test: /[\\/]src[\\/]sw.ts/,
       name: 'sw',
@@ -203,6 +211,11 @@ const common = {
 
     new webpack.DefinePlugin({
       window: 'globalThis' // attempt to naively replace all "window" keywords with "globalThis"
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: 'ipfs-sw-[name].css',
+      chunkFilename: 'ipfs-sw-[id].css'
     })
   ],
 
@@ -237,8 +250,13 @@ const common = {
 
       // Fonts and SVGs: Inline files
       { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
-
-      { test: /\.(css)$/, use: ['style-loader', 'css-loader'] }
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      }
     ]
   },