Try achieving css class rename some more

package-lock.json

@@ -3433,6 +3433,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.1.tgz",
@@ -6101,6 +6110,12 @@
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
       "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filename-reserved-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
@@ -12908,6 +12923,22 @@
         }
       }
     },
+    "vue-style-loader": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+      "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
+      "requires": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
+        }
+      }
+    },
     "vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -13003,6 +13034,7 @@
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },

package.json

@@ -43,6 +43,7 @@
     "mdi-vue": "^3.0.11",
     "typescript": "^4.4.4",
     "vue": "^3.2.21",
+    "vue-style-loader": "^4.1.3",
     "vuex": "^4.0.2",
     "vuex-webextensions": "^1.3.3",
     "webextension-polyfill-ts": "^0.24.0"

src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped module>
 .uw-ultrawidify-container-root {
   .alignment-box {
     aspect-ratio: 1;

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -250,11 +250,11 @@ export default {
 
 </style>
 
-<style lang="scss" src="../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
-<style lang="scss" src="../res-common/common.scss" scoped></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped module>
 .uw-ultrawidify-container-root {
   .b3 {
     width: 9rem;
@@ -270,5 +270,4 @@ export default {
     padding-top: 8px;
   }
 }
-
 </style>

vue.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  css: {
+    requireModuleExtension: false,
+
+    loaderOptions: {
+      css: {
+        // Note: the following config format is different between Vue CLI v4 and v3
+        // For Vue CLI v3 users, please refer to css-loader v1 documentations
+        // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
+        modules: {
+          localIdentName: '[name]-[hash]'
+        },
+        localsConvention: 'camelCaseOnly'
+      }
+    }
+  }
+}

webpack.config.js

@@ -49,17 +49,40 @@ const config = {
         exclude: /node_modules/,
       },
       {
-        test: /\.css$/,
+        test: /\.(sc|c)ss$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [
-      },
+          // MiniCssExtractPlugin.loader,
+          'vue-style-loader',
           {
-        test: /\.scss$/,
+            loader: 'css-loader',
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+            // modules: {
+            //   localIdentName: "[name]-[hash]"
+            // }
+            // options: {
+            //   modules: true,
+            //   // localIdentName: "🔶uw_[local]"
+            //   localIdentName: "[name]-[hash]"
+            //   // localIdentName: "uw_[local]"
+            // }
           },
-      {
+          'sass-loader'
-        test: /\.sass$/,
+        ],
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
       },
+      // {
+      //   test: /\.scss$/,
+      //   use: [
+      //     // MiniCssExtractPlugin.loader,
+      //     'css-loader',
+      //   //  {
+      //   //     loader: 'css-loader',
+      //   //     // options: {
+      //   //     //   modules: true,
+      //   //     //   localIdentName: "🔶uw_[local]"
+      //   //     // }
+      //   //   },
+      //     'sass-loader'
+      //   ],
+      // },
       {
         test: /\.(png|jpg|gif|svg|ico)$/,
         loader: 'file-loader',