From 161633d1d96b7d164a6b0fe1531628888d423324 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:58:59 +0100
Subject: [PATCH] Include swiper version in CSS file name, for cache busting
 (#4685)

---
 _scripts/webpack.renderer.config.js                        | 7 +++++--
 _scripts/webpack.web.config.js                             | 5 ++++-
 .../components/ft-community-post/ft-community-post.js      | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js
index 385b6e29a..5cb371e8a 100644
--- a/_scripts/webpack.renderer.config.js
+++ b/_scripts/webpack.renderer.config.js
@@ -11,6 +11,8 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
+const { version: swiperVersion } = JSON.parse(readFileSync(path.join(__dirname, '../node_modules/swiper/package.json')))
+
 const processLocalesPlugin = new ProcessLocalesPlugin({
   compress: !isDevMode,
   inputDir: path.join(__dirname, '../static/locales'),
@@ -118,7 +120,8 @@ const config = {
       'process.env.IS_ELECTRON': true,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames),
-      'process.env.GEOLOCATION_NAMES': JSON.stringify(readdirSync(path.join(__dirname, '..', 'static', 'geolocations')).map(filename => filename.replace('.json', '')))
+      'process.env.GEOLOCATION_NAMES': JSON.stringify(readdirSync(path.join(__dirname, '..', 'static', 'geolocations')).map(filename => filename.replace('.json', ''))),
+      'process.env.SWIPER_VERSION': `'${swiperVersion}'`
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
@@ -137,7 +140,7 @@ const config = {
       patterns: [
         {
           from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
-          to: 'swiper.css',
+          to: `swiper-${swiperVersion}.css`,
           context: path.join(__dirname, '../node_modules/swiper/modules'),
           transformAll: (assets) => {
             return Buffer.concat(assets.map(asset => asset.data))
diff --git a/_scripts/webpack.web.config.js b/_scripts/webpack.web.config.js
index 9dd0e20f1..5113f06a7 100644
--- a/_scripts/webpack.web.config.js
+++ b/_scripts/webpack.web.config.js
@@ -11,6 +11,8 @@ const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
+const { version: swiperVersion } = JSON.parse(fs.readFileSync(path.join(__dirname, '../node_modules/swiper/package.json')))
+
 const config = {
   name: 'web',
   mode: process.env.NODE_ENV,
@@ -114,6 +116,7 @@ const config = {
     new webpack.DefinePlugin({
       'process.env.IS_ELECTRON': false,
       'process.env.IS_ELECTRON_MAIN': false,
+      'process.env.SWIPER_VERSION': `'${swiperVersion}'`,
 
       // video.js' vhs-utils supports both atob() in web browsers and Buffer in node
       // As the FreeTube web build only runs in web browsers, we can override their check for atob() here: https://github.com/videojs/vhs-utils/blob/main/src/decode-b64-to-uint8-array.js#L3
@@ -145,7 +148,7 @@ const config = {
       patterns: [
         {
           from: path.join(__dirname, '../node_modules/swiper/modules/{a11y,navigation,pagination}-element.css').replaceAll('\\', '/'),
-          to: 'swiper.css',
+          to: `swiper-${swiperVersion}.css`,
           context: path.join(__dirname, '../node_modules/swiper/modules'),
           transformAll: (assets) => {
             return Buffer.concat(assets.map(asset => asset.data))
diff --git a/src/renderer/components/ft-community-post/ft-community-post.js b/src/renderer/components/ft-community-post/ft-community-post.js
index 350eccc10..b8d4ace5c 100644
--- a/src/renderer/components/ft-community-post/ft-community-post.js
+++ b/src/renderer/components/ft-community-post/ft-community-post.js
@@ -73,7 +73,7 @@ export default defineComponent({
         injectStylesUrls: [
           // This file is created with the copy webpack plugin in the web and renderer webpack configs.
           // If you add more modules, please remember to add their CSS files to the list in webpack config files.
-          createWebURL('/swiper.css')
+          createWebURL(`/swiper-${process.env.SWIPER_VERSION}.css`)
         ],
 
         a11y: true,