- Add
<style jsx> and <style jsx global>. It's inspired by styled-jsx and functions similarly to css.
function Button() {
const [color, setColor] = createSignal('red');
return (
<>
<style jsx>
{`
button {
color: ${color()};
}
`}
</style>
<button onClick={() => {
setColor((c) => (c === 'red' ? 'blue' : 'red'));
}}>
Current color: {color()}
</button>
</>
);
}
- Fix styles to no longer rely on component IDs and using an internal effect for style patching, instead, it compiles to
style prop and attempts style merging (if user provides one). This also improves support for SSR.
- Fix callbacks inside functions where
css is declared to be affected by scoping. This allows components like <Show> and <For> to be scoped properly.
