search

csscomb / csscomb.js

CSS coding style formatter
http://csscomb.com/
MIT License
3.28k stars 460 forks source link

When the quotes configuration item is single, the problem caused... #645

Open toFrankie opened 3 years ago

toFrankie commented 3 years ago

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.