testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix a bug: css urls are incorrectly stripped of commas (#14476)

Browse Source 
Co-authored-by: fisker Cheung <lionkay@gmail.com>
This commit is contained in:
Seiyaandfisker Cheung authored and GitHub committed 2023-03-29 09:12:38 +08:00
1 parent 281072befd
commit 9500403c1d
7 files changed
+129 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/css/14476.md
+19
View File
@@ -0,0 +1,19 @@
#### Fix url contains comma (#14476 by @seiyab)
<!-- prettier-ignore -->
```css
/* Input */
@font-face {
src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}
/* Prettier stable */
@font-face {
src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
}
/* Prettier main */
@font-face {
src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}
```
src/language-css/parse/parse-value.js
+4 -14
View File
@@ -1,18 +1,12 @@
import PostcssValuesParser from "postcss-values-parser/lib/parser.js";
import getFunctionArgumentsText from "../utils/get-function-arguments-text.js";
import getValueRoot from "../utils/get-value-root.js";
import hasSCSSInterpolation from "../utils/has-scss-interpolation.js";
import hasStringOrFunction from "../utils/has-string-or-function.js";
import isSCSSVariable from "../utils/is-scss-variable.js";
import stringifyNode from "../utils/stringify-node.js";
import parseSelector from "./parse-selector.js";
import { addTypePrefix } from "./utils.js";
const getHighestAncestor = (node) => {
while (node.parent) {
node = node.parent;
}
return node;
};
function parseValueNode(valueNode, options) {
const { nodes } = valueNode;
let parenGroup = {
@@ -48,7 +42,7 @@ function parseValueNode(valueNode, options) {
if (node.type === "func" && node.value === "selector") {
node.group.groups = [
parseSelector(
getHighestAncestor(valueNode).text.slice(
getValueRoot(valueNode).text.slice(
node.group.open.sourceIndex + 1,
node.group.close.sourceIndex
)
@@ -76,10 +70,7 @@ function parseValueNode(valueNode, options) {
(!hasStringOrFunction(groupList) &&
!isSCSSVariable(groupList[0], options))
) {
const stringifiedContent = stringifyNode({
groups: node.group.groups,
});
node.group.groups = [stringifiedContent.trim()];
node.group.groups = [getFunctionArgumentsText(node)];
}
}
if (node.type === "paren" && node.value === "(") {
@@ -162,7 +153,6 @@ function parseNestedValue(node, options) {
}
}
}
delete node.parent;
}
return node;
}
src/language-css/utils/get-function-arguments-text.js
+13
View File
@@ -0,0 +1,13 @@
import getValueRoot from "./get-value-root.js";
/**
* @param {*} node
* @returns {string}
*/
function getFunctionArgumentsText(node) {
return getValueRoot(node)
.text.slice(node.group.open.sourceIndex + 1, node.group.close.sourceIndex)
.trim();
}
export default getFunctionArgumentsText;
src/language-css/utils/get-value-root.js
+9
View File
@@ -0,0 +1,9 @@
const getValueRoot = (node) => {
while (node.parent) {
node = node.parent;
}
return node;
};
export default getValueRoot;
src/language-css/utils/has-string-or-function.js
+5 -1
View File
@@ -1,6 +1,10 @@
function hasStringOrFunction(groupList) {
return groupList.some(
(group) => group.type === "string" || group.type === "func"
(group) =>
group.type === "string" ||
(group.type === "func" &&
// workaround false-positive func
!group.value.endsWith("\\"))
);
}
tests/format/css/url/__snapshots__/jsfmt.spec.js.snap
+52
View File
@@ -11,11 +11,63 @@ div {
background: -fb-url(/images/bg.png);
}
@font-face {
src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
src: url(foo.ttf?query=foo,bar,);
src: url(foo.woff2?foo=rgb\\(255,255,0\\));
}
a {
content: url(https://example.com/\\)\\).jpg);
content: url(https://example.com/\\(\\(.jpg);
content: url(https://example.com/\\ \\ .jpg);
content: url( https://example.com/\\)\\).jpg );
content: url( https://example.com/\\(\\(.jpg );
content: url( https://example.com/\\ \\ .jpg );
background:
no-repeat url(https://example.com/\\)\\).jpg),
no-repeat url(https://example.com/\\(\\(.jpg),
no-repeat url(https://example.com/\\ \\ .jpg),
no-repeat url( https://example.com/\\)\\).jpg ),
no-repeat url( https://example.com/\\(\\(.jpg ),
no-repeat url( https://example.com/\\ \\ .jpg ),
no-repeat url(foo.ttf?query=foo,bar,),
no-repeat url(foo.woff2?foo=rgb\\(255,255,0\\))
no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
;
}
=====================================output=====================================
div {
background: url(/images/bg.png);
background: -fb-url(/images/bg.png);
}
@font-face {
src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
src: url(foo.ttf?query=foo,bar,);
src: url(foo.woff2?foo=rgb\\(255,255,0\\));
}
a {
content: url(https://example.com/\\)\\).jpg);
content: url(https://example.com/\\(\\(.jpg);
content: url(https://example.com/\\ \\ .jpg);
content: url( https://example.com/\\)\\).jpg );
content: url( https://example.com/\\(\\(.jpg );
content: url(https://example.com/\\ \\ .jpg);
background: no-repeat url(https://example.com/\\)\\).jpg),
no-repeat url(https://example.com/\\(\\(.jpg),
no-repeat url(https://example.com/\\ \\ .jpg),
no-repeat url( https://example.com/\\)\\).jpg ),
no-repeat url( https://example.com/\\(\\(.jpg ),
no-repeat url( https://example.com/\\ \\ .jpg ),
no-repeat url(foo.ttf?query=foo,bar,),
no-repeat url(foo.woff2?foo=rgb\\(255,255,0\\))
no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
}
================================================================================
`;
tests/format/css/url/url.css
+27
View File
@@ -2,3 +2,30 @@ div {
background: url(/images/bg.png);
background: -fb-url(/images/bg.png);
}
@font-face {
src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
src: url(foo.ttf?query=foo,bar,);
src: url(foo.woff2?foo=rgb\(255,255,0\));
}
a {
content: url(https://example.com/\)\).jpg);
content: url(https://example.com/\(\(.jpg);
content: url(https://example.com/\ \ .jpg);
content: url( https://example.com/\)\).jpg );
content: url( https://example.com/\(\(.jpg );
content: url( https://example.com/\ \ .jpg );
background:
no-repeat url(https://example.com/\)\).jpg),
no-repeat url(https://example.com/\(\(.jpg),
no-repeat url(https://example.com/\ \ .jpg),
no-repeat url( https://example.com/\)\).jpg ),
no-repeat url( https://example.com/\(\(.jpg ),
no-repeat url( https://example.com/\ \ .jpg ),
no-repeat url(foo.ttf?query=foo,bar,),
no-repeat url(foo.woff2?foo=rgb\(255,255,0\))
no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
;
}