Prefixer plugin conflicts with monolytic enhancer

[houd1ni]

Hi, @robinweser ! I'm creator of fela-vue integration suite.

Regarding fela-monolithic and fela-plugin-prefixer.

I have briefly searched for the issue, but no success btw.

I'm working on unit testing of my current project, and it looks that it's much better to use monolithic enhancer to locate nodes.
Hence I haven't touch my to-go plugin set, the prefixer plugin is still enabled.

Here is generateMonolithicClassName function that lookups for className prop to set it kinda custom, that I want to use. But the prefixer plugin prefixes the prop, hence the monolithic cannot pick it up. Only disabling of the prefixer resolves the issue. Maybe add some option to leave className prop as-is for prefixer or not touch the prop at all ?

This screenshot of the disaster:

[robinweser]

Heyhey! It's been a while, nice to see you're still around! Regarding the issue: I'm wondering if you should really use the monolithic renderer only to get unit testing in. Can't you use data-test-id instead of target elements? Or pass a custom, static className instead?
I never used the monolithic enhancer myself, so I haven't really put any effort into it either. We could certainly adjust the prefixer code as well, but since it's using stylis under the hood these days, we don't have the same granular ownership of the actual code.

[houd1ni]

It's been a while, nice to see you're still around!

yep! I've polished it to use with Vue so much that it's really the best pick for dev experience and one of the best for everything else 🥳

Can't you use data-test-id instead of target elements?

If I got it right, it would be a bit of bloat:

<div :class="f('flex button tree-node')" data-testid="treeNode">
instead of
<div :class="f('flex button tree-node')">

Now it inherits the className from class string:

f('.button .tree-node') = // coarse equivalent.
  renderer.renderRule(
    combineRules(...rulesOfTreeAndNode), // with className='flex-button-tree-node' compiled under the hood.
    props
)

Relatively easy to test querying [class*=tree-node] as long as classes are stable. I'm still thinking what's better there though. Now I enable the monolithic only for testrunner (Playwright) with fine utilities.
The options roughly:

• With data-testids:
  • Write those ids.
  • Maintain them if the structure changes in both components and test specs.
• Without data-testids:
  • Maintain only class queries in test specs.

adjust the prefixer code as well

Btw, stylis' version is 4.0.13 in the prefixer, and the actual stylis version has gone much further by minor version. Maybe fix only major one there? Also it prefixes too much seemingly, but I just took a look at its code, - looks like let it be as is, huh? Any configuration could weight more than it is now 😄 Regarding the changes. I could wrap stylis calls to preserve className there in PR. What do you think? Would it break something in React ecosystem maybe as it uses className natively?