No more `(s)css` files
External stylesheets are notorious for falling out of sync with the Html.
With the Grid
component, we had a precedent of typescript-generated CSS that turned out more stable than the external scss files.
We haven't used the full hierarchy of cube
yet, and probably never will.
Each level on the cascade introduces coupling. Current approaches such as tailwind trade extreme verbosity and lots of redundant inline css for the benefit of no more coupling.
As outlined in #102 (closed) I propose that we move styling mostly to inline, with typescript-generated primitives (similar to tailwind in approach but not in execution), but keep a minimal and stable subset of styles in a global
and a component-level layer.
Then we can remove all scss files and get rid of lots of dependencies.
Advantages:
- Less errors in CSS because we can make css snippets typesafe
- Faster refactorings and ad-hoc style changes because of colocation
- Less maintainance because we don't use scss any more
- Documentation can be generated from .ts sources so we don't need a separate css file autogenerate docs toolchain
Disadvantage:
- It's harder for users to override styles with userstyle because we don't use classes any more. We may want to introduce classes just for that use-case.