Use webpack to generate css/converse.css

Makefile

@@ -144,8 +144,8 @@ dev: stamp-npm
 .PHONY: css
 css: dev sass/*.scss css/converse.css css/converse.min.css css/website.css css/website.min.css css/font-awesome.css
 
-css/converse.css:: dev sass
-	$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/converse.scss css/converse.css
+css/converse.css:: dev webpack.config.js sass
+	$(NPX)  webpack --type=css
 
 css/website.css:: dev sass
 	$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
@@ -157,10 +157,6 @@ css/%.min.css:: css/%.css
 	make dev
 	$(CLEANCSS) $< > $@
 
-.PHONY: watchcss
-watchcss: dev
-	$(SASS) --watch --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) -o ./css/ ./sass/
-
 .PHONY: watchjs
 watchjs: dev src/headless/dist/converse-headless.js
 	$(NPX)  webpack --mode=development  --watch

package.json

@@ -47,12 +47,14 @@
     "bourbon": "^4.3.2",
     "bytebuffer": "^3.5.5",
     "clean-css-cli": "^4.0.10",
+    "css-loader": "^1.0.1",
     "es6-promise": "^4.1.0",
     "eslint": "4.19.1",
     "eslint-plugin-lodash": "^2.3.3",
     "exports-loader": "^0.7.0",
     "fast-text-encoding": "^1.0.0",
     "filesize": "^3.6.1",
+    "file-loader": "^3.0.1",
     "formdata-polyfill": "^3.0.12",
     "hellojs": "^1.16.1",
     "http-server": "^0.10.0",
@@ -65,6 +67,7 @@
     "lodash-template-loader": "^2.0.0",
     "lodash-template-webpack-loader": "jcbrand/lodash-template-webpack-loader",
     "long": "^3.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "minimist": "^1.2.0",
     "moment": "~> 2.19.3 ",
     "node-sass": "^4.9.4",
@@ -73,10 +76,12 @@
     "po2json": "^0.4.4",
     "requirejs": "2.3.5",
     "run-headless-chromium": "^0.1.1",
+    "sass-loader": "^7.1.0",
     "sinon": "^2.1.0",
     "sizzle": "^2.3.3",
     "snabbdom": "0.7.2",
     "strophejs-plugin-register": "0.0.1",
+    "style-loader": "^0.23.1",
     "uglify-es": "^3.0.24",
     "urijs": "^1.19.1",
     "wait-until-promise": "^1.0.0",

sass/converse.scss

@@ -5,7 +5,6 @@
  * Copyright (c) 2013-2018, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
-@import "font-awesome";
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
@@ -38,7 +37,17 @@
     @import "bootstrap/scss/utilities";
 }
 
-@import "bourbon";
+@import "bourbon/app/assets/stylesheets/settings/prefixer";
+@import "bourbon/app/assets/stylesheets/settings/deprecation-warnings";
+@import "bourbon/app/assets/stylesheets/bourbon-deprecate";
+@import "bourbon/app/assets/stylesheets/bourbon-deprecated-upcoming";
+@import "bourbon/app/assets/stylesheets/css3/transform";
+@import "bourbon/app/assets/stylesheets/css3/animation";
+@import "bourbon/app/assets/stylesheets/css3/keyframes";
+@import "bourbon/app/assets/stylesheets/css3/user-select";
+@import "bourbon/app/assets/stylesheets/addons/prefixer";
+
+@import "font-awesome";
 @import "variables";
 
 @import "core";

sass/font-awesome.scss

@@ -2,38 +2,38 @@
   font-family: 'Baumans';
   font-style: normal;
   font-weight: 400;
-  src: local('Baumans Regular'), local('Baumans-Regular'), url(webfonts/baumans.ttf) format('truetype');
+  src: local('Baumans Regular'), local('Baumans-Regular'), url('../css/webfonts/baumans.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Muli';
   font-style: normal;
   font-weight: 400;
-  src: local('Muli Regular'), local('Muli-Regular'), url(webfonts/muli.ttf) format('truetype');
+  src: local('Muli Regular'), local('Muli-Regular'), url('../css/webfonts/muli.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'ConverseFontAwesomeBrands';
   font-style: normal;
   font-weight: normal;
-  src: url('webfonts/fa-brands-400.eot');
-  src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('webfonts/fa-brands-400.woff2') format('woff2'),
-  url('webfonts/fa-brands-400.woff') format('woff'),
-  url('webfonts/fa-brands-400.ttf') format('truetype'),
-  url('webfonts/fa-brands-400.svg#fontawesome') format('svg');
+  src: url('../css/webfonts/fa-brands-400.eot');
+  src: url('../css/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
+  url('../css/webfonts/fa-brands-400.woff2') format('woff2'),
+  url('../css/webfonts/fa-brands-400.woff') format('woff'),
+  url('../css/webfonts/fa-brands-400.ttf') format('truetype'),
+  url('../css/webfonts/fa-brands-400.svg#fontawesome') format('svg');
 }
 
 @font-face {
   font-family: 'ConverseFontAwesomeRegular';
   font-style: normal;
   font-weight: 400;
-  src: url('webfonts/fa-regular-400.eot');
-  src: url('webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-    url('webfonts/fa-regular-400.woff2') format('woff2'),
-    url('webfonts/fa-regular-400.woff') format('woff'),
-    url('webfonts/fa-regular-400.ttf') format('truetype'),
-    url('webfonts/fa-regular-400.svg#fontawesome') format('svg');
+  src: url('../css/webfonts/fa-regular-400.eot');
+  src: url('../css/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+    url('../css/webfonts/fa-regular-400.woff2') format('woff2'),
+    url('../css/webfonts/fa-regular-400.woff') format('woff'),
+    url('../css/webfonts/fa-regular-400.ttf') format('truetype'),
+    url('../css/webfonts/fa-regular-400.svg#fontawesome') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -42,34 +42,12 @@
   font-family: 'ConverseFontAwesomeSolid';
   font-style: normal;
   font-weight: 900;
-  src: url('webfonts/fa-solid-900.eot');
-  src: url('webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('webfonts/fa-solid-900.woff2') format('woff2'),
-  url('webfonts/fa-solid-900.woff') format('woff'),
-  url('webfonts/fa-solid-900.ttf') format('truetype'),
-  url('webfonts/fa-solid-900.svg#fontawesome') format('svg');
-}
-
-.far {
-  font-family: 'ConverseFontAwesomeRegular' !important;
-  font-weight: 400;
-}
-.fa,
-.fas {
-  font-family: 'ConverseFontAwesomeSolid' !important;
-  font-weight: 900;
-}
-
-.fab {
-  font-family: 'ConverseFontAwesomeBrands';
-}
-
-.fa, .far, .fas, .fab {
-    display: inline-block;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  src: url('../css/webfonts/fa-solid-900.eot');
+  src: url('../css/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('../css/webfonts/fa-solid-900.svg#fontawesome') format('svg'),
+  url('../css/webfonts/fa-solid-900.woff2') format('woff2'),
+  url('../css/webfonts/fa-solid-900.woff') format('woff'),
+  url('../css/webfonts/fa-solid-900.ttf') format('truetype');
 }
 
 @import "@fortawesome/fontawesome-free/scss/variables";
@@ -85,9 +63,30 @@
 @import "@fortawesome/fontawesome-free/scss/icons";
 @import "@fortawesome/fontawesome-free/scss/screen-reader";
 
-/* Apparent font-awesome bug? The circle has some kind of bottom margin */
 #conversejs {
-    .fa-info-circle {
-        height: 1em;
-    }
+  .far {
+    font-family: 'ConverseFontAwesomeRegular' !important;
+    font-weight: 400;
+  }
+  .fa,
+  .fas {
+    font-family: 'ConverseFontAwesomeSolid' !important;
+    font-weight: 900;
+  }
+
+  .fab {
+    font-family: 'ConverseFontAwesomeBrands';
+  }
+
+  .fa, .far, .fas, .fab {
+      display: inline-block;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+  }
+  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
+  .fa-info-circle {
+      height: 1em;
+  }
 }

src/converse.js

@@ -2,6 +2,9 @@
  * --------------------
  * Any of the following components may be removed if they're not needed.
  */
+
+import '../sass/converse.scss';
+
 import "@converse/headless/converse-caps";            // XEP-0115 Entity Capabilities
 import "@converse/headless/converse-mam";             // XEP-0313 Message Archive Management
 import "@converse/headless/converse-ping";            // XEP-0199 XMPP Ping

webpack.config.js

@@ -3,6 +3,7 @@
 const minimist = require('minimist');
 const path = require('path');
 const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config = {
     entry: path.resolve(__dirname, 'src/converse.js'),
@@ -15,6 +16,7 @@ const config = {
     },
     devtool: 'source-map',
     plugins: [
+        new MiniCssExtractPlugin({filename: '../css/converse.css'}),
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
     ],
     module: {
@@ -36,7 +38,7 @@ const config = {
             use: "exports-loader?filterXSS,filterCSS"
         },
         {
-            test: /\.(html|svg)$/,
+            test: /templates\/.*\.(html|svg)$/,
             exclude: /node_modules/,
             use: [{
                 loader: 'lodash-template-webpack-loader',
@@ -53,6 +55,36 @@ const config = {
                     "prependFilenameComment": __dirname
                 }
             }]
+        },
+        {
+            test: /webfonts\/.*\.(woff(2)?|ttf|eot|truetype|svg)(\?v=\d+\.\d+\.\d+)?$/,
+            use: [
+            {
+                loader: 'file-loader',
+                options: {
+                    name: '[path][name].[ext]',
+                    outputPath: '../'
+                }
+            }
+            ]
+        }, {
+            test: /\.scss$/,
+            use: [
+                'style-loader',
+                MiniCssExtractPlugin.loader, {
+                    loader: 'css-loader',
+                    options: {
+                        sourceMap: true
+                    }
+                }, {
+                    loader: 'sass-loader',
+                    options: {
+                    includePaths: [
+                        path.resolve(__dirname, 'node_modules/')
+                    ],
+                    sourceMap: true
+                }
+            }]
         }, {
             test: /\.js$/,
             exclude: /(node_modules|spec|mockup)/,
@@ -153,6 +185,14 @@ function parameterize () {
         });
     }
 
+    if (type === 'css') {
+        console.log("Building only CSS");
+        const fn = config.output.filename;
+        config.output.filename = `${fn.replace(/\.js$/, '')}.css`;
+        config.entry = path.resolve(__dirname, 'sass/converse.scss');
+        config.output = {filename: '../css/converse.css'};
+    }
+
     if (mode === 'production') {
         console.log("Making a production build");
         const fn = config.output.filename;