udpates assets pipeline for importmap (#23)

.gitignore

@@ -34,6 +34,7 @@
 
 /public/packs
 /public/packs-test
+/public/.DS_Store
 /node_modules
 /yarn-error.log
 yarn-debug.log*

Gemfile

@@ -77,3 +77,5 @@ gem "mini_magick"
 gem "importmap-rails", "~> 2.0"
 
 gem "standardrb", "~> 1.0"
+
+gem "cssbundling-rails", "~> 1.4"

Gemfile.lock

@@ -103,6 +103,8 @@ GEM
     concurrent-ruby (1.2.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.1)
+      railties (>= 6.0.0)
     database_cleaner-active_record (2.1.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
@@ -448,6 +450,7 @@ DEPENDENCIES
   bootsnap (>= 1.4.4)
   byebug
   capybara (>= 3.26)
+  cssbundling-rails (~> 1.4)
   database_cleaner-active_record
   devise (~> 4.9)
   dockerfile-rails (~> 1.5)

Procfile.dev

@@ -1,2 +1,3 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0
 css: bin/rails tailwindcss:watch
+css: yarn build:css --watch

app/assets/config/manifest.js

@@ -1,5 +1,4 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
-//= link_tree ../builds
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds

app/assets/stylesheets/application.css

@@ -2,14 +2,14 @@
  * This is a manifest file that'll be compiled into application.css, which will include all the files
  * listed below.
  *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
  * vendor/assets/stylesheets directory can be referenced here using a relative path.
  *
  * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
  *= require_tree .
  *= require_self
- */
+ */

app/assets/stylesheets/application.tailwind.css

@@ -1,16 +1,5 @@
-@import 'actiontext.css';
-@import 'form.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/
+@import 'actiontext.css';
+@import 'form.css';

app/views/layouts/application.html.erb

@@ -6,10 +6,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
 

bin/dev

@@ -1,16 +1,11 @@
 #!/usr/bin/env sh
 
-if ! gem list foreman -i --silent; then
+if gem list --no-installed --exact --silent foreman; then
   echo "Installing foreman..."
   gem install foreman
 fi
 
 # Default to port 3000 if not specified
 export PORT="${PORT:-3000}"
 
-# Let the debug gem allow remote connections,
-# but avoid loading until `debugger` is called
-export RUBY_DEBUG_OPEN="true"
-export RUBY_DEBUG_LAZY="true"
-
-exec foreman start -f Procfile.dev "$@"
+exec foreman start -f Procfile.dev --env /dev/null "$@"

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "app",
+  "private": "true",
+  "dependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.11"
+  },
+  "scripts": {
+    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
+  }
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: [
+    './app/views/**/*.html.erb',
+    './app/helpers/**/*.rb',
+    './app/assets/stylesheets/**/*.css',
+    './app/javascript/**/*.js'
+  ]
+}