Merge branch 'master' into feature/fontsource

cedric07 · cedric07 · commit ab4a0c5e485f · 2023-07-21T10:18:57.000+02:00
diff --git a/assets/conf-img/image-locations.json b/assets/conf-img/image-locations.json
diff --git a/assets/conf-img/image-sizes.json b/assets/conf-img/image-sizes.json
diff --git a/assets/conf-img/tpl/default-picture-caption.tpl b/assets/conf-img/tpl/default-picture-caption.tpl
diff --git a/assets/conf-img/tpl/default-picture.tpl b/assets/conf-img/tpl/default-picture.tpl
diff --git a/assets/conf-img/tpl/square.tpl b/assets/conf-img/tpl/square.tpl
diff --git a/config/image-sizes.js b/config/image-sizes.js
@@ -4,8 +4,8 @@ const sharp = require('sharp')
 const Json2csvParser = require('json2csv').Parser
 const fields = ['location', 'sizes.width', 'sizes.height', 'sizes.retina', 'sizes.ratio']
 const dir = {
-  conf: './src/conf-img/',
-  tpl: './src/conf-img/tpl/',
+  conf: './assets/conf-img/',
+  tpl: './assets/conf-img/tpl/',
   defaultImages: './src/img/default/',
 }
 const path = {
diff --git a/config/loaders.js b/config/loaders.js
@@ -14,33 +14,18 @@ module.exports = {
       /* FontsLoader */ {
         test: /\.(woff|woff2)$/,
         type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext][query]',
+        },
       },
       /* ImagesLoader */ {
         test: /\.(png|jpe?g|gif|svg)$/,
         type: 'asset/resource',
         exclude: /icons/,
         include: srcPath + '/img',
-        use: [
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                progressive: true,
-                quality: 65,
-              },
-              pngquant: {
-                quality: [0.65, 0.9],
-                speed: 4,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              webp: {
-                quality: 75,
-              },
-            },
-          },
-        ],
+        generator: {
+          filename: 'images/[name][ext][query]',
+        },
       },
       /* JSLoader */ {
         test: /\.js$/i,
@@ -62,6 +47,8 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
+              url: true,
+              esModule: false,
               importLoaders: 1,
             },
           },
diff --git a/config/plugins.js b/config/plugins.js
@@ -31,7 +31,7 @@ module.exports = {
       new WebpackBar({
         color: '#ffe600',
       }),
-      new DependencyExtractionWebpackPlugin({ injectPolyfill: true }),
+      new DependencyExtractionWebpackPlugin(),
     ]
 
     if (mode === 'production') {
diff --git a/config/webpack.common.js b/config/webpack.common.js
@@ -1,6 +1,8 @@
 const path = require('path')
 const entries = require('./entries')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
+const svgoconfig = require('./svgo.config')
 
 module.exports = {
   entry: entries,
@@ -12,6 +14,22 @@ module.exports = {
   },
   optimization: {
     minimizer: [
+      new ImageMinimizerPlugin({
+        minimizer: {
+          implementation: ImageMinimizerPlugin.imageminMinify,
+          options: {
+            // Lossless optimization with custom option
+            // Feel free to experiment with options for better result for you
+            plugins: [
+              ['gifsicle', { interlaced: true }],
+              ['jpegtran', { progressive: true }],
+              ['optipng', { optimizationLevel: 5 }],
+              // Svgo configuration here https://github.com/svg/svgo#configuratio
+              ['svgo', { svgoconfig }],
+            ],
+          },
+        },
+      }),
       new TerserPlugin({
         parallel: true,
         terserOptions: {
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@fontsource/poppins": "^4.5.10",
     "lazysizes": "^5.3.2",
     "oneloop.js": "^5.0.0",
-    "sharp": "^0.32.0",
     "what-input": "^5.2.10"
   },
   "devDependencies": {
@@ -36,28 +35,35 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^7.0.1",
+    "image-minimizer-webpack-plugin": "^3.8.2",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^10.0.1",
     "js-yaml": "^4.1.0",
     "json2csv": "^5.0.6",
     "mini-css-extract-plugin": "^1.5.0",
     "ora": "^5.4.0",
     "portfinder": "^1.0.28",
-    "postcss": "^8.4.16",
-    "postcss-import": "^15.0.0",
-    "postcss-loader": "^7.0.1",
-    "postcss-preset-env": "^7.8.0",
+    "postcss": "^8.4.24",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.2",
+    "postcss-preset-env": "^8.4.2",
     "postcss-pxtorem": "^6.0.0",
-    "postcss-scss": "^4.0.4",
-    "postcss-sort-media-queries": "^4.2.1",
+    "postcss-scss": "^4.0.6",
+    "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^2.2.1",
     "sass": "^1.52.3",
     "sass-loader": "^11.0.1",
+    "sharp": "^0.32.1",
     "style-loader": "^2.0.0",
     "stylelint": "^14.13.0",
     "stylelint-config-recess-order": "^3.0.0",
     "stylelint-scss": "^4.3.0",
     "stylelint-webpack-plugin": "^3.3.0",
     "svg-sprite-loader": "^6.0.10",
+    "svgo": "^3.0.2",
     "svgo-loader": "^3.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.35.0",
diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss
@@ -22,6 +22,7 @@
     position: relative;
     z-index: 1;
     display: inline-block;
+    min-width: 90px;
     padding: 15px 25px;
     overflow: hidden;
     font-size: 12px;
diff --git a/src/scss/02-tools/_m-hover.scss b/src/scss/02-tools/_m-hover.scss
@@ -1,10 +1,16 @@
 @use "sass:list";
 
-/// Add active, focus and hover pseudo selectors to element
-///
-/// @param {string||list} $additionalSelectors
-///   List of additional selectors
-@mixin hover($additionalSelectors: null) {
+/**
+ * Add active, focus and hover pseudo selectors to element
+ * @param {string||list} $additionalSelectors
+ * List of additional selectors
+ *
+ * @param {boolean} $onlyNoTouch
+ * The hover style will only work when the user is using a tool device like a mouse or a trackpad.
+ * https://defensivecss.dev/tip/hover-media/
+ * https://developer.mozilla.org/fr/docs/Web/CSS/@media/hover
+ */
+@mixin hover($onlyNoTouch: null, $additionalSelectors: null) {
     $selectors: "&:hover", "&:active", "&:focus";
 
     @if ($additionalSelectors) {
@@ -16,7 +22,15 @@
         }
     }
 
-    #{$selectors} {
-        @content;
+    @if $onlyNoTouch {
+        @media (hover: hover) {
+            #{$selectors} {
+                @content;
+            }
+        }
+    } @else {
+        #{$selectors} {
+            @content;
+        }
     }
 }
diff --git a/src/scss/02-tools/_m-placeholder-media.scss b/src/scss/02-tools/_m-placeholder-media.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * Placeholder media
  */
@@ -36,5 +38,5 @@
 }
 
 @mixin placeholder-media-size($width, $height) {
-    padding-bottom: $height / $width * 100%;
+    padding-bottom: math.div($height, $width) * 100%;
 }
diff --git a/src/scss/02-tools/_m-rtl.scss b/src/scss/02-tools/_m-rtl.scss
@@ -0,0 +1,9 @@
+// Support for rtl text, explicit support for Arabic and Hebrew
+
+@mixin rtl {
+    *[dir="rtl"] &,
+    :root:lang(ar) &,
+    :root:lang(iw) & {
+        @content;
+    }
+}
diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss
@@ -50,10 +50,7 @@
         }
     }
 
-    // Support for rtl text, explicit support for Arabic and Hebrew
-    *[dir="rtl"] &,
-    :root:lang(ar) &,
-    :root:lang(iw) & {
+    @include rtl {
         background-position: left 10px top 50%, 0 0;
     }
 }
diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss
@@ -38,3 +38,4 @@
 @import "./m-background-static";
 @import "./m-invisible-scrollbar";
 @import "./m-not-acf";
+@import "./m-rtl";
diff --git a/src/scss/03-base/_reset.scss b/src/scss/03-base/_reset.scss
@@ -73,7 +73,6 @@ body {
     font-size: $font-size-base;
     font-weight: normal;
     color: $color-text;
-    text-align: left;
     background-color: $color-light;
 }
 
diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss
@@ -15,7 +15,7 @@
     // ----
     .wp-block.block-editor-default-block-appender > textarea {
         font-family: var(--global--font-secondary);
-        font-size: var($font-size-md);
+        font-size: $font-size-md;
     }
 
     // ----
diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss
@@ -5,7 +5,7 @@
     }
 
     figcaption {
-        font-size: var($font-size-xs);
-        color: var($color-grey-600);
+        font-size: $font-size-xs;
+        color: $color-grey-600;
     }
 }
diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss
@@ -10,7 +10,7 @@
     &__inner {
         position: fixed;
         top: var(--wp-admin-bar-height);
-        z-index: 10000;
+        z-index: 10;
         width: 100%;
         background: var(--wp--preset--color--cyan-bluish-gray);
     }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ module.exports = {`
`31`	`31`	`new WebpackBar({`
`32`	`32`	`color: '#ffe600',`
`33`	`33`	`}),`
`34`		`- new DependencyExtractionWebpackPlugin({ injectPolyfill: true }),`
	`34`	`+ new DependencyExtractionWebpackPlugin(),`
`35`	`35`	`]`
`36`	`36`
`37`	`37`	`if (mode === 'production') {`