Example on how to format CSS?

[PrzemyslawKlys]

I'm sorry if it's a dumb question, but I've been trying to format CSS (prettify) the same way I do for HTML and for some reason things fail for me. I know the code is in PowerShell (which is loading your NET library) but I don't have a way to build this in C#.

This is the output I'm getting. Is it like I'm missing small detail or a bug (unlikely)?

function Format-CSS {
    [CmdletBinding()]
    param(
        [string] $File,
        [string] $OutputFile
    )
    if ($File -and (Test-Path -LiteralPath $File)) {
        $FileContent = [IO.File]::ReadAllText($file)

        $CssParser = New-Object -TypeName AngleSharp.Css.Parser.CssParser
        $ParsedDocument = $CssParser.ParseStyleSheet($FileContent)
        $StringWriter = [System.IO.StringWriter]::new()
        $PrettyMarkupFormatter = New-Object -TypeName AngleSharp.Css.PrettyStyleFormatter
        $ParsedDocument.ToCss($StringWriter, $PrettyMarkupFormatter)

        $FormattedCSS = $StringWriter.ToString()

        if ($FormattedCSS) {
            [IO.File]::WriteAllText($OutputFile, $FormattedCSS)
        }
    }
}

HTML is 99% the same, and it works just fine.

function Format-HTML {
    [CmdletBinding()]
    param(
        [string] $File,
        [string] $OutputFile
    )
    if ($File -and (Test-Path -LiteralPath $File)) {
        $FileContent = [IO.File]::ReadAllText($file)

        $HTMLParser = New-Object -TypeName AngleSharp.Html.Parser.HtmlParser
        $ParsedDocument = $HTMLParser.ParseDocument($FileContent)
        $StringWriter = [System.IO.StringWriter]::new()
        $PrettyMarkupFormatter = New-Object -TypeName AngleSharp.Html.PrettyMarkupFormatter
        $ParsedDocument.ToHtml($StringWriter, $PrettyMarkupFormatter)
        #$ParsedDocument.StyleSheets

        $FormattedHTML = $StringWriter.ToString()

        if ($FormattedHTML) {
            [IO.File]::WriteAllText($OutputFile, $FormattedHTML)
        }
    }
}

What am I missing? Would you be able to provide simple C# based example how you would format CSS natively?

[PrzemyslawKlys]

I found my mistake:

    $CssParser = [AngleSharp.Css.Parser.CssParser]::new()
    $ParsedDocument = $CssParser.ParseStyleSheet($Content)
    $StringWriter = [System.IO.StringWriter]::new()
    $PrettyMarkupFormatter = [AngleSharp.Css.CssStyleFormatter]::new()
    $ParsedDocument.ToCss($StringWriter, $PrettyMarkupFormatter)
    $StringWriter.ToString()

Works fine. Thank you

[rh78]

Hello I have the same problem. Actually the PrettyStyleFormatter does not seem to work properly. The user "fixed" the problem by using the default style formatter, but what about the pretty output?

[FlorianRappl]

Actually the PrettyStyleFormatter does not seem to work properly.

Can you give an example where it did not work out for you? That would be helpful!

[anghelvalentin]

Hello, I have the same problem, if I use the PrettyStleFormatter

            var parser = new CssParser();
            ICssStyleSheet document = parser.ParseStyleSheet(text);
            using var stringWriter = new StringWriter();

            document.ToCss(stringWriter, new PrettyStyleFormatter());
            var prettifiedCss = stringWriter.ToString();
            Console.WriteLine(prettifiedCss);

Result:

@media (min-width: 800px) {
        .ad_column {
                AngleSharp.Css.Dom.CssProperty;
                AngleSharp.Css.Dom.CssProperty;
        }
}

[FlorianRappl]

Sounds like an issue to me. Will try to reproduce and fix this later.

Do you mind expanding on your MWE (i.e., also having the text in there)?

[anghelvalentin]

using AngleSharp.Css;
using AngleSharp.Css.Dom;
using AngleSharp.Css.Parser;
using System;
using System.IO;

namespace ConsoleApp4
{
    class Program
    {

        static async System.Threading.Tasks.Task Main(string[] args)
        {
            string text = "@media (min-width: 800px) { .ad_column { width: 728px; height: 90px } }";
            var parser = new CssParser();
            ICssStyleSheet document = parser.ParseStyleSheet(text);
            using var stringWriter = new StringWriter();

            document.ToCss(stringWriter, new PrettyStyleFormatter());
            var prettifiedCss = stringWriter.ToString();
            Console.WriteLine(prettifiedCss);
        }
    }
}

Does it help you? Or do you need the full project?

[FlorianRappl]

That's sufficient - thanks @anghelvalentin !

[FlorianRappl]

Fix landed in develop and the preview version.

[rh78]

@FlorianRappl when will this fix be released? It has been a while...

[FlorianRappl]

@rh78 you can always boost OSS by contributing or sponsoring. :beers: