Flare Injecting Code Into CSS ":is" Function

[Michael S]

While using the :is psuedo-class function, Flare is injecting unwanted code during the HTML5 build process.
Here's the rule in the CSS file before building the target:

Code: Select all

:is(.Note, .Important, .LearnMore, .Warning, .Tip, .FeatureFlag) > span.Inline-Code 

↑ This rule functions without issue when injected into the browser using the DevTools console.
But, after building the target, here's what the rule becomes in the CSS file:

Code: Select all

:is(.Note\00002C\000020.Important\00002C\000020.LearnMore\00002C\000020.Warning\00002C\000020.Tip\00002C\000020.FeatureFlag) > span.Inline-Code

All commas in the :is() function turn into \00002C\000020 values, breaking the rule.

While I can build the rules individually, I'd prefer not to. Is there a way to prevent this from happening?

[NorthEast]

Yep, I've seen this bug before in Flare.
Flare processes all the CSS files during the build (like converting MadCap: tags), but I've also seen it corrupt CSS by re-ordering elements or replacing characters (like your example). This usually happens when using more "advanced" CSS, particularly psuedo elements.

You can rewrite that using basic CSS, not elegant but it'll work. This is what I did.

Code: Select all

.Note > span.Inline-Code,
.Important > span.Inline-Code,
etc.

One alternative is to put any problem CSS in its own file, and hide that from the Flare build process. You should be able to do this by (a) only linking to the CSS file from a template/master page (not linked from any topics, targets, other CSS files), or (b) host the CSS online so it's not in the project and not processed. But just note that any CSS in the file will not be available in the Flare style list.

Anyway, report it as a bug.

[AlexFox]

I reported this as a bug for the :has selector back in May, but yes as NorthEast says please report it also.