Known limits · solid-styled

Astro. solid-styled 1.0 needs Solid 2.0. @astrojs/solid-js 7.1.2 still needs solid-js@^1.9, so 1.0 does not run in Astro yet.
StackBlitz. The compiler uses LightningCSS, which loads a native binary for the current platform. WebContainers cannot load native binaries, so the plugin fails on StackBlitz with errors such as wasm is undefined. Use a local setup, or a Linux container such as GitHub Codespaces.
Interpolation only in CSS values. A ${...} becomes a CSS custom property. It cannot hold a selector, a property name, an at-rule prelude or a whole block of rules. You cannot compose sheets by interpolating one into another (#33). Use a class name or an attribute selector instead. See What can be interpolated.
<style jsx> outside a JSX parent. The compiler removes the <style jsx> element and leaves the code around it. When the element is not a child of an element or fragment, an empty expression is left. return (<style jsx>...</style>); becomes return ();, and () => <style jsx>...</style> becomes () => ;. Both fail to parse. A bare return <style jsx>...</style>; becomes return ; and renders nothing. 0.12.1 fails on these too. Wrap the element in a fragment with its siblings.
<style jsx> in an arrow function with an expression body. The setup call goes before the whole declaration, outside the component. 0.12.1 does the same. It runs once at module load, and a value such as props.color is not in scope there. Use a block body.
await and yield in a spread. Solid's compiler (2.0.0-rc.21) emits code that does not parse for await or yield inside a spread. This happens when the element has other attributes. The scope marker is such an attribute, so a scoped element cannot use them in a spread. Compute the value first and spread the result.
:global(...) in a selector list. With the default browserslist targets, .a, :global(.b) compiles to [s\:c-1a2b3c-0]:is(.a[s\:c-1a2b3c-0],.b). The .b part still needs the scope marker. Some lists compile as expected, so do not rely on the list form. Put :global(.b) in its own rule.
& inside @global. In a @global block of a css template, a compound selector joined to & with no space becomes a descendant. This covers a class, id, attribute, pseudo class or pseudo element. Inside .a, &:hover compiles to .a :hover, &[x] to .a [x] and &::before to .a :before. & .b, & > p and & + p compile as expected. Write the full selector, such as .a:hover, or use <style jsx global>.
unicode-range inside @global. In a @global block of a css template, unicode-range: U+0000-00FF compiles to U0-0FF, which browsers drop. The + is lost and the range is rewritten. Scoped sheets and <style jsx global> keep the value, as U+??. Declare the @font-face outside @global, since @font-face is not scoped.
Numbers in the css type. The css tag type only accepts string and boolean interpolations. css`width: ${4}px` fails type checking with TS2345. The compiled output works. Wrap the value in String(...) or a template literal.