Crash when Parsing Sytlesheet and converting back...

[jogibear9988]

Bug Report

Prerequisites

• [x] Can you reproduce the problem in a MWE?
• [x] Are you running the latest version of AngleSharp?
• [x] Did you check the FAQs to see if that helps you?
• [x] Are you reporting to the correct repository? (there are multiple AngleSharp libraries, e.g., AngleSharp.Css for CSS support)
• [x] Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Description

I parse and write css with following code:

                                var parser = new CssParser();
                                var ss = parser.ParseStyleSheet(css);
                                var newCss = ss.ToCss(new AngleSharp.Css.MinifyStyleFormatter());

css:

    .root {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        padding: 5px;
    }

    .container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px calc(100% - 360px) 100px;
        grid-template-areas: 'header info' 'quantity info' 'footerOk footerCancel';
        row-gap: 10px;
        font-size: 26px;
    }

    .destination {
        grid-area: header;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: 150px 50px;
        grid-template-areas:
            "sourcerp image destrp"
            "sourcele image destle";
    }

    .quantitygrid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: 150px 100px;
        grid-template-areas: 'minus number plus';
    }

    .headergrid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 'sourceplace space destinationplace' 'sourcelc space destinationlc';
    }

    #info td + td {
        font-size: 24px;
    }

    input {
        animation-duration: 2s;
        font-family: inherit;
        background-color: white;
    }

    td {
        padding: 5px;
    }

    paper-button {
        padding: 0;
        background-color: var(--kx-dark);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        /*font-weight: bolder;*/
    }

    @keyframes errorAnimation {
        0% {
            background-color: white;
        }

        1% {
            background-color: red;
        }

        100% {
            background-color: white;
        }
    }

    input:invalid {
        color: red;
    }

Expected behavior:

should work

Actual behavior: [What actually happened]

i got following exception: System.IndexOutOfRangeException: 'Index was outside the bounds of the array.'

Environment details: [OS, .NET Runtime, ...]

Possible Solution

[Optionally, share your idea to fix the issue]

[FlorianRappl]

Available in devel / preview version (upcoming 0.16.2).