Theming in jaspr

[schultek]

With the typed Styles class coming in the next release (#18), jaspr will get a powerful mechanism of styling elements through pure type-safe Dart.

There are currently two main cases where Styles can be used:

• On a single DomComponent rendered as inline styles
• On a <style> element as a set of css rules

There is a clear mismatch of good vs bad practices when applying these to the declarative component model vs the html/css model:

1. Styling a component directly

   • From the declarative point of view, applying styles directly to a component is a good practice, since it is explicit and logically tied to the layout. This is also how it is done in Flutter.
   • From the css point of view, extensive use of inline styles is a very bad practice. Styles should be organized in a style sheet (optionally inlined with <style>) and the referred to via ids, classes and other selectors. Inline styles are also less performant than style-sheet rules with e.g. classes (especially for modifying inline-styles vs toggling classes on and off).

2. Bundling rules in a stylesheet

   • From the css point of view, this is the preferred way and considered a good practice. It is both organized and performant.
   • From the declarative point of view, this is not a good practice, since styling is done separately and not where a component is used. The user also has to manually assign classes (or other selectors) to both the rules and components and keep them in sync.

Additionally there is the issue of bundle size. Right now, Styles would be included in the compiled js bundle, even if they are defined statically and don't change. This is not optimal especially when using ssr where the server could render out the styles to css and the client would only need to know the classes referencing the styles.

Themes

Themes should solve the above problems by

a) providing a familiar, declarative api for the user to define and use themes (which are a collection of styles) b) internally use css best practices (stylesheets with classes over inline styles) c) only bundling relevant parts for the client (ideally removing any styles instances)

This could be implemented like this:

• When defining a theme, the user should define styles for the theme
• When rendering on the server, the theme should be rendered into css rules referenced by unique (auto-generated?) classes
• When applying a theme to a component, only the relevant class names should be used

This is currently a very rough idea. I will experiment with this and add more info later on