From 3abadab91de8d95ee80ad1417ca58c899d89f534 Mon Sep 17 00:00:00 2001
From: Ignacio Acosta <iaacosta@uc.cl>
Date: Sat, 15 May 2021 15:40:26 -0400
Subject: [PATCH] feat(frontend): add tailwindcss 2 compatibility build for
 webpack 4

---
 CHANGELOG.md                       |  1 +
 lib/potassium/recipes/front_end.rb |  7 ++++++-
 lib/potassium/version.rb           |  1 +
 spec/features/front_end_spec.rb    | 14 ++++++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebb6b48f..971365e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ Features:
 
 Fixes:
   - Explicitly install project specified node version in CircleCI build [#352](https://github.com/platanus/potassium/pull/352)
+  - Fixes `tailwindCSS@^2` incompatibility with `postcss@^7` [#356](https://github.com/platanus/potassium/pull/356)
   - Update marcel gem (shrine's mime type analyzer) to avoid mimemagic dependency [#357](https://github.com/platanus/potassium/pull/357)
 
 ## 6.2.0
diff --git a/lib/potassium/recipes/front_end.rb b/lib/potassium/recipes/front_end.rb
index 70c2553d..6d34768d 100644
--- a/lib/potassium/recipes/front_end.rb
+++ b/lib/potassium/recipes/front_end.rb
@@ -69,7 +69,8 @@ def add_responsive_meta_tag
   end
 
   def setup_tailwind
-    run 'bin/yarn add tailwindcss'
+    run "bin/yarn add tailwindcss@#{Potassium::TAILWINDCSS}"
+    specify_autoprefixer_postcss_compatibility_versions
     setup_client_css
     remove_server_css_requires
     setup_tailwind_requirements
@@ -147,6 +148,10 @@ def apollo_loading
     JS
   end
 
+  def specify_autoprefixer_postcss_compatibility_versions
+    run 'bin/yarn -D add postcss@^7 autoprefixer@^9'
+  end
+
   def setup_client_css
     application_css = 'app/javascript/css/application.css'
     create_file application_css, "", force: true
diff --git a/lib/potassium/version.rb b/lib/potassium/version.rb
index 969d4743..59359ee9 100644
--- a/lib/potassium/version.rb
+++ b/lib/potassium/version.rb
@@ -7,4 +7,5 @@ module Potassium
   POSTGRES_VERSION = "11.3"
   MYSQL_VERSION = "5.7"
   NODE_VERSION = "12"
+  TAILWINDCSS = "npm:@tailwindcss/postcss7-compat"
 end
diff --git a/spec/features/front_end_spec.rb b/spec/features/front_end_spec.rb
index fb51bd62..21834f0e 100644
--- a/spec/features/front_end_spec.rb
+++ b/spec/features/front_end_spec.rb
@@ -22,6 +22,12 @@
     expect(File).not_to exist(application_css_path)
   end
 
+  def expect_to_have_tailwind_compatibility_build
+    expect(node_modules_file).to include("\"tailwindcss\": \"npm:@tailwindcss/postcss7-compat\"")
+    expect(node_modules_file).to include("\"autoprefixer\": \"^9\"")
+    expect(node_modules_file).to include("\"postcss\": \"^7\"")
+  end
+
   context "with vue" do
     before(:all) do
       remove_project_directory
@@ -55,6 +61,10 @@
       expect(tailwind_config_file).to include('module.exports')
     end
 
+    it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do
+      expect_to_have_tailwind_compatibility_build
+    end
+
     context "with graphql" do
       before(:all) do
         remove_project_directory
@@ -84,5 +94,9 @@
     it "creates application_js_file for tailwind without vue" do
       expect(application_js_file).to include("import '../css/application.css';")
     end
+
+    it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do
+      expect_to_have_tailwind_compatibility_build
+    end
   end
 end