fix: missing style-loader dependency when enable injectStyles

packages/compat/webpack/package.json

@@ -38,7 +38,6 @@
     "html-webpack-plugin": "npm:html-rspack-plugin@5.5.7",
     "mini-css-extract-plugin": "2.7.6",
     "postcss": "8.4.31",
-    "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "webpack": "^5.89.0",

packages/compat/webpack/src/plugins/css.ts

@@ -78,7 +78,7 @@ export async function applyBaseCSSRule({
 
       rule
         .use(CHAIN_ID.USE.STYLE)
-        .loader(require.resolve('style-loader'))
+        .loader(getSharedPkgCompiledPath('style-loader'))
         .options(styleLoaderOptions)
         .end();
     }

packages/core/src/provider/plugins/css.ts

@@ -69,7 +69,7 @@ export async function applyBaseCSSRule({
 
       rule
         .use(CHAIN_ID.USE.STYLE)
-        .loader(require.resolve('style-loader'))
+        .loader(getSharedPkgCompiledPath('style-loader'))
         .options(styleLoaderOptions)
         .end();
 

packages/core/tests/rspack-provider/plugins/__snapshots__/css.test.ts.snap

@@ -391,7 +391,7 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj
         "test": /\\\\\\.css\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },
@@ -576,7 +576,7 @@ exports[`plugin-less > should add less-loader and css-loader when injectStyles 1
         "test": /\\\\\\.less\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },
@@ -1019,7 +1019,7 @@ exports[`plugin-sass > should add sass-loader and css-loader when injectStyles 1
         "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },

packages/shared/compiled/style-loader/index.d.ts

@@ -0,0 +1 @@
+export = any;

packages/shared/compiled/style-loader/license

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/shared/compiled/style-loader/package.json

@@ -0,0 +1 @@
+{"name":"style-loader","author":"Tobias Koppers @sokra","version":"3.3.3","funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"license":"MIT","types":"index.d.ts","type":"commonjs"}

packages/shared/compiled/style-loader/runtime/injectStylesIntoLinkTag.js

@@ -0,0 +1,29 @@
+"use strict";
+
+module.exports = function (url, options) {
+  if (typeof document === "undefined") {
+    return function () {};
+  }
+  options = options || {};
+  options.attributes = typeof options.attributes === "object" ? options.attributes : {};
+  if (typeof options.attributes.nonce === "undefined") {
+    var nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+    if (nonce) {
+      options.attributes.nonce = nonce;
+    }
+  }
+  var linkElement = document.createElement("link");
+  linkElement.rel = "stylesheet";
+  linkElement.href = url;
+  Object.keys(options.attributes).forEach(function (key) {
+    linkElement.setAttribute(key, options.attributes[key]);
+  });
+  options.insert(linkElement);
+  return function (newUrl) {
+    if (typeof newUrl === "string") {
+      linkElement.href = newUrl;
+    } else {
+      linkElement.parentNode.removeChild(linkElement);
+    }
+  };
+};