CSS

Co-locate your CSS with your components. For use in React/Preact/Vanilla... Probably SolidJS too.

Minify+Gzip < 2kB

Installation

bun add github:elucidata/css

Or npm, pnpm, yarn... Whatever.

Example Usage

import{css}from"@elucidata/css"constButton=(props)=>(<buttonclassName={Button.styles("Button")}>{props.children}</button>)Button.styles=css`&& {background: dodgerblue;color: white; }`

The configurable token && will be replaced with a unique name based on the hash of the entire string.

Also supports creating inline components.

import{comp}from"@elucidata/css/react"constCard=comp("div.Card").css`border:1px solid silver;header {color: dodgerblue;padding:1rem; }section {padding:1rem; }footer {color: dimgray;padding:1rem; }`

Styles using the syntax are scoped to the component.

Configuration

import{configure}from"@elucidata/css"configure({// defaults:debug: false,verbose: false,append: "batch",target: document.head,regExp: /&&/g,hashIds: false,prefix: "css",mode: "auto",})

Configuration options:

interfaceIConfiguration{append: "each"|"batch"// style creationmode: "style"|"sheet"|"auto"// whether constructable stylesheets are useddebug: booleanverbose: booleantarget: ElementregExp: RegExphashIds: booleanprefix: string}

TODO

• [] SSR support