From 2be44d54aeba9f7be38fb5a93c79e90a958f086b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 21 Nov 2021 02:07:58 +0100 Subject: [PATCH] Try achieving css class rename some more --- package-lock.json | 32 ++++++++++++++ package.json | 1 + .../AlignmentOptionsControlComponent.vue | 2 +- src/csui/PlayerUiPanels/VideoSettings.vue | 9 ++-- vue.config.js | 17 ++++++++ webpack.config.js | 43 ++++++++++++++----- 6 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 vue.config.js diff --git a/package-lock.json b/package-lock.json index cb8d657..ec92f73 100644 --- a/package-lock.json +++ b/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" } }, diff --git a/package.json b/package.json index 9b6f95e..e20686a 100644 --- a/package.json +++ b/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" diff --git a/src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue b/src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue index ffc425f..21d2ad9 100644 --- a/src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue +++ b/src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue @@ -85,7 +85,7 @@ export default { } - - - - + + + - diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..3e5ea75 --- /dev/null +++ b/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' + } + } + } +} diff --git a/webpack.config.js b/webpack.config.js index b0c3b93..99f52fd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -49,17 +49,40 @@ const config = { exclude: /node_modules/, }, { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader'], - }, - { - test: /\.scss$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], - }, - { - test: /\.sass$/, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'], + test: /\.(sc|c)ss$/, + use: [ + // MiniCssExtractPlugin.loader, + 'vue-style-loader', + { + loader: 'css-loader', + // modules: { + // localIdentName: "[name]-[hash]" + // } + // options: { + // modules: true, + // // localIdentName: "🔶uw_[local]" + // localIdentName: "[name]-[hash]" + // // localIdentName: "uw_[local]" + // } + }, + 'sass-loader' + ], }, + // { + // 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',