Migrate CSS tooling/architecture to a modular approach

[sensingturtle]

Moving this to v0.1.1 as migrating to PostCSS-based tooling is a much larger effort than anticipated. It could possibly replace the SCSS syntax entirely while still offering it’s complete feature-set in a much more modular and extensible manner.

Set up -

https://github.com/postcss/postcss https://github.com/postcss/postcss-cli

Useful plugins -

https://github.com/postcss/autoprefixer https://github.com/postcss/postcss-nested https://github.com/borodean/postcss-assets https://github.com/2createStudio/postcss-sprites https://github.com/csstools/postcss-font-magician

Learning -

https://www.julian.io/articles/postcss.html https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/ https://www.sitepoint.com/postcss-sass-configurable-alternative/ https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889

[sensingturtle]

There are a lot of options like styled-componenets, Stylable, etc. that offer the same features that a PostCSS-based tooling workflow would provide while also offering a lot of other benefits for component-driven interfaces.

Useful links -

Styled Components: To Use or Not to Use? - https://medium.com/building-crowdriff/styled-components-to-use-or-not-to-use-a6bb4a7ffc21 Ido Rosenthal - CSS in a Components World - https://www.youtube.com/watch?v=Cx-JyJ9eXks Styled Components Crash Course & Project - https://www.youtube.com/watch?v=02zO0hZmwnw

[NejcZdovc]

as a reference, we used styled-components in all other projects

[sensingturtle]

Putting on hold until there is support for CSS Modules in Remix or a custom solution has been figured out.

@NejcZdovc styled-components is not recommended by the Remix team due to the double-rendering and by using them we would also lose benefits like CSS file caching and load/unload on route changes.

[sensingturtle]

Current SCSS setup works for now and I’ll try keeping it as modular as possible until there is a better solution.