Support for css variables (aka custom properties)

Create issue
Issue #1356 resolved
aleray created an issue

Hi,

I noticed that the css lexer doesn't support yet css custom properties like this:

:root {
    --page-width: 148.5mm;
    --page-height: 210mm;

    --margin-top: 30mm;
    --margin-right: 20mm;
    --margin-bottom: 30mm;
    --margin-left: 20mm;

    --column-count: 2;
    --column-gap: 9pt;
}

Is this something planned somehow?

Thanks!

Comments (15)

  1. Steven Loria

    This would be excellent.

    As a workaround, I've been using javascript for blocks that use custom properties, and it usually ends up looking OK.

    :root {
        --page-width: 148.5mm;
        --page-height: 210mm;
    
        --margin-top: 30mm;
        --margin-right: 20mm;
        --margin-bottom: 30mm;
        --margin-left: 20mm;
    
        --column-count: 2;
        --column-gap: 9pt;
    }
    

    Works for now, but I'd love to see support in the CSS lexer, especially since custom properties are now supported in every major browser.

  2. Sylvain Corlay

    Hi All,

    This is my first post here. I am very interested in allowing CSS variables in pygments styles.

    The motivation is that we use pygments in Jupyter (in Jupyter/nbconvert) and I am creating a nbconvert theme that outputs HTML including JupyterLab CSS variables.

    Simply allowing CSS variables in colorformat to pass through appears to be doing the job.

    Thanks,

  3. Anteru

    Hi, this does indeed sound like an interesting feature. Would you be interested in providing a PR for this? Unfortunately I don’t have the bandwidth to extend the lexers at the moment.

  4. Sylvain Corlay

    OK, I am looking into it.

    In short, since colors can now include formulas like calc(var() * 2 - 20px), we need to let any value pass through the color validation, and always include the # in the colors, instead of prefixing them later on.

  5. Sylvain Corlay

    That would be great! This is the only blocker for me. Is 2.4 scheduled soon?

    In the mean time, I will manually include the CSS generated by my patched version.

  6. Anteru

    Yes, soon™ 😉 Don’t be surprised this is not closing, as I’ll keep this bug open because the issue you’re reporting is different from the issue the original poster reported.

  7. Sylvain Corlay

    Yes, soon™ 😉 Don’t be surprised this is not closing, as I’ll keep this bug open because the issue you’re reporting is different from the issue the original poster reported.

    Hi @Anteru I saw that you tagged 2.4, but it does not include the PR fixing this issue. Is there a chance that it gets into a release soon or should we look for a workaround?

  8. Anteru

    Args, I missed it, sorry about that. I’ll get a 2.4.1 out within two weeks with this, if that’s ok for you in terms of waiting time.

  9. Sylvain Corlay

    Thanks for merging @Anteru . I am looking forward for the 2.4.1. I will definitely not get into dirty workarounds if you it is released in the next couple of weeks!

  10. Log in to comment