[css-paint-api] Enable inputProperties to provide full definitions

[EisenbergEffect]

I was catching up on how various Houdini specs were progressing, reading through CSS Painting API Level 1 and CSS Properties and Values API Level 1. There's something that doesn't sit well with me...

It seems that properties need to be declared in two different places, using two different API, in order to implement a custom paint. First, one needs to declare the property names in the inputProperties static getter. Second, one needs to provide property descriptors using the CSS.registerProperty API.

This causes a couple of problems:

• The community cannot share custom paints as a single script solution.
• Maintenance of custom paints is more complicated and error prone, as changing the paint requires editing of properties in two different locations and repeating string constants in two different places.
• By design, it forces low-cohesion, which is a standard metric that identifies poor software design.
• This isn't very intuitive (nor ergonomic).

I understand the independent value of having the CSS.registerProperty API. I'm not proposing that we remove that. I'd like to propose that we allow the inputProperties getter to return (string | PropertyDefinition)[].

In short, I'd like to be able to do this:

export class MyPaint {
  static get inputProperties() {
    return [
      '--my-property',
      {
        name: '--my-other-property'
        syntax: "<length>",
        initialValue: "0px",
        inherits: false
      }
    ]
  }
}

[nachtfunke]

I just ran into this issue and wanna express the validity of this use case, if that is any help. Projects like Houdini.how provide CDN links to paintworklets, presenting them as a single-file dependency. This means, that authors of paintworklets may need to sanitise inputProperties from custom properties or document them with specific instructions, when the CSS Typed OM is right there, just not connected.

This becomes especially relevant when <length> units are used. Worklets on houdini.how work with unit-less number inputs and are even required to do so in order to be able to submit them. This layer could be entirely eliminated, with paintworklets being able to access the CSS Typed OM API right from inputProperties().

Currently, If authors of paintworklets wanna utilise the CSS Typed OM API, they'll have to instruct users to either use CSS.registerProperty or @property in CSS adding fragmentation, where it might not be needed.