Skip to content

Commit

Permalink
refactor!: the styleTagTransform option can only be the path to the…
Browse files Browse the repository at this point in the history
… module
  • Loading branch information
alexander-akait committed Apr 8, 2024
1 parent 7ec1120 commit 11b8639
Show file tree
Hide file tree
Showing 8 changed files with 25 additions and 147 deletions.
49 changes: 3 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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**

Expand All @@ -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",
Expand Down
23 changes: 2 additions & 21 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) : "";
Expand Down Expand Up @@ -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) : ""}
${
Expand Down Expand Up @@ -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) : ""}
${
Expand Down
30 changes: 10 additions & 20 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand All @@ -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) {
Expand Down
26 changes: 0 additions & 26 deletions test/__snapshots__/styleTagTransform-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/styleTagTransformAdditionalStyles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function styleTagTransform(css, style, options) {
style.innerHTML = `${css}\n${options.additionalStyles}\n`;
}

module.exports = styleTagTransform;
7 changes: 3 additions & 4 deletions test/lazyStyleTag-options.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
30 changes: 1 addition & 29 deletions test/styleTagTransform-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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, {
Expand Down
2 changes: 1 addition & 1 deletion test/validate-options.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 11b8639

Please sign in to comment.