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.
.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'
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 https://github.com/postcss/postcss/issues/476#issuecomment-633678669.
Basically given the following CSS,
we can implement some a tool on the JS side that automatically gives you a simple abstraction:
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:where
this.foo
is a reactive property.Or maybe we just auto-create reactive accessors: