Action Text (Trix) styles doesn't load in production (Rails 6, Heroku)

Question

For some reason I'm struggling with making Action Text (Trix editor) icons bar to load in production (Heroku). I'm building a relatively simple web app using Rails 6 & TailwindCSS. Action Text is fully functional both locally and in production, but while styles are loaded as expected on my local machine, I'm unable to make it work in production.

localhost: production:

app/javascript/stylesheets/application.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'trix/dist/trix.css';
@import "components/actiontext";

/*! purgecss start ignore */
@import "components/buttons";
@import "components/forms";
/*! purgecss end ignore */

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

import "stylesheets/application"
import "controllers"

app/javascript/stylesheets/components/actiontext.scss

@import "trix/dist/trix.css";

// trix-toolbar {
//   .trix-button {
//     @apply bg-white border-0;
//   }

//   .trix-button-group {
//     border: 0;
//   }

//   .trix-button--icon-bold {
//     @apply rounded-tl rounded-bl;
//   }

//   .trix-button--icon-redo {
//     @apply rounded-tr rounded-br;
//   }
// }

// .trix-button--icon-attach,
// .trix-button-group-spacer,
// .trix-button--icon-decrease-nesting-level,
// .trix-button--icon-increase-nesting-level,
// .trix-button--icon-code {
//   display: none;
// }

.trix-button-group--file-tools { display: none !important; }

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

app/views/shared/_head.html.erb (relevant part)

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

UPDATE: I have followed Elrik's advice and excluded Trix & actiontext.scss from PurgeCSS. Now it's better, but still something is off:

What am I missing here? Thanks in advance!

Answer 1

You need to tell purgecss to ignore purging trix. Since trix classes is loaded through js on the form.rich_text_area , it doesn't find the classes in your files.

Quick solution is to add this to your application.scss in your javascript/stylesheets folder

/*! purgecss start ignore */
@import "trix/dist/trix";
/*! purgecss end ignore */

This tells the purgecss to not purge trix classes when it compiles.

You can also add trix classes to your whitelite to see if that helps

in your postcss.config.js add

whitelistPatterns: [/trix-*/],

I had the same issue as you and my first solutions solved it.

if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/helpers/**/*.rb',
        './app/components/**/*.rb',
        './app/javascript/**/*.js',
        
      ],
      whitelistPatterns: [/trix-*/],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

Answer 2

In that case the node_modules/trix/dist/trix.css doesn't load properly. I had it too and I solved it the following way:

Make sure you have the exact same setup as described in the Rails Action Text Documentation. I too used the rails installer with rails action_text:install, but that seems to implement a slightly different installation as described in the documentation (maybe differing depending on your webpacker / sprockets setup - don't know)

---

Extract from the named Rails documentation:

Both trix and @rails/actiontext should be required in your JavaScript pack.

// application.js
require("trix")
require("@rails/actiontext")

The trix stylesheet should be imported into actiontext.scss.

@import "trix/dist/trix";

Additionally, this actiontext.scss file should be imported into your stylesheet pack.

// application.scss
@import "./actiontext.scss";