[css-properties-values-api] Shorthand for custom property declaration

[korenevskiy]

Let's create an abbreviated form of writing properties and variables.

When there are variables in the amount of 1000 pieces, then this is a heavy code.
It was:

@property --color {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}

Will be:
It would be convenient to have an abbreviated spelling :

@--gradient-start: <syntax> <initial-value> inherits;

Example:

@--gradient-start: color red inherit;

In the writing of 2 dashes they will show that this is a property.

@--header-color: color white noinherit;
@--header-background-color: color black noinherit;
@--header-border-color: color green noinherit;

@--wiget-color: color white noinherit;
@--wiget-background-color: color black noinherit;
@--wiget-border-color: color green noinherit;
....
....
And so on and so forth

<aside style="@--title-color: color white noinherit;">... html code</aside>

Use default values for each type:

color default: black;
font size default: 1 rem;
lenght size: 1px;

Short write propertis without default value:

@--header-color: color;
@--header-background-color: color;
@--header-border-color: color;

@--wiget-color: color;
@--wiget-background-color: color;
@--wiget-border-color: color;
....

[chriskirknielsen]

Cool idea! I do agree that it can clutter up a file to declare many properties, and that some shorthand could be beneficial.

Not sure about the syntax as it can look a little unclear (my first thought was "custom media query" but that's not the syntax), however I could see something like:

@property --header-color: '<color>', blue;
@property --corner-radius: '<length-percentage>';

(where lengths have an implicit default of 0 (with a unit where relevant), colours implicitly have black, and so on — and inherits defaults to true)

It stays compact while still being an explicit "hey I'm defining --prop" and uses the same syntax. (syntax would have to always be first in case you had a custom ident that looked like a syntax data type)

Might even be able to follow the @layer approach and list several in one go, but parsing might get tricky:

@property --header-color, --header-background-color, --header-border-color: '<color>';

[korenevskiy]

For color format write, please write as this code. @chriskirknielsen

@property --header-color: '<color>', blue;
@property --corner-radius: '<length-percentage>';

[SebastianZ]

Somewhat related regarding multiple declarations: w3c/css-houdini-drafts#1058

I strongly agree with @chriskirknielsen that if such a shorthand is introduced, it still needs to be based on the @property rule. Without that info it is unclear what's defined by that rule.

Regarding the rest of the syntax, I think the colon isn't necessary. Though there's an issue with the comma used to separate the descriptors or multiple property declarations because that's already allowed in the initial value syntax. Generally speaking, any tokens that can be part of a <declaration-value> are allowed.
So, either a separator not allowed in <declaration-value> would need to be used or the shorthand would have to be restricted to @property <custom-property-name> <custom-property-syntax> <custom-property-initial-value>;.

Sebastian

[chriskirknielsen]

If the colon is a problem, perhaps a keyword like as?

@property --foo, --bar as '<integer>';

You'd then still be able to have commas on either side to identify a list of property names vs values. I am however not familiar with parsing rules so maybe it just introduces another issue.

Lea's proposal with the wildcard is also a nice way to do it if you follow a convention like --color-*.

[korenevskiy]

We have several possible syntax options.
But now let's discuss how such a syntax should be displayed in the browser developer panel.
Suppose :

<div style='@property --foo, --bar as color'>

or

<div style='@property --foo, --bar : color'>

In the browser, we select this element in the developer panel. How this style should be displayed below in styles?
Indeed, in styles the panel has 2 columns.
Property name and near property value.

Sorry that the tex is crossed out, 2 ways to display the style.

There is another suggestion.

It would be convenient for us to be able to write as additional as ?

aside.banner,
div.breadcrambs{
	@property: --foo, --bar as color;
	color: var(--foo);
	background-color: var(--bar);
}

I offer this option not as a replacement, but as a complete with new opportunities.
AND
JavaScript

document.querySelector('.banner').property = "--foo, --bar as color;"
// OR
document.querySelector('.banner').propertis.foo = "color;"
document.querySelector('.banner').propertis.bar = "color;"

We must look to the future in case of JS support
PS I suggest that "AS" suffix not write.
AND
I propose commas to simplify (delete) as well.

aside.banner,
div.breadcrambs{
	@property: --foo color, --bar color;
}

<div property='--foo color, --bar color'>

Let's dwell on a simple option without commas and without the AS suffix .

This will allow you to scale this property.

HTML has a DATA-*="" attribute
The task of this attribute is to separate user variables from browser variables. This syntax is for HTML code.
It turns out that CSS variables also need to be separated from browser variables, for this you can use the property attribute in HTML code.

[korenevskiy]

And what prevents in styles from using the word PROPERY?
In my first sentence

@--foo: color;
@--bar: color;

dovy dashes are written. The presence of double dashes will show that this is a property that will not be a problem in the future for media expressions
This will reduce the code, it will not conflict with anything at all.
After a year of use, such a short form of writing will not cause questions at all. It will usually be, and everyone understands the meaning.
But the site code will be less.
It is very similar

 --foo: brown;
 --bar: brown;

 div.breadcrambs{
	@--foo: color brown;
	--bar: red;
}

Very similar
Or maybe not to use media expression at all?
We will simply expand the CSS type variables

 div.breadcrambs{
	--foo: brown color ;
	--bar: red color ;
	--big: initial color ;
	--ben: initial color ;
}

[korenevskiy]

@chriskirknielsen @SebastianZ @jonleighton @hober

What do you think of syntax without dogs at all?

 div.breadcrambs{
	--foo: brown color ;
	--bar: red color ;
	--big: initial color ;
	--ben: initial color ;
}

[chriskirknielsen]

I am not privy to the parsing but it seems you want to declare scoped custom properties, per selector, and I am not sure that's possible with the @property rule. Maybe some new stuff in the spec regarding container queries or scoping would enable this but I honestly do not know.

Additionally, in your proposed form, the browser has no way to know the difference between a custom property value and custom property registration, since --foo: color brown; is a totally valid custom property value in itself.

That is also a bit different from your initial proposal in some ways so I am not sure it's viable in its latest form, but still believe the one-line syntax @property --foo... could be exploited (@property --foo, --bar as '<syntax>' initialValue would be my preferred approach but that's another discussion).

[korenevskiy]

@chriskirknielsen I did not know that such a syntax is acceptable.
I just checked, it is also permissible to use commas in variables.
I also like to use the word @Property. But I want to offer a syntax so that at the moment it is simple, and in the future the syntax has the opportunity to expand the funzkional.
If my short synstaxis is a failure, I would gladly agree to your offer.
But I ask you for help, and help you come up with an indication of the type in a simple syntax for specifying values.

 div.breadcrambs{
	--foo: brown ;
	--bar: red ;
}

Help you create idea out how to insert typization into this format.

[bramus]

I strongly agree with @chriskirknielsen that if such a shorthand is introduced, it still needs to be based on the @property rule. Without that info it is unclear what's defined by that rule.

+1

So, either a separator not allowed in <declaration-value> would need to be used or the shorthand would have to be restricted to @property <custom-property-name> <custom-property-syntax> <custom-property-initial-value>;.

What about @property <custom-property-name>+ <custom-property-syntax> <custom-property-initial-value>;? That would allow definition of multiple custom properties in one go

@property --min --max --avg number 0;

[tabatkins]

I don't want to shove the existing descriptors into an unlabeled prelude space; that's hostile to future expansion, as we'd have to make sure the descriptor syntaxes either work together, or have an alternate form when in the prelude.

However, generally the repetitive part comes from repeating the @property keyword itself, and the syntax/inherits descriptors. Initial values are either distinct per property, or at least short enough that it's fine to repeat.

So, since custom properties are grammatically distinct from normal descriptors, we can do the defaults and the name/initial pairs together, like so:

@properties {
  syntax: "<color>";
  inherits: false;
  --brand-color: teal;
  --text-color: black;
  --bg-color: white;
  /* more names and initial values here */
}

Hm, this isn't even more verbose than the current @property for a single variable. Dang, we probably could have just used it in the first place. I guess it does require setting an initial value, tho, which @property lets you forgo if you're using "*" syntax, but that's a pretty minor thing (and we could avoid it by saying initial as the value). It's probably too late for that tho, huh.

[andruud]

Just brainstorming:

@properties

@layer (non-plural form) allows specifying multiple layers, so we could re-use @property (non-plural) to specify multiple properties.

Initial values are either distinct per property, or at least short enough that it's fine to repeat.

Maybe we can allow env(--my-thing) in these values for the cases where repeats are annoying (see #9206).

And/or allow the initial-value descriptor:

@property {
  syntax: "<length>";
  inherits: false;
  initial-value: 2147483647px;
  --width: initial; /* 2147483647px */
  --height: initial; /* 2147483647px */
  --depth: 0px;
}

Then we could say that the old form @property --x { syntax: "<length>"; inherits: false; initial-value: 0px; } is equivalent to @property { syntax: "<length>"; inherits: false; initial-value: 0px; --x: initial; }.