refactor!: the styleTagTransform option can only be the path to the…

… module
webpack-contrib · Apr 8, 2024 · 17b2295 · 17b2295
1 parent 48c37d6
commit 17b2295
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -669,13 +669,7 @@ export default CustomSquare;
 Type:
 
 ```ts
-type styleTagTransform =
-  | string
-  | ((
-      css: string,
-      styleElement: HTMLStyleElement,
-      options: Record<string, any>,
-    ) => void);
+type styleTagTransform = string;
 ```
 
 Default: `undefined`
@@ -688,41 +682,9 @@ Allows to setup absolute path to custom function that allows to override default
 >
 > Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
 
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [
-          {
-            loader: "style-loader",
-            options: {
-              injectType: "styleTag",
-              styleTagTransform: require.resolve("module-path"),
-            },
-          },
-          "css-loader",
-        ],
-      },
-    ],
-  },
-};
-```
-
-#### `function`
-
-Transform tag and css when insert 'style' tag into the DOM.
-
-> **Warning**
->
-> Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
-
 > **Warning**
 >
-> Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
+> Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it depends what browsers you want to support
 
 **webpack.config.js**
 
@@ -737,12 +699,7 @@ module.exports = {
             loader: "style-loader",
             options: {
               injectType: "styleTag",
-              styleTagTransform: function (css, style) {
-                // Do something ...
-                style.innerHTML = `${css}.modify{}\n`;
-
-                document.head.appendChild(style);
-              },
+              styleTagTransform: require.resolve("style-tag-transform-code"),
             },
           },
           "css-loader",

diff --git a/src/index.js b/src/index.js
@@ -80,13 +80,6 @@ loader.pitch = function pitch(request) {
         ? "module-path"
         : "selector";
 
-  const styleTagTransformType =
-    typeof options.styleTagTransform === "function"
-      ? "function"
-      : options.styleTagTransform && path.isAbsolute(options.styleTagTransform)
-        ? "module-path"
-        : "default";
-
   switch (injectType) {
     case "linkTag": {
       const hmrCode = this.hot ? getLinkHmrCode(esModule, this, request) : "";
@@ -131,13 +124,7 @@ ${esModule ? "export default {}" : ""}`;
       ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
-      ${getStyleTagTransformFnCode(
-        esModule,
-        this,
-        options,
-        isSingleton,
-        styleTagTransformType,
-      )}
+      ${getStyleTagTransformFnCode(esModule, this, options, isSingleton)}
       ${getImportStyleContentCode(esModule, this, request)}
       ${isAuto ? getImportIsOldIECode(esModule, this) : ""}
       ${
@@ -200,13 +187,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
       ${getImportInsertBySelectorCode(esModule, this, insertType, options)}
       ${getSetAttributesCode(esModule, this, options)}
       ${getImportInsertStyleElementCode(esModule, this)}
-      ${getStyleTagTransformFnCode(
-        esModule,
-        this,
-        options,
-        isSingleton,
-        styleTagTransformType,
-      )}
+      ${getStyleTagTransformFnCode(esModule, this, options, isSingleton)}
       ${getImportStyleContentCode(esModule, this, request)}
       ${isAuto ? getImportIsOldIECode(esModule, this) : ""}
       ${

diff --git a/src/utils.js b/src/utils.js
@@ -253,24 +253,12 @@ function getStyleTagTransformFnCode(
   loaderContext,
   options,
   isSingleton,
-  styleTagTransformType,
 ) {
   if (isSingleton) {
     return "";
   }
 
-  if (styleTagTransformType === "default") {
-    const modulePath = stringifyRequest(
-      loaderContext,
-      `!${path.join(__dirname, "runtime/styleTagTransform.js")}`,
-    );
-
-    return esModule
-      ? `import styleTagTransformFn from ${modulePath};`
-      : `var styleTagTransformFn = require(${modulePath});`;
-  }
-
-  if (styleTagTransformType === "module-path") {
+  if (typeof options.styleTagTransform !== "undefined") {
     const modulePath = stringifyRequest(
       loaderContext,
       `${options.styleTagTransform}`,
@@ -283,16 +271,18 @@ function getStyleTagTransformFnCode(
       : `var styleTagTransformFn = require(${modulePath});`;
   }
 
-  return "";
+  const modulePath = stringifyRequest(
+    loaderContext,
+    `!${path.join(__dirname, "runtime/styleTagTransform.js")}`,
+  );
+
+  return esModule
+    ? `import styleTagTransformFn from ${modulePath};`
+    : `var styleTagTransformFn = require(${modulePath});`;
 }
 
 function getStyleTagTransformFn(options, isSingleton) {
-  // Todo remove "function" type for styleTagTransform option in next major release, because code duplication occurs. Leave require.resolve()
-  return isSingleton
-    ? ""
-    : typeof options.styleTagTransform === "function"
-      ? `options.styleTagTransform = ${options.styleTagTransform.toString()}`
-      : `options.styleTagTransform = styleTagTransformFn`;
+  return isSingleton ? "" : `options.styleTagTransform = styleTagTransformFn`;
 }
 
 function getExportStyleCode(esModule, loaderContext, request) {

diff --git a/test/__snapshots__/styleTagTransform-option.test.js.snap b/test/__snapshots__/styleTagTransform-option.test.js.snap
@@ -26,32 +26,6 @@ exports[`"styleTagTransform" option should "styleTagTransform" function path add
 
 exports[`"styleTagTransform" option should "styleTagTransform" function path added to buildDependencies when injectType lazyStyleTag: warnings 1`] = `[]`;
 
-exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id="existing-style">.existing { color: yellow }</style>
-<style>body {
-  color: red;
-}
-.modify{}
-</style><style>h1 {
-  color: blue;
-}
-.modify{}
-</style></head>
-<body>
-  <h1>Body</h1>
-  <div class="target"></div>
-  <iframe class="iframeTarget"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: errors 1`] = `[]`;
-
-exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: warnings 1`] = `[]`;
-
 exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify: DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>

diff --git a/test/fixtures/styleTagTransformAdditionalStyles.js b/test/fixtures/styleTagTransformAdditionalStyles.js
@@ -0,0 +1,5 @@
+function styleTagTransform(css, style, options) {
+  style.innerHTML = `${css}\n${options.additionalStyles}\n`;
+}
+
+module.exports = styleTagTransform;
diff --git a/test/lazyStyleTag-options.test.js b/test/lazyStyleTag-options.test.js
@@ -56,10 +56,9 @@ describe("lazyStyleTag options", () => {
     const entry = getEntryByInjectType("options.js", "lazyStyleTag");
     const compiler = getCompiler(entry, {
       injectType: "lazyStyleTag",
-      styleTagTransform: (css, styleTag, options) => {
-        // eslint-disable-next-line no-param-reassign
-        styleTag.innerHTML = `${css}\n${options.additionalStyles}\n`;
-      },
+      styleTagTransform: require.resolve(
+        "./fixtures/styleTagTransformAdditionalStyles",
+      ),
     });
     const stats = await compile(compiler);
 

diff --git a/test/styleTagTransform-option.test.js b/test/styleTagTransform-option.test.js
@@ -29,13 +29,7 @@ describe('"styleTagTransform" option', () => {
     const entry = getEntryByInjectType("simple.js", "styleTag");
     const compiler = getCompiler(entry, {
       injectType: "styleTag",
-      // eslint-disable-next-line object-shorthand,func-names
-      styleTagTransform: function (css, style) {
-        // eslint-disable-next-line no-param-reassign
-        style.innerHTML = `${css}.modify{}\n`;
-
-        document.head.appendChild(style);
-      },
+      styleTagTransform: require.resolve("./fixtures/styleTagTransform"),
     });
     const stats = await compile(compiler);
 
@@ -62,28 +56,6 @@ describe('"styleTagTransform" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  it(`should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag`, async () => {
-    const entry = getEntryByInjectType("simple.js", "lazyStyleTag");
-    const compiler = getCompiler(entry, {
-      injectType: "lazyStyleTag",
-      // eslint-disable-next-line object-shorthand,func-names
-      styleTagTransform: function (css, style) {
-        // eslint-disable-next-line no-param-reassign
-        style.innerHTML = `${css}.modify{}\n`;
-
-        document.head.appendChild(style);
-      },
-    });
-    const stats = await compile(compiler);
-
-    runInJsDom("main.bundle.js", compiler, stats, (dom) => {
-      expect(dom.serialize()).toMatchSnapshot("DOM");
-    });
-
-    expect(getWarnings(stats)).toMatchSnapshot("warnings");
-    expect(getErrors(stats)).toMatchSnapshot("errors");
-  });
-
   it(`should work when the "styleTagTransform" option is path to module and injectType lazyStyleTag`, async () => {
     const entry = getEntryByInjectType("simple.js", "lazyStyleTag");
     const compiler = getCompiler(entry, {

diff --git a/test/validate-options.test.js b/test/validate-options.test.js
@@ -28,7 +28,7 @@ describe("validate options", () => {
     },
     styleTagTransform: {
       // eslint-disable-next-line func-names
-      success: [function () {}, require.resolve("path")],
+      success: [require.resolve("./fixtures/styleTagTransform")],
       failure: [true, []],
     },
     unknown: {