Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
toFrankie opened this issue Jun 7, 2021 · 0 comments
Open

Comments

@toFrankie
Copy link

toFrankie commented Jun 7, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant