RE: [css-variables] Is making a property negative via `-var(--width)` valid syntax?

Sent from Mail for Windows 10



From: Philip Walton
Sent: Monday, November 9, 2015 12:21 PM
To: François REMY
Cc: Xidorn Quan;Boris Zbarsky;www-style list
Subject: Re: [css-variables] Is making a property negative via `-var(--width)` valid syntax?


On Sun, Nov 8, 2015 at 3:11 PM, François REMY <francois.remy.dev@outlook.com> wrote:
> De : Xidorn Quan [mailto:quanxunzhen@gmail.com]
> On Mon, Nov 9, 2015 at 8:37 AM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
> > On 11/8/15 1:51 PM, Philip Walton wrote:
> >>
> >> If I try doing the same thing with custom properties in Firefox is
> >> fails. I'm assuming that's a bug, but I wanted to ask here to make sure.
> >
> >
> > The Firefox behavior seems correct to me per spec at first glance,
> > though the spec could be clearer about this for sure.  The issue
> > you're running into is var() substitutes a sequence of tokens, not a
> > string to be retokenized.  This is the part that could be spelled out more
> clearly.
> >
> >> .parent {
> >>    --gutter: 1em;
> >>    margin: -var(--gutter); /* declaration ignored in FF */
> >
> >
> > So the value of the custom property in this case is the sequence of
> > tokens [1em].
> >
> > The value of 'margin' is then the sequence of tokens ['-', 1em] which
> > is not the same thing as the single token [-1em].

This is right. "CSS Variables" are some form of "Token Stream Reference" as I call them in the sense that they replace tokens, not chars. As a matter of fact, you can pretty much insert /**/ before and after the var(...) declaration to see how it would be interpreted.

    padding: -/**/1em;

doesn’t work, so doesn't

    padding: -/**/var(...);

Hmmm, I see. That makes sense, though I kind of fear the backlash when people used to preprocessors discover they can't do that.

I suppose they could also do something like the following if they found themselves needing to use the inverse version frequently:

{
  --inverse-gutter: calc(-1 * var(--gutter));
}

Perhaps that's more explicit anyway.