Skip to content

Commit

Permalink
test: more
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed May 27, 2023
1 parent 3aadcc0 commit 3795ad4
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 64 deletions.
3 changes: 2 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,8 @@ export default async function loader(content, map, meta) {
exports,
replacements,
needToUseIcssPlugin,
options
options,
this
);

callback(null, `${importCode}${moduleCode}${exportCode}`);
Expand Down
71 changes: 57 additions & 14 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1155,9 +1155,32 @@ function dashesCamelCase(str) {
);
}

function getExportCode(exports, replacements, icssPluginUsed, options) {
function getExportCode(
exports,
replacements,
icssPluginUsed,
options,
loaderContext
) {
let code = "// Exports\n";

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;
}

if (icssPluginUsed) {
let localsCode = "";

Expand All @@ -1168,13 +1191,21 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {

for (const name of normalizedNames) {
if (options.modules.namedExport) {
localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
localsCode += `export var ${name} = ${
isTemplateLiteralSupported
? convertToTemplateLiteral(value)
: JSON.stringify(value)
};\n`;
} else {
if (localsCode) {
localsCode += `,\n`;
}

localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
localsCode += `\t${JSON.stringify(name)}: ${
isTemplateLiteralSupported
? convertToTemplateLiteral(value)
: JSON.stringify(value)
}`;
}
}
};
Expand All @@ -1196,23 +1227,35 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
new RegExp(replacementName, "g"),
() => {
if (options.modules.namedExport) {
return `" + ${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}] + "`;
return isTemplateLiteralSupported
? `\${${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}]}`
: `" + ${importName}_NAMED___[${JSON.stringify(
getValidLocalName(
localName,
options.modules.exportLocalsConvention
)
)}] + "`;
} else if (options.modules.exportOnlyLocals) {
return `" + ${importName}[${JSON.stringify(localName)}] + "`;
return isTemplateLiteralSupported
? `\${${importName}[${JSON.stringify(localName)}]}`
: `" + ${importName}[${JSON.stringify(localName)}] + "`;
}

return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
return isTemplateLiteralSupported
? `\${${importName}.locals[${JSON.stringify(localName)}]}`
: `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
}
);
} else {
localsCode = localsCode.replace(
new RegExp(replacementName, "g"),
() => `" + ${replacementName} + "`
localsCode = localsCode.replace(new RegExp(replacementName, "g"), () =>
isTemplateLiteralSupported
? `\${${replacementName}}`
: `" + ${replacementName} + "`
);
}
}
Expand Down
118 changes: 69 additions & 49 deletions test/__snapshots__/modules-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6556,8 +6556,8 @@ body {
}
\`, \\"\\"]);
// Exports
export var vUrl = \\"url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\")\\";
export var vUrlOther = \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"] + \\"\\";
export var vUrl = \`url(\${___CSS_LOADER_URL_REPLACEMENT_0___})\`;
export var vUrlOther = \`\${___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"]}\`;
export default ___CSS_LOADER_EXPORT___;
"
`;
Expand Down Expand Up @@ -17358,53 +17358,53 @@ a {
\`, \\"\\"]);
// Exports
___CSS_LOADER_EXPORT___.locals = {
\\"v-def\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\"\\",
\\"v-other\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\"\\",
\\"s-white\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"] + \\"\\",
\\"m-small\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"] + \\"\\",
\\"v-something\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"] + \\"\\",
\\"v-foo\\": \\"blue\\",
\\"v-bar\\": \\"block\\",
\\"v-primary\\": \\"#BF4040\\",
\\"s-black\\": \\"black-selector\\",
\\"m-large\\": \\"(min-width: 960px)\\",
\\"v-ident\\": \\"validIdent\\",
\\"v-pre-defined-ident\\": \\"left\\",
\\"v-string\\": \\"'content'\\",
\\"v-string-1\\": \\"''\\",
\\"v-url\\": \\"url(https://www.exammple.com/images/my-background.png)\\",
\\"v-url-1\\": \\"url('https://www.exammple.com/images/my-background.png')\\",
\\"v-url-2\\": \\"url(\\\\\\"https://www.exammple.com/images/my-background.png\\\\\\")\\",
\\"v-integer\\": \\"100\\",
\\"v-integer-1\\": \\"-100\\",
\\"v-integer-2\\": \\"+100\\",
\\"v-number\\": \\".60\\",
\\"v-number-1\\": \\"-456.8\\",
\\"v-number-2\\": \\"-3.4e-2\\",
\\"v-dimension\\": \\"12px\\",
\\"v-percentage\\": \\"100%\\",
\\"v-hex\\": \\"#fff\\",
\\"v-comment\\": \\" /* comment */\\",
\\"v-function\\": \\"rgb(0,0,0)\\",
\\"v-unicode-range\\": \\"U+0025-00FF\\",
\\"ghi\\": \\"ozGmfTedr1GnFJDWqNUH\\",
\\"my-class\\": \\"zchqshjqLbPAHaRvIBET\\",
\\"other\\": \\"WZBxXqS2GytaA3IBhhnd\\",
\\"other-other\\": \\"W51zcAMuJMsNFi1CXgWr\\",
\\"green\\": \\"KEl5ZxzNkpjfWorrBglC\\",
\\"foo\\": \\"ecAEWh2vww9pNEdyj9Jn\\",
\\"simple\\": \\"CBlowYk8qiAgWWzFeXRA \\" + ___CSS_LOADER_ICSS_IMPORT_2___.locals[\\"imported-simple\\"] + \\"\\",
\\"relative\\": \\"c_NHnDcX1bd_kuxgsuYi \\" + ___CSS_LOADER_ICSS_IMPORT_3___.locals[\\"imported-relative\\"] + \\"\\",
\\"top-relative\\": \\"S0Kwou8pVmsENtBP3hYm \\" + ___CSS_LOADER_ICSS_IMPORT_4___.locals[\\"imported-relative\\"] + \\"\\",
\\"my-module\\": \\"rq663Pq_zV0CjpwttvK4 \\" + ___CSS_LOADER_ICSS_IMPORT_5___.locals[\\"imported-module\\"] + \\"\\",
\\"alias\\": \\"fadRMHArJofp7sWEbPVR \\" + ___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"] + \\"\\",
\\"alias-duplicate\\": \\"sg1HlXqlWy6l6_Wm5iA7 \\" + ___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"] + \\"\\",
\\"primary-selector\\": \\"bnRUswvicYag6u0SPnvI\\",
\\"black-selector\\": \\"kEJRwpukB2OtmkGTknbU\\",
\\"header\\": \\"hY2PI5vC9ABuJY1nkWnf\\",
\\"foobarbaz\\": \\"q8mv0HutzqdsVWjl8mAz\\",
\\"url\\": \\"xajoqP1d3SwrjJ4WEM8g\\",
\\"main\\": \\"Ix5nEHiVOsWuWxdx0twz \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
\\"v-def\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"]}\`,
\\"v-other\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"]}\`,
\\"s-white\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"]}\`,
\\"m-small\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"]}\`,
\\"v-something\\": \`\${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"]}\`,
\\"v-foo\\": \`blue\`,
\\"v-bar\\": \`block\`,
\\"v-primary\\": \`#BF4040\`,
\\"s-black\\": \`black-selector\`,
\\"m-large\\": \`(min-width: 960px)\`,
\\"v-ident\\": \`validIdent\`,
\\"v-pre-defined-ident\\": \`left\`,
\\"v-string\\": \`'content'\`,
\\"v-string-1\\": \`''\`,
\\"v-url\\": \`url(https://www.exammple.com/images/my-background.png)\`,
\\"v-url-1\\": \`url('https://www.exammple.com/images/my-background.png')\`,
\\"v-url-2\\": \`url(\\"https://www.exammple.com/images/my-background.png\\")\`,
\\"v-integer\\": \`100\`,
\\"v-integer-1\\": \`-100\`,
\\"v-integer-2\\": \`+100\`,
\\"v-number\\": \`.60\`,
\\"v-number-1\\": \`-456.8\`,
\\"v-number-2\\": \`-3.4e-2\`,
\\"v-dimension\\": \`12px\`,
\\"v-percentage\\": \`100%\`,
\\"v-hex\\": \`#fff\`,
\\"v-comment\\": \` /* comment */\`,
\\"v-function\\": \`rgb(0,0,0)\`,
\\"v-unicode-range\\": \`U+0025-00FF\`,
\\"ghi\\": \`ozGmfTedr1GnFJDWqNUH\`,
\\"my-class\\": \`zchqshjqLbPAHaRvIBET\`,
\\"other\\": \`WZBxXqS2GytaA3IBhhnd\`,
\\"other-other\\": \`W51zcAMuJMsNFi1CXgWr\`,
\\"green\\": \`KEl5ZxzNkpjfWorrBglC\`,
\\"foo\\": \`ecAEWh2vww9pNEdyj9Jn\`,
\\"simple\\": \`CBlowYk8qiAgWWzFeXRA \${___CSS_LOADER_ICSS_IMPORT_2___.locals[\\"imported-simple\\"]}\`,
\\"relative\\": \`c_NHnDcX1bd_kuxgsuYi \${___CSS_LOADER_ICSS_IMPORT_3___.locals[\\"imported-relative\\"]}\`,
\\"top-relative\\": \`S0Kwou8pVmsENtBP3hYm \${___CSS_LOADER_ICSS_IMPORT_4___.locals[\\"imported-relative\\"]}\`,
\\"my-module\\": \`rq663Pq_zV0CjpwttvK4 \${___CSS_LOADER_ICSS_IMPORT_5___.locals[\\"imported-module\\"]}\`,
\\"alias\\": \`fadRMHArJofp7sWEbPVR \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`,
\\"alias-duplicate\\": \`sg1HlXqlWy6l6_Wm5iA7 \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`,
\\"primary-selector\\": \`bnRUswvicYag6u0SPnvI\`,
\\"black-selector\\": \`kEJRwpukB2OtmkGTknbU\`,
\\"header\\": \`hY2PI5vC9ABuJY1nkWnf\`,
\\"foobarbaz\\": \`q8mv0HutzqdsVWjl8mAz\`,
\\"url\\": \`xajoqP1d3SwrjJ4WEM8g\`,
\\"main\\": \`Ix5nEHiVOsWuWxdx0twz \${___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"]}\`
};
export default ___CSS_LOADER_EXPORT___;
"
Expand Down Expand Up @@ -18271,3 +18271,23 @@ Array [
`;

exports[`"modules" option show work with the "mode: icss" option, case "multiple-keys-values-in-export": warnings 1`] = `Array []`;

exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: errors 1`] = `Array []`;

exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: module 1`] = `
"// Imports
import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../../../src/index.js??ruleSet[1].rules[0].use[0]!./vars.css\\";
// Exports
export default {
\\"primary-color\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___[\\"primary-color\\"]}\`
};
"
`;

exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: result 1`] = `
Object {
"primary-color": "red",
}
`;

exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: warnings 1`] = `Array []`;
34 changes: 34 additions & 0 deletions test/modules-option.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1994,6 +1994,40 @@ describe('"modules" option', () => {
expect(getErrors(stats)).toMatchSnapshot("errors");
});

it('show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support', async () => {
const compiler = getCompiler(
"./modules/icss/tests-cases/import/source.js",
{
modules: {
mode: "icss",
exportOnlyLocals: true,
},
},
{
output: {
path: path.resolve(__dirname, "./outputs"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js",
publicPath: "/webpack/public/path/",
assetModuleFilename: "[name][ext]",
environment: {
templateLiteral: true,
},
},
}
);
const stats = await compile(compiler);

expect(
getModuleSource("./modules/icss/tests-cases/import/source.css", stats)
).toMatchSnapshot("module");
expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
"result"
);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});

it('show work with the "mode: icss" and "namedExport" options', async () => {
const compiler = getCompiler(
"./modules/icss/tests-cases/import/source.js",
Expand Down

0 comments on commit 3795ad4

Please sign in to comment.