Function toCSS generates broken CSS when semicolon in attribute value - e.g. @font-face with src attribute with url( ; ) #42
Description
In case when semicolon is a part of CSS code, and CSS will be converted to JSON object, and JSON object converted back to CSS, the resulting CSS will be cut off after the semicolon.
Error reproduction example, if CSS is:
src: url("data:application/octet-stream;base64,d09GRgABAAAAAAnwAA4AAA [SHORTENED] zAju/YGBgXX2kwJFwDEASgaAAAA") format("truetype");
after conversion to JSON and back to CSS, resulting CSS string will be:
src: url("data:application/octet-stream;
Example for Visual Studio Code with added cssjson npm package:
<html>
<head>
</head>
<body>
<script src="node_modules/cssjson/cssjson.js"></script>
<script type="module">
//import cssjson from cssjson
// import { cssjson } from './node_modules/cssjson/cssjson.js';
var cssString = `@media (max-width: 800px) {
@font-face {
font-family: "FabricMDL2Icons";
src: url("data:application/octet-stream;base64,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")
format("truetype");
}
}`;
// To JSON
const jsonObject = CSSJSON.toJSON(cssString);
// Resulting CSS is cut off at semicolon
const css = CSSJSON.toCSS(jsonObject);
debugger;
</script>
</body>
</html>