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.

Sign up for GitHub

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

Jump to bottom

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

Open
igolovic opened this issue Apr 1, 2022 · 1 comment
Open

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

igolovic opened this issue Apr 1, 2022 · 1 comment

Comments

@igolovic
Copy link

igolovic commented Apr 1, 2022 •
edited
Loading

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>
@igolovic
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@igolovic