Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

css-loader

Package Overview
Dependencies
Maintainers
7
Versions
152
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-loader - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

8

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog

### [3.3.1](https://github.com/webpack-contrib/css-loader/compare/v3.3.0...v3.3.1) (2019-12-12)
### Bug Fixes
* better handling url functions and an url in `@import` at-rules
* reduce count of `require` ([#1014](https://github.com/webpack-contrib/css-loader/issues/1014)) ([e091d27](https://github.com/webpack-contrib/css-loader/commit/e091d2709c29ac57ed0106af8ec3b581cbda7a9c))
## [3.3.0](https://github.com/webpack-contrib/css-loader/compare/v3.2.1...v3.3.0) (2019-12-09)

@@ -7,0 +15,0 @@

54

dist/index.js

@@ -39,18 +39,3 @@ "use strict";

const callback = this.async();
const sourceMap = options.sourceMap || false; // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
// eslint-disable-next-line no-param-reassign
map = sourceMap && map ? (0, _utils.normalizeSourceMap)(map) : null; // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
if (meta) {
const {
ast
} = meta;
if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
// eslint-disable-next-line no-param-reassign
content = ast.root;
}
}
const sourceMap = options.sourceMap || false;
const plugins = [];

@@ -75,2 +60,14 @@

}));
} // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
if (meta) {
const {
ast
} = meta;
if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
// eslint-disable-next-line no-param-reassign
content = ast.root;
}
}

@@ -82,3 +79,4 @@

map: options.sourceMap ? {
prev: map,
// Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
prev: sourceMap && map ? (0, _utils.normalizeSourceMap)(map) : null,
inline: false,

@@ -108,16 +106,12 @@ annotation: false

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

@@ -124,0 +118,0 @@ callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);

@@ -12,2 +12,4 @@ "use strict";

var _loaderUtils = require("loader-utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -17,2 +19,27 @@

function normalizeIcssImports(icssImports) {
return Object.keys(icssImports).reduce((accumulator, url) => {
const tokensMap = icssImports[url];
const tokens = Object.keys(tokensMap);
if (tokens.length === 0) {
return accumulator;
}
const normalizedUrl = (0, _loaderUtils.urlToRequest)(url);
if (!accumulator[normalizedUrl]) {
// eslint-disable-next-line no-param-reassign
accumulator[normalizedUrl] = tokensMap;
} else {
// eslint-disable-next-line no-param-reassign
accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
...tokensMap
};
}
return accumulator;
}, {});
}
var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {

@@ -24,9 +51,4 @@ const importReplacements = Object.create(null);

} = (0, _icssUtils.extractICSS)(css);
Object.keys(icssImports).forEach((url, importIndex) => {
const tokens = Object.keys(icssImports[url]);
if (tokens.length === 0) {
return;
}
const normalizedIcssImports = normalizeIcssImports(icssImports);
Object.keys(normalizedIcssImports).forEach((url, importIndex) => {
const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;

@@ -38,10 +60,12 @@ result.messages.push({

type: 'icss-import',
name: importName,
importName,
url
}
});
const tokenMap = normalizedIcssImports[url];
const tokens = Object.keys(tokenMap);
tokens.forEach((token, replacementIndex) => {
const name = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
const localName = icssImports[url][token];
importReplacements[token] = name;
const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
const localName = tokenMap[token];
importReplacements[token] = replacementName;
result.messages.push({

@@ -52,4 +76,4 @@ pluginName,

type: 'icss-import',
name,
importName,
replacementName,
localName

@@ -56,0 +80,0 @@ }

@@ -12,2 +12,6 @@ "use strict";

var _loaderUtils = require("loader-utils");
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -17,13 +21,21 @@

function getArg(nodes) {
return nodes.length !== 0 && nodes[0].type === 'string' ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
}
function getUrl(node) {
function getParsedValue(node) {
if (node.type === 'function' && node.value.toLowerCase() === 'url') {
return getArg(node.nodes);
const {
nodes
} = node;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
return {
url,
isStringValue
};
}
if (node.type === 'string') {
return node.value;
const url = node.value;
return {
url,
isStringValue: true
};
}

@@ -43,8 +55,23 @@

const url = getUrl(nodes[0]);
const value = getParsedValue(nodes[0]);
if (!url || url.trim().length === 0) {
if (!value) {
return null;
}
let {
url
} = value;
if (url.trim().length === 0) {
return null;
}
if ((0, _loaderUtils.isUrlRequest)(url)) {
const {
isStringValue
} = value;
url = (0, _utils.normalizeUrl)(url, isStringValue);
}
return {

@@ -57,3 +84,3 @@ url,

function walkAtRules(css, result, filter) {
const items = new Map();
const items = [];
css.walkAtRules(/^import$/i, atRule => {

@@ -86,13 +113,3 @@ // Convert only top-level @import

atRule.remove();
const {
url,
media
} = parsed;
const value = items.get(url);
if (!value) {
items.set(url, new Set([media]));
} else {
value.add(media);
}
items.push(parsed);
});

@@ -104,12 +121,3 @@ return items;

const items = walkAtRules(css, result, options.filter);
[...items].reduce((accumulator, currentValue) => {
const [url, medias] = currentValue;
medias.forEach(media => {
accumulator.push({
url,
media
});
});
return accumulator;
}, []).forEach((item, index) => {
items.forEach(item => {
const {

@@ -119,3 +127,2 @@ url,

} = item;
const name = `___CSS_LOADER_AT_RULE_IMPORT_${index}___`;
result.messages.push({

@@ -126,3 +133,2 @@ pluginName,

type: '@import',
name,
url,

@@ -129,0 +135,0 @@ media

@@ -12,2 +12,4 @@ "use strict";

var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -24,6 +26,2 @@

function getUrlFromUrlFunc(node) {
return node.nodes.length !== 0 && node.nodes[0].type === 'string' ? node.nodes[0].value : _postcssValueParser.default.stringify(node.nodes);
}
function walkUrls(parsed, callback) {

@@ -36,3 +34,8 @@ parsed.walk(node => {

if (isUrlFunc.test(node.value)) {
callback(getNodeFromUrlFunc(node), getUrlFromUrlFunc(node), false); // Do not traverse inside `url`
const {
nodes
} = node;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
callback(getNodeFromUrlFunc(node), url, false, isStringValue); // Do not traverse inside `url`
// eslint-disable-next-line consistent-return

@@ -45,8 +48,18 @@

node.nodes.forEach(nNode => {
if (nNode.type === 'function' && isUrlFunc.test(nNode.value)) {
callback(getNodeFromUrlFunc(nNode), getUrlFromUrlFunc(nNode), false);
const {
type,
value
} = nNode;
if (type === 'function' && isUrlFunc.test(value)) {
const {
nodes
} = nNode;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
callback(getNodeFromUrlFunc(nNode), url, false, isStringValue);
}
if (nNode.type === 'string') {
callback(nNode, nNode.value, true);
if (type === 'string') {
callback(nNode, value, true, true);
}

@@ -68,3 +81,3 @@ }); // Do not traverse inside `image-set`

const urls = [];
walkUrls(parsed, (node, url, needQuotes) => {
walkUrls(parsed, (node, url, needQuotes, isStringValue) => {
if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {

@@ -81,4 +94,6 @@ result.warn(`Unable to find uri in '${decl ? decl.toString() : value}'`, {

const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
const splittedUrl = url.split(/(\?)?#/);
const [urlWithoutHash, singleQuery, hashValue] = splittedUrl;
const hash = singleQuery || hashValue ? `${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}` : '';
const normalizedUrl = (0, _utils.normalizeUrl)(urlWithoutHash, isStringValue);
urls.push({

@@ -147,5 +162,6 @@ node,

const traversed = walkDecls(css, result, options.filter);
const paths = collectUniqueUrlsWithNodes(flatten(traversed.map(item => item.urls)));
const flattenTraversed = flatten(traversed.map(item => item.urls));
const urlsWithNodes = collectUniqueUrlsWithNodes(flattenTraversed);
const replacers = new Map();
paths.forEach((path, index) => {
urlsWithNodes.forEach((urlWithNodes, index) => {
const {

@@ -156,4 +172,4 @@ url,

nodes
} = path;
const name = `___CSS_LOADER_URL_IMPORT_${index}___`;
} = urlWithNodes;
const replacementName = `___CSS_LOADER_URL_REPLACEMENT_${index}___`;
result.messages.push({

@@ -164,7 +180,6 @@ pluginName,

type: 'url',
name,
replacementName,
url,
needQuotes,
hash,
index
hash
}

@@ -176,7 +191,7 @@ }, {

type: 'url',
name
replacementName
}
});
nodes.forEach(node => {
replacers.set(node, name);
replacers.set(node, replacementName);
});

@@ -186,5 +201,5 @@ });

walkUrls(item.parsed, node => {
const name = replacers.get(node);
const replacementName = replacers.get(node);
if (!name) {
if (!replacementName) {
return;

@@ -196,3 +211,3 @@ } // eslint-disable-next-line no-param-reassign

node.value = name;
node.value = replacementName;
}); // eslint-disable-next-line no-param-reassign

@@ -199,0 +214,0 @@

@@ -6,6 +6,6 @@ "use strict";

});
exports.normalizeUrl = normalizeUrl;
exports.getFilter = getFilter;
exports.getModulesPlugins = getModulesPlugins;
exports.normalizeSourceMap = normalizeSourceMap;
exports.getApiCode = getApiCode;
exports.getImportCode = getImportCode;

@@ -43,12 +43,2 @@ exports.getModuleCode = getModuleCode;

*/
function getImportPrefix(loaderContext, importLoaders) {
if (importLoaders === false) {
return '';
}
const numberImportedLoaders = parseInt(importLoaders, 10) || 0;
const loadersRequest = loaderContext.loaders.slice(loaderContext.loaderIndex, loaderContext.loaderIndex + 1 + numberImportedLoaders).map(x => x.request).join('!');
return `-!${loadersRequest}!`;
}
const whitespace = '[\\x20\\t\\r\\n\\f]';

@@ -96,2 +86,12 @@ const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, 'ig');

function normalizeUrl(url, isStringValue) {
let normalizedUrl = url;
if (isStringValue && /\\[\n]/.test(normalizedUrl)) {
normalizedUrl = normalizedUrl.replace(/\\[\n]/g, '');
}
return (0, _loaderUtils.urlToRequest)(decodeURIComponent(unescape(normalizedUrl)));
}
function getFilter(filter, resourcePath, defaultFilter = null) {

@@ -174,69 +174,113 @@ return item => {

function getApiCode(loaderContext, sourceMap) {
const url = (0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'));
return `exports = module.exports = require(${url})(${sourceMap});\n`;
function getImportPrefix(loaderContext, importLoaders) {
if (importLoaders === false) {
return '';
}
const numberImportedLoaders = parseInt(importLoaders, 10) || 0;
const loadersRequest = loaderContext.loaders.slice(loaderContext.loaderIndex, loaderContext.loaderIndex + 1 + numberImportedLoaders).map(x => x.request).join('!');
return `-!${loadersRequest}!`;
}
function getImportCode(loaderContext, imports, options) {
function getImportCode(loaderContext, imports, exportType, sourceMap, importLoaders) {
const importItems = [];
const codeItems = [];
const atRuleImportNames = new Map();
const urlImportNames = new Map();
let hasUrlHelperCode = false;
let importPrefix;
if (exportType === 'full') {
importItems.push(`var ___CSS_LOADER_API_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))});`);
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)}` : '';
// eslint-disable-next-line default-case
switch (item.type) {
case '@import':
{
const {
url,
media
} = item;
const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
if (!(0, _loaderUtils.isUrlRequest)(item.url)) {
const url = JSON.stringify(`@import url(${item.url});`);
codeItems.push(`exports.push([module.id, ${url}${media}]);`);
return;
}
if (!(0, _loaderUtils.isUrlRequest)(url)) {
codeItems.push(`exports.push([module.id, ${JSON.stringify(`@import url(${url});`)}${preparedMedia}]);`);
return;
}
if (!importPrefix) {
importPrefix = getImportPrefix(loaderContext, options.importLoaders);
}
let importName = atRuleImportNames.get(url);
const url = (0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + (0, _loaderUtils.urlToRequest)(item.url));
importItems.push(`var ${item.name} = require(${url});`);
if (!importName) {
if (!importPrefix) {
importPrefix = getImportPrefix(loaderContext, importLoaders);
}
if (options.exportType === 'full') {
codeItems.push(`exports.i(${item.name}${media});`);
}
}
importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
atRuleImportNames.set(url, importName);
}
if (item.type === 'url') {
if (!hasUrlHelperCode) {
const pathToGetUrl = require.resolve('./runtime/getUrl.js');
codeItems.push(`exports.i(${importName}${preparedMedia});`);
}
break;
const url = (0, _loaderUtils.stringifyRequest)(loaderContext, pathToGetUrl);
importItems.push(`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${url});`);
hasUrlHelperCode = true;
}
case 'url':
{
if (urlImportNames.size === 0) {
importItems.push(`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))});`);
}
const {
name,
url,
hash,
needQuotes,
index
} = item;
let importName = urlImportNames.get(url);
const {
replacementName,
url,
hash,
needQuotes
} = item;
let importName = urlImportNames.get(url);
if (!importName) {
const preparedUrl = (0, _loaderUtils.stringifyRequest)(loaderContext, (0, _loaderUtils.urlToRequest)(url));
importName = `___CSS_LOADER_URL_PURE_IMPORT_${index}___`;
importItems.push(`var ${importName} = require(${preparedUrl});`);
urlImportNames.set(url, importName);
}
if (!importName) {
importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, url)});`);
urlImportNames.set(url, importName);
}
const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? 'needQuotes: true' : []);
const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
codeItems.push(`var ${name} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});`);
const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? 'needQuotes: true' : []);
const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
codeItems.push(`var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});`);
}
break;
case 'icss-import':
{
const {
importName,
url,
media
} = item;
const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
if (!importPrefix) {
importPrefix = getImportPrefix(loaderContext, importLoaders);
}
importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
if (exportType === 'full') {
codeItems.push(`exports.i(${importName}${preparedMedia});`);
}
}
break;
}
});
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 {

@@ -251,7 +295,7 @@ css,

type,
name
replacementName
} = replacer;
if (type === 'url') {
cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${name} + "`);
cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${replacementName} + "`);
}

@@ -264,3 +308,3 @@

} = replacer;
cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
}

@@ -275,8 +319,12 @@ });

function getExportCode(loaderContext, exports, replacers, options) {
function getExportCode(loaderContext, exports, exportType, replacers, localsConvention) {
if (exports.length === 0) {
return '';
}
const items = [];
function addExportedItem(name, value) {
const addExportedItem = (name, value) => {
items.push(`\t${JSON.stringify(name)}: ${JSON.stringify(value)}`);
}
};

@@ -289,3 +337,3 @@ exports.forEach(item => {

switch (options.localsConvention) {
switch (localsConvention) {
case 'camelCase':

@@ -333,11 +381,11 @@ {

});
let exportCode = `// Exports\n${options.exportType === 'locals' ? 'module.exports' : 'exports.locals'} = {\n${items.join(',\n')}\n};`;
let exportCode = `// Exports\n${exportType === 'locals' ? 'module.exports' : 'exports.locals'} = {\n${items.join(',\n')}\n};`;
replacers.forEach(replacer => {
if (replacer.type === 'icss-import') {
const {
name,
importName
replacementName,
importName,
localName
} = replacer;
const localName = JSON.stringify(replacer.localName);
exportCode = exportCode.replace(new RegExp(name, 'g'), () => options.exportType === 'locals' ? `" + ${importName}[${localName}] + "` : `" + ${importName}.locals[${localName}] + "`);
exportCode = exportCode.replace(new RegExp(replacementName, 'g'), () => exportType === 'locals' ? `" + ${importName}[${JSON.stringify(localName)}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
}

@@ -344,0 +392,0 @@ });

{
"name": "css-loader",
"version": "3.3.0",
"version": "3.3.1",
"description": "css loader module for webpack",

@@ -5,0 +5,0 @@ "license": "MIT",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc