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

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>

I created a fix for this by allowing CSS's url "function" , these are the changes I did to get this problem fixed.

        // Adding special handling for CSS function "url()" ( and format() if it follows url() ) - if detected, 
        // everything inside it (colons, semicolons etc.) should be treated as attribute value and not as delimiters.
        // Changed are lineAttrX and altX regex, regex should also cover 
        // case when single CSS attribute breaks into more than one line.

I couldn't fork this project and create fix in library but here are steps anyone can replicate in library to fix their downloaded copy:

1 - In un-minified version find:

var lineAttrX = /([^\:]+):([^\;]*);/;

this should be replaced by:

var lineAttrX = /([^\:]+):(\s*url\([\s\S]+?\)|[^\;]*);/;

2 - In un-minified version find:

var altX = /(\/\*[\s\S]*?\*\/)|([^\s\;\{\}][^\;\{\}]*(?=\{))|(\})|([^\;\{\}]+\;(?!\s*\*\/))/gmi;

this should be replaced by:

var altX = /(\/\*[\s\S]*?\*\/)|([^\s\;\{\}][^\;\{\}]*(?=\{))|(\})|(\s*.*\:\s*url\([\s\S]+?\)\;(?!\s*\*\/)|[^\;\{\}]+\;(?!\s*\*\/))/gmi;

Version of library with replacements 1 and 2 should handle url() function correctly even if it contains semicolons, also if url() is followed by CSS function format() - this too will be included.
Also, if url() is in one line, and format() is in the line below, this too should be handled correctly.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Activity

igolovic commented on Apr 12, 2022

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions