Feature: Change extract_css default to true in all environments #2608
Conversation
The common use case, for hot module reloading, should be opt-in. The default production use case, extract_css: true, should be presented by default in development and test to be less surprising to developers who encounter issues during deployment.
Doing so ensures that stylesheet_pack_tag won't fail out of the box when no styles are imported in JS. Support for "matching-name"CSS pack was added in Webpacker 5.
|
@gauravtiwari @rossta can we get some more details on
Maybe this all "just works" thanks to Webpack's magic and support of this feature? Per the docs from https://webpack.js.org/guides/entry-advanced/#multiple-file-types-per-entry: What's not clear about these webpack docs is how this interacts with https://webpack.js.org/plugins/mini-css-extract-plugin/#root. Maybe this doc in the generated file could offer some guidance on this? I do say, it sounds quite nice simple imports in this application.css file, although maybe it should be called a with a Sass extension, as the docs list imports? /*
Any CSS added to this file or imported from this file, e.g. `@import '../stylesheets/my-css.css'`,
will be included in the "application" pack. Any CSS imported from application.js or as part of the
application.js dependency graph, e.g. `import '../stylesheets/my-css.css'` will also be included
in the "application" pack.
*/ |
|
Firing up a fresh Rails 6 (6.0.3.4) app, running into webpacker issues as described extensively elsewhere. Hello world version of rails (no controllers, models) ran fine, but once I created a single controller, webpacker immediately stepped in with complaints about manifest issues. I attempted all the usual antics ( Really getting in the way of easily prototyping new apps, that's for sure. The state of webpacker+rails for new users is severely subpar. |
|
@justinperkins Could you file an issue that describes the issue you’re seeing from Webpacker in more detail?, e.g., what flags you used to generate the app, error messages, Webpacker config, etc. I understand the frustration but filing a bug report may be a more effective way to both get help and help improve the experience. |
Problem
Dealing with CSS with Webpacker is a common issue. See the lengthy background in #2605 as one example for getting a local development running from rails new with webpacker. Another common issue is deployment; developers don't catch missing stylesheets locally as a result of
extract_css: falseuntil first deployment whereextract_css: true, e.g., #2071.Solution
This changeset adds two key changes:
extract_css: trueby default for all environmentsapp/javascript/packs/application.cssfile on install. This ensures that addingstylesheet_pack_tag "application"to the layout does not raise an error if no styles have been otherwise imported from js.I expect there to be some discussion around these changes as they are fairly impactful. The most important argument I can make is that these changes together improve the out-of-the-box experience with Webpacker. I believe this would prevent issues like #2605 and #2071. This sets up an experience that is more Sprockets-friendly to start. Developers can remove this file if not needed.
Fixes #2592
Fixes #2605
Potential concerns
application.css, add to the confusion? My change takes advantage of a new feature, Feature: Add support for multiple files per entry #2476: as of Webpacker 5, files of the same canonical name and different extensions act as a single multi-file entrypoint. I think, is more "Sprockets-like". I'm not sure that this convention is well-known yet however and could be surprising to folks with more experience.stylesheet_pack_tag "application"tag in the application layout. I expected that would be a more drastic change, also deferring to the Rails default preference for Sprockets to compile CSS. Generally, developers are confused about how the Rails default straddles the fence between Sprockets and Webpacker, especially around CSS. My intent with this change is to ease the transition for developers who are new to webpack. I could see that it may add to confusion as well. I'm open to feedback on this.extract_css: falseis to enable HMR for CSS in development. My expectation is that developers would prefer a setup that is less surprising out-of-the-box than one that is optimized for HMR. This PR means one extra file change to get HMR working. I believe this is an acceptable tradeoff. To make that easier, I added an explicit entry forextract_cssin thedevelopmentsection ofconfig/webpacker.yml.