I managed to successfully setup configurable visual fragment with an inline variable.
To simplify things let's say that the current code in my fragment looks like this:
{{#inline "fragment_design" name="fragment design"}}fragment-regular{{/inline}}
<div class="{{{fragment_design}}}"></div>
I use fragment_design variable to set class value for the whole e-mail section and change its design via css. At first it looks like everything works great. I'm able to edit this class name in visual editor of e-mail template. By using triple brackets I even get live preview without the need to click "simulate content" all the time. There's only one problem. When I send proof (or even inspect simulated preview with dev tools) the variable in the code is surrounded by line breaks:
<div class="
fragment-regular
"></div>
For most of the time it's not a problem as almost all e-mail clients are able to ignore this and render styles as nothing happened. Unfortunately desktop versions of Outlook are not that smart and don't recognize class value in such a format. If I break inheritance of my fragment the problem disappears but on many occasions it's not a viable long term solution. Is this a bug? Is there any walkaround available for this problem? I already tried switching to double brackets - live preview is gone, I still have to include the variable with triple brackets somewhere in the code or input field to edit the variable won't be available, and the problem persists anyway.