From 28cec67f74e06b700f01562e3551fcf6900a0f01 Mon Sep 17 00:00:00 2001 From: Dino Maric Date: Sat, 30 Jan 2021 12:13:16 +0100 Subject: [PATCH] FIX: Webpacker install Current webpacker install, was problematic. Main issue is that current release of webpacker uses Postcss7. Tailwind 2 expects Postcss8, and that causes a lot of issues. Tailwind team has published Tailwind 2 compatible Postcss7 [package](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build) So in order for the generator to work with Rails 6.1 defaults, this PR deferes to use `tailwindcss@npm:@tailwindcss/postcss7-compat` package. By, using this package users don't loose anything it is Tailwind 2. -------------- There is a way to make it work without using the `Postcss7` package by using latest `rails-webpacker` beta, but I think it is smarter for now not to use beta releases. When rails wepbacker publishes latest with `Postcss8` then we can change the generator. --- lib/install/tailwindcss_with_webpacker.rb | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/lib/install/tailwindcss_with_webpacker.rb b/lib/install/tailwindcss_with_webpacker.rb index 4cff3d63..23eeb9b3 100644 --- a/lib/install/tailwindcss_with_webpacker.rb +++ b/lib/install/tailwindcss_with_webpacker.rb @@ -1,14 +1,9 @@ -LATEST_WEBPACKER = "\"@rails\/webpacker\": \"rails\/webpacker#b6c2180\"," WEBPACK_STYLESHEETS_PATH = "#{Webpacker.config.source_path}/stylesheets" APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb") -# Current webpacker version relies on an older version of PostCSS -# which the latest TailwindCSS version is not compatible with -gsub_file("package.json", /\"@rails\/webpacker\".*/) { |matched_line| matched_line = LATEST_WEBPACKER } - -say "Adding latest Tailwind CSS and postCSS" -run "yarn add tailwindcss@latest postcss@latest autoprefixer@latest" -insert_into_file "#{Webpacker.config.source_entry_path}/application.js", "\nrequire(\"stylesheets/application.scss\")\n" +say "Installing Tailwind CSS" +run "yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9" +insert_into_file "#{Webpacker.config.source_entry_path}/application.js", "\nimport \"stylesheets/application\"\n" say "Adding minimal configuration for Tailwind CSS to work properly" directory Pathname.new(__dir__).join("stylesheets"), Webpacker.config.source_path.join("stylesheets")