styled-components for CSS Modules
Why?
The main benefit of styled-components
(IMO) is semantics they add to the code. We can have a similar experience with CSS modules. Compare
; const AccordionSection = children title index onToggle id expanded const sectionId = `--section`; const labelId = `--label`; return <> <div role="button" aria-expanded=expanded aria-controls=sectionId id=labelId className=stylesLabel onClick= onToggle && > title <span aria-hidden=true>expanded ? "▲" : "▼"</span> </div> <div role="region" aria-labelledby=labelId id=sectionId hidden=!expanded className=stylesPanel > expanded && ? : children </div> </> ;;
vs
;;const styled = ; const Label = styled;LabeldefaultProps = role: "button" ; const Panel = styled;PaneldefaultProps = role: "region" ; const AccordionSection = children title index onToggle id expanded const sectionId = `--section`; const labelId = `--label`; return <> <Label aria-expanded=expanded aria-controls=sectionId id=labelId onClick= onToggle && > title <span aria-hidden=true>expanded ? "▲" : "▼"</span> </Label> <Panel aria-labelledby=labelId id=sectionId hidden=!expanded> expanded && ? : children </Panel> </> ;;
Modifiers
Every class in CSS Module can be used as the "source" for the component and as a modifier.
////
;;const styled = ; const Button = styled; const App = <> /*<button className="Button">Normal Button</button>*/ <Button>Normal Button</Button> /*<button className="Button primary">Primary Button</button>*/ <Button primary>Primary Button</Button> </>;