CSS var() as Custom Syntax Middleware

These demos show how custom properties can carry syntax the browser would normally reject, then JavaScript can translate it into valid CSS at runtime.

1. Inventing a keyword() color function

Code:
.keyword-card {
  --keyword: keyword(blue, 50%);
  --aaa: keyword(blue, 0.1);
  --bbb: var(--aaa);

  color: var(--keyword);
  background-color: var(--bbb);
}
Result:
What color is this text?

2. Polyfilling extra offset-path shapes

Code:
.runner {
  --offset-path: circle(88px at 50% 50%);
  transform: translate(var(--x), var(--y)) rotate(var(--angle));
}

/* JS reads --offset-path and converts circle(), ellipse(), inset(),
   polygon(), or url(#road) into animated x/y coordinates. */
Result:
●

3. Supporting the new typed attr() syntax

Code:
.attr-button {
  --attr-bg: attr(bgcolor color);
  --attr-radius: attr(radius px, 4px);

  background-color: var(--attr-bg);
  border-radius: var(--attr-radius);
}

<button class="attr-button" bgcolor="#b42318" radius="18">
  Attribute powered
</button>
Result:

4. The shared principle

Code:
.element {
  /* The unknown syntax is stored in a custom property. */
  --custom-value: some-new-syntax(anything);

  /* JavaScript reads --custom-value, converts it,
     then writes a browser-supported value back. */
  property: var(--custom-value);
}
Result:
1. AuthorWrite a custom function inside a CSS variable.
2. ReadJavaScript gets the custom property from the element.
3. ConvertThe script writes valid CSS that browsers already understand.