Fix Module Order Warnings for Projects using Mini-Css-Extract-Plugin (#…

…192)

* Set `ignoreOrder` to true for `MiniCssExtractPlugin`
* Use Webpacker flag to mute mini-css-extract-plugin warnings.

CHANGELOG.md

@@ -7,6 +7,9 @@
 Changes since last non-beta release.
 
 _Please add entries here for your pull requests that are not yet released._
+### Improved
+- The `mini-css-extract-plugin` may cause various warnings indicating CSS order conflicts when using a [File-System-based automated bundle generation feature](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation/).
+CSS order warnings can be disabled in projects where CSS ordering has been mitigated by consistent use of scoping or naming conventions. Added `css_extract_ignore_order_warnings` flag to webpacker configuration to disable the order warnings by [pulkitkkr](https://github.com/shakacode/shakapacker/pull/185) in [PR 192](https://github.com/shakacode/shakapacker/pull/192).
 
 ## [v6.5.2] - September 8, 2022
 

lib/install/config/webpacker.yml

@@ -11,6 +11,12 @@ default: &default
  # You cannot set this option to true if you set source_entry_path to '/'
  nested_entries: false
 
+ # While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
+ # conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
+ # consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
+ # css_extract_ignore_order_warnings to true
+ css_extract_ignore_order_warnings: false
+
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/webpacker

package/environments/__tests__/base.js

@@ -24,6 +24,17 @@ describe('Base config', () => {
  )
  })
 
+ test('should return false for css_extract_ignore_order_warnings when using default config', () => {
+ expect(config.css_extract_ignore_order_warnings).toEqual(false)
+ })
+
+ test('should return true for css_extract_ignore_order_warnings when configured', () => {
+ process.env.WEBPACKER_CONFIG = 'config/webpacker_css_extract_ignore_order_warnings.yml'
+ const config = require("../../config");
+
+ expect(config.css_extract_ignore_order_warnings).toEqual(true)
+ })
+
  test('should return only 2 entry points with config.nested_entries == false', () => {
  expect(config.nested_entries).toEqual(false)
 

package/environments/base.js

@@ -73,7 +73,11 @@ const getPlugins = () => {
  plugins.push(
  new MiniCssExtractPlugin({
  filename: `css/[name]${hash}.css`,
- chunkFilename: `css/[id]${hash}.css`
+ chunkFilename: `css/[id]${hash}.css`.split(),
+ // For projects where css ordering has been mitigated through consistent use of scoping or naming conventions,
+ // the css order warnings can be disabled by setting the ignoreOrder flag.
+ // Read: https://stackoverflow.com/questions/51971857/mini-css-extract-plugin-warning-in-chunk-chunkname-mini-css-extract-plugin-con
+ ignoreOrder: config.css_extract_ignore_order_warnings
  })
  )
  }

test/test_app/config/webpacker_css_extract_ignore_order_warnings.yml

@@ -0,0 +1,84 @@
+# Note: You must restart bin/webpacker-dev-server for changes to take effect
+
+default: &default
+ source_path: app/packs
+ source_entry_path: entrypoints
+ nested_entries: true
+ public_root_path: public
+ public_output_path: packs
+ cache_path: tmp/webpacker
+ webpack_compile_output: false
+ webpack_loader: babel
+ css_extract_ignore_order_warnings: true
+
+ # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+ # manifest_path: public/packs/manifest.json
+
+ # Additional paths webpack should look up modules
+ # ['app/assets', 'engine/foo/app/assets']
+ additional_paths:
+ - app/assets
+ - /etc/yarn
+ - some.config.js
+ - app/elm
+
+ # Reload manifest.json on all requests so we reload latest compiled packs
+ cache_manifest: false
+
+ static_assets_extensions:
+ - .jpg
+ - .jpeg
+ - .png
+ - .gif
+ - .tiff
+ - .ico
+ - .svg
+
+ extensions:
+ - .mjs
+ - .js
+
+development:
+ <<: *default
+ compile: true
+ ensure_consistent_versioning: true
+
+ # Reference: https://webpack.js.org/configuration/dev-server/
+ dev_server:
+ https: false
+ host: localhost
+ port: 3035
+ public: localhost:3035
+ hmr: false
+ overlay: true
+ disable_host_check: true
+ use_local_ip: false
+ pretty: false
+
+test:
+ <<: *default
+ compile: true
+
+ # Compile test packs to a separate directory
+ public_output_path: packs-test
+
+production:
+ <<: *default
+
+ # Production depends on precompilation of packs prior to booting for performance.
+ compile: false
+
+ # Cache manifest.json for performance
+ cache_manifest: true
+
+staging:
+ <<: *default
+
+ # Production depends on precompilation of packs prior to booting for performance.
+ compile: false
+
+ # Cache manifest.json for performance
+ cache_manifest: true
+
+ # Compile staging packs to a separate directory
+ public_output_path: packs-staging