chore: remove 'style-loader' and use 'adoptedStyleSheets'

Remove 'style-loader' because of the issued mentioned here,
webpack-contrib/style-loader#565, and only use
'css-loader'.

package.json

@@ -49,7 +49,6 @@
     "prettier": "^2.8.8",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.0",
-    "style-loader": "^3.3.3",
     "ts-loader": "^9.4.3",
     "typescript": "^5.0.4",
     "webpack": "^5.83.1",

src/@types/global.d.ts

@@ -1,4 +1,4 @@
 declare module '*.scss' {
-  const content: { use: (options: unknown) => void; unuse: () => void };
+  const content: CSSStyleSheet;
   export = content;
 }

src/index.ts

@@ -1,4 +1,4 @@
-import style from './index.scss';
+import sheet from './index.scss';
 
 const TOKENS = new Map<string, string>([
   ['optionAttr', 'vanilla-context-menu-option'],
@@ -89,7 +89,7 @@ class VanillaContextMenu extends HTMLElement {
     this.#menuTrigger = this.parentElement as HTMLElement;
 
     // Append the style tag using the style-loader's configuration defined in webpack.config.js.
-    style.use({ target: this.#shadow });
+    this.#shadow.adoptedStyleSheets = [sheet];
 
     // Set an unique id on this element.
     this.setAttribute('id', (this.#id = crypto.randomUUID()));

webpack.config.js

@@ -35,17 +35,11 @@ const config = {
         test: /\.s[ac]ss$/i,
         use: [
           {
-            loader: 'style-loader',
+            loader: 'css-loader',
             options: {
-              injectType: 'lazyStyleTag',
-              insert: function insertIntoTarget(element, options) {
-                var parent = options.target || document.head;
-
-                parent.appendChild(element);
-              },
+              exportType: 'css-style-sheet',
             },
           },
-          'css-loader',
           'sass-loader',
         ],
       },