From 11b8639ba546a04d070936a8043514753df0d5e9 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Mon, 8 Apr 2024 18:49:20 +0300 Subject: [PATCH] refactor!: the `styleTagTransform` option can only be the path to the module --- README.md | 49 ++----------------- src/index.js | 23 +-------- src/utils.js | 30 ++++-------- .../styleTagTransform-option.test.js.snap | 26 ---------- .../styleTagTransformAdditionalStyles.js | 5 ++ test/lazyStyleTag-options.test.js | 7 ++- test/styleTagTransform-option.test.js | 30 +----------- test/validate-options.test.js | 2 +- 8 files changed, 25 insertions(+), 147 deletions(-) create mode 100644 test/fixtures/styleTagTransformAdditionalStyles.js diff --git a/README.md b/README.md index 28ceda4f..79fb2999 100644 --- a/README.md +++ b/README.md @@ -669,13 +669,7 @@ export default CustomSquare; Type: ```ts -type styleTagTransform = - | string - | (( - css: string, - styleElement: HTMLStyleElement, - options: Record, - ) => 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 index c2dc46bd..da8a10e8 100644 --- 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 index 6b180571..7921439d 100644 --- 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 index 3eac13c2..b4afcfa7 100644 --- 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`] = ` -" - style-loader test - - - -

Body

-
- - - -" -`; - -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`] = ` " style-loader test diff --git a/test/fixtures/styleTagTransformAdditionalStyles.js b/test/fixtures/styleTagTransformAdditionalStyles.js new file mode 100644 index 00000000..bb3447d4 --- /dev/null +++ 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 index 5571052c..c0b1fafa 100644 --- 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 index 2474d0f5..b3256b6d 100644 --- 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 index 87f9d19f..c8a401c8 100644 --- 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: {