named-breakpoints.css

/*

Suppose there's a general concept of "named breakpoints" as a property value, something like:

<named-breakpoints> := <breakpoint>* <custom-ident> [ <breakpoint> <custom-ident> ]*

<breakpoint> := <number> | 'portrait' | 'square' | 'landscape' (etc…)

So that things like this are possible:

*/

example {
  --breakpoints: 0 small 200px medium 500px large;
}

/* 

as well as omitting the first <breakpoint> and having <zero> as the value if it's missing.
This would mean the same thing:

*/

example {
  --breakpoints: small 200px medium 500px large;
}

/*

The question is: if you have breakpoints for more than one condition,
like --width and --height in the next example, and you wanted to express
a list of both in a shorthand, a list of named breakpoints with their condition name,
how would you separate the condition name from the named breakpoints?
What should <condition-name> be?

<breakpoint-list> := <condition-name> <named-breakpoints> [ ',' <condition-name> <named-breakpoints> ]*

*/

example {
  --width: small 100px large;
  --height: short 100px tall;
}

shorthand {
  --breakpoints:
    width small 100px large,
    height short 100px tall
  ;
}

/* Tab's suggestion, possibly also with commas inside the function too */

long form {
  --custom-width: --breakpoints(small 100px large);
  --custom-height: --breakpoints(short 100px tall);
}

shorthand {
  --custom-breakpoints:
    width --breakpoints(small 100px medium),
    height --breakpoints(short 100px tall)
  ;
}