functional CSS

[trusktr]

Make a simple abstraction that can take a piece of CSS, generate a stylesheet from it, and provide the end developer a function that can be called in order to pass values for CSS variables/properties.

Initial description of the idea is in postcss/postcss#476 (comment).

Basically given the following CSS,

.foo {
  --some-prop: 1px;
  /* ... styles that use var(--some-prop) ... */
}

we can implement some a tool on the JS side that automatically gives you a simple abstraction:

css = css`
  .foo {
    --some-prop: 1px;
    /* ... styles that use var(--some-prop) ... */
  }
`

// ... call this any time later to update the style's `--some-prop` variable ...
this.css.update({someProp: '10px'})

This will help pave the way towards using reactive variables within CSS styles in a performant way.

Another ideas is we can abstract it so that the css template tag can automatically perform the property update internally:

css = css`
  .foo {
    --some-prop: ${this.foo};
    /* ... styles that use var(--some-prop) ... */
  }
`

// ... call this any time later to update the style's `--some-prop` variable ...
this.foo = '10px'

where this.foo is a reactive property.

Or maybe we just auto-create reactive accessors:

css = css`
  .foo {
    --some-prop: 1px;
    /* ... styles that use var(--some-prop) ... */
  }
`

// ... call this any time later to update the style's `--some-prop` variable ...
this.css.someProp = '10px'