fix: better compatible with webpack v4/v5 (#17)

Author: JounQin

.changeset/spotty-turkeys-melt.md

@@ -0,0 +1,5 @@
+---
+"react-style-loader": patch
+---
+
+fix: better compatible with webpack v4/v5

.codesandbox/ci.json

@@ -1,5 +1,6 @@
 {
   "node": "18",
   "buildCommand": false,
+  "installCommand": "codesandbox:install",
   "sandboxes": []
 }

.gitignore

@@ -2,4 +2,6 @@
 coverage
 node_modules
 .*cache
+/.yarn/*
+!/.yarn/plugins
 !/.*.cjs

.nvmrc

@@ -0,0 +1 @@
+lts/*

.yarn/install-state.gz

@@ -1,9 +1,16 @@
+// @ts-check
+
 /*
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
   Modified by Evan You @yyx990803
 */
 
+/**
+ * @typedef {{manualInject?: boolean; shadowMode?: boolean; ssrId?: string}} LoaderOptions
+ * @typedef {import('webpack').LoaderContext<LoaderOptions>} LoaderContext
+ */
+
 const path = require('node:path')
 const qs = require('node:querystring')
 
@@ -13,28 +20,45 @@ const loaderUtils = require('loader-utils')
 // eslint-disable-next-line no-empty-function
 module.exports = function () {}
 
+/**
+ * @param {LoaderContext} loaderContext
+ * @param {string} request
+ * @returns {string} stringified request
+ */
+const stringifyRequest = (loaderContext, request) =>
+  loaderContext.utils
+    ? JSON.stringify(
+        loaderContext.utils.contextify(loaderContext.context, request),
+      )
+    : loaderUtils.stringifyRequest(loaderContext, request)
+
+/**
+ * @this {LoaderContext & {minimize?: boolean}}
+ * @param {string} remainingRequest
+ * @returns {string} transformed codes
+ */
 module.exports.pitch = function (remainingRequest) {
   const isServer = this.target === 'node'
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const addStylesClientPath = loaderUtils.stringifyRequest(
+  const addStylesClientPath = stringifyRequest(
     this,
     '!' + path.join(__dirname, 'lib/addStylesClient.js'),
   )
-  const addStylesServerPath = loaderUtils.stringifyRequest(
+  const addStylesServerPath = stringifyRequest(
     this,
     '!' + path.join(__dirname, 'lib/addStylesServer.js'),
   )
-  const addStylesShadowPath = loaderUtils.stringifyRequest(
+  const addStylesShadowPath = stringifyRequest(
     this,
     '!' + path.join(__dirname, 'lib/addStylesShadow.js'),
   )
 
-  const request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest)
+  const request = stringifyRequest(this, '!!' + remainingRequest)
   const relPath = path
     .relative(__dirname, this.resourcePath)
     .replaceAll('\\', '/')
   const id = JSON.stringify(hash(request + relPath))
-  const options = loaderUtils.getOptions(this) || {}
+  const options = this.getOptions?.() || loaderUtils.getOptions(this) || {}
 
   // direct css import from js --> direct, or manually call `styles.__inject__(ssrContext)` with `manualInject` option
   // css import from react file --> component lifecycle linked

index.cjs

@@ -16,27 +16,30 @@
     "lib"
   ],
   "scripts": {
+    "codesandbox:install": "yarn --ignore-engines",
     "lint": "eslint . --cache",
     "prepare": "simple-git-hooks",
     "release": "clean-pkg-json && changeset publish",
     "test": "node --experimental-vm-modules node_modules/.bin/jest"
   },
   "dependencies": {
     "hash-sum": "^2.0.0",
-    "loader-utils": "^3.2.1"
+    "loader-utils": "^2.0.4"
   },
   "devDependencies": {
     "@1stg/common-config": "^10.0.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^18.4.4",
+    "@types/loader-utils": "^2.0.6",
     "clean-pkg-json": "^1.2.0",
     "eslint": "^8.56.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.1.1",
-    "simple-git-hooks": "^2.9.0"
+    "simple-git-hooks": "^2.9.0",
+    "webpack": "^5.89.0"
   },
   "resolutions": {
     "prettier": "^3.1.1"

package.json

@@ -1,5 +1,5 @@
-import addStylesClient from '../lib/addStylesClient'
-import addStylesServer from '../lib/addStylesServer'
+import addStylesClient from '../lib/addStylesClient.js'
+import addStylesServer from '../lib/addStylesServer.js'
 
 const mockedList = [
   [1, 'h1 { color: red; }', ''],