Use rollup instead of webpack

package.json

@@ -7,14 +7,8 @@
     "empathy": "lib/cli.js"
   },
   "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "npm run development -- --watch",
-    "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "build": "npm run production && rm -rf ~/Sites/empathy-docs/docs/demo && cp -rf ~/Sites/empathy/demo ~/Sites/empathy-docs/static"
+    "dev": "cross-env NODE_ENV=development rollup -c -w",
+    "build": "cross-env NODE_ENV=production rollup -c && rm -rf ~/Sites/empathy-docs/docs/demo && cp -rf ~/Sites/empath/demo ~/Sites/empathy-docs/static"
   },
   "repository": {
     "type": "git",
@@ -37,14 +31,23 @@
   "license": "MIT",
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
-    "commander": "^4.0.0",
-    "cross-env": "^5.2.1",
-    "laravel-mix": "^4.1.4",
-    "resolve-url-loader": "^2.3.1",
-    "sass": "^1.23.3",
-    "sass-loader": "^7.3.1",
-    "tailwindcss": "^1.1.3",
-    "vue-template-compiler": "^2.5.22"
+    "@rollup/plugin-replace": "^2.3.0",
+    "autoprefixer": "^9.7.3",
+    "commander": "^4.1.0",
+    "cross-env": "^6.0.3",
+    "cssnano": "^4.1.10",
+    "rollup": "^1.29.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-extensions": "^0.1.0",
+    "rollup-plugin-filesize": "^6.2.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-scss": "^2.1.0",
+    "rollup-plugin-terser": "^5.1.3",
+    "rollup-plugin-vue": "^5.1.5",
+    "tailwindcss": "^1.1.4",
+    "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.25",

postcss.config.js

@@ -0,0 +1,24 @@
+const isProduction = process.env.NODE_ENV === "production";
+
+module.exports = {
+  plugins: [
+    require("tailwindcss")('./tailwind.config.js'),
+    require("autoprefixer"),
+    ...(isProduction ? [require("@fullhuman/postcss-purgecss")({
+      whitelistPatterns: [/svg-inline--fa/],
+
+      // Specify the paths to all of the template files in your project
+      content: [
+        "./src/**/*.html",
+        "./src/**/*.vue",
+        "./node_modules/vue-good-table/src/components/**/*.vue",
+      ],
+
+      // Include any special characters you're using in this regular expression
+      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+    })] : []),
+    require('cssnano')({
+      preset: 'default',
+    }),
+  ],
+};

rollup.config.js

@@ -0,0 +1,74 @@
+import extensions from 'rollup-plugin-extensions';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import vue from 'rollup-plugin-vue';
+import copy from 'rollup-plugin-copy';
+import scss from 'rollup-plugin-scss';
+import postcss from 'rollup-plugin-postcss';
+import replace from '@rollup/plugin-replace';
+import filesize from 'rollup-plugin-filesize';
+import { terser } from "rollup-plugin-terser";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+export default [
+	{
+		input: [
+      'src/demo/javascript/app.js'
+    ],
+		output: {
+			name: 'Empathy',
+			file: 'demo/javascript/app.js',
+      format: 'umd',
+      sourcemap: true,
+		},
+		plugins: [
+      extensions({
+        extensions: ['.js', '.vue', '.json'],
+      }),
+			resolve(),
+      commonjs(),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify('development'),
+        'process.env.VUE_ENV': JSON.stringify('browser')
+      }),
+      vue(),
+      copy({
+        targets: [
+          { src: 'src/favicons/**/*', dest: 'demo' },
+          { src: 'src/images', dest: 'demo' }
+        ]
+      }),
+      filesize(),
+      terser({
+        sourcemap: true,
+      }),
+		]
+  },
+  {
+    input: [
+      'src/demo/sass/app.scss'
+    ],
+		output: {
+			name: 'Empathy',
+			file: 'demo/css/app.css',
+      sourcemap: true,
+		},
+		plugins: [
+      scss(),
+      postcss({
+        config: {
+          path: "./postcss.config.js",
+        },
+        extensions: ['.scss','.css'],
+        extract: true,
+        minimize: isProduction,
+        // modules: true,
+      }),
+      filesize(),
+      terser({
+        sourcemap: true,
+      }),
+		]
+  }
+];

src/sass/empathy.scss

@@ -89,12 +89,12 @@
 .breadcrumb {
     li {
         @apply flex items-center;
-    }
-    li + li {
-        @apply ml-2;
         .svg-inline--fa {
             @apply text-gray-700 mr-2;
         }
+    }
+    li + li {
+        @apply ml-2;
         &::before {
             @apply hidden;
             font-family: 'Font Awesome 5 Solid';