Deltachat-desktop: [Discussion] Modularize CSS/Preprocessor

[Jikstra]

How do we want to achieve modularized css?
I think goals are:

• Keep react components and css somehow together
• Reusable css
• Maybe a preprocessor

Do we want to do styled components? What I don't like about them is that the js & css is in the same file (as far as i understand it).

Currently we have node-sass in the dependencies, but i don't like it because it depends on some node-gyp c/c++ binding stuff which often breaks. Otherwise i'm fine with it, but there are pure js preprocessors like less/stylus.

---

Things to clean up / refactor:

• [ ] Group image and group header, see https://github.com/deltachat/deltachat-desktop/pull/316#issuecomment-439557187

[ralphtheninja]

@Jikstra Maybe you can suggest something you _do_ like and lets just go with that. My css skills are very limited and tooling skills are even worse.

[Jikstra]

I would go for less and put the .less files just next to the components. In the main.css (than less) i would just import all the component .less files. Clean and no big trouble, only need to transpile one file and we're done.

[okdistribute]

Hey Jikstra, thanks for opening this.

Often these less files will be quite small, and creates a bit of overhead. Wondering what benefit we gain by doing this instead of using styled-components inside the js file.

The benefit of styled-components is that the css is right next to the component, but is still css so you can copy/paste it out if necessary.

Bundling into a single css file is nice for browsers (minifiaction etc) but on electron we don't really have the problem of a large js file needing to be downloaded before the site renders.

[ralphtheninja]

Does styled-components mean we can still have classes etc? If so, where do they end up?

[r10s]

i do not know much about node and all this, however, i general, i would suggest to keep things as simple as possible. even if this means eg. to add a color on several places to a css (a typical issue ..)

also because we otherwise would raise the skill requirements of $person who does the initial stying. eg. i know a bit of css - but i have no idea of frameworks or so.

when styled components or whatever (currently they are also "styled", or not?) are really needed, we can add them probably later.

[ralphtheninja]

when styled components or whatever (currently they are also "styled", or not?) are really needed, we can add them probably later.

I think @karissa and @Jikstra are a bit worried that we do too much work with the current setup and end up with a gazillion css styles to change later which will be a nightmare. So we want to come up with something better that's more easily maintained in the long run.

[okdistribute]

styled-components is just simple css with some nice added features such as sub-classes and everything. Yes, you can still have classes. Here's an example of how I use it in other projects:

Notice also the use of variables, just like with less or sass. Cool!

https://github.com/dat-land/dat-desktop/blob/master/app/components/header.js#L11-L15
https://github.com/digidem/mapeo-desktop/blob/master/src/components/Sidebar.js#L15

[okdistribute]

The great part about using css directly with the component is that a random identifier is created and added to the :host class, so that you can have multiple 'menu' items and not have to worry about it conflicting with outside css, or keeping your global namespace clean which can be a pain for small teams.

[okdistribute]

It also allows you to require components in other projects or pages and keep the css intact.

Also really recommend checking out https://github.com/storybooks/storybook if you're curious about the power of isolated web components in React

[okdistribute]

also check this out: https://react-styleguidist.js.org/

[Jikstra]

It also allows you to require components in other projects or pages and keep the css intact.

This is something i really like. I think we can go with the styled-components.

[Jikstra]

@ralphtheninja @karissa
Soo i looked into styled-components more detailed and I think it doesn't solve one of the problems we have.

We currently need to greatly modify existing rules of the conversations stuff. To do this we need to apply global css rules which isn't really the approach of styles components (even if the support that). To achieve what we need we would need to wrap all the conversations components in our own "styled wrapper components" which results in a lot more code than just writing some css rules into a file. But as we want to get away from the conversations stuff anyway at one point, this is maybe not too bad.

So i don't think we can easily replace all of our css rules with styled components and would result in a lot of boilerplate code. Don't know if we currently want this. But i really like the styled components approach, especially if we want to rewrite what conversations does at one point and have it in "seperate npm module" (don't know if we really want to do this).

[ralphtheninja]

We should try to get rid of the inlined css (insert-css). Then we can remove the unsafe-inline, see https://github.com/deltachat/deltachat-desktop/pull/330