Custom CSS in theme is being translated

Hello,

Thanks for the great plugin! However, I discovered an issue whereby the custom CSS added in the theme is being translated (into french, in my case).

This means that:

.button {
    border: 1px solid #EE2737;
    padding: 4px 7px;
    transition: background-color .2s ease;
}

Winds up as:

.button {
    bordure: 1px solide #EE2737;
    rembourrage: 4px 7px;
    transition: facilité de couleur d'arrière-plan .2s;
}

Which of course breaks the CSS. I was able to discover this only by using a CSS validation web site, as the browser doesn’t load the broken code (so you can’t see it in the f12 dev window).

I read in another post that TranslatePress ignores CSS, but it does not seem to be doing so in my case. I was trying to stop a forum from being translated via the exclude selectors (while maintaining the menu translation in the header), so I don’t know if it changed something when I was trying out various selectors. I reverted all my changes (all boxes are empty now) and it didn’t fix the issue.

Finally, I went into the back end database and sure enough I found the translation entry – it took the entire custom CSS block as one entry and translated it. I deleted the db record, but as soon as I refreshed the page in french it re-translated it and recreated the translation entry in the database.

I was able to work around the issue by copying the original into the translation (again using phpMyAdmin), but this isn’t really a solution long term since every time the CSS changes it sees it as a different and new block of text to translate and breaks again.

I’m using the Esotera theme, WP 5.7, TablePress, and WPForums. I didn’t add a link because I’ve fixed it for now.

Can anyone advise me if there is a way to stop it translating the CSS, or if this is a bug?

Thanks.