cssbundling-rails VS include-media

See the issue I opened on Github. [EDIT: closed by DHH recently]

In the Procfile.dev that's currently generated by the cssbundling-rails and jsbundling-rails gems, we can see that they write the web process like:

The functionality comes from https://github.com/rails/jsbundling-rails and https://github.com/rails/cssbundling-rails -- both come with Rails 7 and all you have to do is generate your app with the choices you want such as -j esbuild --css tailwind.

TailwindCSS from CSS Bundling for Rails - (this post)

Maybe https://github.com/rails/cssbundling-rails does what you want? For CSS only, afaik it's perfectly fine to mix different approaches for CSS and JS within one Rails app, so you could still use importmaps for JS.

The docs at https://github.com/rails/cssbundling-rails clearly state that

Install cssbundling-rails gem.

Propshaft has a smaller scope than sprockets and requires you to rely on the js-bundling and css-bundling gems to handle the building of CSS and JS assets. Read the docs for an extensive upgrade guide.

As you may know there's also a [CSS bundling](https://github.com/rails/cssbundling-rails). However, I've only upgraded a trivial project, don't know how involved that would be.

Customization options and the default breakpoints can be found on the Website and in the Docs.

Using an SCSS pre-processor gives you access to powerful math and nice tools, like https://eduardoboucas.github.io/include-media/ for example.

I‘d use https://eduardoboucas.github.io/include-media/ instead, it combines all media queries on compile which will result in smaller CSS files.

include-media

https://eduardoboucas.github.io/include-media/ wonderful for work with media queries.

eduardoboucas/include-media - Simple, elegant and maintainable media queries in Sass

eduardoboucas/include-media the wonderful library who inspire me to create the structure of the queries and the react mixin