Webpack 5 (#140)

assets/css/common/_blocks.scss

@@ -48,8 +48,8 @@
   @extend .block__header;
   line-height: $block_header_sub_height;
   a {
-    padding-left: $header_spacing/2;
-    padding-right: $header_spacing/2;
+    padding-left: $header_spacing*0.5;
+    padding-right: $header_spacing*0.5;
   }
 }
 
@@ -91,7 +91,7 @@ a.block__header--single-item, .block__header a {
 .block__header__title {
   font-size: 14px;
   margin: 0;
-  padding: 0 ($header_spacing / 2) 0 $header_spacing;
+  padding: 0 ($header_spacing * 0.5) 0 $header_spacing;
 }
 
 .block__header--light {

assets/css/common/_dimensions.scss

@@ -27,7 +27,7 @@ $header_sub_height: 32px;
 $header_font_size: 16px;
 $header_spacing: 12px;
 $header_field_spacing: 8px;
-$header_field_vertical_spacing: ($header_height - $header_field_height) / 2;
+$header_field_vertical_spacing: ($header_height - $header_field_height) * 0.5;
 $block_header_height: 32px;
 $block_header_sub_height: 26px;
 $block_spacing: 6px;

assets/js/app.js

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

assets/package.json

@@ -16,17 +16,19 @@
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^2.0.0",
-    "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
-    "node-sass": "^6.0.1",
+    "ignore-emit-webpack-plugin": "^2.0.6",
+    "mini-css-extract-plugin": "^2.3.0",
     "normalize-scss": "^7.0.1",
     "postcss-loader": "^5.3.0",
     "postcss-scss": "^3.0.5",
+    "postcss-url": "^10.1.3",
     "rollup": "^2.57.0",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-includepaths": "^0.2.4",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-virtual": "^1.0.1",
+    "sass": "^1.42.1",
     "sass-loader": "^12.1.0",
     "source-map-support": "^0.5.20",
     "style-loader": "^1.3.0",

assets/webpack.config.js

@@ -1,7 +1,10 @@
+const fs = require('fs');
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
@@ -10,6 +13,11 @@ const multiEntry = require('rollup-plugin-multi-entry')();
 const buble = require('rollup-plugin-buble')({ transforms: { dangerousForOf: true } });
 
 let plugins = [
+  new IgnoreEmitPlugin(/css\/.*(?<!css)$/),
+  new MiniCssExtractPlugin({
+    filename: '[name].css',
+    chunkFilename: '[id].css'
+  }),
   new CopyPlugin({
     patterns: [
       { from: path.resolve(__dirname, 'static') },
@@ -27,10 +35,21 @@ if (!isDevelopment){
   ]);
 }
 
+const themeNames =
+  fs.readdirSync(path.resolve(__dirname, 'css/themes')).map(name =>
+    name.match(/([-a-z]+).scss/)[1]
+  );
+
+const themes = {};
+for (const name of themeNames) {
+  themes[`css/${name}`] = `./css/themes/${name}.scss`;
+}
+
 module.exports = {
   mode: isDevelopment ? 'development' : 'production',
   entry: {
     'js/app.js': './js/app.js',
+    ...themes
   },
   output: {
     filename: '[name]',
@@ -77,18 +96,9 @@ module.exports = {
         ],
       },
       {
-        test: /themes\/[a-z]+\.scss$/,
+        test: /\.scss$/,
         use: [
-          {
-            loader: 'file-loader',
-            options: {
-              sourceMaps: isDevelopment,
-              name: '[name].css',
-              outputPath: '/css',
-              publicPath: '/css',
-            },
-          },
-          { loader: 'extract-loader', options: { sourceMaps: isDevelopment } },
+          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
@@ -109,8 +119,16 @@ module.exports = {
               },
             },
           },
-          { loader: 'sass-loader', options: { sourceMap: isDevelopment } },
-        ],
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: isDevelopment,
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          },
+        ]
       },
     ],
   },