From b783943f6148700dc8227d63cf6824aee955a8e9 Mon Sep 17 00:00:00 2001
From: GeorgianStan <georgian.stan8@gmail.com>
Date: Sat, 10 Jun 2023 07:50:07 +0300
Subject: [PATCH] chore: remove 'style-loader' and use 'adoptedStyleSheets'

Remove 'style-loader' because of the issued mentioned here,
https://github.com/webpack-contrib/style-loader/issues/565, and only use
'css-loader'.
---
 package-lock.json      | 24 ------------------------
 package.json           |  1 -
 src/@types/global.d.ts |  2 +-
 src/index.ts           |  4 ++--
 webpack.config.js      | 10 ++--------
 5 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23e4b70..af53f9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,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",
@@ -10201,22 +10200,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/style-loader": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
-      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -20508,13 +20491,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
-    "style-loader": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
-      "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
-      "dev": true,
-      "requires": {}
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 59d01ae..53b1fbf 100644
--- a/package.json
+++ b/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",
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 7a53099..e2926ed 100644
--- a/src/@types/global.d.ts
+++ b/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;
 }
diff --git a/src/index.ts b/src/index.ts
index 1cd2c9b..571c2d9 100644
--- a/src/index.ts
+++ b/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()));
diff --git a/webpack.config.js b/webpack.config.js
index c19ce23..8a01918 100644
--- a/webpack.config.js
+++ b/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',
         ],
       },