DEV Community

Caio Andrade
Caio Andrade

Posted on

Rails i18n - Show translation_missing class style in production only

The translation_missing class can be pretty useful in development to expose all the instances of missing i18n keys in your app. Rails adds a <span class="missing_translation" ></span> around every use of his helper method t that doesn't have a matching key in the YAML of the current locale.

To help expose to the team every instance of missing translations, we recently started using a simple CSS class:

.translation_missing {
  outline: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

So we could all see red outlines on every instance of missing key:
Alt Text

The issue

This would also show those outline in production! 😱

Most of the solutions I found in StackOverflow were either outdated or too complex to be trustworthy.

I decided to read how those span classes are created by Rails to try and find a fix, but after my third monkey patch to Rail's ActionView I realized that a simpler approach might be in order.

The simple fix

Create an error_styles helper that returns a <style>

# app/helpers/errors_helper.rb
module ErrorsHelper
  def error_styles
    tag.style do
      <<~CSS
        .translation_missing {
          outline: 1px solid red;
        }
      CSS
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

And add it to your application layout:

<!-- app/views/layouts/application.html.erb -->
<!---- Somewhere in your <head> ---->
<%= error_styles if Rails.env.development? %>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)