A set of examples and experiments for CSS-in-JS Web4WD talk.
The idea is to try out different CSS-in-JS solutions on the same sample application and analyze them.
For that purpose a schematic, sample React application is created. Application contains a couple of pages that share several elements, like buttons or header.
Pages are intended to be different in design, while sharing visual implementation of some elements (header) and redefining, sometimes drastically, others (buttons).
This should help stretching the limits of CSS-in-JS solutions and analyze how well they fit to several development scenarios.
Within differently styled pages:
- Share visual implementation of an element between the pages
- Redefine visual implementation of an element within a page
- ...
Within these scenarios the "usual suspects" are evaluated as well:
- code minification (JS and CSS)
- code extraction (where possible/relevant)
- source maps and debugging
- chunking and hashing of artifacts
- WDS + HMR
- ...
master branch contains the sample application, fully functional but un-styled.
Each of the other branches contains a styling implementation using different CSS-in-JS solution.