Switch from Webpacker to cssbundling-rails, upgrade Tailwind

.gitignore

@@ -42,3 +42,6 @@ yarn-debug.log*
 
 # Ignore redis dumps from sidekiq
 dump.rdb
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -8,7 +8,9 @@ gem 'puma', '~> 4.1'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 4.0'
+#gem 'webpacker', '~> 4.0'
+# Allows custom JS build tasks to integrate with the asset pipeline
+gem 'cssbundling-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

Gemfile.lock

@@ -79,6 +79,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.0.0)
+      railties (>= 6.0.0)
     database_cleaner (2.0.1)
       database_cleaner-active_record (~> 2.0.0)
     database_cleaner-active_record (2.0.1)
@@ -159,11 +161,15 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
+    mini_portile2 (2.6.1)
     minitest (5.14.4)
     msgpack (1.4.2)
     multipart-post (2.1.1)
     net-ldap (0.17.0)
     nio4r (2.5.8)
+    nokogiri (1.12.5)
+      mini_portile2 (~> 2.6.1)
+      racc (~> 1.4)
     nokogiri (1.12.5-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
@@ -174,8 +180,6 @@ GEM
     raabro (1.4.0)
     racc (1.6.0)
     rack (2.2.3)
-    rack-proxy (0.7.0)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.0.4.1)
@@ -292,10 +296,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (4.3.0)
-      activesupport (>= 4.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 4.2)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -311,6 +311,7 @@ DEPENDENCIES
   bootsnap (>= 1.4.2)
   byebug
   capybara
+  cssbundling-rails
   database_cleaner
   devise
   devise_ldap_authenticatable
@@ -339,7 +340,6 @@ DEPENDENCIES
   warden
   web-console (>= 3.3.0)
   webmock
-  webpacker (~> 4.0)
 
 BUNDLED WITH
-   2.2.2
+   2.3.6

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: yarn build:css --watch

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds
+//= link legacy.css

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "components/base";
+@import "components/buttons";
+@import "components/forms";
+@import "components/links";

app/assets/stylesheets/components/base.css

@@ -1,6 +1,6 @@
 @layer base {
   body {
-    line-height: 1;
+    @apply leading-none
   }
 
   h1, h2, h3 {

app/assets/stylesheets/components/forms.css

@@ -0,0 +1,15 @@
+@layer components {
+  input[type=text], input[type=email], input[type=password],
+  input[type=number], select {
+    @apply mt-1 rounded-md bg-gray-100 focus:bg-white
+           border-transparent focus:border-gray-500 focus:ring-0;
+  }
+
+  .field_with_errors {
+    @apply inline-block;
+  }
+
+  .error-msg {
+    @apply text-red-700;
+  }
+}

app/javascript/packs/application.js

@@ -7,7 +7,7 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 require("channels")
 
-import "stylesheets/application"
+// import "stylesheets/application"
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.

app/javascript/stylesheets/application.scss

@@ -1,9 +0,0 @@
-// version 6
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "base";
-@import "buttons";
-@import "forms";
-@import "links";

app/javascript/stylesheets/forms.scss

@@ -1,17 +0,0 @@
-@layer components {
-  form {
-    input[type=text], input[type=email], input[type=password],
-    input[type=number], select {
-      @apply mt-1 rounded-md bg-gray-100 focus:bg-white
-             border-transparent focus:border-gray-500 focus:ring-0;
-    }
-
-    .field_with_errors {
-      @apply inline-block;
-    }
-
-    .error-msg {
-      @apply text-red-700;
-    }
-  }
-}

app/javascript/stylesheets/tailwind.config.js

@@ -1,26 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-  purge: {
-    layers: ['base', 'components', 'utilities'],
-    content: [
-      "./app/**/*.html.erb",
-      "./app/helpers/**/*.rb",
-      "./app/javascript/**/*.js"
-    ]
-  },
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Open Sans', 'sans-serif']
-      }
-    },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
-    require('@tailwindcss/forms')
-  ],
-}

app/views/layouts/admin.html.erb

@@ -6,9 +6,8 @@
     <%= csp_meta_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'application' %>
   </head>
   <body id="admin-panel">
     <div id="wrapper">

app/views/layouts/application.html.erb

@@ -6,9 +6,8 @@
     <%= csp_meta_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'application' %>
   </head>
   <body>
     <div id="wrapper">

app/views/layouts/signup.html.erb

@@ -6,9 +6,8 @@
     <%= csp_meta_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'legacy', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'application' %>
   </head>
   <body class="layout-signup">
     <div id="wrapper">

bin/dev

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+if ! command -v foreman &> /dev/null
+then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+foreman start -f Procfile.dev

package.json

@@ -5,14 +5,21 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",
-    "@tailwindcss/forms": "^0.2.1",
-    "autoprefixer": "^9",
-    "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "@tailwindcss/forms": "^0.4.0",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.6",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.0.2",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.3.1",
+    "tailwindcss": "^3.0.22",
     "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",
   "devDependencies": {
     "webpack-dev-server": "^3.11.0"
+  },
+  "scripts": {
+    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
   }
 }

postcss.config.js

@@ -1,13 +1,15 @@
 module.exports = {
   plugins: [
-    require("tailwindcss")("./app/javascript/stylesheets/tailwind.config.js"),
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
+    require("autoprefixer"),
+    require("postcss-import"),
+    require("tailwindcss"),
+    require("postcss-nested"),
+    require("postcss-flexbugs-fixes"),
+    require("postcss-preset-env")({
       autoprefixer: {
-        flexbox: 'no-2009'
+        flexbox: "no-2009",
       },
-      stage: 3
-    })
-  ]
-}
+      stage: 3,
+    }),
+  ],
+};

tailwind.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  content: [
+    './app/views/**/*.html.erb',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Open Sans', 'sans-serif']
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms')
+  ],
+}