3 ms·

Since many people apparently didn’t read TFA, the issue is that when you have an expression such as calc(100% - var(—-x)), it is invalid if var(—-x) is 0 with n

Since many people apparently didn’t read TFA, the issue is that when you have an expression such as calc(100% - var(—-x)), it is invalid if var(—-x) is 0 with no units, which is otherwise valid in CSS. This is clearly a bug in the spec.

tolmasky 4y ago
Especially because, as TFA points out, you might have even yourself written "0px" but your CSS linter "compressed" it to 0, thus making it invalid after compilation. This seems like an annoying thing to have to account for CSS compilers.
- chrismorgan 4y ago
  Any CSS processor that unconditionally removes the unit from zero values is clearly wrong. Any processing should be following the CSS grammar rather than being naive textual, and thus it should only be removing the unit of zeroes in <length> contexts—so properties like border-top-width and left and height, but not custom properties or mathematical functions, because in each of those cases it changes the semantics.
chrismorgan 4y ago
No, you’ve misunderstood it. calc(100% - 0) is invalid too. There is no bug in the spec, this is reasonable and sensible behaviour (subtracting a unitless value from a length just doesn’t make sense as a concept, mathematically). You’re just surprised because the <length> grammar item allows unitless zero. It is the exception, not the mathematics functions. (Frankly, I think that if breaking changes were allowed in CSS with absolutely no considerations for compatibility, unitless zero lengths would probably be removed. It’s messy and inconsistent and consequently unpleasant.) As an example of another thing that requires a unit on zeroes: <time>, 0 is invalid, 0s and 0ms are valid.
- zarzavat 4y ago
  CSS variables are often set in JavaScript, the consumer of the variable is not necessarily the same person as the one who defined it (who perhaps did not anticipate its use in a calc() expression). Given that unitless zero is automatically coerced to a length when used as a constant (e.g. padding: 0), it is certainly a bug that this automatic coercion does not also happen when it is used in an expression.
  - chrismorgan 4y ago
    Rather it is a bug that properties that accept lengths allow a literal zero—a design bug that won’t be fixed for compatibility reasons, but which strongly should not be propagated into new work. This is why not even `padding: calc(0)` works. CSS is typed. Every other context requires units, and computed values always have a unit.

tolmasky 4y ago

Especially because, as TFA points out, you might have even yourself written "0px" but your CSS linter "compressed" it to 0, thus making it invalid after compilation. This seems like an annoying thing to have to account for CSS compilers.

chrismorgan 4y ago
Any CSS processor that unconditionally removes the unit from zero values is clearly wrong. Any processing should be following the CSS grammar rather than being naive textual, and thus it should only be removing the unit of zeroes in <length> contexts—so properties like border-top-width and left and height, but not custom properties or mathematical functions, because in each of those cases it changes the semantics.

chrismorgan 4y ago

No, you’ve misunderstood it. calc(100% - 0) is invalid too. There is no bug in the spec, this is reasonable and sensible behaviour (subtracting a unitless value from a length just doesn’t make sense as a concept, mathematically). You’re just surprised because the <length> grammar item allows unitless zero. It is the exception, not the mathematics functions. (Frankly, I think that if breaking changes were allowed in CSS with absolutely no considerations for compatibility, unitless zero lengths would probably be removed. It’s messy and inconsistent and consequently unpleasant.) As an example of another thing that requires a unit on zeroes: <time>, 0 is invalid, 0s and 0ms are valid.

zarzavat 4y ago
CSS variables are often set in JavaScript, the consumer of the variable is not necessarily the same person as the one who defined it (who perhaps did not anticipate its use in a calc() expression). Given that unitless zero is automatically coerced to a length when used as a constant (e.g. padding: 0), it is certainly a bug that this automatic coercion does not also happen when it is used in an expression.
- chrismorgan 4y ago
  Rather it is a bug that properties that accept lengths allow a literal zero—a design bug that won’t be fixed for compatibility reasons, but which strongly should not be propagated into new work. This is why not even `padding: calc(0)` works. CSS is typed. Every other context requires units, and computed values always have a unit.