[css-mixins] Add CSS Functions and Mixins specification

[andruud]

To begin with, only @function is described.

#9350

[tabatkins]

Got one question, but it's probably better as an issue anyway. Looks good, imo!

[tabatkins]

Unless @mirisuzanne has any complaints, I think we should merge this and then bring it up to the WG for review.

[andruud]

@mirisuzanne Can we drop these type() functions? Both in the return value, and the param lists. Right now, the full abomination looks like e.g.:

@function --abcd(--a type("<length>") : 10px,
                 --b type("<length>") : 20px)
          using (--c type("<length>") : 30px,
                 --d type("<length>") : 40px)
          returns type("<length>")
{
  --ab: var(--a) + var(--b);
  --cd: var(--c) + var(--d);
  result: calc(var(--ab) + var(--cd));
}

Whereas if we drop type(), we get "just":

@function --abcd(--a "<length>" : 10px,
                 --b "<length>" : 20px)
          using (--c "<length>" : 30px,
                 --d "<length>" : 40px)
          returns "<length>"
{
  --ab: var(--a) + var(--b);
  --cd: var(--c) + var(--d);
  result: calc(var(--ab) + var(--cd));
}

As far as I can tell, there's no reason why we couldn't just parse an optional plain <string> after the param name / returns keyword.

@tabatkins and I also have a plan to spec that we don't need to use strings to specify the types:

@function --abcd(--a <length> : 10px,
                 --b <length> : 20px)
          using (--c <length> : 30px,
                 --d <length> : 40px)
          returns <length>
{
  --ab: var(--a) + var(--b);
  --cd: var(--c) + var(--d);
  result: calc(var(--ab) + var(--cd));
}

(We could require a string for complex types such as <length> | <color>).

I'm not going to attempt the unstringification in this PR, but I would like to kill type(), if possible.

[andruud]

Or, maybe we can keep type(), but make it optional if there's a single syntax component. For example:

Valid:

@function (--a <length>) { ... }
@function (--a <color>) { ... }
@function (--a <color>+) { ... }

Not valid:

@function (--a <number> | <percentage>) { ... }

However, valid:

@function (--a type(<number> | <percentage>)) { ... }

[andruud]

For example, something like: andruud#2

[mirisuzanne]

Yeah, I'm fine with any of these approaches to simplifying the types. The linked PR makes sense to me.

[svgeesus]

@mirisuzanne does this look good to merge?

[mirisuzanne]

This looks like a good start to me, setting aside the tangential/theoretical nature of @nest. Thank, @andruud!

[mirisuzanne]

Yeah, I'm fine with any of these approaches to simplifying the types. The linked PR makes sense to me.