Custom transformer rules are not applied

[elenaskrotova]

Steps required to reproduce the problem

1. We have created this custom transformer rule: { "rules ": [ { "class": "PullquoteRule", "selector": ".stk-theme_3583__quote_big" } ] }

Expected Result

We're expecting to see this text converted into PullQuote rule and see something like this

<p>
    They are based in Norway, where <a href="https://www.w3.org/TR/WCAG20/">WCAG accessibility</a> is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast">WCAG contrast compliant</a>. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility.
</p>
<aside>
     A wonderful serenity has taken possession of my entire soul
</aside>
<p>
    They used an elegant approach and solved the issue using the <a href="https://www.npmjs.com/package/color">"color" npm package</a>, adding conditional borders and automatic secondary color generation while they were at it.
</p>
<p>
    But that's a JavaScript solution. Here's my pure CSS alternative.
</p>

Actual Result

But in Facebook Instant Articles module at the bottom of Edit Post screen we see error No rules defined for <div class="stk-container stk-theme_3583__spec stk-theme_3583__quote_big"> in the context of InstantArticle

Source markup

<p class="stk-reset">
    They are based in Norway, where <a class="stk-reset" href="https://www.w3.org/TR/WCAG20/">WCAG accessibility</a> is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it <a class="stk-reset" href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast">WCAG contrast compliant</a>. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility.
</p>
<div class="stk-container stk-theme_3583__spec stk-theme_3583__quote_big" data-ce-tag="container">
    But that's a JavaScript solution. Here's my pure CSS alternative.
</div>
<p class="stk-reset">
    They used an elegant approach and solved the issue using the <a class="stk-reset" href="https://www.npmjs.com/package/color">&#8220;color&#8221; npm package</a>, adding conditional borders and automatic secondary color generation while they were at it.
</p>
<p class="stk-reset">
    But that's a JavaScript solution. Here's my pure CSS alternative.</p>

Result markup

<p>
    They are based in Norway, where <a href="https://www.w3.org/TR/WCAG20/">WCAG accessibility</a> is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast">WCAG contrast compliant</a>. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility.
</p>
      <p>
    They used an elegant approach and solved the issue using the <a href="https://www.npmjs.com/package/color">"color" npm package</a>, adding conditional borders and automatic secondary color generation while they were at it.
</p>
      <p>
    But that's a JavaScript solution. Here's my pure CSS alternative.</p>

Version Info

• Plugin version: Version 4.1.1
• WordPress version: WordPress 4.9.8
• PHP version: 7.0.28-0ubuntu0.16.04.1

[elenaskrotova]

@yeah-sir Could you please advise?

[github-actions[bot]]

This issue has been marked stale because it has been open for 30 days with no activity. If there is no activity within 7 days, it will be closed. This is an automation to keep issues manageable and actionable and is not a comment on the quality of this issue nor on the work done so far. Closed issues are still valuable to the project and are available to be searched.