fix: minimize the amount of CSS assets (#882)

12M → 2M 😬
ipfs · May 19, 2020 · 1e6f42e · 1e6f42e
1 parent 81bb860
commit 1e6f42e
Show file tree

Hide file tree

Showing 23 changed files with 251 additions and 28 deletions.
diff --git a/add-on/src/landing-pages/welcome/index.html b/add-on/src/landing-pages/welcome/index.html
@@ -4,8 +4,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width" />
-  <link rel="stylesheet" href="welcome.css">
-  <link rel="stylesheet" href="../../popup/heartbeat.css">
+  <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+  <link rel="stylesheet" href="/dist/bundles/welcomePage.css">
 </head>
 
 <body class="navy bg-white sans-serif">

diff --git a/add-on/src/landing-pages/welcome/index.js b/add-on/src/landing-pages/welcome/index.js
@@ -1,6 +1,8 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+require('./welcome.css')
+
 const browser = require('webextension-polyfill')
 const choo = require('choo')
 const createWelcomePageStore = require('./store')

diff --git a/add-on/src/landing-pages/welcome/welcome.css b/add-on/src/landing-pages/welcome/welcome.css
@@ -1,5 +1,6 @@
-@import url('../../../ui-kit/tachyons.css');
-@import url('../../../ui-kit/ipfs.css');
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
+@import url('../../popup/heartbeat.css');
 
 #left-col {
   background-image: url('../../../images/stars.png'), linear-gradient(to bottom, #041727 0%, #043b55 100%);

diff --git a/add-on/src/options/options.css b/add-on/src/options/options.css
@@ -1,5 +1,5 @@
-@import url('/ui-kit/tachyons.css');
-@import url('/ui-kit/ipfs.css');
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
 @import url('../pages/components/switch-toggle.css');
 
 header {

diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
@@ -4,7 +4,8 @@
     <title>IPFS Companion Preferences</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="options.css">
+    <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+    <link rel="stylesheet" href="/dist/bundles/optionsPage.css">
   </head>
   <body>
     <header class="flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l justify-between">

diff --git a/add-on/src/options/options.js b/add-on/src/options/options.js
@@ -1,6 +1,8 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+require('./options.css')
+
 const { i18n } = require('webextension-polyfill')
 const choo = require('choo')
 const optionsPage = require('./page')

diff --git a/add-on/src/pages/components/switch-toggle.css b/add-on/src/pages/components/switch-toggle.css
@@ -1,4 +1,4 @@
-@import url('/ui-kit/mdc.switch.min.css');
+@import url('~@material/switch/dist/mdc.switch.css');
 
 .mdc-switch {
   --mdc-theme-secondary: #3e9096 /* teal */

diff --git a/add-on/src/pages/proxy-access-dialog/index.html b/add-on/src/pages/proxy-access-dialog/index.html
@@ -5,7 +5,8 @@
   <title>IPFS Companion</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width" />
-  <link rel="stylesheet" href="proxy-access-dialog.css">
+  <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+  <link rel="stylesheet" href="/dist/bundles/proxyAclDialog.css">
 </head>
 
 <body class="bg-snow-muted h-100">

diff --git a/add-on/src/pages/proxy-access-dialog/index.js b/add-on/src/pages/proxy-access-dialog/index.js
@@ -1,5 +1,7 @@
 'use strict'
 
+require('./proxy-access-dialog.css')
+
 const browser = require('webextension-polyfill')
 const choo = require('choo')
 const createProxyAccessDialogStore = require('./store')

diff --git a/add-on/src/pages/proxy-access-dialog/proxy-access-dialog.css b/add-on/src/pages/proxy-access-dialog/proxy-access-dialog.css
@@ -1,5 +1,5 @@
-@import url('../../../ui-kit/tachyons.css');
-@import url('../../../ui-kit/ipfs.css');
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
 
 .hover-bg-aqua-muted:hover {
   background-color: #9ad4db;

diff --git a/add-on/src/pages/proxy-acl/index.html b/add-on/src/pages/proxy-acl/index.html
@@ -5,7 +5,8 @@
   <title>Manage Permissions</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width" />
-  <link rel="stylesheet" href="proxy-acl.css">
+  <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+  <link rel="stylesheet" href="/dist/bundles/proxyAclManagerPage.css">
 </head>
 
 <body>

diff --git a/add-on/src/pages/proxy-acl/index.js b/add-on/src/pages/proxy-acl/index.js
@@ -1,5 +1,7 @@
 'use strict'
 
+require('./proxy-acl.css')
+
 const browser = require('webextension-polyfill')
 const choo = require('choo')
 const AccessControl = require('../../lib/ipfs-proxy/access-control')

diff --git a/add-on/src/pages/proxy-acl/proxy-acl.css b/add-on/src/pages/proxy-acl/proxy-acl.css
@@ -1,4 +1,4 @@
-@import url('../../../ui-kit/tachyons.css');
+@import url('~tachyons/css/tachyons.css');
 @import url('../../popup/heartbeat.css');
 
 html, body {

diff --git a/add-on/src/popup/browser-action/browser-action.css b/add-on/src/popup/browser-action/browser-action.css
@@ -1,5 +1,5 @@
-@import url('/ui-kit/tachyons.css');
-@import url('/ui-kit/ipfs.css');
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
 @import url('../heartbeat.css');
 @import url('../../pages/components/switch-toggle.css');
 

diff --git a/add-on/src/popup/browser-action/index.html b/add-on/src/popup/browser-action/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="browser-action.css">
+    <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+    <link rel="stylesheet" href="/dist/bundles/browserAction.css">
   </head>
   <body style="width: 320px; overflow: hidden; background: white;">
     <div id="root"></div>

diff --git a/add-on/src/popup/browser-action/index.js b/add-on/src/popup/browser-action/index.js
@@ -1,6 +1,8 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+require('./browser-action.css')
+
 const choo = require('choo')
 const browserActionPage = require('./page')
 const browserActionStore = require('./store')

diff --git a/add-on/src/popup/page-action/index.html b/add-on/src/popup/page-action/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="../browser-action/browser-action.css">
+    <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+    <link rel="stylesheet" href="/dist/bundles/browserAction.css">
   </head>
   <body style="width: 330px; overflow: hidden; background: white;">
     <div id="root"></div>

diff --git a/add-on/src/popup/quick-import.css b/add-on/src/popup/quick-import.css
@@ -1,5 +1,5 @@
-@import url('../../ui-kit/tachyons.css');
-@import url('../../ui-kit/ipfs.css');
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
 @import url('heartbeat.css');
 
 html, body, #root {

diff --git a/add-on/src/popup/quick-import.html b/add-on/src/popup/quick-import.html
@@ -4,7 +4,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
-  <link rel="stylesheet" href="quick-import.css">
+    <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+    <link rel="stylesheet" href="/dist/bundles/importPage.css">
 </head>
 
 <body>

diff --git a/add-on/src/popup/quick-import.js b/add-on/src/popup/quick-import.js
@@ -1,6 +1,8 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+require('./quick-import.css')
+
 const browser = require('webextension-polyfill')
 const choo = require('choo')
 const html = require('choo/html')

diff --git a/package.json b/package.json
@@ -17,12 +17,6 @@
     "build": "run-s clean build:*",
     "build:copy": "run-s build:copy:*",
     "build:copy:src": "shx mkdir -p add-on/dist && shx cp -R add-on/src/* add-on/dist",
-    "build:copy:ui-kit": "run-s build:copy:ui-kit:*",
-    "build:copy:ui-kit:ipfs-css": "run-s build:copy:ui-kit:ipfs-css:*",
-    "build:copy:ui-kit:ipfs-css:css": "shx mkdir -p add-on/ui-kit && shx cp node_modules/ipfs-css/ipfs.css node_modules/@material/switch/dist/mdc.switch.min.css add-on/ui-kit",
-    "build:copy:ui-kit:ipfs-css:fonts": "shx mkdir -p add-on/ui-kit/fonts && shx cp node_modules/ipfs-css/fonts/* add-on/ui-kit/fonts",
-    "build:copy:ui-kit:ipfs-css:icons": "shx mkdir -p add-on/ui-kit/icons && shx cp node_modules/ipfs-css/icons/* add-on/ui-kit/icons",
-    "build:copy:ui-kit:tachyons": "shx mkdir -p add-on/ui-kit && shx cp node_modules/tachyons/css/tachyons.css add-on/ui-kit",
     "build:js": "run-s build:js:*",
     "build:js:webpack": "webpack -p",
     "build:minimize-dist": "shx rm -rf add-on/dist/lib add-on/dist/contentScripts/ add-on/dist/bundles/ipfsProxyContentScriptPayload.bundle.js",
@@ -89,16 +83,20 @@
     "babel-plugin-syntax-async-generators": "6.13.0",
     "chai": "4.2.0",
     "cross-env": "6.0.3",
+    "css-loader": "3.5.3",
     "download-cli": "1.1.1",
     "fakefile": "0.0.9",
+    "file-loader": "6.0.0",
     "firefox-addons-add-update-version": "1.0.1",
     "fs-promise": "2.0.3",
     "get-firefox": "3.0.0",
     "husky": "3.1.0",
+    "ignore-loader": "0.1.2",
     "ignore-styles": "5.0.1",
     "ipfs-or-gateway": "2.1.0",
     "json": "9.0.6",
     "mem-storage-area": "1.0.3",
+    "mini-css-extract-plugin": "0.9.0",
     "mocha": "6.2.2",
     "npm-run-all": "4.1.5",
     "nyc": "14.1.1",
@@ -109,6 +107,7 @@
     "sinon": "7.5.0",
     "sinon-chrome": "3.0.1",
     "standard": "14.3.1",
+    "style-loader": "1.2.1",
     "tar": "5.0.5",
     "terser": "4.6.7",
     "terser-webpack-plugin": "2.3.5",

diff --git a/webpack.config.js b/webpack.config.js
@@ -3,6 +3,7 @@ const webpack = require('webpack')
 const merge = require('webpack-merge')
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -33,6 +34,9 @@ const commonConfig = {
   },
   // plugins: [new BundleAnalyzerPlugin()]
   plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
     new SimpleProgressWebpackPlugin({
       format: process.env.CI ? 'expanded' : 'minimal'
     }),
@@ -47,6 +51,30 @@ const commonConfig = {
   ],
   module: {
     rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: process.env.NODE_ENV === 'development'
+            }
+          },
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|otf|ttf|woff|woff2)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      },
+      {
+        // Ignore legacy fonts (both Firefox and Chromium talk WOFF2)
+        test: /\.(otf|eot|ttf|woff)(\?.*$|$)/,
+        use: ['raw-loader', 'ignore-loader']
+      },
       {
         exclude: /node_modules/,
         test: /\.js$/,