Skip to content

feat: use template literal when it possible to prevent `Maximum call … #1525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 27, 2023
Merged

feat: use template literal when it possible to prevent `Maximum call … #1525

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
88bc11e
feat: use template literal when it possible to prevent `Maximum call …
alexander-akait May 27, 2023
b4d4fe8
test: revert
alexander-akait May 27, 2023
3aadcc0
test: more
alexander-akait May 27, 2023
3795ad4
test: more
alexander-akait May 27, 2023
1b55942
refactor: code
alexander-akait May 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: use template literal when it possible to prevent `Maximum call … 
…stack size exceeded`
  • Loading branch information
@alexander-akait
alexander-akait committed May 27, 2023
commit 88bc11e10aa610c44f509f3dad130d15a93df61c
3 changes: 2 additions & 1 deletion .cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"Brotli",
"Contex",
"vspace",
"commitlint"
"commitlint",
"eslintcache"
],

"ignorePaths": [
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ npm-debug.log*
/test/fixtures/modules/composes/composes-absolute.css
/test/fixtures/import/import-file-protocol.css
/test/fixtures/url/url-file-protocol.css
/test/fixtures/url/many-urls.css

.DS_Store
Thumbs.db
Expand Down
68 changes: 58 additions & 10 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,7 +1034,26 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
)}`;
}

let code = JSON.stringify(result.css);
let isTemplateLiteralSupported = false;

if (
// eslint-disable-next-line no-underscore-dangle
loaderContext._compilation &&
// eslint-disable-next-line no-underscore-dangle
loaderContext._compilation.options &&
// eslint-disable-next-line no-underscore-dangle
loaderContext._compilation.options.output &&
// eslint-disable-next-line no-underscore-dangle
loaderContext._compilation.options.output.environment &&
// eslint-disable-next-line no-underscore-dangle
loaderContext._compilation.options.output.environment.templateLiteral
) {
isTemplateLiteralSupported = true;
}

let code = isTemplateLiteralSupported
? convertToTemplateLiteral(result.css)
: JSON.stringify(result.css);

let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${
options.sourceMap
Expand Down Expand Up @@ -1067,12 +1086,21 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
if (localName) {
code = code.replace(new RegExp(replacementName, "g"), () =>
options.modules.namedExport
? `" + ${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}] + "`
? isTemplateLiteralSupported
? `\${ ${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}] }`
: `" + ${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}] + "`
: isTemplateLiteralSupported
? `\${${importName}.locals[${JSON.stringify(localName)}]}`
: `" + ${importName}.locals[${JSON.stringify(localName)}] + "`
);
} else {
Expand All @@ -1084,9 +1112,10 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : "";

beforeCode += `var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});\n`;
code = code.replace(
new RegExp(replacementName, "g"),
() => `" + ${replacementName} + "`
code = code.replace(new RegExp(replacementName, "g"), () =>
isTemplateLiteralSupported
? `\${${replacementName}}`
: `" + ${replacementName} + "`
);
}
}
Expand All @@ -1101,6 +1130,25 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`;
}

const SLASH = "\\".charCodeAt(0);
const BACKTICK = "`".charCodeAt(0);
const DOLLAR = "$".charCodeAt(0);

function convertToTemplateLiteral(str) {
let escapedString = "";

for (let i = 0; i < str.length; i++) {
const code = str.charCodeAt(i);

escapedString +=
code === SLASH || code === BACKTICK || code === DOLLAR
? `\\${str[i]}`
: str[i];
}

return `\`${escapedString}\``;
}

function dashesCamelCase(str) {
return str.replace(/-+(\w)/g, (match, firstLetter) =>
firstLetter.toUpperCase()
Expand Down
60 changes: 54 additions & 6 deletions test/__snapshots__/esModule-option.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.class {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
export default ___CSS_LOADER_EXPORT___;
"
Expand Down Expand Up @@ -60,7 +68,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.class {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___;
"
Expand Down Expand Up @@ -107,7 +123,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.class {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
___CSS_LOADER_EXPORT___.locals = {};
export default ___CSS_LOADER_EXPORT___;
Expand Down Expand Up @@ -155,7 +179,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.OZJqogC5EaF_wROug7zE {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.OZJqogC5EaF_wROug7zE {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
___CSS_LOADER_EXPORT___.locals = {
\\"class\\": \\"OZJqogC5EaF_wROug7zE\\"
Expand Down Expand Up @@ -205,7 +237,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.OZJqogC5EaF_wROug7zE {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.OZJqogC5EaF_wROug7zE {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
___CSS_LOADER_EXPORT___.locals = {
\\"class\\": \\"OZJqogC5EaF_wROug7zE\\"
Expand Down Expand Up @@ -255,7 +295,15 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\";

/* Comment */

.class {
color: red;
background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___});
}
\`, \\"\\"]);
// Exports
export default ___CSS_LOADER_EXPORT___;
"
Expand Down
Loading