Socket
Socket
Sign inDemoInstall

css-loader

Package Overview
Dependencies
95
Maintainers
7
Versions
151
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.3.0 to 5.0.0

dist/runtime/cssWithMappingToString.js

20

CHANGELOG.md

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

## [5.0.0](https://github.com/webpack-contrib/css-loader/compare/v4.3.0...v5.0.0) (2020-10-13)
### ⚠ BREAKING CHANGES
* migrate on PostCSS 8
* runtime doesn't contain source maps code without `sourceMap: true`
* returned value from the `getLocalIdent` escapes by default, the `exportName` value is always unescaped
* Auto enable icss modules for all files for which `/\.icss\.\w+$/i` (the `modules.compileType` option is `icss`)
* `[emoji]` placeholder was deprecated
* `icss` option was removed (it was deprecated previously)
### Features
* allow named exports to have underscores in names ([#1209](https://github.com/webpack-contrib/css-loader/issues/1209)) ([747d62b](https://github.com/webpack-contrib/css-loader/commit/747d62b75a878d8881f4819b96297667dc689b8f))
* hide warning when you don't need handle `url()`/`@import` ([#1195](https://github.com/webpack-contrib/css-loader/issues/1195)) ([dd52931](https://github.com/webpack-contrib/css-loader/commit/dd52931150ed42f122d9017642437c26cc1b2422))
* improve error message ([52412f6](https://github.com/webpack-contrib/css-loader/commit/52412f6d5a54745ee37a4a67f038455c26ba5772))
* reduce runtime ([9f974be](https://github.com/webpack-contrib/css-loader/commit/9f974be81f5942d3afaf783529677bd541952fa3))
* add fallback if custom getLocalIdent returns `null`/`undefined` ([#1193](https://github.com/webpack-contrib/css-loader/issues/1193)) ([0f95841](https://github.com/webpack-contrib/css-loader/commit/0f9584135e63f9f354043e7f414e0c1aad0edc6e))
## [4.3.0](https://github.com/webpack-contrib/css-loader/compare/v4.2.2...v4.3.0) (2020-09-08)

@@ -7,0 +27,0 @@

4

dist/CssSyntaxError.js

@@ -14,3 +14,4 @@ "use strict";

line,
column
column,
file
} = error;

@@ -26,2 +27,3 @@ this.name = 'CssSyntaxError'; // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132

this.message += file ? `${file} ` : '<css input> ';
this.message += `${reason}`;

@@ -28,0 +30,0 @@ const code = error.showSourceCode();

12

dist/index.js

@@ -14,3 +14,3 @@ "use strict";

var _schemaUtils = _interopRequireDefault(require("schema-utils"));
var _schemaUtils = require("schema-utils");

@@ -37,3 +37,3 @@ var _semver = require("semver");

const rawOptions = (0, _loaderUtils.getOptions)(this);
(0, _schemaUtils.default)(_options.default, rawOptions, {
(0, _schemaUtils.validate)(_options.default, rawOptions, {
name: 'CSS Loader',

@@ -143,2 +143,3 @@ baseDataPath: 'options'

result = await (0, _postcss.default)(plugins).process(content, {
hideNothingWarning: true,
from: resourcePath,

@@ -173,2 +174,9 @@ to: resourcePath,

});
if (options.sourceMap) {
imports.unshift({
importName: '___CSS_LOADER_API_SOURCEMAP_IMPORT___',
url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/cssWithMappingToString'))
});
}
}

@@ -175,0 +183,0 @@

4

dist/options.json

@@ -125,6 +125,2 @@ {

},
"icss": {
"description": "Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)",
"type": "boolean"
},
"sourceMap": {

@@ -131,0 +127,0 @@ "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",

177

dist/plugins/postcss-icss-parser.js

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

var _postcss = _interopRequireDefault(require("postcss"));
var _icssUtils = require("icss-utils");

@@ -15,101 +13,108 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const plugin = (options = {}) => {
return {
postcssPlugin: 'postcss-icss-parser',
var _default = _postcss.default.plugin('postcss-icss-parser', options => async css => {
const importReplacements = Object.create(null);
const {
icssImports,
icssExports
} = (0, _icssUtils.extractICSS)(css);
const imports = new Map();
const tasks = []; // eslint-disable-next-line guard-for-in
async OnceExit(root) {
const importReplacements = Object.create(null);
const {
icssImports,
icssExports
} = (0, _icssUtils.extractICSS)(root);
const imports = new Map();
const tasks = []; // eslint-disable-next-line guard-for-in
for (const url in icssImports) {
const tokens = icssImports[url];
for (const url in icssImports) {
const tokens = icssImports[url];
if (Object.keys(tokens).length === 0) {
// eslint-disable-next-line no-continue
continue;
}
if (Object.keys(tokens).length === 0) {
// eslint-disable-next-line no-continue
continue;
}
let normalizedUrl = url;
let prefix = '';
const queryParts = normalizedUrl.split('!');
let normalizedUrl = url;
let prefix = '';
const queryParts = normalizedUrl.split('!');
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
const doResolve = async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
return {
url: resolvedUrl,
prefix,
tokens
};
};
const doResolve = async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
return {
url: resolvedUrl,
prefix,
tokens
};
};
tasks.push(doResolve());
}
tasks.push(doResolve());
}
const results = await Promise.all(tasks);
const results = await Promise.all(tasks);
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
prefix,
tokens
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
prefix,
tokens
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
if (!importName) {
importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
icss: true,
index
});
options.api.push({
importName,
dedupe: true,
index
});
}
if (!importName) {
importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
icss: true,
index
});
options.api.push({
importName,
dedupe: true,
index
});
}
for (const [replacementIndex, token] of Object.keys(tokens).entries()) {
const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
const localName = tokens[token];
importReplacements[token] = replacementName;
options.replacements.push({
replacementName,
importName,
localName
});
for (const [replacementIndex, token] of Object.keys(tokens).entries()) {
const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
const localName = tokens[token];
importReplacements[token] = replacementName;
options.replacements.push({
replacementName,
importName,
localName
});
}
}
if (Object.keys(importReplacements).length > 0) {
(0, _icssUtils.replaceSymbols)(root, importReplacements);
}
for (const name of Object.keys(icssExports)) {
const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
options.exports.push({
name,
value
});
}
}
}
if (Object.keys(importReplacements).length > 0) {
(0, _icssUtils.replaceSymbols)(css, importReplacements);
}
};
};
for (const name of Object.keys(icssExports)) {
const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
options.exports.push({
name,
value
});
}
});
plugin.postcss = true;
var _default = plugin;
exports.default = _default;

330

dist/plugins/postcss-import-parser.js

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

var _util = require("util");
var _postcss = _interopRequireDefault(require("postcss"));
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));

@@ -19,28 +15,39 @@

const pluginName = 'postcss-import-parser';
function visitor(result, parsedResults, node, key) {
// Convert only top-level @import
if (node.parent.type !== 'root') {
return;
} // Nodes do not exists - `@import url('http://') :root {}`
function walkAtRules(css, result, options, callback) {
const accumulator = [];
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 (node.nodes) {
result.warn("It looks like you didn't end your @import statement correctly. Child nodes are attached to it.", {
node
});
return;
}
if (atRule.nodes) {
result.warn("It looks like you didn't end your @import statement correctly. Child nodes are attached to it.", {
node: atRule
});
return;
}
const {
nodes: paramsNodes
} = (0, _postcssValueParser.default)(node[key]); // No nodes - `@import ;`
// Invalid type - `@import foo-bar;`
const {
nodes: paramsNodes
} = (0, _postcssValueParser.default)(atRule.params); // No nodes - `@import ;`
// Invalid type - `@import foo-bar;`
if (paramsNodes.length === 0 || paramsNodes[0].type !== 'string' && paramsNodes[0].type !== 'function') {
result.warn(`Unable to find uri in "${node.toString()}"`, {
node
});
return;
}
if (paramsNodes.length === 0 || paramsNodes[0].type !== 'string' && paramsNodes[0].type !== 'function') {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule
let isStringValue;
let url;
if (paramsNodes[0].type === 'string') {
isStringValue = true;
url = paramsNodes[0].value;
} else {
// Invalid function - `@import nourl(test.css);`
if (paramsNodes[0].value.toLowerCase() !== 'url') {
result.warn(`Unable to find uri in "${node.toString()}"`, {
node
});

@@ -50,168 +57,167 @@ return;

let isStringValue;
let url;
isStringValue = paramsNodes[0].nodes.length !== 0 && paramsNodes[0].nodes[0].type === 'string';
url = isStringValue ? paramsNodes[0].nodes[0].value : _postcssValueParser.default.stringify(paramsNodes[0].nodes);
} // Empty url - `@import "";` or `@import url();`
if (paramsNodes[0].type === 'string') {
isStringValue = true;
url = paramsNodes[0].value;
} else {
// Invalid function - `@import nourl(test.css);`
if (paramsNodes[0].value.toLowerCase() !== 'url') {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule
});
return;
}
isStringValue = paramsNodes[0].nodes.length !== 0 && paramsNodes[0].nodes[0].type === 'string';
url = isStringValue ? paramsNodes[0].nodes[0].value : _postcssValueParser.default.stringify(paramsNodes[0].nodes);
} // Empty url - `@import "";` or `@import url();`
if (url.trim().length === 0) {
result.warn(`Unable to find uri in "${node.toString()}"`, {
node
});
return;
}
if (url.trim().length === 0) {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule
});
return;
}
accumulator.push({
atRule,
url,
isStringValue,
mediaNodes: paramsNodes.slice(1)
});
parsedResults.push({
node,
url,
isStringValue,
mediaNodes: paramsNodes.slice(1)
});
callback(null, accumulator);
}
const asyncWalkAtRules = (0, _util.promisify)(walkAtRules);
const plugin = (options = {}) => {
return {
postcssPlugin: 'postcss-import-parser',
var _default = _postcss.default.plugin(pluginName, options => async (css, result) => {
const parsedResults = await asyncWalkAtRules(css, result, options);
prepare(result) {
const parsedResults = [];
return {
AtRule: {
import(atRule) {
visitor(result, parsedResults, atRule, 'params');
}
if (parsedResults.length === 0) {
return Promise.resolve();
}
},
const imports = new Map();
const tasks = [];
async OnceExit() {
if (parsedResults.length === 0) {
return;
}
for (const parsedResult of parsedResults) {
const {
atRule,
url,
isStringValue,
mediaNodes
} = parsedResult;
let normalizedUrl = url;
let prefix = '';
const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
const imports = new Map();
const tasks = [];
if (isRequestable) {
const queryParts = normalizedUrl.split('!');
for (const parsedResult of parsedResults) {
const {
node,
url,
isStringValue,
mediaNodes
} = parsedResult;
let normalizedUrl = url;
let prefix = '';
const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
if (isRequestable) {
const queryParts = normalizedUrl.split('!');
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
// \
// \
// ';
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
if (normalizedUrl.trim().length === 0) {
result.warn(`Unable to find uri in "${atRule.toString()}"`, {
node: atRule
}); // eslint-disable-next-line no-continue
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
// \
// \
// ';
continue;
}
}
if (normalizedUrl.trim().length === 0) {
result.warn(`Unable to find uri in "${node.toString()}"`, {
node
}); // eslint-disable-next-line no-continue
let media;
continue;
}
}
if (mediaNodes.length > 0) {
media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
}
let media;
if (options.filter && !options.filter(normalizedUrl, media)) {
// eslint-disable-next-line no-continue
continue;
}
if (mediaNodes.length > 0) {
media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
}
atRule.remove();
if (options.filter && !options.filter(normalizedUrl, media)) {
// eslint-disable-next-line no-continue
continue;
}
if (isRequestable) {
const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
tasks.push((async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
return {
url: resolvedUrl,
media,
prefix,
isRequestable
};
})());
} else {
tasks.push({
url,
media,
prefix,
isRequestable
});
}
}
node.remove();
const results = await Promise.all(tasks);
if (isRequestable) {
const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
tasks.push((async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
return {
url: resolvedUrl,
media,
prefix,
isRequestable
};
})());
} else {
tasks.push({
url,
media,
prefix,
isRequestable
});
}
}
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
isRequestable,
media
} = results[index];
const results = await Promise.all(tasks);
if (isRequestable) {
const {
prefix
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
isRequestable,
media
} = results[index];
if (!importName) {
importName = `___CSS_LOADER_AT_RULE_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
index
});
}
if (isRequestable) {
const {
prefix
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
options.api.push({
importName,
media,
index
}); // eslint-disable-next-line no-continue
if (!importName) {
importName = `___CSS_LOADER_AT_RULE_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
index
});
}
continue;
options.api.push({
importName,
media,
index
}); // eslint-disable-next-line no-continue
continue;
}
options.api.push({
url,
media,
index
});
}
}
};
}
options.api.push({
url,
media,
index
});
}
};
};
return Promise.resolve();
});
plugin.postcss = true;
var _default = plugin;
exports.default = _default;

376

dist/plugins/postcss-url-parser.js

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

var _util = require("util");
var _postcss = _interopRequireDefault(require("postcss"));
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));

@@ -19,6 +15,5 @@

const pluginName = 'postcss-url-parser';
const isUrlFunc = /url/i;
const isImageSetFunc = /^(?:-webkit-)?image-set$/i;
const needParseDecl = /(?:url|(?:-webkit-)?image-set)\(/i;
const needParseDeclaration = /(?:url|(?:-webkit-)?image-set)\(/i;

@@ -29,7 +24,7 @@ function getNodeFromUrlFunc(node) {

function shouldHandleRule(rule, decl, result) {
function shouldHandleRule(rule, node, result) {
// https://www.w3.org/TR/css-syntax-3/#typedef-url-token
if (rule.url.replace(/^[\s]+|[\s]+$/g, '').length === 0) {
result.warn(`Unable to find uri in '${decl.toString()}'`, {
node: decl
result.warn(`Unable to find uri in '${node.toString()}'`, {
node
});

@@ -46,216 +41,225 @@ return false;

function walkCss(css, result, options, callback) {
const accumulator = [];
css.walkDecls(decl => {
if (!needParseDecl.test(decl.value)) {
function visitor(result, parsedResults, node, key) {
if (!needParseDeclaration.test(node[key])) {
return;
}
const parsed = (0, _postcssValueParser.default)(node[key]);
parsed.walk(valueNode => {
if (valueNode.type !== 'function') {
return;
}
const parsed = (0, _postcssValueParser.default)(decl.value);
parsed.walk(node => {
if (node.type !== 'function') {
return;
}
if (isUrlFunc.test(valueNode.value)) {
const {
nodes
} = valueNode;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
const rule = {
node: getNodeFromUrlFunc(valueNode),
url,
needQuotes: false,
isStringValue
};
if (isUrlFunc.test(node.value)) {
const {
nodes
} = node;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
const rule = {
node: getNodeFromUrlFunc(node),
url,
needQuotes: false,
isStringValue
};
if (shouldHandleRule(rule, node, result)) {
parsedResults.push({
node,
rule,
parsed
});
} // Do not traverse inside `url`
// eslint-disable-next-line consistent-return
if (shouldHandleRule(rule, decl, result)) {
accumulator.push({
decl,
rule,
parsed
});
} // Do not traverse inside `url`
// eslint-disable-next-line consistent-return
return false;
} else if (isImageSetFunc.test(valueNode.value)) {
for (const nNode of valueNode.nodes) {
const {
type,
value
} = nNode;
return false;
} else if (isImageSetFunc.test(node.value)) {
for (const nNode of node.nodes) {
if (type === 'function' && isUrlFunc.test(value)) {
const {
type,
value
nodes
} = nNode;
const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
const rule = {
node: getNodeFromUrlFunc(nNode),
url,
needQuotes: false,
isStringValue
};
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);
const rule = {
node: getNodeFromUrlFunc(nNode),
url,
needQuotes: false,
isStringValue
};
if (shouldHandleRule(rule, node, result)) {
parsedResults.push({
node,
rule,
parsed
});
}
} else if (type === 'string') {
const rule = {
node: nNode,
url: value,
needQuotes: true,
isStringValue: true
};
if (shouldHandleRule(rule, decl, result)) {
accumulator.push({
decl,
rule,
parsed
});
}
} else if (type === 'string') {
const rule = {
node: nNode,
url: value,
needQuotes: true,
isStringValue: true
};
if (shouldHandleRule(rule, decl, result)) {
accumulator.push({
decl,
rule,
parsed
});
}
if (shouldHandleRule(rule, node, result)) {
parsedResults.push({
node,
rule,
parsed
});
}
} // Do not traverse inside `image-set`
// eslint-disable-next-line consistent-return
}
} // Do not traverse inside `image-set`
// eslint-disable-next-line consistent-return
return false;
}
});
return false;
}
});
callback(null, accumulator);
}
const asyncWalkCss = (0, _util.promisify)(walkCss);
const plugin = (options = {}) => {
return {
postcssPlugin: 'postcss-url-parser',
var _default = _postcss.default.plugin(pluginName, options => async (css, result) => {
const parsedResults = await asyncWalkCss(css, result, options);
prepare(result) {
const parsedResults = [];
return {
Declaration(declaration) {
visitor(result, parsedResults, declaration, 'value');
},
if (parsedResults.length === 0) {
return Promise.resolve();
}
async OnceExit() {
if (parsedResults.length === 0) {
return;
}
const tasks = [];
const imports = new Map();
const replacements = new Map();
let hasUrlImportHelper = false;
const tasks = [];
const imports = new Map();
const replacements = new Map();
let hasUrlImportHelper = false;
for (const parsedResult of parsedResults) {
const {
url,
isStringValue
} = parsedResult.rule;
let normalizedUrl = url;
let prefix = '';
const queryParts = normalizedUrl.split('!');
for (const parsedResult of parsedResults) {
const {
url,
isStringValue
} = parsedResult.rule;
let normalizedUrl = url;
let prefix = '';
const queryParts = normalizedUrl.split('!');
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
if (queryParts.length > 1) {
normalizedUrl = queryParts.pop();
prefix = queryParts.join('!');
}
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue);
normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue);
if (!options.filter(normalizedUrl)) {
// eslint-disable-next-line no-continue
continue;
}
if (!options.filter(normalizedUrl)) {
// eslint-disable-next-line no-continue
continue;
}
if (!hasUrlImportHelper) {
options.imports.push({
importName: '___CSS_LOADER_GET_URL_IMPORT___',
url: options.urlHandler(require.resolve('../runtime/getUrl.js')),
index: -1
});
hasUrlImportHelper = true;
}
if (!hasUrlImportHelper) {
options.imports.push({
importName: '___CSS_LOADER_GET_URL_IMPORT___',
url: options.urlHandler(require.resolve('../runtime/getUrl.js')),
index: -1
});
hasUrlImportHelper = true;
}
const splittedUrl = normalizedUrl.split(/(\?)?#/);
const [pathname, query, hashOrQuery] = splittedUrl;
let hash = query ? '?' : '';
hash += hashOrQuery ? `#${hashOrQuery}` : '';
const request = (0, _utils.requestify)(pathname, options.rootContext);
tasks.push((async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
return {
url: resolvedUrl,
prefix,
hash,
parsedResult
};
})());
}
const splittedUrl = normalizedUrl.split(/(\?)?#/);
const [pathname, query, hashOrQuery] = splittedUrl;
let hash = query ? '?' : '';
hash += hashOrQuery ? `#${hashOrQuery}` : '';
const request = (0, _utils.requestify)(pathname, options.rootContext);
tasks.push((async () => {
const {
resolver,
context
} = options;
const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, normalizedUrl])]);
return {
url: resolvedUrl,
prefix,
hash,
parsedResult
};
})());
}
const results = await Promise.all(tasks);
const results = await Promise.all(tasks);
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
prefix,
hash,
parsedResult: {
decl,
rule,
parsed
}
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
for (let index = 0; index <= results.length - 1; index++) {
const {
url,
prefix,
hash,
parsedResult: {
node,
rule,
parsed
}
} = results[index];
const newUrl = prefix ? `${prefix}!${url}` : url;
const importKey = newUrl;
let importName = imports.get(importKey);
if (!importName) {
importName = `___CSS_LOADER_URL_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
index
});
}
if (!importName) {
importName = `___CSS_LOADER_URL_IMPORT_${imports.size}___`;
imports.set(importKey, importName);
options.imports.push({
importName,
url: options.urlHandler(newUrl),
index
});
}
const {
needQuotes
} = rule;
const replacementKey = JSON.stringify({
newUrl,
hash,
needQuotes
});
let replacementName = replacements.get(replacementKey);
const {
needQuotes
} = rule;
const replacementKey = JSON.stringify({
newUrl,
hash,
needQuotes
});
let replacementName = replacements.get(replacementKey);
if (!replacementName) {
replacementName = `___CSS_LOADER_URL_REPLACEMENT_${replacements.size}___`;
replacements.set(replacementKey, replacementName);
options.replacements.push({
replacementName,
importName,
hash,
needQuotes
});
} // eslint-disable-next-line no-param-reassign
if (!replacementName) {
replacementName = `___CSS_LOADER_URL_REPLACEMENT_${replacements.size}___`;
replacements.set(replacementKey, replacementName);
options.replacements.push({
replacementName,
importName,
hash,
needQuotes
});
} // eslint-disable-next-line no-param-reassign
rule.node.type = 'word'; // eslint-disable-next-line no-param-reassign
rule.node.type = 'word'; // eslint-disable-next-line no-param-reassign
rule.node.value = replacementName; // eslint-disable-next-line no-param-reassign
rule.node.value = replacementName; // eslint-disable-next-line no-param-reassign
decl.value = parsed.toString();
}
node.value = parsed.toString();
}
}
return Promise.resolve();
});
};
}
};
};
plugin.postcss = true;
var _default = plugin;
exports.default = _default;

34

dist/runtime/api.js

@@ -9,3 +9,3 @@ "use strict";

// eslint-disable-next-line func-names
module.exports = function (useSourceMap) {
module.exports = function (cssWithMappingToString) {
var list = []; // return the list of modules as css string

@@ -15,3 +15,3 @@

return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
var content = cssWithMappingToString(item);

@@ -68,30 +68,2 @@ if (item[2]) {

return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
} // Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
return "/*# ".concat(data, " */");
}
};

86

dist/utils.js

@@ -78,2 +78,9 @@ "use strict";

function escapeLocalident(localident) {
return (0, _cssesc.default)(localident // For `[hash]` placeholder
.replace(/^((-?[0-9])|--)/, '_$1').replace(filenameReservedRegex, '-').replace(reControlChars, '-').replace(/\./g, '-'), {
isIdentifier: true
});
}
function defaultGetLocalIdent(loaderContext, localIdentName, localName, options) {

@@ -89,9 +96,4 @@ const {

options.content = `${hashPrefix + request}\x00${unescape(localName)}`; // Using `[path]` placeholder outputs `/` we need escape their
// Also directories can contains invalid characters for css we need escape their too
return (0, _cssesc.default)((0, _loaderUtils.interpolateName)(loaderContext, localIdentName, options) // For `[hash]` placeholder
.replace(/^((-?[0-9])|--)/, '_$1').replace(filenameReservedRegex, '-').replace(reControlChars, '-').replace(/\./g, '-'), {
isIdentifier: true
}).replace(/\\\[local\\]/gi, localName);
options.content = `${hashPrefix + request}\x00${localName}`;
return (0, _loaderUtils.interpolateName)(loaderContext, localIdentName, options);
}

@@ -131,4 +133,13 @@

const moduleRegExp = /\.module\.\w+$/i;
function getValidLocalName(localName, exportLocalsConvention) {
if (exportLocalsConvention === 'dashesOnly') {
return dashesCamelCase(localName);
}
return (0, _camelcase.default)(localName);
}
const moduleRegExp = /\.module(s)?\.\w+$/i;
const icssRegExp = /\.icss\.\w+$/i;
function getModulesOptions(rawOptions, loaderContext) {

@@ -138,2 +149,3 @@ const {

} = loaderContext;
let isIcss;

@@ -144,2 +156,6 @@ if (typeof rawOptions.modules === 'undefined') {

if (!isModules) {
isIcss = icssRegExp.test(resourcePath);
}
if (!isModules && !isIcss) {
return false;

@@ -152,3 +168,3 @@ }

let modulesOptions = {
compileType: rawOptions.icss ? 'icss' : 'module',
compileType: isIcss ? 'icss' : 'module',
auto: true,

@@ -162,3 +178,4 @@ mode: 'local',

localIdentRegExp: undefined,
getLocalIdent: defaultGetLocalIdent,
// eslint-disable-next-line no-undefined
getLocalIdent: undefined,
namedExport: false,

@@ -212,7 +229,11 @@ exportLocalsConvention: 'asIs',

if (modulesOptions.exportLocalsConvention !== 'camelCaseOnly') {
throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly"');
if (modulesOptions.exportLocalsConvention !== 'camelCaseOnly' && modulesOptions.exportLocalsConvention !== 'dashesOnly') {
throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly" or "dashesOnly"');
}
}
if (/\[emoji(?::(\d+))?\]/i.test(modulesOptions.localIdentName)) {
loaderContext.emitWarning('Emoji is deprecated and will be removed in next major release.');
}
return modulesOptions;

@@ -222,6 +243,2 @@ }

function normalizeOptions(rawOptions, loaderContext) {
if (rawOptions.icss) {
loaderContext.emitWarning(new Error('The "icss" option is deprecated, use "modules.compileType: "icss"" instead'));
}
const modulesOptions = getModulesOptions(rawOptions, loaderContext);

@@ -232,4 +249,2 @@ return {

modules: modulesOptions,
// TODO remove in the next major release
icss: typeof rawOptions.icss === 'undefined' ? false : rawOptions.icss,
sourceMap: typeof rawOptions.sourceMap === 'boolean' ? rawOptions.sourceMap : loaderContext.sourceMap,

@@ -289,7 +304,24 @@ importLoaders: typeof rawOptions.importLoaders === 'string' ? parseInt(rawOptions.importLoaders, 10) : rawOptions.importLoaders,

generateScopedName(exportName) {
return getLocalIdent(loaderContext, localIdentName, exportName, {
context: localIdentContext,
hashPrefix: localIdentHashPrefix,
regExp: localIdentRegExp
});
let localIdent;
if (typeof getLocalIdent !== 'undefined') {
localIdent = getLocalIdent(loaderContext, localIdentName, unescape(exportName), {
context: localIdentContext,
hashPrefix: localIdentHashPrefix,
regExp: localIdentRegExp
});
} // A null/undefined value signals that we should invoke the default
// getLocalIdent method.
if (typeof localIdent === 'undefined' || localIdent === null) {
localIdent = defaultGetLocalIdent(loaderContext, localIdentName, unescape(exportName), {
context: localIdentContext,
hashPrefix: localIdentHashPrefix,
regExp: localIdentRegExp
});
return escapeLocalident(localIdent).replace(/\\\[local\\]/gi, exportName);
}
return escapeLocalident(localIdent);
},

@@ -444,3 +476,3 @@

let code = JSON.stringify(result.css);
let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap});\n`;
let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap ? '___CSS_LOADER_API_SOURCEMAP_IMPORT___' : 'function(i){return i[1]}'});\n`;

@@ -464,3 +496,3 @@ for (const item of api) {

if (localName) {
code = code.replace(new RegExp(replacementName, 'g'), () => options.modules.namedExport ? `" + ${importName}_NAMED___[${JSON.stringify((0, _camelcase.default)(localName))}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
code = code.replace(new RegExp(replacementName, 'g'), () => options.modules.namedExport ? `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
} else {

@@ -491,3 +523,3 @@ const {

if (options.modules.namedExport) {
localsCode += `export const ${(0, _camelcase.default)(name)} = ${JSON.stringify(value)};\n`;
localsCode += `export const ${name} = ${JSON.stringify(value)};\n`;
} else {

@@ -562,3 +594,3 @@ if (localsCode) {

if (options.modules.namedExport) {
return `" + ${importName}_NAMED___[${JSON.stringify((0, _camelcase.default)(localName))}] + "`;
return `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
} else if (options.modules.exportOnlyLocals) {

@@ -565,0 +597,0 @@ return `" + ${importName}[${JSON.stringify(localName)}] + "`;

56

package.json
{
"name": "css-loader",
"version": "4.3.0",
"version": "5.0.0",
"description": "css loader module for webpack",

@@ -46,13 +46,13 @@ "license": "MIT",

"dependencies": {
"camelcase": "^6.0.0",
"camelcase": "^6.1.0",
"cssesc": "^3.0.0",
"icss-utils": "^4.1.1",
"icss-utils": "^5.0.0",
"loader-utils": "^2.0.0",
"postcss": "^7.0.32",
"postcss-modules-extract-imports": "^2.0.0",
"postcss-modules-local-by-default": "^3.0.3",
"postcss-modules-scope": "^2.2.0",
"postcss-modules-values": "^3.0.0",
"postcss": "^8.1.1",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-value-parser": "^4.1.0",
"schema-utils": "^2.7.1",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"

@@ -68,31 +68,31 @@ },

"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"babel-jest": "^26.1.0",
"babel-jest": "^26.5.2",
"cross-env": "^7.0.2",
"del": "^5.1.0",
"del": "^6.0.0",
"del-cli": "^3.0.1",
"es-check": "^5.1.0",
"eslint": "^7.8.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"file-loader": "^6.1.0",
"es-check": "^5.1.1",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-import": "^2.22.1",
"file-loader": "^6.1.1",
"husky": "^4.3.0",
"jest": "^26.4.2",
"jest": "^26.5.3",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"lint-staged": "^10.3.0",
"less-loader": "^7.0.2",
"lint-staged": "^10.4.0",
"memfs": "^3.2.0",
"mini-css-extract-plugin": "^0.11.0",
"mini-css-extract-plugin": "^1.0.0",
"npm-run-all": "^4.1.5",
"postcss-loader": "^4.0.0",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.1.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"prettier": "^2.1.2",
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"standard-version": "^9.0.0",
"strip-ansi": "^6.0.0",
"style-loader": "^1.2.1",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"url-loader": "^4.1.0",
"webpack": "^4.44.1"
"stylus-loader": "^4.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.0.0"
},

@@ -99,0 +99,0 @@ "keywords": [

8

README.md

@@ -533,3 +533,3 @@ <div align="center">

localIdentName: '[path][name]__[local]--[hash:base64:5]',
context: path.resolve(__dirname, 'src'),
localIdentContext: path.resolve(__dirname, 'src'),
localIdentHashPrefix: 'my-custom-hash',

@@ -784,3 +784,3 @@ namedExport: true,

modules: {
context: path.resolve(__dirname, 'context'),
localIdentContext: path.resolve(__dirname, 'src'),
},

@@ -853,2 +853,4 @@ },

By default we use built-in function to generate a classname.
If the custom function returns `null` or `undefined`, we fallback to the
built-in function to generate the classname.

@@ -1251,3 +1253,3 @@ **webpack.config.js**

The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.
The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.
Meanwhile all files matching `*.module.scss` are treated as `CSS Modules` in this example.

@@ -1254,0 +1256,0 @@

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc