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

2020-09-23 15:50:23 +02:00 · 2020-09-23 15:50:23 +02:00 · cdb96276c1
parent 5baafe5001 9192a48be3
commit cdb96276c1
10 changed files with 3941 additions and 3819 deletions
--- a/.dev/.sasslintrc
+++ b/.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
--- a/.dev/.stylelintrc.js
+++ b/.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
+  },
+}
--- a/.travis.yml
+++ b/.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:
--- a/2
+++ b/2
@ -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'
--- a/assets/default/js/base.js
+++ b/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);
      }
    });
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@ -69,20 +69,22 @@ pre {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Regular'),
-  url('../fonts/Roboto-Regular.woff2') format('woff2'),
-  url('../fonts/Roboto-Regular.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('../fonts/Roboto-Regular.woff2') format('woff2'),
+    url('../fonts/Roboto-Regular.woff') format('woff');
 }

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
-  src: local('Roboto'),
-  local('Roboto-Bold'),
-  url('../fonts/Roboto-Bold.woff2') format('woff2'),
-  url('../fonts/Roboto-Bold.woff') format('woff');
+  src:
+    local('Roboto'),
+    local('Roboto-Bold'),
+    url('../fonts/Roboto-Bold.woff2') format('woff2'),
+    url('../fonts/Roboto-Bold.woff') format('woff');
 }

 body,
@ -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;
@ -620,7 +621,7 @@ body,
    &.selected {
      background: var(--main-color);
      color: $white;
-     }
+    }
  }

  input {
@ -1609,13 +1610,14 @@ form {

  > div {
    border-radius: 10px;
-    background: repeating-linear-gradient(
-      -45deg,
-      $almost-white,
-      $almost-white 6px,
-      var(--background-color) 6px,
-      var(--background-color) 12px
-    );
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        $almost-white,
+        $almost-white 6px,
+        var(--background-color) 6px,
+        var(--background-color) 12px
+      );
    width: 0%;
    height: 10px;
  }
--- a/assets/vintage/css/shaarli.css
+++ b/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);
    /* IE6IE9 */
    text-shadow: 2px 2px 1px #000000;
 }
--- a/package.json
+++ b/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",
--- a/webpack.config.js
+++ b/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,
    ],
  },
 ];
--- a/yarn.lock
+++ b/yarn.lock