Skip to content

Commit

Permalink
perf: improve parse performance for @import at-rules
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi committed Mar 20, 2020
1 parent bc63911 commit f5f21ea
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 176 deletions.
2 changes: 1 addition & 1 deletion src/index.js
View file
Expand Up @@ -138,7 +138,7 @@ export default function loader(content, map, meta) {
esModule
);

return callback(null, [importCode, moduleCode, exportCode].join(''));
return callback(null, `${importCode}${moduleCode}${exportCode}`);
})
.catch((error) => {
callback(
Expand Down
154 changes: 73 additions & 81 deletions src/plugins/postcss-import-parser.js
View file
Expand Up @@ -6,111 +6,103 @@ import { normalizeUrl } from '../utils';

const pluginName = 'postcss-import-parser';

function getParsedValue(node) {
if (node.type === 'function' && node.value.toLowerCase() === 'url') {
const { nodes } = node;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : valueParser.stringify(nodes);

return { url, isStringValue };
}

if (node.type === 'string') {
const url = node.value;

return { url, isStringValue: true };
}

return null;
}

function parseImport(params) {
const { nodes } = valueParser(params);

if (nodes.length === 0) {
return null;
}

const value = getParsedValue(nodes[0]);

if (!value) {
return null;
}

let { url } = value;

if (url.trim().length === 0) {
return null;
}

if (isUrlRequest(url)) {
const { isStringValue } = value;

url = normalizeUrl(url, isStringValue);
}

return {
url,
media: valueParser
.stringify(nodes.slice(1))
.trim()
.toLowerCase(),
};
}

function walkAtRules(css, result, filter) {
const items = [];

export default postcss.plugin(pluginName, (options) => (css, result) => {
css.walkAtRules(/^import$/i, (atRule) => {
// Convert only top-level @import
if (atRule.parent.type !== 'root') {
return;
}

// Nodes do not exists - `@import url('http://') :root {}`
if (atRule.nodes) {
result.warn(
"It looks like you didn't end your @import statement correctly. " +
'Child nodes are attached to it.',
"It looks like you didn't end your @import statement correctly. Child nodes are attached to it.",
{ node: atRule }
);

return;
}

const parsed = parseImport(atRule.params);
const { nodes } = valueParser(atRule.params);

if (!parsed) {
// eslint-disable-next-line consistent-return
return result.warn(`Unable to find uri in '${atRule.toString()}'`, {
// No nodes - `@import ;`
// Invalid type - `@import foo-bar;`
if (
nodes.length === 0 ||
(nodes[0].type !== 'string' && nodes[0].type !== 'function')
) {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule,
});
}

if (filter && !filter(parsed)) {
return;
}

atRule.remove();
let isStringValue;
let url;

if (nodes[0].type === 'string') {
isStringValue = true;
url = nodes[0].value;
} else if (nodes[0].type === 'function') {
// Invalid function - `@import nourl(test.css);`
if (nodes[0].value.toLowerCase() !== 'url') {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule,
});

items.push(parsed);
});
return;
}

isStringValue =
nodes[0].nodes.length !== 0 && nodes[0].nodes[0].type === 'string';
url = isStringValue
? nodes[0].nodes[0].value
: valueParser.stringify(nodes[0].nodes);
}

// Empty url - `@import "";` or `@import url();`
if (url.trim().length === 0) {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule,
});

return items;
}
return;
}

export default postcss.plugin(
pluginName,
(options) =>
function process(css, result) {
const items = walkAtRules(css, result, options.filter);
const isRequestable = isUrlRequest(url);

items.forEach((item) => {
const { url, media } = item;
if (isRequestable) {
url = normalizeUrl(url, isStringValue);

result.messages.push({
pluginName,
type: 'import',
value: { type: '@import', url, media },
// Empty url after normalize - `@import '\
// \
// \
// ';
if (url.trim().length === 0) {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule,
});
});

return;
}
}
);

const media = valueParser
.stringify(nodes.slice(1))
.trim()
.toLowerCase();

if (options.filter && !options.filter({ url, media })) {
return;
}

atRule.remove();

result.messages.push({
pluginName,
type: 'import',
value: { type: '@import', isRequestable, url, media },
});
});
});
82 changes: 33 additions & 49 deletions src/utils.js
View file
Expand Up @@ -4,11 +4,7 @@
*/
import path from 'path';

import loaderUtils, {
isUrlRequest,
stringifyRequest,
urlToRequest,
} from 'loader-utils';
import { stringifyRequest, urlToRequest, interpolateName } from 'loader-utils';
import normalizePath from 'normalize-path';
import cssesc from 'cssesc';
import modulesValues from 'postcss-modules-values';
Expand Down Expand Up @@ -65,8 +61,7 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
// Using `[path]` placeholder outputs `/` we need escape their
// Also directories can contains invalid characters for css we need escape their too
return cssesc(
loaderUtils
.interpolateName(loaderContext, localIdentName, options)
interpolateName(loaderContext, localIdentName, options)
// For `[hash]` placeholder
.replace(/^((-?[0-9])|--)/, '_$1')
.replace(filenameReservedRegex, '-')
Expand Down Expand Up @@ -216,16 +211,15 @@ function getImportCode(
let importPrefix;

if (exportType === 'full') {
const apiUrl = stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
);

importItems.push(
esModule
? `import ___CSS_LOADER_API_IMPORT___ from ${stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
)};`
: `var ___CSS_LOADER_API_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/api')
)});`
? `import ___CSS_LOADER_API_IMPORT___ from ${apiUrl};`
: `var ___CSS_LOADER_API_IMPORT___ = require(${apiUrl});`
);
codeItems.push(
esModule
Expand All @@ -239,10 +233,10 @@ function getImportCode(
switch (item.type) {
case '@import':
{
const { url, media } = item;
const { isRequestable, url, media } = item;
const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';

if (!isUrlRequest(url)) {
if (!isRequestable) {
codeItems.push(
`exports.push([module.id, ${JSON.stringify(
`@import url(${url});`
Expand All @@ -259,17 +253,16 @@ function getImportCode(
importPrefix = getImportPrefix(loaderContext, importLoaders);
}

const importUrl = stringifyRequest(
loaderContext,
importPrefix + url
);

importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
importItems.push(
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
importPrefix + url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
? `import ${importName} from ${importUrl};`
: `var ${importName} = require(${importUrl});`
);

atRuleImportNames.set(url, importName);
Expand All @@ -281,16 +274,15 @@ function getImportCode(
case 'url':
{
if (urlImportNames.size === 0) {
const helperUrl = stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
);

importItems.push(
esModule
? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
)};`
: `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${stringifyRequest(
loaderContext,
require.resolve('./runtime/getUrl.js')
)});`
? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${helperUrl};`
: `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${helperUrl});`
);
}

Expand All @@ -299,17 +291,13 @@ function getImportCode(
let importName = urlImportNames.get(url);

if (!importName) {
const importUrl = stringifyRequest(loaderContext, url);

importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
importItems.push(
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
url
)});`
? `import ${importName} from ${importUrl};`
: `var ${importName} = require(${importUrl});`
);

urlImportNames.set(url, importName);
Expand All @@ -335,16 +323,12 @@ function getImportCode(
importPrefix = getImportPrefix(loaderContext, importLoaders);
}

const importUrl = stringifyRequest(loaderContext, importPrefix + url);

importItems.push(
esModule
? `import ${importName} from ${stringifyRequest(
loaderContext,
importPrefix + url
)};`
: `var ${importName} = require(${stringifyRequest(
loaderContext,
importPrefix + url
)});`
? `import ${importName} from ${importUrl};`
: `var ${importName} = require(${importUrl});`
);

if (exportType === 'full') {
Expand Down

0 comments on commit f5f21ea

Please sign in to comment.