webpack: split css out into separate file

- Add postcss with autoprefixer and cleancss

Makefile

@@ -154,27 +154,18 @@ logo/conversejs-filled%.png:: logo/conversejs-filled.svg
 	$(INKSCAPE) -e $@ -w $* $<
 	$(OXIPNG) $@
 
-BUILDS = dist/converse.js \
-	dist/converse.min.js \
-	src/headless/dist/converse-headless.js \
+BUILDS = src/headless/dist/converse-headless.js \
 	src/headless/dist/converse-headless.min.js \
-	dist/converse-no-dependencies.min.js \
 	dist/converse-no-dependencies.js \
 	dist/converse-no-dependencies-es2015.js
 
-dist/converse.js: src webpack.config.js stamp-npm @converse/headless
-	npm run converse.js
-dist/converse.min.js: src webpack.config.js stamp-npm @converse/headless
-	npm run converse.min.js
-src/headless/dist/converse-headless.js: src webpack.config.js stamp-npm @converse/headless
+src/headless/dist/converse-headless.js: src webpack.common.js stamp-npm @converse/headless
 	npm run converse-headless.js
-src/headless/dist/converse-headless.min.js: src webpack.config.js stamp-npm @converse/headless
+src/headless/dist/converse-headless.min.js: src webpack.common.js stamp-npm @converse/headless
 	npm run converse-headless.min.js
-dist/converse-no-dependencies.js: src webpack.config.js stamp-npm @converse/headless
+dist/converse-no-dependencies.js: src webpack.common.js stamp-npm @converse/headless
 	$(NPX)  webpack --mode=development --type=nodeps
-dist/converse-no-dependencies.min.js: src webpack.config.js stamp-npm @converse/headless
-	$(NPX)  webpack --mode=production --type=nodeps
-dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm @converse/headless
+dist/converse-no-dependencies-es2015.js: src webpack.common.js stamp-npm @converse/headless
 	$(NPX)  webpack --mode=development --type=nodeps --lang=es2015
 
 @converse/headless: src/headless
@@ -183,7 +174,8 @@ dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm @conver
 dist:: build
 
 .PHONY: build
-build:: stamp-npm css $(BUILDS)
+build:: stamp-npm css
+	npm run build
 
 ########################################################################
 ## Tests
@@ -197,7 +189,7 @@ eslint: stamp-npm
 	$(ESLINT) spec/
 
 .PHONY: check
-check: eslint dist/converse.js
+check: eslint build
 	LOG_CR_VERBOSITY=INFO $(CHROMIUM) --disable-gpu --no-sandbox http://localhost:$(HTTPSERVE_PORT)/tests/index.html
 
 ########################################################################

package-lock.json

@@ -2779,6 +2779,34 @@
       "integrity": "sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=",
       "dev": true
     },
+    "autoprefixer": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
+      "integrity": "sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.6.3",
+        "caniuse-lite": "^1.0.30000980",
+        "chalk": "^2.4.2",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.17",
+        "postcss-value-parser": "^4.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -7566,6 +7594,15 @@
         "minimatch": "^3.0.4"
       }
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -7584,6 +7621,23 @@
         }
       }
     },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        }
+      }
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -9620,6 +9674,12 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
     "normalize-url": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
@@ -12811,6 +12871,12 @@
         "boolbase": "~1.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -13602,6 +13668,77 @@
         }
       }
     },
+    "postcss-clean": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clean/-/postcss-clean-1.1.0.tgz",
+      "integrity": "sha512-83g3GqMbCM5NL6MlbbPLJ/m2NrUepBF44MoDk4Gt04QGXeXKh9+ilQa0DzLnYnvqYHQCw83nckuEzBFr2muwbg==",
+      "dev": true,
+      "requires": {
+        "clean-css": "^4.x",
+        "postcss": "^6.x"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+      "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "schema-utils": "^1.0.0"
+      }
+    },
     "postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",

package.json

@@ -17,6 +17,8 @@
   "scripts": {
     "start": "webpack-dev-server --config webpack.dev.js",
     "clean": "rm -rf node_modules stamp-npm dist *.zip",
+    "converse-headless.js": "webpack --mode=development --type=headless",
+    "converse-headless.min.js": "npm run converse-headless.js && webpack --mode=production --type=headless",
     "build": "webpack --config webpack.prod.js",
     "lerna": "lerna bootstrap --hoist --ignore-scripts",
     "prepare": "npm run lerna && npm run build"
@@ -50,6 +52,7 @@
     "@babel/preset-env": "^7.5.4",
     "@converse/headless": "file:src/headless",
     "@fortawesome/fontawesome-free": "5.9.0",
+    "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -84,6 +87,8 @@
     "npm": "^6.4.1",
     "po-loader": "^0.5.0",
     "po2json": "^1.0.0-alpha",
+    "postcss-clean": "^1.1.0",
+    "postcss-loader": "^3.0.0",
     "prettierx": "^0.6.0",
     "requirejs": "2.3.6",
     "run-headless-chromium": "^0.1.1",

postcss.config.js

@@ -0,0 +1,7 @@
+/* global module */
+module.exports = {
+    plugins: [
+        require('autoprefixer'),
+        require('postcss-clean')
+    ]
+}

webpack.common.js

@@ -1,3 +1,4 @@
+/* global __dirname, module, process */
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const minimist = require('minimist');
 const path = require('path');
@@ -8,12 +9,6 @@ const config = {
     externals: [{
         "window": "window"
     }],
-    plugins: [
-        new HTMLWebpackPlugin({
-            title: 'Production',
-            template: 'webpack.html'
-        })
-    ],
     module: {
         rules: [
         {

webpack.dev.js

@@ -1,10 +1,18 @@
+/* global module */
 const merge = require("webpack-merge");
 const common = require("./webpack.common.js");
+const HTMLWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
         contentBase: "./dist"
-    }
+    },
+    plugins: [
+        new HTMLWebpackPlugin({
+            title: 'Production',
+            template: 'webpack.html'
+        })
+    ],
 });

webpack.prod.js

@@ -1,6 +1,8 @@
+/* global __dirname, module */
 const common = require("./webpack.common.js");
 const merge = require("webpack-merge");
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = merge(common, {
     output: {
@@ -9,7 +11,32 @@ module.exports = merge(common, {
         filename: 'converse.js',
         chunkFilename: '[name].js'
     },
+    plugins: [
+        new MiniCssExtractPlugin({filename: '../dist/converse.css'})
+    ],
     mode: "production",
     devtool: "source-map",
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                {
+                    loader: 'css-loader',
+                    options: {sourceMap: true}
+                },
+                'postcss-loader',
+                {
+                    loader: 'sass-loader',
+                    options: {
+                        includePaths: [
+                            path.resolve(__dirname, 'node_modules/')
+                        ],
+                        sourceMap: true
+                    }
+                }
+            ]
+        }]
+    }
 });