Skip to content

Commit 3795ad4

Browse files
alexander-akaitalexander-akait
committed
test: more
1 parent 3aadcc0 commit 3795ad4

File tree

4 files changed

+162
-64
lines changed

4 files changed

+162
-64
lines changed

‎src/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,8 @@ export default async function loader(content, map, meta) {
243243
exports,
244244
replacements,
245245
needToUseIcssPlugin,
246-
options
246+
options,
247+
this
247248
);
248249

249250
callback(null, `${importCode}${moduleCode}${exportCode}`);

‎src/utils.js

+57-14
Original file line numberDiff line numberDiff line change
@@ -1155,9 +1155,32 @@ function dashesCamelCase(str) {
11551155
);
11561156
}
11571157

1158-
function getExportCode(exports, replacements, icssPluginUsed, options) {
1158+
function getExportCode(
1159+
exports,
1160+
replacements,
1161+
icssPluginUsed,
1162+
options,
1163+
loaderContext
1164+
) {
11591165
let code = "// Exports\n";
11601166

1167+
let isTemplateLiteralSupported = false;
1168+
1169+
if (
1170+
// eslint-disable-next-line no-underscore-dangle
1171+
loaderContext._compilation &&
1172+
// eslint-disable-next-line no-underscore-dangle
1173+
loaderContext._compilation.options &&
1174+
// eslint-disable-next-line no-underscore-dangle
1175+
loaderContext._compilation.options.output &&
1176+
// eslint-disable-next-line no-underscore-dangle
1177+
loaderContext._compilation.options.output.environment &&
1178+
// eslint-disable-next-line no-underscore-dangle
1179+
loaderContext._compilation.options.output.environment.templateLiteral
1180+
) {
1181+
isTemplateLiteralSupported = true;
1182+
}
1183+
11611184
if (icssPluginUsed) {
11621185
let localsCode = "";
11631186

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

11691192
for (const name of normalizedNames) {
11701193
if (options.modules.namedExport) {
1171-
localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
1194+
localsCode += `export var ${name} = ${
1195+
isTemplateLiteralSupported
1196+
? convertToTemplateLiteral(value)
1197+
: JSON.stringify(value)
1198+
};\n`;
11721199
} else {
11731200
if (localsCode) {
11741201
localsCode += `,\n`;
11751202
}
11761203

1177-
localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
1204+
localsCode += `\t${JSON.stringify(name)}: ${
1205+
isTemplateLiteralSupported
1206+
? convertToTemplateLiteral(value)
1207+
: JSON.stringify(value)
1208+
}`;
11781209
}
11791210
}
11801211
};
@@ -1196,23 +1227,35 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
11961227
new RegExp(replacementName, "g"),
11971228
() => {
11981229
if (options.modules.namedExport) {
1199-
return `" + ${importName}_NAMED___[${JSON.stringify(
1200-
getValidLocalName(
1201-
localName,
1202-
options.modules.exportLocalsConvention
1203-
)
1204-
)}] + "`;
1230+
return isTemplateLiteralSupported
1231+
? `\${${importName}_NAMED___[${JSON.stringify(
1232+
getValidLocalName(
1233+
localName,
1234+
options.modules.exportLocalsConvention
1235+
)
1236+
)}]}`
1237+
: `" + ${importName}_NAMED___[${JSON.stringify(
1238+
getValidLocalName(
1239+
localName,
1240+
options.modules.exportLocalsConvention
1241+
)
1242+
)}] + "`;
12051243
} else if (options.modules.exportOnlyLocals) {
1206-
return `" + ${importName}[${JSON.stringify(localName)}] + "`;
1244+
return isTemplateLiteralSupported
1245+
? `\${${importName}[${JSON.stringify(localName)}]}`
1246+
: `" + ${importName}[${JSON.stringify(localName)}] + "`;
12071247
}
12081248

1209-
return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
1249+
return isTemplateLiteralSupported
1250+
? `\${${importName}.locals[${JSON.stringify(localName)}]}`
1251+
: `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
12101252
}
12111253
);
12121254
} else {
1213-
localsCode = localsCode.replace(
1214-
new RegExp(replacementName, "g"),
1215-
() => `" + ${replacementName} + "`
1255+
localsCode = localsCode.replace(new RegExp(replacementName, "g"), () =>
1256+
isTemplateLiteralSupported
1257+
? `\${${replacementName}}`
1258+
: `" + ${replacementName} + "`
12161259
);
12171260
}
12181261
}

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

+69-49
Original file line numberDiff line numberDiff line change
@@ -6556,8 +6556,8 @@ body {
65566556
}
65576557
\`, \\"\\"]);
65586558
// Exports
6559-
export var vUrl = \\"url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\")\\";
6560-
export var vUrlOther = \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"] + \\"\\";
6559+
export var vUrl = \`url(\${___CSS_LOADER_URL_REPLACEMENT_0___})\`;
6560+
export var vUrlOther = \`\${___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"]}\`;
65616561
export default ___CSS_LOADER_EXPORT___;
65626562
"
65636563
`;
@@ -17358,53 +17358,53 @@ a {
1735817358
\`, \\"\\"]);
1735917359
// Exports
1736017360
___CSS_LOADER_EXPORT___.locals = {
17361-
\\"v-def\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"] + \\"\\",
17362-
\\"v-other\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"] + \\"\\",
17363-
\\"s-white\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"] + \\"\\",
17364-
\\"m-small\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"] + \\"\\",
17365-
\\"v-something\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"] + \\"\\",
17366-
\\"v-foo\\": \\"blue\\",
17367-
\\"v-bar\\": \\"block\\",
17368-
\\"v-primary\\": \\"#BF4040\\",
17369-
\\"s-black\\": \\"black-selector\\",
17370-
\\"m-large\\": \\"(min-width: 960px)\\",
17371-
\\"v-ident\\": \\"validIdent\\",
17372-
\\"v-pre-defined-ident\\": \\"left\\",
17373-
\\"v-string\\": \\"'content'\\",
17374-
\\"v-string-1\\": \\"''\\",
17375-
\\"v-url\\": \\"url(https://www.exammple.com/images/my-background.png)\\",
17376-
\\"v-url-1\\": \\"url('https://www.exammple.com/images/my-background.png')\\",
17377-
\\"v-url-2\\": \\"url(\\\\\\"https://www.exammple.com/images/my-background.png\\\\\\")\\",
17378-
\\"v-integer\\": \\"100\\",
17379-
\\"v-integer-1\\": \\"-100\\",
17380-
\\"v-integer-2\\": \\"+100\\",
17381-
\\"v-number\\": \\".60\\",
17382-
\\"v-number-1\\": \\"-456.8\\",
17383-
\\"v-number-2\\": \\"-3.4e-2\\",
17384-
\\"v-dimension\\": \\"12px\\",
17385-
\\"v-percentage\\": \\"100%\\",
17386-
\\"v-hex\\": \\"#fff\\",
17387-
\\"v-comment\\": \\" /* comment */\\",
17388-
\\"v-function\\": \\"rgb(0,0,0)\\",
17389-
\\"v-unicode-range\\": \\"U+0025-00FF\\",
17390-
\\"ghi\\": \\"ozGmfTedr1GnFJDWqNUH\\",
17391-
\\"my-class\\": \\"zchqshjqLbPAHaRvIBET\\",
17392-
\\"other\\": \\"WZBxXqS2GytaA3IBhhnd\\",
17393-
\\"other-other\\": \\"W51zcAMuJMsNFi1CXgWr\\",
17394-
\\"green\\": \\"KEl5ZxzNkpjfWorrBglC\\",
17395-
\\"foo\\": \\"ecAEWh2vww9pNEdyj9Jn\\",
17396-
\\"simple\\": \\"CBlowYk8qiAgWWzFeXRA \\" + ___CSS_LOADER_ICSS_IMPORT_2___.locals[\\"imported-simple\\"] + \\"\\",
17397-
\\"relative\\": \\"c_NHnDcX1bd_kuxgsuYi \\" + ___CSS_LOADER_ICSS_IMPORT_3___.locals[\\"imported-relative\\"] + \\"\\",
17398-
\\"top-relative\\": \\"S0Kwou8pVmsENtBP3hYm \\" + ___CSS_LOADER_ICSS_IMPORT_4___.locals[\\"imported-relative\\"] + \\"\\",
17399-
\\"my-module\\": \\"rq663Pq_zV0CjpwttvK4 \\" + ___CSS_LOADER_ICSS_IMPORT_5___.locals[\\"imported-module\\"] + \\"\\",
17400-
\\"alias\\": \\"fadRMHArJofp7sWEbPVR \\" + ___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"] + \\"\\",
17401-
\\"alias-duplicate\\": \\"sg1HlXqlWy6l6_Wm5iA7 \\" + ___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"] + \\"\\",
17402-
\\"primary-selector\\": \\"bnRUswvicYag6u0SPnvI\\",
17403-
\\"black-selector\\": \\"kEJRwpukB2OtmkGTknbU\\",
17404-
\\"header\\": \\"hY2PI5vC9ABuJY1nkWnf\\",
17405-
\\"foobarbaz\\": \\"q8mv0HutzqdsVWjl8mAz\\",
17406-
\\"url\\": \\"xajoqP1d3SwrjJ4WEM8g\\",
17407-
\\"main\\": \\"Ix5nEHiVOsWuWxdx0twz \\" + ___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"] + \\"\\"
17361+
\\"v-def\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"]}\`,
17362+
\\"v-other\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"]}\`,
17363+
\\"s-white\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"]}\`,
17364+
\\"m-small\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"]}\`,
17365+
\\"v-something\\": \`\${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"]}\`,
17366+
\\"v-foo\\": \`blue\`,
17367+
\\"v-bar\\": \`block\`,
17368+
\\"v-primary\\": \`#BF4040\`,
17369+
\\"s-black\\": \`black-selector\`,
17370+
\\"m-large\\": \`(min-width: 960px)\`,
17371+
\\"v-ident\\": \`validIdent\`,
17372+
\\"v-pre-defined-ident\\": \`left\`,
17373+
\\"v-string\\": \`'content'\`,
17374+
\\"v-string-1\\": \`''\`,
17375+
\\"v-url\\": \`url(https://www.exammple.com/images/my-background.png)\`,
17376+
\\"v-url-1\\": \`url('https://www.exammple.com/images/my-background.png')\`,
17377+
\\"v-url-2\\": \`url(\\"https://www.exammple.com/images/my-background.png\\")\`,
17378+
\\"v-integer\\": \`100\`,
17379+
\\"v-integer-1\\": \`-100\`,
17380+
\\"v-integer-2\\": \`+100\`,
17381+
\\"v-number\\": \`.60\`,
17382+
\\"v-number-1\\": \`-456.8\`,
17383+
\\"v-number-2\\": \`-3.4e-2\`,
17384+
\\"v-dimension\\": \`12px\`,
17385+
\\"v-percentage\\": \`100%\`,
17386+
\\"v-hex\\": \`#fff\`,
17387+
\\"v-comment\\": \` /* comment */\`,
17388+
\\"v-function\\": \`rgb(0,0,0)\`,
17389+
\\"v-unicode-range\\": \`U+0025-00FF\`,
17390+
\\"ghi\\": \`ozGmfTedr1GnFJDWqNUH\`,
17391+
\\"my-class\\": \`zchqshjqLbPAHaRvIBET\`,
17392+
\\"other\\": \`WZBxXqS2GytaA3IBhhnd\`,
17393+
\\"other-other\\": \`W51zcAMuJMsNFi1CXgWr\`,
17394+
\\"green\\": \`KEl5ZxzNkpjfWorrBglC\`,
17395+
\\"foo\\": \`ecAEWh2vww9pNEdyj9Jn\`,
17396+
\\"simple\\": \`CBlowYk8qiAgWWzFeXRA \${___CSS_LOADER_ICSS_IMPORT_2___.locals[\\"imported-simple\\"]}\`,
17397+
\\"relative\\": \`c_NHnDcX1bd_kuxgsuYi \${___CSS_LOADER_ICSS_IMPORT_3___.locals[\\"imported-relative\\"]}\`,
17398+
\\"top-relative\\": \`S0Kwou8pVmsENtBP3hYm \${___CSS_LOADER_ICSS_IMPORT_4___.locals[\\"imported-relative\\"]}\`,
17399+
\\"my-module\\": \`rq663Pq_zV0CjpwttvK4 \${___CSS_LOADER_ICSS_IMPORT_5___.locals[\\"imported-module\\"]}\`,
17400+
\\"alias\\": \`fadRMHArJofp7sWEbPVR \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`,
17401+
\\"alias-duplicate\\": \`sg1HlXqlWy6l6_Wm5iA7 \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`,
17402+
\\"primary-selector\\": \`bnRUswvicYag6u0SPnvI\`,
17403+
\\"black-selector\\": \`kEJRwpukB2OtmkGTknbU\`,
17404+
\\"header\\": \`hY2PI5vC9ABuJY1nkWnf\`,
17405+
\\"foobarbaz\\": \`q8mv0HutzqdsVWjl8mAz\`,
17406+
\\"url\\": \`xajoqP1d3SwrjJ4WEM8g\`,
17407+
\\"main\\": \`Ix5nEHiVOsWuWxdx0twz \${___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"]}\`
1740817408
};
1740917409
export default ___CSS_LOADER_EXPORT___;
1741017410
"
@@ -18271,3 +18271,23 @@ Array [
1827118271
`;
1827218272

1827318273
exports[`"modules" option show work with the "mode: icss" option, case "multiple-keys-values-in-export": warnings 1`] = `Array []`;
18274+
18275+
exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: errors 1`] = `Array []`;
18276+
18277+
exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: module 1`] = `
18278+
"// Imports
18279+
import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../../../src/index.js??ruleSet[1].rules[0].use[0]!./vars.css\\";
18280+
// Exports
18281+
export default {
18282+
\\"primary-color\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___[\\"primary-color\\"]}\`
18283+
};
18284+
"
18285+
`;
18286+
18287+
exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: result 1`] = `
18288+
Object {
18289+
"primary-color": "red",
18290+
}
18291+
`;
18292+
18293+
exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: warnings 1`] = `Array []`;

‎test/modules-option.test.js

+34
Original file line numberDiff line numberDiff line change
@@ -1994,6 +1994,40 @@ describe('"modules" option', () => {
19941994
expect(getErrors(stats)).toMatchSnapshot("errors");
19951995
});
19961996

1997+
it('show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support', async () => {
1998+
const compiler = getCompiler(
1999+
"./modules/icss/tests-cases/import/source.js",
2000+
{
2001+
modules: {
2002+
mode: "icss",
2003+
exportOnlyLocals: true,
2004+
},
2005+
},
2006+
{
2007+
output: {
2008+
path: path.resolve(__dirname, "./outputs"),
2009+
filename: "[name].bundle.js",
2010+
chunkFilename: "[name].chunk.js",
2011+
publicPath: "/webpack/public/path/",
2012+
assetModuleFilename: "[name][ext]",
2013+
environment: {
2014+
templateLiteral: true,
2015+
},
2016+
},
2017+
}
2018+
);
2019+
const stats = await compile(compiler);
2020+
2021+
expect(
2022+
getModuleSource("./modules/icss/tests-cases/import/source.css", stats)
2023+
).toMatchSnapshot("module");
2024+
expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
2025+
"result"
2026+
);
2027+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
2028+
expect(getErrors(stats)).toMatchSnapshot("errors");
2029+
});
2030+
19972031
it('show work with the "mode: icss" and "namedExport" options', async () => {
19982032
const compiler = getCompiler(
19992033
"./modules/icss/tests-cases/import/source.js",

0 commit comments

Comments
 (0)