root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(css): basic support for `url()`

This commit is contained in:
alexander.akait 2024-10-16 19:24:48 +03:00
parent afcf3bb8b1
commit d46dee8f83
3 changed files with 92 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
lib/css/CssParser.js
View File

@ -218,6 +218,7 @@ class CssParser extends Parser {
let allowImportAtRule = true;
/** @type [string, number, number][] */
const balanced = [];
let lastTokenEndForComments = 0;
/** @type {boolean} */
let isNextRulePrelude = isModules;
@ -496,6 +497,41 @@ class CssParser extends Parser {
return end;
},
url: (input, start, end, contentStart, contentEnd) => {
const { options, errors: commentErrors } = this.parseCommentOptions([
lastTokenEndForComments,
end
]);
if (commentErrors) {
for (const e of commentErrors) {
const { comment } = e;
state.module.addWarning(
new CommentCompilationWarning(
`Compilation error while processing magic comment(-s): /*${comment.value}*/: ${e.message}`,
comment.loc
)
);
}
}
if (options && options.webpackIgnore !== undefined) {
if (typeof options.webpackIgnore !== "boolean") {
const { line: sl, column: sc } = locConverter.get(
lastTokenEndForComments
);
const { line: el, column: ec } = locConverter.get(end);
state.module.addWarning(
new UnsupportedFeatureWarning(
`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
{
start: { line: sl, column: sc },
end: { line: el, column: ec }
}
)
);
} else if (options.webpackIgnore) {
return end;
}
}
const value = normalizeUrl(
input.slice(contentStart, contentEnd),
false
@ -850,6 +886,8 @@ class CssParser extends Parser {
}
}
lastTokenEndForComments = start;
return end;
},
function: (input, start, end) => {
@ -866,7 +904,7 @@ class CssParser extends Parser {
const string = walkCssTokens.eatString(input, end);
if (!string) return end;
const { options, errors: commentErrors } = this.parseCommentOptions(
[start, end]
[lastTokenEndForComments, end]
);
if (commentErrors) {
for (const e of commentErrors) {
@ -918,6 +956,7 @@ class CssParser extends Parser {
}
default: {
if (IMAGE_SET_FUNCTION.test(name)) {
lastTokenEndForComments = end;
const values = walkCssTokens.eatImageSetStrings(input, end, {
comment
});
@ -1040,6 +1079,9 @@ class CssParser extends Parser {
processDeclarationValueDone(input);
}
}
lastTokenEndForComments = start;
return end;
}
});

71
test/configCases/css/webpack-ignore/style.css
View File

@ -13,81 +13,82 @@
@import /****webpackIgnore: false***/ url(./basic.css);
@import /* * * * webpackIgnore: false * * */ url(./basic.css);
@import /* webpackIgnore: false */ /* webpackIgnore: true */ /* webpackIgnore: false */ url(./basic.css);
@import /* webpackIgnore: 1 */ url(./basic.css);
/** Resolved **/
.class {
color: red;
background: /** webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
background: /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
}
.class {
color: red;
background:/** webpackIgnore: true */url("./url/img.png"), url("./url/img.png");
background:/* webpackIgnore: true */url("./url/img.png"), url("./url/img.png");
}
.class {
color: red;
background: url("./url/img.png"), /** webpackIgnore: true */ url("./url/img.png");
background: url("./url/img.png"), /* webpackIgnore: true */ url("./url/img.png");
}
.class {
color: red;
/** webpackIgnore: true */
/* webpackIgnore: true */
background: url("./url/img.png"), url("./url/img.png");
}
.class {
color: red;
/** webpackIgnore: true */
background: url("./url/img.png"), /** webpackIgnore: false */ url("./url/img.png");
/* webpackIgnore: true */
background: url("./url/img.png"), /* webpackIgnore: false */ url("./url/img.png");
}
.class {
color: red;
/** webpackIgnore: true */
background: url("./url/img.png"), /** webpackIgnore: false */ url("./url/img.png"), /** webpackIgnore: true */ url("./url/img.png"), /** webpackIgnore: false */ url("./url/img.png");
/* webpackIgnore: true */
background: url("./url/img.png"), /* webpackIgnore: false */ url("./url/img.png"), /* webpackIgnore: true */ url("./url/img.png"), /* webpackIgnore: false */ url("./url/img.png");
}
.class {
color: red;
/** webpackIgnore: true */
background: /** webpackIgnore: false */ url("./url/img.png"), /** webpackIgnore: true */ url("./url/img.png");
/* webpackIgnore: true */
background: /* webpackIgnore: false */ url("./url/img.png"), /* webpackIgnore: true */ url("./url/img.png");
}
.class {
color: red;
background: /** webpackIgnore: true */ /** webpackIgnore: false */ url("./url/img.png"), url("./url/img.png");
background: /* webpackIgnore: true */ /* webpackIgnore: false */ url("./url/img.png"), url("./url/img.png");
}
.class {
color: red;
background: url("./url/img.png"), /** webpackIgnore: true */ /** webpackIgnore: false */ url("./url/img.png");
background: url("./url/img.png"), /* webpackIgnore: true */ /* webpackIgnore: false */ url("./url/img.png");
}
.class {
color: red;
background: url("./url/img.png"), /** webpackIgnore: false */ /** webpackIgnore: true */ url("./url/img.png");
background: url("./url/img.png"), /* webpackIgnore: false */ /* webpackIgnore: true */ url("./url/img.png");
}
.class {
background:
url("./url/img.png"),
url("./url/img.png"),
/** webpackIgnore: true **/ url("./url/img.png"),
/* webpackIgnore: true */ url("./url/img.png"),
url("./url/img.png"),
/** webpackIgnore: true **/ url("./url/img.png"),
/* webpackIgnore: true */ url("./url/img.png"),
url("./url/img.png"),
url("./url/img.png"),
url("./url/img.png"),
/** webpackIgnore: true **/
/* webpackIgnore: true */
url("./url/img.png");
}
@font-face {
font-family: "Roboto";
src: /** webpackIgnore: true **/ url("./fonts/Roboto-Regular.eot");
src: /* webpackIgnore: true */ url("./fonts/Roboto-Regular.eot");
src:
/** webpackIgnore: true **/
/* webpackIgnore: true */
url("./fonts/Roboto-Regular.eot#iefix") format("embedded-opentype"),
url("./fonts/Roboto-Regular.woff2") format("woff"),
url("./fonts/Roboto-Regular.woff") format("woff"),
@ -99,8 +100,8 @@
@font-face {
font-family: "Roboto";
src: /** webpackIgnore: true **/ url("./fonts/Roboto-Regular.eot");
/** webpackIgnore: true **/
src: /* webpackIgnore: true */ url("./fonts/Roboto-Regular.eot");
/* webpackIgnore: true */
src:
url("./fonts/Roboto-Regular.eot#iefix") format("embedded-opentype"),
url("./fonts/Roboto-Regular.woff2") format("woff"),
@ -116,10 +117,10 @@
src: url("./fonts/Roboto-Regular.eot");
src:
url("./fonts/Roboto-Regular.eot#iefix") format("embedded-opentype"),
/** webpackIgnore: true **/
/* webpackIgnore: true */
url("./fonts/Roboto-Regular.woff2") format("woff"),
url("./fonts/Roboto-Regular.woff") format("woff"),
/** webpackIgnore: true **/
/* webpackIgnore: true */
url("./fonts/Roboto-Regular.ttf") format("truetype"),
url("./fonts/Roboto-Regular.svg#Roboto-Regular") format("svg");
font-weight: 400;
@ -166,7 +167,7 @@
/*webpackIgnore: false*/
url('./url/img.png'),
/*webpackIgnore: true*/
url('./url/img.png');;
url('./url/img.png');
}
.class {
@ -189,7 +190,7 @@
/*webpackIgnore: true*/
url(./url/img.png) 2x,
url(./url/img.png) 3x,
/*webpackIgnore: true*/
/*webpackIgnore: true*/
url(./url/img.png) 5x
);
}
@ -219,17 +220,17 @@
.class {
color: red;
background: url("./url/img.png"), /** webpackIgnore: true */url("./url/img.png");
background: url("./url/img.png"), /* webpackIgnore: true */url("./url/img.png");
}
.class {
color: red;
background: url("./url/img.png"), /** webpackIgnore: true */ url("./url/img.png");
background: url("./url/img.png"), /* webpackIgnore: true */ url("./url/img.png");
}
.class {
color: red;
background: url("./url/img.png")/** webpackIgnore: true */, url("./url/img.png");
background: url("./url/img.png")/* webpackIgnore: true */, url("./url/img.png");
}
.class {
@ -256,3 +257,19 @@
/* this comment is required */
url("//at.alicdn.com/t/font_1434092639_4910953.woff") format("woff");
}
.class {
background-image: image-set(
/*webpackIgnore: true*/
url("./url/img.png") 2x,
url("./url/img.png") 3x,
/*webpackIgnore: true*/
url("./url/img.png") 4x
);
}
.class {
background-image: /* webpackIgnore: 1 */ url("./url/img.png");
background-image: /* webpackIgnore: 1 */ url(./url/img.png);
background-image: image-set(/* webpackIgnore: 1 */ url("./url/img.png") 2x)
}

6
test/configCases/css/webpack-ignore/warnings.js
View File

@ -1,4 +1,8 @@
module.exports = [
/Compilation error while processing magic comment\(-s\): \/\*\*\*\*webpackIgnore: false\*\*\*\/: Unexpected token '\*\*'/,
/Compilation error while processing magic comment\(-s\): \/\* {3}\* {3}\* {3}\* {3}webpackIgnore: {3}false {3}\* {3}\* {3}\*\/: Unexpected token '\*'/
/Compilation error while processing magic comment\(-s\): \/\* {3}\* {3}\* {3}\* {3}webpackIgnore: {3}false {3}\* {3}\* {3}\*\/: Unexpected token '\*'/,
/`webpackIgnore` expected a boolean, but received: 1\./,
/`webpackIgnore` expected a boolean, but received: 1\./,
/`webpackIgnore` expected a boolean, but received: 1\./,
/`webpackIgnore` expected a boolean, but received: 1\./
];