BuilderIO/mitosis

Readme need more info about using CSS

Seanmclem opened this issue · 1 comments

For mitosis, the docs seem to clearly go over how your template and state etc will be set up. But besides brief mention of a CSS prop in a blog post, I have found very little about utilizing any sort of CSS patterns or files in mitosis. Seeing as how that's kind of an essential part of HTML and CSS, The readme or docs really need updates regarding this. A few more examples would go a long way.

I understand the idea of that, "just uses a CSS or style prop" seems sufficient. But styling is super important too and any reference to how mitosis might integrate with any slightly more complicated styling patterns would be nice.

We build our design-system with mitosis maybe you can check it for some inspiration.

I guess there are 3 options for CSS in mitosis:

  1. css-in-js: This is the described way in docs
  2. import CSS inside mitosis: You can import CSS files directly via your mitosis component, but you need to handle the bundling by yourself, there is no build step in mitosis to move the .css files into the correct location of your output directory
  3. standalone components: Don't bundle CSS into your component, instead load your CSS inside your consuming app (that's what we did)

We tested 2. but had some drawbacks, so we decided to go with 3.