Add support for disabling style-loader via inline_css: false. (#69)

* inline_css: false will cause only mini-css-extract-plugin to be used. See #68
* Fix readme and add inline_css to the config template

CHANGELOG.md

@@ -10,6 +10,7 @@ Changes since last non-beta release.
 ### Added
 - Rewrite webpack module rules as regular expressions. Allows for easy iteration during config customization. [PR 60](https://github.com/shakacode/shakapacker/pull/60) by [blnoonan](https://github.com/blnoonan)
 - Initialization check to ensure shakapacker gem and NPM package version are consistent. Opt-in behaviour enabled by setting `ensure_consistent_versioning` configuration variable. [PR 51](https://github.com/shakacode/shakapacker/pull/51) by [tomdracz](https://github.com/tomdracz).
+- Add `dev_server.inline_css: bool` config option to allow for opting out of style-loader and into mini-extract-css-plugin for CSS HMR in development. [PR 69](https://github.com/shakacode/shakapacker/pull/69) by [cheald](https://github.com/cheald)
 
 ## [v6.1.1] - February 6, 2022
 

README.md

@@ -2,7 +2,7 @@
 
 _Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). Internal naming for `shakapacker` will continue to use `webpacker` where possible for v6. ShakaCode stands behind long-term maintainence and development of this project for the Rails community._
 
-* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases. 
+* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.
 
 [![Ruby specs](https://github.com/shakacode/shakapacker/workflows/Ruby%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
 [![Jest specs](https://github.com/shakacode/shakapacker/workflows/Jest%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
@@ -670,7 +670,9 @@ development:
     port: 3035
 ```
 
-If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
+If you have `hmr` turned to true and `inline_css` is not false, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
+
+If you want to have HMR and separate link tags, set `hmr: true` and `inline_css: false`. This will cause styles to be extracted and reloaded with the `mini-css-extract-plugin` loader. Note that in this scenario, you do not need to include style-loader in your project dependencies.
 
 ### Additional paths
 

lib/install/config/webpacker.yml

@@ -32,6 +32,9 @@ development:
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
+    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via script-loader.
+    # If you want to instead deliver CSS as <link> tags via mini-extract-css-plugin, set inline_css to false.
+    inline_css: true
     # Defaults to the inverse of hmr. Uncomment to manually set this.
     # live_reload: true
     client:

lib/webpacker/dev_server.rb

@@ -55,6 +55,15 @@ def hmr?
     fetch(:hmr)
   end
 
+  def inline_css?
+    case fetch(:inline_css)
+    when false, "false"
+      false
+    else
+      true
+    end
+  end
+
   def env_prefix
     config.dev_server.fetch(:env_prefix, DEFAULT_ENV_PREFIX)
   end

lib/webpacker/instance.rb

@@ -36,6 +36,6 @@ def commands
   end
 
   def inlining_css?
-    dev_server.hmr? && dev_server.running?
+    dev_server.inline_css? && dev_server.hmr? && dev_server.running?
   end
 end

package/inliningCss.js

@@ -2,6 +2,6 @@ const { runningWebpackDevServer } = require('./env')
 const devServer = require('./dev_server')
 
 // This logic is tied to lib/webpacker/instance.rb
-const inliningCss = runningWebpackDevServer && devServer.hmr
+const inliningCss = runningWebpackDevServer && devServer.hmr && devServer.inlineCss !== false
 
 module.exports = inliningCss

test/webpacker_test.rb

@@ -23,11 +23,26 @@ def dev_server.pretty?; false; end
     def dev_server.https?; true; end
     def dev_server.hmr?; true; end
     def dev_server.running?; true; end
+    def dev_server.inline_css?; true; end
     Webpacker.instance.stub(:dev_server, dev_server) do
       assert Webpacker.inlining_css?
     end
   end
 
+  def test_explicit_no_inline_css_with_hmr
+    dev_server = Webpacker::DevServer.new({})
+    def dev_server.host; "localhost"; end
+    def dev_server.port; "3035"; end
+    def dev_server.pretty?; false; end
+    def dev_server.https?; true; end
+    def dev_server.hmr?; true; end
+    def dev_server.running?; true; end
+    def dev_server.inline_css?; false; end
+    Webpacker.instance.stub(:dev_server, dev_server) do
+      assert !Webpacker.inlining_css?
+    end
+  end
+
   def test_app_autoload_paths_cleanup
     assert_empty $test_app_autoload_paths_in_initializer
   end