Support both Webpacker and Shakapacker

We plan to eventually drop support for Webpacker. But until the Rails 6 migration is finished, we aim to support both. Decouple from experimental Rails version environment variable and detect Shakapacker global instead. Enhance install generator to create required PostCSS config. which is no longer generated by Shalapacker's install generator. REDMINE-19438
codevise · Oct 16, 2023 · b0f3dae · b0f3dae
1 parent 09d996e
commit b0f3dae
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 27 deletions.
diff --git a/Gemfile b/Gemfile
@@ -28,13 +28,13 @@ if Pageflow::RailsVersion.experimental?
   # use shakapacker need to add it to their Gemfile themselves. Requiring
   # shakapacker in an engine file (like we normally do) would force all
   # host application to install shakapacker.
-  gem 'shakapacker'
+  gem 'shakapacker', '~> 7.0'
 else
   # Make webpacker available in specs. Host applications that want to
   # use webpacker need to add it to their Gemfile themselves. Requiring
   # webpacker in an engine file (like we normally do) would force all
   # host application to install webpacker.
-  gem 'webpacker'
+  gem 'webpacker', '~> 4.2'
 end
 
 # Make tests fail on JS errors

diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
@@ -2,7 +2,7 @@ module PageflowScrolled
   # @api private
   module PacksHelper
     def scrolled_frontend_javascript_packs_tag(entry, options)
-      if Pageflow::RailsVersion.experimental?
+      if defined?(Shakapacker)
         javascript_pack_tag(
           *scrolled_frontend_packs(entry, **options),
           defer: false
@@ -15,7 +15,7 @@ def scrolled_frontend_javascript_packs_tag(entry, options)
     end
 
     def scrolled_frontend_stylesheet_packs_tag(entry, options)
-      if Pageflow::RailsVersion.experimental?
+      if defined?(Shakapacker)
         stylesheet_pack_tag(
           *scrolled_frontend_packs(entry, **options),
           media: 'all'
@@ -29,7 +29,7 @@ def scrolled_frontend_stylesheet_packs_tag(entry, options)
     end
 
     def scrolled_editor_javascript_packs_tag(entry)
-      if Pageflow::RailsVersion.experimental?
+      if defined?(Shakapacker)
         javascript_pack_tag(
           *scrolled_editor_packs(entry),
           defer: false

diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb
@@ -6,7 +6,7 @@ def scrolled_theme_asset_path(theme,
                                   theme_file_role: nil,
                                   theme_file_style: :resized,
                                   relative_url: false)
-      prefix = Pageflow::RailsVersion.experimental? ? 'static' : 'media'
+      prefix = defined?(Shakapacker) ? 'static' : 'media'
 
       path =
         theme.files.dig(theme_file_role, theme_file_style) ||

diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb b/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb
@@ -1,6 +1,6 @@
 <%= stylesheet_link_tag 'pageflow_paged/editor', media: 'all' %>
 
-<% if Pageflow::RailsVersion.experimental?  %>
+<% if defined?(Shakapacker)  %>
   <%= stylesheet_pack_tag 'pageflow-scrolled-frontend' %>
 <% else %>
   <%= stylesheet_packs_with_chunks_tag 'pageflow-scrolled-frontend' %>

diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb
@@ -30,18 +30,18 @@ def theme_plugin
       end
 
       def install_packages
-        if Pageflow::RailsVersion.experimental?
+        if defined?(Shakapacker)
           run 'yarn add css-loader style-loader' \
               ' mini-css-extract-plugin css-minimizer-webpack-plugin' \
-              ' postcss postcss-loader postcss-url' \
+              ' postcss postcss-preset-env postcss-loader postcss-import postcss-url postcss-flexbugs-fixes' \
               ' @fontsource/source-sans-pro'
         else
           run 'yarn add postcss-url@^8.0.0 @fontsource/source-sans-pro'
         end
       end
 
       def webpack_config
-        return unless Pageflow::RailsVersion.experimental?
+        return unless defined?(Shakapacker)
 
         gsub_file(
           'config/webpack/webpack.config.js',
@@ -54,7 +54,11 @@ def webpack_config
           'const webpackConfig = generateWebpackConfig()',
           <<~JS
             const webpackConfig = merge(
-              generateWebpackConfig(),
+              generateWebpackConfig({
+                resolve: {
+                  extensions: ['.css']
+                }
+              }),
               require('pageflow/config/webpack5'),
               require('pageflow-scrolled/config/webpack')
             )
@@ -88,7 +92,7 @@ def webpack_config
       end
 
       def webpack_environment
-        return if Pageflow::RailsVersion.experimental?
+        return if defined?(Shakapacker)
 
         inject_into_file('config/webpack/environment.js',
                          before: "module.exports = environment\n") do
@@ -109,7 +113,7 @@ def webpack_environment
       end
 
       def webpacker_yml
-        return if Pageflow::RailsVersion.experimental?
+        return if defined?(Shakapacker)
 
         gsub_file('config/webpacker.yml',
                   'extract_css: false',
@@ -122,12 +126,29 @@ def webpacker_yml
       end
 
       def postcss_config
-        return if Pageflow::RailsVersion.experimental?
-
-        inject_into_file('postcss.config.js',
-                         after: "require('postcss-import'),\n") do
-          "    // Make relative urls in fontsource packages work\n" \
-          "    require('postcss-url')({url: 'rebase'}),\n"
+        if defined?(Shakapacker)
+          create_file 'postcss.config.js', <<~JS
+            module.exports = {
+              plugins: [
+                require('postcss-import'),
+                // Make relative urls in fontsource packages work
+                require('postcss-url')({url: 'rebase'}),
+                require('postcss-flexbugs-fixes'),
+                require('postcss-preset-env')({
+                  autoprefixer: {
+                    flexbox: 'no-2009'
+                  },
+                  stage: 3
+                })
+              ]
+            }
+          JS
+        else
+          inject_into_file('postcss.config.js',
+                           after: "require('postcss-import'),\n") do
+            "    // Make relative urls in fontsource packages work\n" \
+            "    require('postcss-url')({url: 'rebase'}),\n"
+          end
         end
       end
 

diff --git a/entry_types/scrolled/spec/support/config/webpacker.rb b/entry_types/scrolled/spec/support/config/webpacker.rb
@@ -1,4 +1,4 @@
-unless Pageflow::RailsVersion.experimental?
+unless defined?(Shakapacker)
   # Make sure packs are recompiled for Capybara specs when Rollup
   # outputs change
 

diff --git a/pageflow.gemspec b/pageflow.gemspec
@@ -128,13 +128,6 @@ Gem::Specification.new do |s|
   # which we currently depend on in pageflow/engine.rb
   s.add_dependency 'sprockets', '< 4'
 
-  # Used for Webpack build in host application
-  if Pageflow::RailsVersion.experimental?
-    s.add_dependency 'shakapacker', '~> 7.0'
-  else
-    s.add_dependency 'webpacker', '~> 4.2'
-  end
-
   # Using translations from rails locales in javascript code.
   s.add_dependency 'i18n-js', '~> 2.1'
 
@@ -164,6 +157,13 @@ Gem::Specification.new do |s|
   # string encryptor/decryptor
   s.add_dependency 'symmetric-encryption', '~> 4.3.1'
 
+  # Used for Webpack build in host application
+  if Pageflow::RailsVersion.experimental?
+    s.add_development_dependency 'shakapacker', '~> 7.0'
+  else
+    s.add_development_dependency 'webpacker', '~> 4.2'
+  end
+
   # Used by the dummy rails application
   s.add_development_dependency 'mysql2', '~> 0.5.2'