Build assets using Webpack (#150)

* Build assets using webpack

* Change webpack bundling method, add path aliases, restore deploy script

* Remove babel dependencies

* Add buble rollup plugin and always attach promise polyfill to window

* Fix object formatting for buble rollup plugin config

* Remove reference to setImmediate from promise polyfill

assets/.babelrc

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ]
-}

assets/.browserslistrc

@@ -0,0 +1,10 @@
+last 2 Android versions
+last 2 Chrome versions
+last 2 ChromeAndroid versions
+last 2 Edge versions
+last 1 Explorer version
+last 1 ExplorerMobile versions
+last 2 Firefox versions
+last 2 FirefoxAndroid versions
+last 2 iOS versions
+last 2 Opera versions

assets/brunch-config.js

@@ -1,72 +0,0 @@
-module.exports = {
-  files: {
-    javascripts: {joinTo: 'js/app.js'},
-    stylesheets: {
-      joinTo: {
-        'css/default.css': [
-          'css/themes/default.scss'
-        ],
-        'css/dark.css': [
-          'css/themes/dark.scss'
-        ],
-        'css/red.css': [
-          'css/themes/red.scss'
-        ]
-      }
-    }
-  },
-  plugins: {
-    rollup: {
-      buble: {
-        transforms: { dangerousForOf: true }
-      }
-    },
-    sass: {
-      mode: 'native',
-      options: {
-        includePaths: ['css', 'node_modules/@fortawesome/fontawesome-free/scss']
-      }
-    },
-    copycat: {
-      fonts: ['node_modules/@fortawesome/fontawesome-free/webfonts'],
-      verbose: false,
-      onlyChanged: true
-    },
-    postcss: {
-      processors: [
-        require('autoprefixer')({
-          overrideBrowserslist: [
-            'last 2 Android versions',
-            'last 2 Chrome versions',
-            'last 2 ChromeAndroid versions',
-            'last 2 Edge versions',
-            'last 1 Explorer version',
-            'last 1 ExplorerMobile versions',
-            'last 2 Firefox versions',
-            'last 2 FirefoxAndroid versions',
-            'last 2 iOS versions',
-            'last 2 Opera versions'
-          ],
-          add: true
-        })
-      ]
-    }
-  },
-  conventions: {
-    // This option sets where we should place non-css and non-js assets in.
-    // By default, we set this to "/assets/static". Files in this directory
-    // will be copied to `paths.public`, which is "priv/static" by default.
-    assets: /static\//
-  },
-  paths: {
-    watched: ['css/themes/default.scss', 'css/themes/dark.scss', 'css/themes/red.scss', 'js/app.js', 'vendor', 'fonts', 'static'],
-    public: '../priv/static'
-  },
-  modules: {
-    definition: false,
-    wrapper: false
-  },
-  npm: {
-    enabled: false
-  }
-};

assets/css/common/_base.scss

@@ -9,13 +9,13 @@
 @import "global";
 
 // Because FA is a SPECIAL SNOWFLAKE.
-$fa-font-path: "/fonts";
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "~@fortawesome/fontawesome-free/scss/regular.scss";
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "~@fortawesome/fontawesome-free/scss/brands.scss";
-@import "../../node_modules/normalize-scss/sass/normalize/import-now";
+@import "~normalize-scss/sass/normalize/import-now";
 
 body {
   background-color: $background_color;
@@ -380,23 +380,23 @@ span.stat {
 @import "shame";
 @import "text";
 
-@import "views/adverts";
+@import "~views/adverts";
-@import "views/badges";
+@import "~views/badges";
-@import "views/channels";
+@import "~views/channels";
-@import "views/comments";
+@import "~views/comments";
-@import "views/commissions";
+@import "~views/commissions";
-@import "views/communications";
+@import "~views/communications";
-@import "views/duplicate_reports";
+@import "~views/duplicate_reports";
-@import "views/filters";
+@import "~views/filters";
-@import "views/galleries";
+@import "~views/galleries";
-@import "views/images";
+@import "~views/images";
-@import "views/pages";
+@import "~views/pages";
-@import "views/polls";
+@import "~views/polls";
-@import "views/posts";
+@import "~views/posts";
-@import "views/profiles";
+@import "~views/profiles";
-@import "views/search";
+@import "~views/search";
-@import "views/stats";
+@import "~views/stats";
-@import "views/tags";
+@import "~views/tags";
 
 .no-overflow {
   overflow: hidden;

assets/css/common/_header.scss

@@ -118,7 +118,7 @@ select.header__input, select.header__input:focus {
 .header__input--search:-webkit-autofill:hover,
 .header__input--search:-webkit-autofill:focus {
   -webkit-text-fill-color: $text_light_color;
-  box-shadow: 0 0 0px 1000px $header_field_color inset;
+  box-shadow: 0 0 0 1000px $header_field_color inset;
   border: none;
 }
 

assets/css/themes/dark.scss

@@ -186,4 +186,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
 
-@import "common/base";
+@import "~common/base";

assets/css/themes/default.scss

@@ -176,4 +176,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
 
-@import "common/base";
+@import "~common/base";

assets/css/themes/red.scss

@@ -189,4 +189,4 @@ $dnp_warning_hover_color: lighten($vote_down_color, 10%);
 $poll_form_label_background: lighten($border_color, 8);
 $tag_dropdown_hover_background: darken($meta_color, 4%);
 
-@import "common/base";
+@import "~common/base";

assets/js/app.js

@@ -15,3 +15,7 @@ import './vendor/es6.polyfill';
 // Our code
 import './ujs';
 import './when-ready';
+
+import '../css/themes/default.scss';
+import '../css/themes/dark.scss';
+import '../css/themes/red.scss';

assets/js/vendor/promise.polyfill.js

@@ -1,4 +1,5 @@
 (function (root) {
+  if (root.Promise) return;
 
   // Store setTimeout reference so promise-polyfill will be unaffected by
   // other code modifying setTimeout (like sinon.useFakeTimers())
@@ -8,10 +9,9 @@
   }
 
   // Use polyfill for setImmediate for performance gains
-  var asap = (typeof setImmediate === 'function' && setImmediate) ||
+  function asap(fn) {
-    function (fn) {
+    setTimeoutFunc(fn, 1);
-      setTimeoutFunc(fn, 1);
+  }
-    };
 
   var onUnhandledRejection = function onUnhandledRejection(err) {
     console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
@@ -221,10 +221,5 @@
     onUnhandledRejection = fn;
   };
 
-  if (typeof module !== 'undefined' && module.exports) {
+  root.Promise = Promise;
-    module.exports = Promise;
-  } else if (!root.Promise) {
-    root.Promise = Promise;
-  }
-
 })(window);

assets/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
-    "deploy": "brunch build --production",
+    "deploy": "cross-env NODE_ENV=production webpack",
-    "watch": "brunch watch --stdin"
+    "watch": "webpack --watch"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
@@ -11,10 +11,27 @@
   "devDependencies": {
     "acorn": "^7.1.1",
     "autoprefixer": "^9.7.4",
+    "copy-webpack-plugin": "^6.0.2",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.6.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.0.0",
+    "node-sass": "^4.14.1",
     "normalize-scss": "^7.0.1",
-    "rollup-brunch": "git+https://github.com/liamwhite/rollup-brunch.git#31967fc",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "sass-brunch": "git+https://github.com/brunch/sass-brunch.git#e9c0bfe",
+    "postcss-loader": "^3.0.0",
-    "spostcss-brunch": "git+https://github.com/Meow/spostcss-brunch.git#b64df45",
+    "postcss-scss": "^2.1.1",
-    "uglify-js-brunch": "^2.10.0"
+    "rollup": "^2.18.1",
+    "rollup-plugin-buble": "^0.19.8",
+    "rollup-plugin-includepaths": "^0.2.3",
+    "rollup-plugin-multi-entry": "^2.1.0",
+    "rollup-plugin-virtual": "^1.0.1",
+    "sass-loader": "^8.0.2",
+    "source-map-support": "^0.5.19",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^3.0.6",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-rollup-loader": "^0.8.0"
   }
 }

assets/webpack.config.js

@@ -0,0 +1,114 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+const includePaths = require('rollup-plugin-includepaths')();
+const multiEntry = require('rollup-plugin-multi-entry')();
+const buble = require('rollup-plugin-buble')({ transforms: { dangerousForOf: true } });
+
+let plugins = [
+  new CopyPlugin({
+    patterns: [
+      { from: path.resolve(__dirname, 'static') },
+    ],
+  }),
+];
+if (!isDevelopment){
+  plugins = plugins.concat([
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      sourceMap: isDevelopment,
+    }),
+    new OptimizeCSSAssetsPlugin({
+      cssProcessorOptions: { discardComments: { removeAll: true } },
+      canPrint: true,
+      sourceMaps: isDevelopment,
+    }),
+  ]);
+}
+
+module.exports = {
+  mode: isDevelopment ? 'development' : 'production',
+  entry: {
+    'js/app.js': './js/app.js',
+  },
+  output: {
+    filename: '[name]',
+    path: path.resolve(__dirname, '../priv/static'),
+  },
+  optimization: {
+    minimize: !isDevelopment,
+    providedExports: true,
+    usedExports: true,
+    concatenateModules: true,
+  },
+  devtool: isDevelopment ? 'inline-source-map' : undefined,
+  performance: { hints: false },
+  resolve: {
+    alias: {
+      common: path.resolve(__dirname, 'css/common/'),
+      views: path.resolve(__dirname, 'css/views/')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ttf|eot|svg|woff2?)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: './fonts',
+          publicPath: '../fonts',
+        },
+      },
+      {
+        test: /app\.js/,
+        use: [
+          {
+            loader: 'webpack-rollup-loader',
+            options: {
+              plugins: [
+                buble,
+                includePaths,
+                multiEntry,
+              ]
+            }
+          },
+        ],
+      },
+      {
+        test: /themes\/[a-z]+\.scss$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              sourceMaps: isDevelopment,
+              name: '[name].css',
+              outputPath: '/css',
+              publicPath: '/css',
+            },
+          },
+          { loader: 'extract-loader', options: { sourceMaps: isDevelopment } },
+          { loader: 'css-loader', options: { sourceMap: isDevelopment } },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMaps: isDevelopment,
+              ident: 'postcss',
+              syntax: 'postcss-scss',
+              plugins: [
+                require('autoprefixer')(),
+              ],
+            },
+          },
+          { loader: 'sass-loader', options: { sourceMap: isDevelopment } },
+        ],
+      },
+    ],
+  },
+  plugins,
+};