Skip to content

Function toCSS generates broken CSS when semicolon in attribute value - e.g. @font-face with src attribute with url( ; ) #42

Description

@igolovic

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,d09GRgABAAAAAAnwAA4AAAAAEmQAAwo9AAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEgAAABgMvF9DmNtYXAAAAGMAAAATgAAAWrTEbXwY3Z0IAAAAdwAAAAgAAAAKgnZCa9mcGdtAAAB/AAAAPAAAAFZ/J7mjmdhc3AAAALsAAAADAAAAAwACAAbZ2x5ZgAAAvgAAAHOAAACiGs9SAVoZWFkAAAEyAAAADIAAAA2/s8J3mhoZWEAAAT8AAAAFQAAACQQAQgDaG10eAAABRQAAAASAAAAEg2qAKZsb2NhAAAFKAAAABAAAAAQAbwCtm1heHAAAAU4AAAAHgAAACAAewHFbmFtZQAABVgAAAP3AAAJ+oyT8U5wb3N0AAAJUAAAABQAAAAg/1EAfnByZXAAAAlkAAAAiQAAANN4vfIOeJxjYGGfwTiBgZWBgXUWqzEDA6M0hGa+yJDGJMTBysrFyMQIBgxAIMCAAL7BCgoMDi9Wf7PhAPMhJANYHQuEp8DAAADo9QipeJxjYGBgZoBgGQZGBhBIAfIYwXwWBg8gzcfAwcDEwPZi9Yu9LxVfznpT8M3m/38GBlS+eJi4q9gjsSzhqZynoOYgAUY2dJGRBwA1uhl4AAB4nGPQYghlKGBoYFjFyMDYwOzAeIDBAYsIEAAAqhwHlXicXY+/TsNADMZzJLSEJ0A6IZ11KkOViJ3phksk1CUlDOelgNRKpO+AlIXFA8/ibhnzYgjMEf4utr/P+ny/c6f5yXx2nKVHKilWnDfhoNQLDurtmf35IU/vNmVhTNV5VvdlwWoJomtOF/VNsGjI0PWWTG0eH7acLWKXxY7w0nDShk7qbQB2qL/HHeJVPJLFI4QS30/xfYxL+rUsVobTiyasA/des/OoAUzFYxN49BoQf8ikP3VnE+NsOWXbwE5zgkSfygL3RJqE+0uPf/Wgkv+G+23Iv6tB9U3c9Bb0h2HBgrChl2fbUAkaYPkOhPxkxgABAAIACAAK//8AD3icbVC9atxAEJ7Z058LG1aRYoQ4w2qtBHIgw8nKNb5zbRfulOIgbSB5ANdTBBeB6/IGAhd+ADduAldf4cJpDtL4JRzFt86s7kxSeGF35+ebb2Y+EHAJ4Hx1z6EHPsBIKpkrqS57vx6vxfXqFNzz9tt35wz4CADsBeCtIADJdqx2/S3c9XGkKvV2tIUBPLTN1MxxPG3cz81D63vNFMdmLoisYePiY0MWY+aWD/IAfAIPtgFecV+UKucRlETu0S5N/sTp34CAuU8tmRyX5NAfMkvMOQoOw5wFz26nqbg/e4sF87pAwAv5P7q9PsAn+MKYMtY5XxzuiVhqefhGq8zrrIkoVaWzQoxRy7Ja+wV2hkVHnh8rNvpYSh1HO2KAMUavSzV8Xz3zIMvAm5IAIrzTk4OUkrD9GSaUFsca61ofFyltnL6OdJGmBX99rDswpQcTXa8gCXvvwiQJH7mUNydDvA2RAZs3A7yzSft3VZauRugobuVRZiktdXYkbzvCJ1g3xoGtwyv7rgYsD/6nP2Anvvyn+lptd4NjnQOAlJ2hsyfCOBI7wtHZfiFEdRhOxL4DM/Tuby5OTi5u7k07m5n22UMvgJeis00Fs/8F3BabgAAAeJxjYGRgYGDmsj27YY9WPL/NVwZuDgYQ2P/3YAOIvr7hozKI5mAAi3MyMIEoAEnCChQAAHicY2BkYOBgAAE4yciACpgAAsoAHQAAAAUqAKYIAAAAAAAAAACAAAAAAAAAAAAAFgA+AF4AbAD+ARIBRHicY2BkYGBgZ8hmYGUAAUYwyQXEKYyRICYAEOABQgAAeJy1VD2LHEcQrb1d6c7IOozBoLADY07HMns6CYSl6JCsSJecxIESw+xM72yj2emmu0fLGAcOFfhnOBH4VxgbHDr2L3DsyKFf1fTch24tzgbvsD2vq+vzVfUQ0Z3RFzSi/ncf/x6P6FPserxF2/RVwmPInyc8Af464Rv0MbmEb9In9G3C2/QlfZ/wDn1GvyR8i/bp94Rvj34eTRLepf2tXxFlNPkIu3Lrz4RH9Pn4NOEt2h1/k/AY8rcJT4B/TPgG3Rn/lvBNUuM/Et4mP9lJeIf2J4OfW/Ry8kPCt8dvJ38lvEsvd7776Z06PLj3UB2bwttgF1E9sd5Zn0djm0wd1bU6MdUyBnWig/ZvdJk9y+feFOr46fNDdRSCjuFEV22d+6sHVyWn2gd4Vvezgwf9KR/2Zy90ZbUyQeUq+rzUq9y/Vnah4lJfyK/ytnUsLuzK5Y3RIduY/DJG92g2W6/X2Wo4z2Azi52zlc/dspstbBPD7Nw8tM7VRpeKDzL1yrZqlXeqDRpJIDEWq2hV4XUe9VSVJrg676Yqb0rlvMFpARWNdx6U035lYoS7eSdF1KbQDfvCQVDWD2DBEaZXS3Xelm0Rp4qZh+2UbYYAplHrpSmWFzJbI6hpirot0aaz7G1Td2rP3FV6NUcu5+rw8KFsRb00TaW8DhGdYlbPA7D5ma/HwsCeQZSoV9wCbxC1tOumtnl5mb28p0p7LsciFNY2ujaqUnOZrLPUtbvMKIax6ZI6NwQOwc/SzA1yzq7fbXpHig7pgO7RQ6BjMlSQJ0sB/wVFyJ4Aedx5XnNIDFBDGU6OqMaj6ASyipY4C7LTeGtov8FaQvMZ7ObYs2+O8RRflkOxD6LJdmxVUQt/OTSvY3EdnVPJI6ScFb50GWp9cMl2sLxo90KysVgVdLiqHP8oDJSQriTL15AxS3yyFN1N/FWyb8HgoF3gvcI+R05G2Mr+BfPMc4T0Ec3wrOXJ4O99+yzFmQF34qUSPw4eOkgX4o2rnW2MHiRnh44Y6aM6s+Dev5KalDDR4d0Kdz0TPWODNsusVO2hwXVommJfip6TjnciYT44jpPO9LZF8qLTPhffTvrKNUc5Y6u55DF0opaK2GrIq7cI0gV/RbI4q2F6ra462ZewKbCfCl/9zPdxp2dx3q/AyCSuhacC62bO1qlS1i5QTStzV27knm1qQXvQv4s3T+g88bLJe5/Df+X23HspnirIvMxxTHdqmNVNFQzRr+b1+MIMcCV9LVHiDbeA/fe1lpCspXIrt/JDs5dfmiotfbFp7avqcSs3qxVLznbo5uCHNWu5yf88o/2XsUmdOfc+3BCTWOb54XznwnTf2//hbv8NDzY4iAB4nGNgZgCD/34M5QyYgB0AKTEBz3ic28CgzbCJkZNJm3ETF4jcztWaG2qrysChvZ07NdhBTwbE4onwsNCQBLF4nc215YVBLD4dFRkRHhCLX05CmI8DxBLg4+FkZwGxBMEAxBLaMKEgwADIYtjOCDeaCW40M9xoFrjRrHCj2eQkoUazw43mgBvNCTd6kzAju/YGBgXX2kwJFwDEASgaAAAA") 
                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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions