Upgrade front end dependencies

Mostly in order to get rid of deprecated deps, and upgrade vulnerable ones.

  - Upgrade webpack from 3.x to 4.x
  - Moved babel package to main repo
  - Replaced deprecated extract-text-webpack-plugin with extract-text-webpack-plugin
  - Replaced deprecated babel-minify-webpack-plugin with terser-webpack-plugin
  - Replaced deprecated node-sass with (dart) sass package
  - Replaced deprecated sass-lint with stylelint (the rules might be a bit different

Related to #1531: trivy doesn't raise any more issue

.dev/.sasslintrc

@@ -1,17 +0,0 @@
-options:
-  max-warnings: 0
-rules:
-  property-sort-order:
-    - 0
-# Sort order rule does not work with CSS variables: https://github.com/sasstools/sass-lint/issues/1161
-#    - 1
-#    -
-#      order: 'concentric'
-  no-important:
-    - 0
-  no-vendor-prefixes:
-    - 0 # this will be fixed with v2: see https://github.com/sasstools/sass-lint/pull/1137
-  nesting-depth:
-    - 1
-    -
-      max-depth: 4

.dev/.stylelintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  plugins: [
+    "stylelint-scss"
+  ],
+  rules: {
+    "indentation": [2],
+    "number-leading-zero": null,
+    // Replace CSS @ with SASS ones
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    // not compatible with SASS apparently
+    "no-descending-specificity": null
+  },
+}

Makefile

@@ -174,4 +174,4 @@ eslint:
 
 ### Run CSSLint check against Shaarli's SCSS files
 sasslint:
-	@yarn run sass-lint -c .dev/.sasslintrc 'assets/default/scss/*.scss' -v -q
+	@yarn run stylelint --config .dev/.stylelintrc.js 'assets/default/scss/*.scss'

assets/default/scss/shaarli.scss

@@ -69,7 +69,8 @@ pre {
   font-family: 'Roboto';
   font-weight: 400;
   font-style: normal;
-  src: local('Roboto'),
+  src:
+    local('Roboto'),
     local('Roboto-Regular'),
     url('../fonts/Roboto-Regular.woff2') format('woff2'),
     url('../fonts/Roboto-Regular.woff') format('woff');
@@ -79,7 +80,8 @@ pre {
   font-family: 'Roboto';
   font-weight: 700;
   font-style: normal;
-  src: local('Roboto'),
+  src:
+    local('Roboto'),
     local('Roboto-Bold'),
     url('../fonts/Roboto-Bold.woff2') format('woff2'),
     url('../fonts/Roboto-Bold.woff') format('woff');
@@ -375,7 +377,7 @@ body,
 }
 
 @media screen and (max-width: 64em) {
-  .header-search ,
+  .header-search,
   .header-search * {
     visibility: hidden;
   }
@@ -554,7 +556,6 @@ body,
   color: $dark-grey;
   font-size: .9em;
 
-
   a {
     display: inline-block;
     margin: 3px 0;
@@ -1609,7 +1610,8 @@ form {
 
   > div {
     border-radius: 10px;
-    background: repeating-linear-gradient(
+    background:
+      repeating-linear-gradient(
         -45deg,
         $almost-white,
         $almost-white 6px,

assets/vintage/css/shaarli.css

@@ -746,8 +746,6 @@ a.bigbutton, #pageheader a.bigbutton {
     text-align: left;
     background-color: transparent;
     background-color: rgba(0, 0, 0, 0.4);
-    /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
-    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
     /* IE6–IE9 */
     text-shadow: 2px 2px 1px #000000;
 }

package.json

@@ -11,22 +11,23 @@
     "purecss": "^1.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/core": "^7.11.6",
-    "babel-loader": "^7.1.2",
+    "@babel/preset-env": "^7.11.5",
-    "babel-minify-webpack-plugin": "^0.2.0",
+    "babel-loader": "^8.1.0",
-    "babel-preset-env": "^1.6.1",
+    "css-loader": "^4.3.0",
-    "css-loader": "^0.28.9",
+    "eslint": "^7.9.0",
-    "eslint": "^4.16.0",
+    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-import": "^2.8.0",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
-    "node-sass": "^4.13.1",
+    "mini-css-extract-plugin": "^0.11.2",
-    "sass-lint": "^1.12.1",
+    "sass": "^1.26.11",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^10.0.2",
-    "style-loader": "^0.19.1",
+    "stylelint": "^13.7.1",
-    "url-loader": "^0.6.2",
+    "stylelint-config-standard": "^20.0.0",
-    "webpack": "^3.10.0"
+    "stylelint-scss": "^3.18.0",
+    "terser-webpack-plugin": "^4.2.2",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12"
   },
   "scripts": {
     "build": "webpack",

webpack.config.js

@@ -2,26 +2,21 @@ const path = require('path');
 const glob = require('glob');
 
 // Minify JS
-const MinifyPlugin = require('babel-minify-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 // This plugin extracts the CSS into its own file instead of tying it with the JS.
 // It prevents:
 //   - not having styles due to a JS error
 //   - the flash page without styles during JS loading
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const extractCssDefault = new ExtractTextPlugin({
+const extractCss = new MiniCssExtractPlugin({
   filename: "../css/[name].min.css",
-  publicPath: 'tpl/default/css/',
-});
-
-const extractCssVintage = new ExtractTextPlugin({
-  filename: "../css/[name].min.css",
-  publicPath: 'tpl/vintage/css/',
 });
 
 module.exports = [
   {
+    mode: 'production',
     entry: {
       thumbnails: './assets/common/js/thumbnails.js',
       thumbnails_update: './assets/common/js/thumbnails-update.js',
@@ -45,23 +40,23 @@ module.exports = [
             loader: 'babel-loader',
             options: {
               presets: [
-                'babel-preset-env',
+                '@babel/preset-env',
               ]
             }
           }
         },
         {
           test: /\.s?css/,
-          use: extractCssDefault.extract({
+          use: [
-            use: [{
+            {
-              loader: "css-loader",
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                minimize: true,
+                publicPath: 'tpl/default/css/',
-              }
+              },
-            }, {
+            },
-              loader: "sass-loader"
+            'css-loader',
-            }],
+            'sass-loader',
-          })
+          ],
         },
         {
           test: /\.(gif|png|jpe?g|svg|ico)$/i,
@@ -81,17 +76,21 @@ module.exports = [
           options: {
             name: '../fonts/[name].[ext]',
             // do not add a publicPath here because it's already handled by CSS's publicPath
-            publicPath: '',
+            publicPath: '../default/',
           }
         },
       ],
     },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    },
     plugins: [
-      new MinifyPlugin(),
+      extractCss,
-      extractCssDefault,
     ],
   },
   {
+    mode: 'production',
     entry: {
       shaarli: [
         './assets/vintage/js/base.js',
@@ -115,21 +114,23 @@ module.exports = [
             loader: 'babel-loader',
             options: {
               presets: [
-                'babel-preset-env',
+                '@babel/preset-env',
               ]
             }
           }
         },
         {
           test: /\.css$/,
-          use: extractCssVintage.extract({
+          use: [
-            use: [{
+            {
-              loader: "css-loader",
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                minimize: true,
+                publicPath: 'tpl/vintage/css/',
-              }
+              },
-            }],
+            },
-          })
+            'css-loader',
+            'sass-loader',
+          ],
         },
         {
           test: /\.(gif|png|jpe?g|svg|ico)$/i,
@@ -145,9 +146,12 @@ module.exports = [
         },
       ],
     },
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+    },
     plugins: [
-      new MinifyPlugin(),
+      extractCss,
-      extractCssVintage,
     ],
   },
 ];