Sync transform function syntaxes with latest changes in specs

[lahmatiy]

Changes:

• In rotate(), rotateX(), rotateY(), rotateZ(), skew(), skewX() and skewY(): <angle> is replaced for [ <angle> | <zero> ].
• In matrix() and matrix3d(): simplify syntax by using # multiplier (see [css-transforms-2] Simplify matrix3d() syntax w3c/csswg-drafts#4053, [css-transforms-1] Simplify transform function syntaxes w3c/csswg-drafts#4054)
• In skew, scale() and translate(): remove redundant grouping (brackets) (see [css-transforms-1] Simplify transform function syntaxes w3c/csswg-drafts#4054)

References:

• https://drafts.csswg.org/css-transforms/#two-d-transform-functions
  • matrix()
  • rotate()
  • scale()
  • skew()
  • skewX()
  • skewY()
  • translate()
• https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions
  • matrix3d()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()

[chrisdavidmills]

looks good also, thanks!

[lahmatiy]

@chrisdavidmills Could you publish a new version please? There are many important fixes accumulated. For example, csstree/csstree#99 (comment)

[squidfunk]

@lahmatiy do you know why <zero> was added as an explicit type to the transform functions? To my knowledge the unit of a dimension can be omitted if it evaluates to literal zero ("0"), so the <zero> should be implicit. Also, this is not reflected in other parts of the syntax, e.g. <length-percentage> which may be used in margin or other properties and can also be zero. I understand that this repository tries to adhere close to the specs, but as it's currently only in ED, I question the value of adding <zero> to a subset of all effectively necessary syntaxes.

[lahmatiy]

@squidfunk Using zero as a unitless value is allowed for <length> only (it covers any <length> production, e.g. <length-percentage>):

For zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <number> 0).

At one time a unitless zero was valid as <angle> value in some syntaxes. However, currently unitless zero as <angle> is invalid in general, but valid in some syntaxes due to legacy reasons (spec):

Note: For legacy reasons, some uses of <angle> allow a bare 0 to mean 0deg. This is not true in general, however, and will not occur in future uses of the <angle> type.

<zero> introduced to indicate explicitly where it allowed. It appears in Values & Units L4 (it was marked as revert, I didn't found anything about a decision):

The value <zero> represents a literal number with the value 0. Expressions that merely evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>; only literal <number-token>s do.

Btw, unitless zero <length> is prohibited in math functions (e.g. calc()):

Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in math functions. That is, width: calc(0 + 5px); is invalid, because it’s trying to add a <number> to a <length>, even though both width: 0; and width: 5px; are valid.

and also has lower priority over <number>:

if a 0 could be parsed as either a <number> or a <length> in a property (such as line-height), it must parse as a <number>.

Beside line-height property, you may meet this case in flex property, which has following syntax:

So for value flex: 0 0 second component (0) matches on flex-shrink:

But for value flex: 0 0px second component (0px) matches on flex-basis:

[squidfunk]

@lahmatiy thank you for the very insightful and detailed clarification!