Repository files navigation

Reactive stylesheets for SolidJS

npm i solid-stylednpm i -D postcss

yarn add solid-styledyarn add -D postcss

pnpm add solid-styledpnpm add -D postcss

• Render stylesheets only once
• Fine-grained reactive CSS properties
• Scoped stylesheets
• :global selector
• @global at-rule
• SSR
• Near zero-runtime
• <style jsx>

• Vite -
• Astro -

• Rollup
• Vite
• Unplugin

Use thecss tagged template for writing stylesheets.

import{css}from'solid-styled';functionTitle(){css`h1 {color: red;    }  `;return<h1>Hello World</h1>;}

The template is also reactive. It works by replacing all templating values with a CSS variable. This allows the stylesheet to be only rendered once and can be shared by multiple components of the same scope.

import{css}from'solid-styled';functionButton(){const[color,setColor]=createSignal('red');css`button {color:${color()};    }  `;return(<buttononClick={()=>{setColor((c)=>(c==='red' ?'blue' :'red'));}}>      Current color:{color()}</button>);}

By default, all styles are scoped to its component and cannot leak into another component. The scoping only applies to all DOM nodes that can be found in the component, including the children of the external components.

import{css}from'solid-styled';functionForeignTitle(){return<h1>This is not affected</h1>;}functionTitle(){css`h1 {color: red;    }  `;return(<><h1>This is affected.</h1><ForeignTitle/><Container><h1>This is also affected.</h1></Container></>)}

Since all selectors in a given stylesheet are scoped by default, you can use the:global pseudo selector to opt-out of scoping:

import{css}from'solid-styled';functionFeed(props){css`div>:global(*+*) {margin-top:0.5rem;    }  `;return(<div><Foreach={props.articles}>{(item)=>(// This item is affected by the CSS of the Feed component.<FeedArticledata={item}/>)}</For></div>);}

You can use@global instead of:global if you want to declare multiple global styles

css`/* this is global */@global {body {background-color: black;    }main {padding:0.5rem;    }  }h1 {color: white;  }`;

Sincesolid-styled scopes DOM elements and not components by default, it doesn't affect things like<Dynamic>. Usinguse:solid-styled, we can forward the current scope/sheet to the component.

css`* {color: red;  }`;<Dynamiccomponent={props.as}use:solid-styled>{props.children}</Dynamic>

which compiles into

useSolidStyled('xxxx','*[s\\:xxxx]{color:red}');<Dynamiccomponent={props.as}s:xxxxstyle={vars()}>{props.children}</Dynamic>

Inspired bystyled-jsx.

Use<style jsx> instead ofcss for declaring styles in JSX expressions. Both<style jsx> andcss functions the same.

functionButton(){const[color,setColor]=createSignal('red');return(<><stylejsx>{`          button {            color:${color()};          }        `}</style><buttononClick={()=>{setColor((c)=>(c==='red' ?'blue' :'red'));}}>        Current color:{color()}</button></>);}

You can also use<style jsx global> for declaring global styles.

The main motivation for writing an alternative way of declaring styles with<style jsx> is to facilitate the migration fromsolid-styled-jsx tosolid-styled. Possibly, some developers may as well use<style jsx> because of their familiarity with adding the styles inside the JSX.

For SSR, you can pass an array to thestyles prop of<StyleRegistry>. This array collects all of the "critical" (initial render) stylesheets, that which you can render as a string withrenderSheets.

import{renderSheets}from'solid-styled';conststyles=[];renderToString(()=>(<StyleRegistrystyles={styles}><App/></StyleRegistry>));// Render sheets// You can use the resulting sheet by inserting// it into an HTML template.conststyles=renderSheets(styles);

Alternatively, for automatic sheet rendering (assuming that you are server-rendering the entire document), you can do

renderToString(()=>(<StyleRegistryauto><App/></StyleRegistry>));

solid-styled usesLightningCSS to preprocess CSS templates as well as apply CSS scoping and transformations. By default,CSS Nesting and Custom Media Queries are enabled by default.

• Scopingcss can only be called directly on components. This is so that the Babel plugin can find and transform the JSX of the component. Globalcss (i.e.:global or@global) can be used inside other functions i.e. hooks, utilities.
• Dynamic styles are only limited to CSS properties.

MIT ©lxsmnsyc