Skip to content

Commit cf24647

Browse files
alexander-akaitalexander-akait
committed
refactor: code
1 parent 889807a commit cf24647

File tree

8 files changed

+169
-95
lines changed

8 files changed

+169
-95
lines changed

‎src/index.js‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
normalizeSourceMap,
1515
getModulesPlugins,
1616
getFilter,
17-
getApiCode,
1817
getImportCode,
1918
getModuleCode,
2019
getExportCode,
@@ -107,31 +106,30 @@ export default function loader(content, map, meta) {
107106
}
108107
}
109108

110-
// Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
111-
const apiCode = exportType === 'full' ? getApiCode(this, sourceMap) : '';
112-
const importCode =
113-
imports.length > 0
114-
? getImportCode(this, imports, {
115-
importLoaders: options.importLoaders,
116-
exportType,
117-
})
118-
: '';
119-
const moduleCode =
120-
exportType === 'full'
121-
? getModuleCode(this, result, replacers, sourceMap)
122-
: '';
123-
const exportCode =
124-
exports.length > 0
125-
? getExportCode(this, exports, replacers, {
126-
localsConvention: options.localsConvention,
127-
exportType,
128-
})
129-
: '';
130-
131-
return callback(
132-
null,
133-
[apiCode, importCode, moduleCode, exportCode].join('')
109+
const { importLoaders, localsConvention } = options;
110+
const importCode = getImportCode(
111+
this,
112+
imports,
113+
exportType,
114+
sourceMap,
115+
importLoaders
134116
);
117+
const moduleCode = getModuleCode(
118+
this,
119+
result,
120+
exportType,
121+
sourceMap,
122+
replacers
123+
);
124+
const exportCode = getExportCode(
125+
this,
126+
exports,
127+
exportType,
128+
replacers,
129+
localsConvention
130+
);
131+
132+
return callback(null, [importCode, moduleCode, exportCode].join(''));
135133
})
136134
.catch((error) => {
137135
callback(

‎src/utils.js‎

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -190,20 +190,31 @@ function normalizeSourceMap(map) {
190190
return newMap;
191191
}
192192

193-
function getApiCode(loaderContext, sourceMap) {
194-
const url = stringifyRequest(loaderContext, require.resolve('./runtime/api'));
195-
196-
return `exports = module.exports = require(${url})(${sourceMap});\n`;
197-
}
198-
199-
function getImportCode(loaderContext, imports, options) {
193+
function getImportCode(
194+
loaderContext,
195+
imports,
196+
exportType,
197+
sourceMap,
198+
importLoaders
199+
) {
200200
const importItems = [];
201201
const codeItems = [];
202202
const urlImportNames = new Map();
203203

204204
let hasUrlHelperCode = false;
205205
let importPrefix;
206206

207+
if (exportType === 'full') {
208+
const url = stringifyRequest(
209+
loaderContext,
210+
require.resolve('./runtime/api')
211+
);
212+
importItems.push(`var ___CSS_LOADER_API_IMPORT___ = require(${url});`);
213+
codeItems.push(
214+
`exports = module.exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
215+
);
216+
}
217+
207218
imports.forEach((item) => {
208219
if (item.type === '@import' || item.type === 'icss-import') {
209220
const media = item.media ? `, ${JSON.stringify(item.media)}` : '';
@@ -216,7 +227,7 @@ function getImportCode(loaderContext, imports, options) {
216227
}
217228

218229
if (!importPrefix) {
219-
importPrefix = getImportPrefix(loaderContext, options.importLoaders);
230+
importPrefix = getImportPrefix(loaderContext, importLoaders);
220231
}
221232

222233
const url = stringifyRequest(
@@ -226,7 +237,7 @@ function getImportCode(loaderContext, imports, options) {
226237

227238
importItems.push(`var ${item.name} = require(${url});`);
228239

229-
if (options.exportType === 'full') {
240+
if (exportType === 'full') {
230241
codeItems.push(`exports.i(${item.name}${media});`);
231242
}
232243
}
@@ -267,12 +278,25 @@ function getImportCode(loaderContext, imports, options) {
267278
}
268279
});
269280

270-
return `// Imports\n${importItems.join('\n')}\n${codeItems.join('\n')}\n`;
281+
const items = importItems.concat(codeItems);
282+
283+
return items.length > 0 ? `// Imports\n${items.join('\n')}\n` : '';
271284
}
272285

273-
function getModuleCode(loaderContext, result, replacers, sourceMap) {
286+
function getModuleCode(
287+
loaderContext,
288+
result,
289+
exportType,
290+
sourceMap,
291+
replacers
292+
) {
293+
if (exportType !== 'full') {
294+
return '';
295+
}
296+
274297
const { css, map } = result;
275298
const sourceMapValue = sourceMap && map ? `,${map}` : '';
299+
276300
let cssCode = JSON.stringify(css);
277301

278302
replacers.forEach((replacer) => {
@@ -301,7 +325,17 @@ function dashesCamelCase(str) {
301325
);
302326
}
303327

304-
function getExportCode(loaderContext, exports, replacers, options) {
328+
function getExportCode(
329+
loaderContext,
330+
exports,
331+
exportType,
332+
replacers,
333+
localsConvention
334+
) {
335+
if (exports.length === 0) {
336+
return '';
337+
}
338+
305339
const items = [];
306340

307341
function addExportedItem(name, value) {
@@ -311,7 +345,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
311345
exports.forEach((item) => {
312346
const { name, value } = item;
313347

314-
switch (options.localsConvention) {
348+
switch (localsConvention) {
315349
case 'camelCase': {
316350
addExportedItem(name, value);
317351

@@ -348,7 +382,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
348382
});
349383

350384
let exportCode = `// Exports\n${
351-
options.exportType === 'locals' ? 'module.exports' : 'exports.locals'
385+
exportType === 'locals' ? 'module.exports' : 'exports.locals'
352386
} = {\n${items.join(',\n')}\n};`;
353387

354388
replacers.forEach((replacer) => {
@@ -357,7 +391,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
357391
const localName = JSON.stringify(replacer.localName);
358392

359393
exportCode = exportCode.replace(new RegExp(name, 'g'), () =>
360-
options.exportType === 'locals'
394+
exportType === 'locals'
361395
? `" + ${importName}[${localName}] + "`
362396
: `" + ${importName}.locals[${localName}] + "`
363397
);
@@ -371,7 +405,6 @@ export {
371405
getFilter,
372406
getModulesPlugins,
373407
normalizeSourceMap,
374-
getApiCode,
375408
getImportCode,
376409
getModuleCode,
377410
getExportCode,

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,8 @@ Array [
175175
`;
176176

177177
exports[`import option Function: module 1`] = `
178-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
179-
// Imports
178+
"// Imports
179+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
180180
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test-media.css\\");
181181
var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./test-other.css\\");
182182
var ___CSS_LOADER_AT_RULE_IMPORT_8___ = require(\\"-!../../../src/index.js??ref--4-0!./query.css?foo=1&bar=1\\");
@@ -189,6 +189,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_17___ = require(\\"-!../../../src/index.js??ref
189189
var ___CSS_LOADER_AT_RULE_IMPORT_18___ = require(\\"-!../../../src/index.js??ref--4-0!./url.css\\");
190190
var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
191191
var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
192+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
192193
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
193194
exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"(min-width: 100px)\\");
194195
exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
@@ -352,10 +353,11 @@ Array [
352353
`;
353354

354355
exports[`import option false: module 1`] = `
355-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
356-
// Imports
356+
"// Imports
357+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
357358
var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
358359
var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
360+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
359361
var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
360362
// Module
361363
exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and print;\\\\n@import url(test.css) SCREEN AND PRINT;\\\\n@import url(test.css)screen and print;\\\\n@import url(test.css) screen and print;\\\\n@import url(test-media.css) screen and print;\\\\n@import url(test-other.css) (min-width: 100px);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css#hash);\\\\n@import url(http://example.com/style.css?#hash);\\\\n@import url(http://example.com/style.css?foo=bar#hash);\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(\\\\\\"//example.com/style.css\\\\\\");\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n@import url('query.css?foo=1&bar=1');\\\\n@import url('other-query.css?foo=1&bar=1#hash');\\\\n@import url('other-query.css?foo=1&bar=1#hash') screen and print;\\\\n@import url('https://fonts.googleapis.com/css?family=Roboto');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');\\\\n\\\\n.class {\\\\n a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n @import 'path.css';\\\\n}\\\\n\\\\n@import url('./relative.css');\\\\n@import url('../import/top-relative.css');\\\\n@import url(~package/tilde.css);\\\\n@import url(~aliasesImport/alias.css);\\\\n@import url('./url.css');\\\\n\\\\n.background {\\\\n background: url(\\" + ___CSS_LOADER_URL_IMPORT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
@@ -545,8 +547,8 @@ Array [
545547
`;
546548

547549
exports[`import option true: module 1`] = `
548-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
549-
// Imports
550+
"// Imports
551+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
550552
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
551553
var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
552554
var ___CSS_LOADER_AT_RULE_IMPORT_2___ = require(\\"-!../../../src/index.js??ref--4-0!./test-media.css\\");
@@ -562,6 +564,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_20___ = require(\\"-!../../../src/index.js??ref
562564
var ___CSS_LOADER_AT_RULE_IMPORT_21___ = require(\\"-!../../../src/index.js??ref--4-0!./url.css\\");
563565
var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
564566
var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
567+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
565568
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
566569
exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and print\\");
567570
exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___, \\"screen and print\\");

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ Array [
2626
`;
2727

2828
exports[`importLoaders option 0 (\`postcss-loader\` before): module 1`] = `
29-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
30-
// Imports
29+
"// Imports
30+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
3131
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
32+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
3233
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
3334
// Module
3435
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -63,9 +64,10 @@ Array [
6364
`;
6465

6566
exports[`importLoaders option 1 (\`postcss-loader\` before): module 1`] = `
66-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
67-
// Imports
67+
"// Imports
68+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
6869
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\");
70+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
6971
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
7072
// Module
7173
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -100,9 +102,10 @@ Array [
100102
`;
101103

102104
exports[`importLoaders option 1 (no loaders before): module 1`] = `
103-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
104-
// Imports
105+
"// Imports
106+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
105107
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
108+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
106109
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
107110
// Module
108111
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgb(0 0 100% / 90%);\\\\n}\\\\n\\", \\"\\"]);
@@ -137,9 +140,10 @@ Array [
137140
`;
138141

139142
exports[`importLoaders option 2 (\`postcss-loader\` before): module 1`] = `
140-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
141-
// Imports
143+
"// Imports
144+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
142145
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\");
146+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
143147
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
144148
// Module
145149
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -174,9 +178,10 @@ Array [
174178
`;
175179

176180
exports[`importLoaders option not specify (no loader before): module 1`] = `
177-
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
178-
// Imports
181+
"// Imports
182+
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
179183
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
184+
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
180185
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
181186
// Module
182187
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);

0 commit comments

Comments
 (0)