Possibly outdated information in the `add` docs

[zyriab]

In the add docs it says

Note: Hyperscript supports hyphens in object property names, so you can write add { font-size: '2em' }. However, double hyphens (--) mark comments in hyperscript, so if you need to use them for [CSS Custom Properties][], use quotes -- add { '--big-font-size': '2em' }.

But in the 0.8.4 release notes it says:

Comments now require two dashes and a space, like so: -- , which enables double dashes in class literals like so: add .foo--bar

So I guess the note can be removed, right? Happy to open a PR if that's the case

PS: I'm also happy to add a note on using class names with a dash in them, as is frequent with TailwindCSS utilities. (.{'foo-bar'})

[iocouto]

The page for the add command in the hyperscript reference docs seems to need some revision indeed.

1. In the description of the command, there seems to be a link missing to the CSS properties documentation - it seems the code was wrongly entered there, and it’s showing on the page.

2. The official syntax at the top of the page and the description of the command talk about using the word WHERE to trigger a filter. However, the only example we have of the filtered usage, at the bottom of the page, uses the word WHEN instead.

3. The described way of using the add command and passing an object to it in order to add/remove CUSTOM PROPERTIES doesn’t seem to work:

add {`--my-prop`: `blue`} to me // does not work

Perhaps it only works if used in the root document level — not sure — but if that is the case, the docs should perhaps make that clear, too (although that would limit hyperscript’s way of working with CSS custom properties quite a bit).

[1cg]

Yep, looks like the docs need an update, please PR!

[DeadLyBro]

This works (for you @iocouto):

<button _="
  on click
    add { --my-prop: blue } to me
  end
">
  MY BUTTON
</button>

You can also set element style like this:

<button _="
  on click
    set my style to `
      --my-prop: blue;
    `
  end
">
  MY BUTTON
</button>

Now I take a look to docs you referred and that input code is not working. They need to refer to a variable like this:

<input
  type="color"
  _="
    on change
      add {
        --accent-color: ${my.value}
      } to document.body
    end
  "
/>

This works too (and without dot):

<input
  type="color"
  _="
    on change
      set document.body's style to `
        --accent-color: ${my value}
      `
    end
  "
/>