hugo gen chromastyles --style= produces incomplete results for some styles

earthboundkid commented 7 years ago

Some styles appear to have too few classes.

Actual output:

$ hugo version
Hugo Static Site Generator v0.28 darwin/amd64 BuildDate: 2017-09-26T09:51:20-04:00
$ hugo gen chromastyles --style=vs
/* Background */ .chroma { background-color: #ffffff }
/* Error */ .chroma .ss4 {  }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .s3e8 { color: #0000ff }
/* KeywordType */ .chroma .s3ee { color: #2b91af }
/* NameClass */ .chroma .s7d4 { color: #2b91af }
/* LiteralString */ .chroma .sc1c { color: #a31515 }
/* OperatorWord */ .chroma .sfa1 { color: #0000ff }
/* Comment */ .chroma .s1770 { color: #008000 }
/* CommentPreproc */ .chroma .s17d4 { color: #0000ff }
/* GenericEmph */ .chroma .s1b5a { font-style: italic }
/* GenericHeading */ .chroma .s1b5c { font-weight: bold }
/* GenericPrompt */ .chroma .s1b5f { font-weight: bold }
/* GenericStrong */ .chroma .s1b60 { font-weight: bold }
/* GenericSubheading */ .chroma .s1b61 { font-weight: bold }

Expected output:

Should have as many classes as manni style does.

/* Background */ .chroma { background-color: #f0f3f3 }
/* Error */ .chroma .ss4 { color: #aa0000; background-color: #ffaaaa }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .s3e8 { color: #006699; font-weight: bold }
/* KeywordPseudo */ .chroma .s3ec { color: #006699 }
/* KeywordType */ .chroma .s3ee { color: #007788; font-weight: bold }
/* NameAttribute */ .chroma .s7d1 { color: #330099 }
/* NameBuiltin */ .chroma .s7d2 { color: #336666 }
/* NameClass */ .chroma .s7d4 { color: #00aa88; font-weight: bold }
/* NameConstant */ .chroma .s7d5 { color: #336600 }
/* NameDecorator */ .chroma .s7d6 { color: #9999ff }
/* NameEntity */ .chroma .s7d7 { color: #999999; font-weight: bold }
/* NameException */ .chroma .s7d8 { color: #cc0000; font-weight: bold }
/* NameFunction */ .chroma .s7d9 { color: #cc00ff }
/* NameLabel */ .chroma .s7dc { color: #9999ff }
/* NameNamespace */ .chroma .s7dd { color: #00ccff; font-weight: bold }
/* NameTag */ .chroma .s7e2 { color: #330099; font-weight: bold }
/* NameVariable */ .chroma .s7e3 { color: #003333 }
/* LiteralString */ .chroma .sc1c { color: #cc3300 }
/* LiteralStringDoc */ .chroma .sc23 { color: #cc3300; font-style: italic }
/* LiteralStringEscape */ .chroma .sc25 { color: #cc3300; font-weight: bold }
/* LiteralStringInterpol */ .chroma .sc27 { color: #aa0000 }
/* LiteralStringOther */ .chroma .sc29 { color: #cc3300 }
/* LiteralStringRegex */ .chroma .sc2a { color: #33aaaa }
/* LiteralStringSymbol */ .chroma .sc2c { color: #ffcc33 }
/* LiteralNumber */ .chroma .sc80 { color: #ff6600 }
/* Operator */ .chroma .sfa0 { color: #555555 }
/* OperatorWord */ .chroma .sfa1 { color: #000000; font-weight: bold }
/* Comment */ .chroma .s1770 { color: #0099ff; font-style: italic }
/* CommentSpecial */ .chroma .s1774 { color: #0099ff; font-weight: bold; font-style: italic }
/* CommentPreproc */ .chroma .s17d4 { color: #009999 }
/* GenericDeleted */ .chroma .s1b59 { background-color: #ffcccc }
/* GenericEmph */ .chroma .s1b5a { font-style: italic }
/* GenericError */ .chroma .s1b5b { color: #ff0000 }
/* GenericHeading */ .chroma .s1b5c { color: #003300; font-weight: bold }
/* GenericInserted */ .chroma .s1b5d { background-color: #ccffcc }
/* GenericOutput */ .chroma .s1b5e { color: #aaaaaa }
/* GenericPrompt */ .chroma .s1b5f { color: #000099; font-weight: bold }
/* GenericStrong */ .chroma .s1b60 { font-weight: bold }
/* GenericSubheading */ .chroma .s1b61 { color: #003300; font-weight: bold }
/* GenericTraceback */ .chroma .s1b62 { color: #99cc66 }
/* TextWhitespace */ .chroma .s1f41 { color: #bbbbbb }

Jos512 commented 7 years ago

Should have as many classes as manni style does.

Actually, the output from the 'manni' style is also not complete. I see that chroma also generates a .p and .nt class for the HTML syntax highlight, and those are not in 'manni' (also not in the ''vs' style).

Worse thing is that the 'vs' style does include an empty class (2nd line):

/* Background */ .chroma { background-color: #ffffff }
/* Error */ .chroma .err {  }
/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .k { color: #0000ff }
/* KeywordConstant */ .chroma .kc { color: #0000ff }
/* KeywordDeclaration */ .chroma .kd { color: #0000ff }
/* KeywordNamespace */ .chroma .kn { color: #0000ff }
/* KeywordPseudo */ .chroma .kp { color: #0000ff }
/* KeywordReserved */ .chroma .kr { color: #0000ff }
/* KeywordType */ .chroma .kt { color: #2b91af }
/* NameClass */ .chroma .nc { color: #2b91af }
/* LiteralString */ .chroma .s { color: #a31515 }
/* LiteralStringAffix */ .chroma .sa { color: #a31515 }
/* LiteralStringBacktick */ .chroma .sb { color: #a31515 }
/* LiteralStringChar */ .chroma .sc { color: #a31515 }
/* LiteralStringDelimiter */ .chroma .dl { color: #a31515 }
/* LiteralStringDoc */ .chroma .sd { color: #a31515 }
/* LiteralStringDouble */ .chroma .s2 { color: #a31515 }
/* LiteralStringEscape */ .chroma .se { color: #a31515 }
/* LiteralStringHeredoc */ .chroma .sh { color: #a31515 }
/* LiteralStringInterpol */ .chroma .si { color: #a31515 }
/* LiteralStringOther */ .chroma .sx { color: #a31515 }
/* LiteralStringRegex */ .chroma .sr { color: #a31515 }
/* LiteralStringSingle */ .chroma .s1 { color: #a31515 }
/* LiteralStringSymbol */ .chroma .ss { color: #a31515 }
/* OperatorWord */ .chroma .ow { color: #0000ff }
/* Comment */ .chroma .c { color: #008000 }
/* CommentHashbang */ .chroma .ch { color: #008000 }
/* CommentMultiline */ .chroma .cm { color: #008000 }
/* CommentSingle */ .chroma .c1 { color: #008000 }
/* CommentSpecial */ .chroma .cs { color: #008000 }
/* CommentPreproc */ .chroma .cp { color: #0000ff }
/* CommentPreprocFile */ .chroma .cpf { color: #0000ff }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericPrompt */ .chroma .gp { font-weight: bold }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { font-weight: bold }

This is problematic because an empty class suggests that all Chroma classes are there and that the CSS file is complete. But it's actually not.

Edit: After a bit more testing I learned that the following classes are missing from hugo gen chromastyles:

.chroma .p: used in HTML syntax, not in 'vs' style.
.chroma .nt: used in HTML syntax, not in 'vs' style.
.chroma .mh: used with CSS syntax, not in 'vs' style.
.chroma .na: used with HTML (and C#) syntax, not in 'vs' style.
.chroma .o: used with HTML syntax, not in 'vs' style.
.chroma .nn: used with C# syntax, not in 'vs' style.
.chroma .n: used with C# syntax, not in 'vs' style.

JerrySievert commented 7 years ago

it's a bit worse than that, I think:

specifically, Hugo is generating bad css, that fails linting and breaks in safari 11.0.2 (latest 10.13.2 beta):

/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }

the ; as the first rule causes none of the styles for code to be rendered.

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

earthboundkid commented 6 years ago

I think this was improved by https://github.com/alecthomas/chroma/commit/c9f612c1940a4951cd2b55811744632a7b3b3bb2 but I'm not totally sure how to test it.

denisbrodbeck commented 6 years ago

@carlmjohnson The issue concerning broken css output has been already fixed upstream and is included in current hugo release.

How to verify:

hugo gen chromastyles --style=github

Output (redacted) — this is good output:

/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }

Wrong output was:

/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }

Any issues with missing/incomplete css classes on some highlighting styles have to be resolved upstream.

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

gohugoio / hugo

hugo gen chromastyles --style= produces incomplete results for some styles #3914