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
This commit is contained in:
ArthurHoaro 2020-09-22 17:49:49 +02:00
parent 0d930454a2
commit 96746d7165
8 changed files with 3930 additions and 3809 deletions

View file

@ -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

15
.dev/.stylelintrc.js Normal file
View file

@ -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
},
}

View file

@ -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'

View file

@ -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,

View file

@ -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;
}

View file

@ -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",

View file

@ -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,
],
},
];

7566
yarn.lock

File diff suppressed because it is too large Load diff