Add css-loader

client/css/fontawesome.css

@@ -0,0 +1,9 @@
+@font-face {
+	/* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */
+	font-family: "FontAwesome";
+	font-weight: normal;
+	font-style: normal;
+	src:
+		url("../fonts/fa-solid-900.woff2") format("woff2"),
+		url("../fonts/fa-solid-900.woff") format("woff");
+}

client/css/style.css

@@ -1,12 +1,6 @@
-@font-face {
+@import "fontawesome.css";
-	/* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */
+@import "bootstrap.css";
-	font-family: "FontAwesome";
+@import "../../node_modules/primer-tooltips/build/build.css";
-	font-weight: normal;
-	font-style: normal;
-	src:
-		url("../fonts/fa-solid-900.woff2") format("woff2"),
-		url("../fonts/fa-solid-900.woff") format("woff");
-}
 
 html,
 body {

client/index.html.tpl

@@ -7,8 +7,6 @@
 
 	<link rel="preload" as="script" href="js/bundle.vendor.js">
 	<link rel="preload" as="script" href="js/bundle.js">
-	<link rel="stylesheet" href="css/bootstrap.css">
-	<link rel="stylesheet" href="css/primer-tooltips.css">
 	<link rel="stylesheet" href="css/style.css">
 	<link id="theme" rel="stylesheet" href="themes/<%- theme %>.css" data-server-theme="<%- theme %>">
 	<% _.forEach(stylesheets, function(css) { %>

package.json

@@ -71,6 +71,7 @@
     "babel-preset-env": "1.6.1",
     "chai": "4.1.2",
     "copy-webpack-plugin": "4.5.1",
+    "css-loader": "0.28.11",
     "css.escape": "1.5.1",
     "emoji-regex": "6.5.1",
     "eslint": "4.19.1",
@@ -82,6 +83,7 @@
     "istanbul-instrumenter-loader": "3.0.1",
     "jquery": "3.3.1",
     "jquery-ui": "1.12.1",
+    "mini-css-extract-plugin": "0.4.0",
     "mocha": "5.0.5",
     "mocha-loader": "1.1.3",
     "mocha-webpack": "2.0.0-beta.0",

webpack.config.js

@@ -3,11 +3,13 @@
 const webpack = require("webpack");
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
 	mode: process.env.NODE_ENV === "production" ? "production" : "development",
 	entry: {
 		"js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"),
+		"css/style": path.resolve(__dirname, "client/css/style.css"),
 	},
 	devtool: "source-map",
 	output: {
@@ -17,6 +19,22 @@ const config = {
 	},
 	module: {
 		rules: [
+			{
+				test: /\.css$/,
+				include: [
+					path.resolve(__dirname, "client"),
+				],
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: "css-loader",
+						options: {
+							url: false,
+							minimize: process.env.NODE_ENV === "production",
+						},
+					},
+				],
+			},
 			{
 				test: /\.js$/,
 				include: [
@@ -69,6 +87,7 @@ const config = {
 		json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
 	},
 	plugins: [
+		new MiniCssExtractPlugin(),
 		new CopyPlugin([
 			{
 				from: "./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff*",
@@ -95,14 +114,6 @@ const config = {
 				from: "./client/themes/*",
 				to: "themes/[name].[ext]",
 			},
-			{ // TODO: Build css with postcss
-				from: "./client/css/*",
-				to: "css/[name].[ext]",
-			},
-			{
-				from: "./node_modules/primer-tooltips/build/build.css",
-				to: "css/primer-tooltips.[ext]",
-			},
 		]),
 		// socket.io uses debug, we don't need it
 		new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),

yarn.lock

@@ -2095,7 +2095,7 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.28.7:
+css-loader@0.28.11, css-loader@^0.28.7:
   version "0.28.11"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
   dependencies:
@@ -5030,6 +5030,13 @@ mimic-response@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
 
+mini-css-extract-plugin@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"