search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

Inline urls confuse the parser #251

Open PRR24 opened 3 years ago

PRR24 commented 3 years ago

postcss-custom-properties@10.0.0

.problem {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMjAiCiAgIGhlaWdodD0iNDAiCiAgIHZpZXdCb3g9IjAgMCA1IDEwIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWF4WU1pZCIKICAgZGF0YS1uYW1lPSJMYXllciAxIgogICBpZD0iTGF5ZXJfMSI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTciPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPmFycm93czwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMzIj4KICAgIDxzdHlsZQogICAgICAgaWQ9InN0eWxlNSI+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT4KICA8L2RlZnM+CiAgPHRpdGxlCiAgICAgaWQ9InRpdGxlNyI+YXJyb3dzPC90aXRsZT4KICA8cG9seWdvbgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjQwMDczMDYsMCkiCiAgICAgc3R5bGU9ImZpbGw6IzQ0NDQ0NCIKICAgICBpZD0icG9seWdvbjExIgogICAgIHBvaW50cz0iMi40OCwzLjE4IDMuNTQsNC42NyAxLjQxLDQuNjcgMS40MSw0LjY3ICIKICAgICBjbGFzcz0iY2xzLTIiIC8+CiAgPHBvbHlnb24KICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS40MDA3MzA2LDApIgogICAgIHN0eWxlPSJmaWxsOiM0NDQ0NDQiCiAgICAgaWQ9InBvbHlnb24xMyIKICAgICBwb2ludHM9IjIuNDgsNi44MiAxLjQxLDUuMzMgMy41NCw1LjMzIDMuNTQsNS4zMyAiCiAgICAgY2xhc3M9ImNscy0yIiAvPgo8L3N2Zz4K") no-repeat 100% 50%, var(--color-background-gray, #f2f2f2);
}

Expected result: The line is processed correctly.

Actual result:

Message:
    postcss-custom-properties: <css input>:1:19: Unknown word
romainmenke commented 2 years ago

We switched to a different parser that handles this better. This is fixed and tests have been added for it.