da quello che capisco, tutte le soluzioni con CSS modules hanno poi meccanismi complicati per fare il transpiling del CSS e spesso finiscono per arrivare alla soluzione che abbiamo già con CSS unico di libreria che le app consumer devono importare quindi sembrerebbe che la via giusta sia CSS in JS (Emotion): https://javascript.plainenglish.io/tutorial-create-your-own-component-library-with-react-and-rollup-b8978d885297 https://techblog.commercetools.com/why-you-should-build-a-react-component-library-and-style-it-with-css-in-js-12397fd69c58

quello che vorrei ottenere è:

• assenza di conflitti sui classname
• facilità di sviluppo/mantenimento e codice leggibile
• facilità di customizzazione dei componenti dalla soluzione consumer
• ottimizzazione (la pagina X che importa il componente Y, avrà solo lo stile di Y, non di tutta la libreria)
• possibilità di usare variabili e mixins
• tipi esportati per intellisense

la filosofia giusta secondo me è: usare classi semantiche, ma con prefisso di library, iniettando CSS in Js solo nella root del componente

const style = { background: "#FFEEDD", ".ye-frame": { background: "#55EEDD", ".ye-innerBox": { background: "#11DD00", }, }, }; const TestComponent = () => { return (

commands

yarn storybook yarn rollup npm publish