Skip to content
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

Jump to bottom

refactor: code #1009

Merged
merged 1 commit into from
Dec 10, 2019
Merged

refactor: code #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 6 additions & 6 deletions azure-pipelines.yml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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