What is the convention in Rails (with an asset pipeline) for internationalization inside CSS?

Question

I know that CSS should not have content, but it does this, like this beautiful box (below) extracted from the Twitter boot lot CSS documentation:

/* Echo out a label for the example */ .bs-docs-example:after { content: "Example"; } 

I don’t need an “Example”, I use something like mixin:

 .box (@legend) { /* Echo out a label for the example */ &:after { content: @legend; } } 

Then I don’t need really dynamic CSS, I can easily include mixin in the class, but instead of passing "Observation" I need to pass t 'box.observation' :

 .observation { .box("<%= t 'box.observation' =>"); } 

Rails should follow Conventions over Configuration, it’s very easy to add static CSS / LESS / SCSS, and it is already included in all pages in one mini CSS. What is the convention for internationalized CSS? For example, where should I place ads like .observation ?

Answer 1

You do not need to create a new CSS file for each locale that borders on madness. Why does your CSS care about the text content of your site?

I think it is best to use the data attribute to capture the value ...

 <div class='bs-docs-example' data-before-content='<%= t.css_example %>'> <!-- html here --> </div> 

And then in your css:

 .bs-docs-example:after { content: attr(data-before-content); } 

Perhaps you can find a way to extract this in partial (or auxiliary) so that your erb file ends like this:

 <%= docs_example do %> <!-- html here --> <% end %> 

And helper method:

 def docs_example content_tag(:div, class: "bs-docs-example", "data-before-content" => t.css_example) do yield end end 

Answer 2

I could create one CSS for each locale, as suggested in this answer , but since the CSS is the same, except for the I18n bit, I would succeed: / p>

• A folder with lots of static CSS / LESS with an embedded language, for example:

   /* en */ .observation { .box("Observation"); } 

• Lots of exactly identical dynamic CSSs like

   /* en */ html[lang=en] { .observation { .box("Observation") } } 

Instead, I decided to create a CSS and ERB view and deliver using cached pages with locale code in the URL, so there is no duplication. See code below.

config / routes.rb

 X::Application.routes.draw do get 'index.:locale.:format' => 'css#index', constraints: { locale: /[az]{2}(-[AZ]{2})?/, format: 'css' } end 

application / controllers / css_controller.rb

 class CssController < ActionController::Base caches_page :index def index @locale = params[:locale] end end 

app / views / CSS / index.css.less.erb

 @import "mixins"; .observation { .box("<%= t 'box.observation', locale: @locale %>"); } 

Application / assets / style sheets /mixins.less

 .box (@legend) { /* Echo out a label for the example */ &:after { content: @legend; } } 

This example will work as if it were a simple ERB view , but since it uses Less, I have to manually analyze ERB and LESS using rails 4:

 class CssController < ActionController::Base caches_page :index def index @locale = params[:locale] erb_source = find_template.source less_source = Tilt::ERBTemplate.new { erb_source }.render(self) css_source = Less::Parser.new(paths: Rails.application.config.less.paths).parse(less_source).to_css render text: css_source end private def find_template(_action_name = action_name) lookup_context.disable_cache { lookup_context.find_template(_action_name, lookup_context.prefixes) } end end