CHANGELOG.md

@@ -17,6 +17,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   * Changed the File page to make it clearer how to to open the folder for a file.
   * Improved tabs styles with a nice animation. [#547](https://github.com/lbryio/lbry-app/pull/576)
   * Display search bar on discover page instead of title and remove duplicated icon.
+  * Updated webpack build and dependencies to support css modules.
   * Minor update for themes.
   *
 
@@ -36,7 +37,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Removed
-  * 
+  *
   *
 
 ## [0.16.0] - 2017-09-21

ui/dist/index.html

@@ -6,6 +6,7 @@
 
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+        <link href="./css/bundle.css" rel="stylesheet" type="text/css" media="screen,print" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/package.json

@@ -63,6 +63,7 @@
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.7.1",
+    "extract-text-webpack-plugin": "^3.0.0",
     "husky": "^0.13.4",
     "i18n-extract": "^0.4.4",
     "json-loader": "^0.5.4",
@@ -70,8 +71,8 @@
     "node-loader": "^0.6.0",
     "prettier": "^1.4.2",
     "style-loader": "^0.18.2",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1",
     "webpack-notifier": "^1.5.0",
     "webpack-target-electron-renderer": "^0.4.0"
   },

ui/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const webpack = require("webpack")
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const appPath = path.resolve(__dirname, "js");
 
 process.traceDeprecation = true;
@@ -25,6 +26,7 @@ module.exports = {
     new webpack.DefinePlugin({
       ENV: JSON.stringify("production"),
     }),
+   new ExtractTextPlugin(path.join("../css/bundle.css"), { allChunks: true }),
   ],
   module: {
     rules: [
@@ -41,7 +43,30 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        exclude: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: {
+            loader: "css-loader",
+            query: {
+              modules: true,
+              localIdentName: "[local]"
+            }
+          }
+        })
+      },
+      {
+        test: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: {
+            loader: "css-loader",
+            query: {
+              modules: true,
+              localIdentName: "[name]__[local]___[hash:base64:5]"
+            }
+          }
+        })
       },
       {
         test: /\.jsx?$/,

ui/webpack.dev.config.js

@@ -47,7 +47,28 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        exclude: /\.module\.css$/,
+        use: [
+          { loader: "style-loader" },
+          {
+            loader: "css-loader",
+            query: {
+              modules: true,
+              localIdentName: "[local]"
+            }
+          }]
+      },
+      {
+        test: /\.module\.css$/,
+        use: [
+          { loader: "style-loader" },
+          {
+            loader: "css-loader",
+            query: {
+              modules: true,
+              localIdentName: "[name]__[local]___[hash:base64:5]"
+            }
+          }]
       },
       {
         test: /\.jsx?$/,