Skip to content

Commit

Permalink
refactor: code (#1009)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi authored Dec 10, 2019
1 parent 889807a commit 880344b
Show file tree
Hide file tree
Showing 9 changed files with 175 additions and 101 deletions.
12 changes: 6 additions & 6 deletions azure-pipelines.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ jobs:
node-8:
node_version: ^8.9.0
webpack_version: latest
node-8-canary:
node_version: ^8.9.0
node-10-canary:
node_version: ^10.13.0
webpack_version: next
continue_on_error: true
steps:
Expand Down Expand Up @@ -99,8 +99,8 @@ jobs:
node-8:
node_version: ^8.9.0
webpack_version: latest
node-8-canary:
node_version: ^8.9.0
node-10-canary:
node_version: ^10.13.0
webpack_version: next
continue_on_error: true
steps:
Expand Down Expand Up @@ -151,8 +151,8 @@ jobs:
node-8:
node_version: ^8.9.0
webpack_version: latest
node-8-canary:
node_version: ^8.9.0
node-10-canary:
node_version: ^10.13.0
webpack_version: next
continue_on_error: true
steps:
Expand Down
48 changes: 23 additions & 25 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
normalizeSourceMap,
getModulesPlugins,
getFilter,
getApiCode,
getImportCode,
getModuleCode,
getExportCode,
Expand Down Expand Up @@ -107,31 +106,30 @@ export default function loader(content, map, meta) {
}
}

// Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
const apiCode = exportType === 'full' ? getApiCode(this, sourceMap) : '';
const importCode =
imports.length > 0
? getImportCode(this, imports, {
importLoaders: options.importLoaders,
exportType,
})
: '';
const moduleCode =
exportType === 'full'
? getModuleCode(this, result, replacers, sourceMap)
: '';
const exportCode =
exports.length > 0
? getExportCode(this, exports, replacers, {
localsConvention: options.localsConvention,
exportType,
})
: '';

return callback(
null,
[apiCode, importCode, moduleCode, exportCode].join('')
const { importLoaders, localsConvention } = options;
const importCode = getImportCode(
this,
imports,
exportType,
sourceMap,
importLoaders
);
const moduleCode = getModuleCode(
this,
result,
exportType,
sourceMap,
replacers
);
const exportCode = getExportCode(
this,
exports,
exportType,
replacers,
localsConvention
);

return callback(null, [importCode, moduleCode, exportCode].join(''));
})
.catch((error) => {
callback(
Expand Down
65 changes: 49 additions & 16 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,20 +190,31 @@ function normalizeSourceMap(map) {
return newMap;
}

function getApiCode(loaderContext, sourceMap) {
const url = stringifyRequest(loaderContext, require.resolve('./runtime/api'));

return `exports = module.exports = require(${url})(${sourceMap});\n`;
}

function getImportCode(loaderContext, imports, options) {
function getImportCode(
loaderContext,
imports,
exportType,
sourceMap,
importLoaders
) {
const importItems = [];
const codeItems = [];
const urlImportNames = new Map();

let hasUrlHelperCode = false;
let importPrefix;

if (exportType === 'full') {
const url = stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
);
importItems.push(`var ___CSS_LOADER_API_IMPORT___ = require(${url});`);
codeItems.push(
`exports = module.exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
);
}

imports.forEach((item) => {
if (item.type === '@import' || item.type === 'icss-import') {
const media = item.media ? `, ${JSON.stringify(item.media)}` : '';
Expand All @@ -216,7 +227,7 @@ function getImportCode(loaderContext, imports, options) {
}

if (!importPrefix) {
importPrefix = getImportPrefix(loaderContext, options.importLoaders);
importPrefix = getImportPrefix(loaderContext, importLoaders);
}

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

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

if (options.exportType === 'full') {
if (exportType === 'full') {
codeItems.push(`exports.i(${item.name}${media});`);
}
}
Expand Down Expand Up @@ -267,12 +278,25 @@ function getImportCode(loaderContext, imports, options) {
}
});

return `// Imports\n${importItems.join('\n')}\n${codeItems.join('\n')}\n`;
const items = importItems.concat(codeItems);

return items.length > 0 ? `// Imports\n${items.join('\n')}\n` : '';
}

function getModuleCode(loaderContext, result, replacers, sourceMap) {
function getModuleCode(
loaderContext,
result,
exportType,
sourceMap,
replacers
) {
if (exportType !== 'full') {
return '';
}

const { css, map } = result;
const sourceMapValue = sourceMap && map ? `,${map}` : '';

let cssCode = JSON.stringify(css);

replacers.forEach((replacer) => {
Expand Down Expand Up @@ -301,7 +325,17 @@ function dashesCamelCase(str) {
);
}

function getExportCode(loaderContext, exports, replacers, options) {
function getExportCode(
loaderContext,
exports,
exportType,
replacers,
localsConvention
) {
if (exports.length === 0) {
return '';
}

const items = [];

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

switch (options.localsConvention) {
switch (localsConvention) {
case 'camelCase': {
addExportedItem(name, value);

Expand Down Expand Up @@ -348,7 +382,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
});

let exportCode = `// Exports\n${
options.exportType === 'locals' ? 'module.exports' : 'exports.locals'
exportType === 'locals' ? 'module.exports' : 'exports.locals'
} = {\n${items.join(',\n')}\n};`;

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

exportCode = exportCode.replace(new RegExp(name, 'g'), () =>
options.exportType === 'locals'
exportType === 'locals'
? `" + ${importName}[${localName}] + "`
: `" + ${importName}.locals[${localName}] + "`
);
Expand All @@ -371,7 +405,6 @@ export {
getFilter,
getModulesPlugins,
normalizeSourceMap,
getApiCode,
getImportCode,
getModuleCode,
getExportCode,
Expand Down
15 changes: 9 additions & 6 deletions test/__snapshots__/import-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,8 @@ Array [
`;

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

exports[`import option false: module 1`] = `
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
// Imports
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
// Module
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\\", \\"\\"]);
Expand Down Expand Up @@ -545,8 +547,8 @@ Array [
`;

exports[`import option true: module 1`] = `
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
// Imports
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
var ___CSS_LOADER_AT_RULE_IMPORT_2___ = require(\\"-!../../../src/index.js??ref--4-0!./test-media.css\\");
Expand All @@ -562,6 +564,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_20___ = require(\\"-!../../../src/index.js??ref
var ___CSS_LOADER_AT_RULE_IMPORT_21___ = require(\\"-!../../../src/index.js??ref--4-0!./url.css\\");
var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and print\\");
exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___, \\"screen and print\\");
Expand Down
25 changes: 15 additions & 10 deletions test/__snapshots__/importLoaders-option.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ Array [
`;

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

exports[`importLoaders option 1 (\`postcss-loader\` before): module 1`] = `
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
// Imports
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
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\\");
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
// Module
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
Expand Down Expand Up @@ -100,9 +102,10 @@ Array [
`;

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

exports[`importLoaders option 2 (\`postcss-loader\` before): module 1`] = `
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
// Imports
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
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\\");
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
// Module
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
Expand Down Expand Up @@ -174,9 +178,10 @@ Array [
`;

exports[`importLoaders option not specify (no loader before): module 1`] = `
"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
// Imports
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
// Module
exports.push([module.id, \\".foo {\\\\n color: red;\\\\n color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
Expand Down
Loading

0 comments on commit 880344b

Please sign in to comment.