Merge pull request #1561 from ArthurHoaro/feature/front-deps-upgrade

.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
+  },
+}

.travis.yml

@@ -13,7 +13,7 @@ matrix:
       php: 7.1
     # jobs for frontend builds
     - language: node_js
-      node_js: 8
+      node_js: 10
       cache:
         yarn: true
         directories:

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/js/base.js

@@ -10,7 +10,7 @@ import Awesomplete from 'awesomplete';
  * @returns Found element or null.
  */
 function findParent(element, tagName, attributes) {
-  const parentMatch = key => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1;
+  const parentMatch = (key) => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1;
   while (element) {
     if (element.tagName.toLowerCase() === tagName) {
       if (Object.keys(attributes).find(parentMatch)) {
@@ -101,7 +101,7 @@ function updateAwesompleteList(selector, tags, instances) {
  * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
  */
 function htmlEntities(str) {
-  return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`);
+  return str.replace(/[\u00A0-\u9999<>&]/gim, (i) => `&#${i.charCodeAt(0)};`);
 }
 
 /**
@@ -194,8 +194,8 @@ function removeClass(element, classname) {
 function init(description) {
   function resize() {
     /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */
-    const scrollTop = window.pageYOffset ||
-      (document.documentElement || document.body.parentNode || document.body).scrollTop;
+    const scrollTop = window.pageYOffset
+      || (document.documentElement || document.body.parentNode || document.body).scrollTop;
 
     description.style.height = 'auto';
     description.style.height = `${description.scrollHeight + 10}px`;
@@ -490,9 +490,10 @@ function init(description) {
           });
         });
 
-        const ids = links.map(item => item.id);
-        window.location =
-          `${basePath}/admin/shaare/visibility?token=${token.value}&newVisibility=${visibility}&id=${ids.join('+')}`;
+        const ids = links.map((item) => item.id);
+        window.location = (
+          `${basePath}/admin/shaare/visibility?token=${token.value}&newVisibility=${visibility}&id=${ids.join('+')}`
+        );
       });
     });
   }
@@ -575,7 +576,7 @@ function init(description) {
             .setAttribute('href', `${basePath}/admin/tags?fromtag=${encodeURIComponent(totag)}`);
 
           // Refresh awesomplete values
-          existingTags = existingTags.map(tag => (tag === fromtag ? totag : tag));
+          existingTags = existingTags.map((tag) => (tag === fromtag ? totag : tag));
           awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes);
         }
       };
@@ -614,7 +615,7 @@ function init(description) {
         xhr.send(encodeURI(`deletetag=1&fromtag=${tag}&token=${refreshedToken}`));
         refreshToken(basePath);
 
-        existingTags = existingTags.filter(tagItem => tagItem !== tag);
+        existingTags = existingTags.filter((tagItem) => tagItem !== tag);
         awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes);
       }
     });

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');
@@ -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-loader": "^7.1.2",
-    "babel-minify-webpack-plugin": "^0.2.0",
-    "babel-preset-env": "^1.6.1",
-    "css-loader": "^0.28.9",
-    "eslint": "^4.16.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.3.0",
+    "eslint": "^7.9.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-import": "^2.22.0",
     "file-loader": "^1.1.6",
-    "node-sass": "^4.13.1",
-    "sass-lint": "^1.12.1",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.10.0"
+    "mini-css-extract-plugin": "^0.11.2",
+    "sass": "^1.26.11",
+    "sass-loader": "^10.0.2",
+    "stylelint": "^13.7.1",
+    "stylelint-config-standard": "^20.0.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: [{
-              loader: "css-loader",
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                minimize: true,
-              }
-            }, {
-              loader: "sass-loader"
-            }],
-          })
+                publicPath: 'tpl/default/css/',
+              },
+            },
+            '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(),
-      extractCssDefault,
+      extractCss,
     ],
   },
   {
+    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: [{
-              loader: "css-loader",
+          use: [
+            {
+              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(),
-      extractCssVintage,
+      extractCss,
     ],
   },
 ];