Make theme translations accessible from CSS

Contribute Feature
4

A plugin to enable translations in SCSS… anything is possible, but it would be very messy. For example, you would somehow need to compile different CSS assets for each locale. I would strongly recommend not trying to do this.

One possible idea… but not a recommendation (i.e. you’re on your own if you attempt this :stuck_out_tongue: )

I understand this is a bad idea

You could do something like this in the theme javascript

document.documentElement.style.setProperty('--my-translation-name', `"${ I18n.t(themePrefix("my-translation-name")) }"`);

And then in the css

 &:before {
    content: var(--my-translation-name);
  }

This could break in many ways - if you put a quote or special characters in the translation it will break. If you try and use it in IE11, it will break.

5 Likes