Does premailer support css variables?

hoIIer commented 4 years ago

does premailer support css variables? e.g. will the following be automatically translated at runtime?

{% block body %}
  <style>
    :root {
      --color-ardvark: #fff;
      --color-beatle: #f2f5fb;
      --color-cetacean: #d9dee8;
    }

    .container {
      background: var(--color-ardvark);
      box-shadow: 0px 1px 3px var(--color-cetacean);

peterbe commented 4 years ago

Try it on https://premailer.io and let us know.

hoIIer commented 4 years ago

ok yeah I guess the answer is no :/

<html>
<style>
  :root {
    --color-red: red;
  }
p { color: var(--color-red); }
</style>
<body>
  <p>Text</p>
</body>
</html>

ERROR CSSStyleDeclaration: Unexpected token, ignoring upto '--color-red: red;'. [3:5: -]
ERROR CSSVariable: Missing token for production ident: ('CHAR', '-', 5, 16)
ERROR CSSVariable: Missing token for production end FUNC ")"
ERROR PropertyValue: No match: ('CHAR', ')', 5, 27)
ERROR PropertyValue: Unknown syntax or no value:  var(--color-red)
ERROR CSSStyleDeclaration: Syntax Error in Property: color: var(--color-red)

peterbe commented 4 years ago

Bummer. premailer relies on a library called cssutils which I suspect isn't maintained at all and thus probably don't support variables.

peterbe commented 4 years ago

I wonder if you can switch it for https://tinycss2.readthedocs.io/en/latest/ which seems a lot more maintained.

peterbe / premailer

Does premailer support css variables? #246