cssProperties type/typeHint

[daKmoR]

hey,

it would be really nice to have types/typeHints for css properties (you will need to hand write them). These types can then be used to either link to documentation or use them to display color pickers 💪

Types I would see so far:

• Color (e.g. #fff, orange, rgb(255,0,0), ...)
• Length (e.g. 10px, 10rem, ...)
• String e.g. default

Stahman proposal:

/**
 * This is a container looking like a card with a back and front side you can switch
 *
 * @cssprop --demo-wc-card-header-font-size <Length> - Header font size
 * @cssprop --demo-wc-card-front-color <Color> - Font color for front
 */
export class DemoWcCard extends LitElement {}

output in customElements.json:

// tags.cssProperties[
{
  "name": "--demo-wc-card-font-front",
  "description": "Font color for front",
  "type": "Color"
}

[runem]

Great idea! :-)

I have two consideration:

1. Why not use the built in JSDoc type syntax like this?

/**
 * This is a container looking like a card with a back and front side you can switch
 *
 * @cssprop {Length} --demo-wc-card-header-font-size - Header font size
 * @cssprop {Color} --demo-wc-card-front-color - Font color for front
 */
export class DemoWcCard extends LitElement {}

2. Would the types be aligned with Houdini's CSS Properties and Values API Editor’s Draft? In that case we should think about supporting those types and advanced syntax like <color># | <url> | magic and <length>+. Valid types include: <integer>, <number>, <percentage>, <length>, <angle>, <time>, <frequency>, <resolution>, <url> and <string>.

[daKmoR]

fully agree on both parts 👍

[runem]

PR https://github.com/runem/web-component-analyzer/pull/122 adresses this issue and has been merged. It's implemented as a "type hint", - a custom, optional string to help document css properties :tada:

[daKmoR]

awesome 🤗