Open
Description
About the CSScomb configuration item "quotes": "single".
The example is as follows:
The nested use of single quotes and double quotes in background-image.
before:
.img {
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'><path fill='none' d='M0 0h100v100H0z'/><rect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/><rect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/></svg>");
}formatted:
.img {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\' viewBox=\'0 0 100 100\'><path fill=\'none\' d=\'M0 0h100v100H0z\'/><rect xmlns=\'http://www.w3.org/2000/svg\' width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.56)\' rx=\'5\' ry=\'5\' transform=\'translate(0 -30)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.5)\' rx=\'5\' ry=\'5\' transform=\'rotate(30 105.98 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.43)\' rx=\'5\' ry=\'5\' transform=\'rotate(60 75.98 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.38)\' rx=\'5\' ry=\'5\' transform=\'rotate(90 65 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.32)\' rx=\'5\' ry=\'5\' transform=\'rotate(120 58.66 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.28)\' rx=\'5\' ry=\'5\' transform=\'rotate(150 54.02 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.25)\' rx=\'5\' ry=\'5\' transform=\'rotate(180 50 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.2)\' rx=\'5\' ry=\'5\' transform=\'rotate(-150 45.98 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.17)\' rx=\'5\' ry=\'5\' transform=\'rotate(-120 41.34 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.14)\' rx=\'5\' ry=\'5\' transform=\'rotate(-90 35 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.1)\' rx=\'5\' ry=\'5\' transform=\'rotate(-60 24.02 65)\'/><rect width=\'7\' height=\'20\' x=\'46.5\' y=\'40\' fill=\'rgba(255,255,255,.03)\' rx=\'5\' ry=\'5\' transform=\'rotate(-30 -5.98 65)\'/></svg>');
}
CSScomb converts the outermost double quotes into single quotes, resulting in an error in the final parsing of postcss.
postcss-svgo: Error in parsing SVG: Unquoted attribute value
When I exchanged all the single quotes and double quotes in the source string, I found that CSScomb only converted the outermost double quotes into single quotes.
When I finish the adjustment, there is no change before and after formatting, which can be parsed normally.
.img {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 100 100"><path fill="none" d="M0 0h100v100H0z"/><rect xmlns="http://www.w3.org/2000/svg" width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.56)" rx="5" ry="5" transform="translate(0 -30)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.5)" rx="5" ry="5" transform="rotate(30 105.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.43)" rx="5" ry="5" transform="rotate(60 75.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.38)" rx="5" ry="5" transform="rotate(90 65 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.32)" rx="5" ry="5" transform="rotate(120 58.66 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.28)" rx="5" ry="5" transform="rotate(150 54.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.25)" rx="5" ry="5" transform="rotate(180 50 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.2)" rx="5" ry="5" transform="rotate(-150 45.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.17)" rx="5" ry="5" transform="rotate(-120 41.34 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.14)" rx="5" ry="5" transform="rotate(-90 35 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.1)" rx="5" ry="5" transform="rotate(-60 24.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="rgba(255,255,255,.03)" rx="5" ry="5" transform="rotate(-30 -5.98 65)"/></svg>');
}I think this should be a bug. CSScomb should deal with the problem of both single and double quotation marks in the string, instead of blindly converting the outermost double quotation marks into single quotation marks.
Metadata
Metadata
Assignees
Labels
No labels