diff --git a/client/css/fontawesome.css b/client/css/fontawesome.css new file mode 100644 index 00000000..efd11aa1 --- /dev/null +++ b/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"); +} diff --git a/client/css/style.css b/client/css/style.css index 003bfe34..0c6f9947 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,12 +1,6 @@ -@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"); -} +@import "fontawesome.css"; +@import "bootstrap.css"; +@import "../../node_modules/primer-tooltips/build/build.css"; html, body { diff --git a/client/index.html.tpl b/client/index.html.tpl index 40593442..a07584ca 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -7,8 +7,6 @@ - - <% _.forEach(stylesheets, function(css) { %> diff --git a/package.json b/package.json index 71f26d63..c6f60ac7 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index 74d8d532..0771f8de 100644 --- a/webpack.config.js +++ b/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")), diff --git a/yarn.lock b/yarn.lock index 54bc330a..49e86e21 100644 --- a/yarn.lock +++ b/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"