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

Author: tf

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

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

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) ||

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' %>

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
 

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
 

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'