Skip to content

Commit 11b8639

Browse files
alexander-akaitalexander-akait
committed
refactor!: the styleTagTransform option can only be the path to the module
1 parent 7ec1120 commit 11b8639

8 files changed

+25
-147
lines changed

‎README.md

+3-46
Original file line numberDiff line numberDiff line change
@@ -669,13 +669,7 @@ export default CustomSquare;
669669
Type:
670670

671671
```ts
672-
type styleTagTransform =
673-
| string
674-
| ((
675-
css: string,
676-
styleElement: HTMLStyleElement,
677-
options: Record<string, any>,
678-
) => void);
672+
type styleTagTransform = string;
679673
```
680674

681675
Default: `undefined`
@@ -688,41 +682,9 @@ Allows to setup absolute path to custom function that allows to override default
688682
>
689683
> 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
690684
691-
**webpack.config.js**
692-
693-
```js
694-
module.exports = {
695-
module: {
696-
rules: [
697-
{
698-
test: /\.css$/i,
699-
use: [
700-
{
701-
loader: "style-loader",
702-
options: {
703-
injectType: "styleTag",
704-
styleTagTransform: require.resolve("module-path"),
705-
},
706-
},
707-
"css-loader",
708-
],
709-
},
710-
],
711-
},
712-
};
713-
```
714-
715-
#### `function`
716-
717-
Transform tag and css when insert 'style' tag into the DOM.
718-
719-
> **Warning**
720-
>
721-
> 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
722-
723685
> **Warning**
724686
>
725-
> 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
687+
> 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
726688
727689
**webpack.config.js**
728690

@@ -737,12 +699,7 @@ module.exports = {
737699
loader: "style-loader",
738700
options: {
739701
injectType: "styleTag",
740-
styleTagTransform: function (css, style) {
741-
// Do something ...
742-
style.innerHTML = `${css}.modify{}\n`;
743-
744-
document.head.appendChild(style);
745-
},
702+
styleTagTransform: require.resolve("style-tag-transform-code"),
746703
},
747704
},
748705
"css-loader",

‎src/index.js

+2-21
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,6 @@ loader.pitch = function pitch(request) {
8080
? "module-path"
8181
: "selector";
8282

83-
const styleTagTransformType =
84-
typeof options.styleTagTransform === "function"
85-
? "function"
86-
: options.styleTagTransform && path.isAbsolute(options.styleTagTransform)
87-
? "module-path"
88-
: "default";
89-
9083
switch (injectType) {
9184
case "linkTag": {
9285
const hmrCode = this.hot ? getLinkHmrCode(esModule, this, request) : "";
@@ -131,13 +124,7 @@ ${esModule ? "export default {}" : ""}`;
131124
${getImportInsertBySelectorCode(esModule, this, insertType, options)}
132125
${getSetAttributesCode(esModule, this, options)}
133126
${getImportInsertStyleElementCode(esModule, this)}
134-
${getStyleTagTransformFnCode(
135-
esModule,
136-
this,
137-
options,
138-
isSingleton,
139-
styleTagTransformType,
140-
)}
127+
${getStyleTagTransformFnCode(esModule, this, options, isSingleton)}
141128
${getImportStyleContentCode(esModule, this, request)}
142129
${isAuto ? getImportIsOldIECode(esModule, this) : ""}
143130
${
@@ -200,13 +187,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
200187
${getImportInsertBySelectorCode(esModule, this, insertType, options)}
201188
${getSetAttributesCode(esModule, this, options)}
202189
${getImportInsertStyleElementCode(esModule, this)}
203-
${getStyleTagTransformFnCode(
204-
esModule,
205-
this,
206-
options,
207-
isSingleton,
208-
styleTagTransformType,
209-
)}
190+
${getStyleTagTransformFnCode(esModule, this, options, isSingleton)}
210191
${getImportStyleContentCode(esModule, this, request)}
211192
${isAuto ? getImportIsOldIECode(esModule, this) : ""}
212193
${

‎src/utils.js

+10-20
Original file line numberDiff line numberDiff line change
@@ -253,24 +253,12 @@ function getStyleTagTransformFnCode(
253253
loaderContext,
254254
options,
255255
isSingleton,
256-
styleTagTransformType,
257256
) {
258257
if (isSingleton) {
259258
return "";
260259
}
261260

262-
if (styleTagTransformType === "default") {
263-
const modulePath = stringifyRequest(
264-
loaderContext,
265-
`!${path.join(__dirname, "runtime/styleTagTransform.js")}`,
266-
);
267-
268-
return esModule
269-
? `import styleTagTransformFn from ${modulePath};`
270-
: `var styleTagTransformFn = require(${modulePath});`;
271-
}
272-
273-
if (styleTagTransformType === "module-path") {
261+
if (typeof options.styleTagTransform !== "undefined") {
274262
const modulePath = stringifyRequest(
275263
loaderContext,
276264
`${options.styleTagTransform}`,
@@ -283,16 +271,18 @@ function getStyleTagTransformFnCode(
283271
: `var styleTagTransformFn = require(${modulePath});`;
284272
}
285273

286-
return "";
274+
const modulePath = stringifyRequest(
275+
loaderContext,
276+
`!${path.join(__dirname, "runtime/styleTagTransform.js")}`,
277+
);
278+
279+
return esModule
280+
? `import styleTagTransformFn from ${modulePath};`
281+
: `var styleTagTransformFn = require(${modulePath});`;
287282
}
288283

289284
function getStyleTagTransformFn(options, isSingleton) {
290-
// Todo remove "function" type for styleTagTransform option in next major release, because code duplication occurs. Leave require.resolve()
291-
return isSingleton
292-
? ""
293-
: typeof options.styleTagTransform === "function"
294-
? `options.styleTagTransform = ${options.styleTagTransform.toString()}`
295-
: `options.styleTagTransform = styleTagTransformFn`;
285+
return isSingleton ? "" : `options.styleTagTransform = styleTagTransformFn`;
296286
}
297287

298288
function getExportStyleCode(esModule, loaderContext, request) {

‎test/__snapshots__/styleTagTransform-option.test.js.snap

-26
Original file line numberDiff line numberDiff line change
@@ -26,32 +26,6 @@ exports[`"styleTagTransform" option should "styleTagTransform" function path add
2626

2727
exports[`"styleTagTransform" option should "styleTagTransform" function path added to buildDependencies when injectType lazyStyleTag: warnings 1`] = `[]`;
2828

29-
exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: DOM 1`] = `
30-
"<!DOCTYPE html><html><head>
31-
<title>style-loader test</title>
32-
<style id="existing-style">.existing { color: yellow }</style>
33-
<style>body {
34-
color: red;
35-
}
36-
.modify{}
37-
</style><style>h1 {
38-
color: blue;
39-
}
40-
.modify{}
41-
</style></head>
42-
<body>
43-
<h1>Body</h1>
44-
<div class="target"></div>
45-
<iframe class="iframeTarget"></iframe>
46-
47-
48-
</body></html>"
49-
`;
50-
51-
exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: errors 1`] = `[]`;
52-
53-
exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag: warnings 1`] = `[]`;
54-
5529
exports[`"styleTagTransform" option should work when the "styleTagTransform" option is not specify: DOM 1`] = `
5630
"<!DOCTYPE html><html><head>
5731
<title>style-loader test</title>

‎test/fixtures/styleTagTransformAdditionalStyles.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function styleTagTransform(css, style, options) {
2+
style.innerHTML = `${css}\n${options.additionalStyles}\n`;
3+
}
4+
5+
module.exports = styleTagTransform;

‎test/lazyStyleTag-options.test.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,9 @@ describe("lazyStyleTag options", () => {
5656
const entry = getEntryByInjectType("options.js", "lazyStyleTag");
5757
const compiler = getCompiler(entry, {
5858
injectType: "lazyStyleTag",
59-
styleTagTransform: (css, styleTag, options) => {
60-
// eslint-disable-next-line no-param-reassign
61-
styleTag.innerHTML = `${css}\n${options.additionalStyles}\n`;
62-
},
59+
styleTagTransform: require.resolve(
60+
"./fixtures/styleTagTransformAdditionalStyles",
61+
),
6362
});
6463
const stats = await compile(compiler);
6564

‎test/styleTagTransform-option.test.js

+1-29
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,7 @@ describe('"styleTagTransform" option', () => {
2929
const entry = getEntryByInjectType("simple.js", "styleTag");
3030
const compiler = getCompiler(entry, {
3131
injectType: "styleTag",
32-
// eslint-disable-next-line object-shorthand,func-names
33-
styleTagTransform: function (css, style) {
34-
// eslint-disable-next-line no-param-reassign
35-
style.innerHTML = `${css}.modify{}\n`;
36-
37-
document.head.appendChild(style);
38-
},
32+
styleTagTransform: require.resolve("./fixtures/styleTagTransform"),
3933
});
4034
const stats = await compile(compiler);
4135

@@ -62,28 +56,6 @@ describe('"styleTagTransform" option', () => {
6256
expect(getErrors(stats)).toMatchSnapshot("errors");
6357
});
6458

65-
it(`should work when the "styleTagTransform" option is not specify and injectType lazyStyleTag`, async () => {
66-
const entry = getEntryByInjectType("simple.js", "lazyStyleTag");
67-
const compiler = getCompiler(entry, {
68-
injectType: "lazyStyleTag",
69-
// eslint-disable-next-line object-shorthand,func-names
70-
styleTagTransform: function (css, style) {
71-
// eslint-disable-next-line no-param-reassign
72-
style.innerHTML = `${css}.modify{}\n`;
73-
74-
document.head.appendChild(style);
75-
},
76-
});
77-
const stats = await compile(compiler);
78-
79-
runInJsDom("main.bundle.js", compiler, stats, (dom) => {
80-
expect(dom.serialize()).toMatchSnapshot("DOM");
81-
});
82-
83-
expect(getWarnings(stats)).toMatchSnapshot("warnings");
84-
expect(getErrors(stats)).toMatchSnapshot("errors");
85-
});
86-
8759
it(`should work when the "styleTagTransform" option is path to module and injectType lazyStyleTag`, async () => {
8860
const entry = getEntryByInjectType("simple.js", "lazyStyleTag");
8961
const compiler = getCompiler(entry, {

‎test/validate-options.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe("validate options", () => {
2828
},
2929
styleTagTransform: {
3030
// eslint-disable-next-line func-names
31-
success: [function () {}, require.resolve("path")],
31+
success: [require.resolve("./fixtures/styleTagTransform")],
3232
failure: [true, []],
3333
},
3434
unknown: {

0 commit comments

Comments
 (0)