migrated to lightningcss

.webpack/config.shared.js

@@ -1,3 +1,9 @@
+import path from "node:path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.resolve(path.dirname(__filename));
+
 export default {
   resolve: {
     extensions: [".js"],
@@ -7,11 +13,17 @@ export default {
     maxEntrypointSize: 2000 * 10 ** 3,
     maxAssetSize: 2000 * 10 ** 3,
   },
+  resolveLoader: {
+    alias: {
+      "lightning-loader": path.resolve(__dirname, "lightning-loader.js"),
+    },
+  },
   module: {
     rules: [
       {
         test: /\.(css|scss|sass)$/i,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        // use: ["style-loader", "css-loader", "sass-loader"],
+        use: ["lightning-loader"],
       },
     ],
   },

.webpack/lightning-loader.js

@@ -0,0 +1,31 @@
+import path from "node:path";
+import * as sass from "sass";
+
+import browserslist from "browserslist";
+import { browserslistToTargets, bundle, transform } from "lightningcss";
+
+// as style-loader + css-loader + sass-loader, but smaller and faster (includes auto minification)
+export default function (content, map) {
+  const callback = this.async();
+  const defaultOptions = {
+    minify: true,
+    sourceMap: false,
+    cssModules: false,
+    projectRoot: path.join(process.cwd(), "dist"),
+    filename: this.resourcePath,
+    targets: browserslistToTargets(browserslist("defaults")),
+  };
+
+  let code = "";
+  if (/^.*\.css(?!\.module\.css)$/.test(this.resourcePath)) {
+    code = bundle(defaultOptions).code;
+  } else if (/^.*\.(sc|sa)ss$/.test(this.resourcePath)) {
+    const { css: sassCode } = sass.compile(this.resourcePath);
+    code = transform({
+      code: Buffer.from(sassCode),
+      ...defaultOptions,
+    }).code;
+  }
+
+  callback(null, `GM_addStyle(${JSON.stringify(code.toString())})`, map);
+}

changelog.md

@@ -4,6 +4,10 @@
 <!-- #600 aniboom (referer + useragent, mpd), sibnet (referer) "*://video.sibnet.ru/*", -->
 <!-- Фикс vk mobile -->
 
+# 1.6.x
+
+- Изменен загрузчик стилей при сборке расширения, благодаря этому скорость сборки стала немного быстрее, а итоговый размер кода, отвечающего за стили, уменьшен в ~1.65 раза
+
 # 1.6.1
 
 - Теперь, после инициализации кнопка скрывается, а не ждет пока вы куда-нибудь нажмете/наведетесь на видео

package.json

@@ -16,23 +16,21 @@
     "voice-over-translation"
   ],
   "devDependencies": {
+    "browserslist": "^4.23.3",
     "bun-types": "^1.1.20",
-    "css-loader": "^7.1.2",
     "eslint": "^9.7.0",
     "eslint-plugin-github": "^5.0.1",
     "eslint-plugin-oxlint": "^0.5.0",
     "eslint-plugin-sonarjs": "^1.0.4",
     "eslint-webpack-plugin": "^4.2.0",
     "husky": "^9.1.1",
+    "lightningcss": "^1.26.0",
     "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.2",
     "oxlint": "0.7.0",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "sass": "^1.77.8",
-    "sass-loader": "16.0.0",
-    "style-loader": "^4.0.0",
-    "tslib": "^2.6.3",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",