Ignore specific class

[klimashkin]

Hi!

I'm using css modules, and have cases when I use :global() selector to keep classname inside it untouched by the css modules naming algorithm. It's useful when local modules want to style some third party libraries. In this example, tippy.js:

.tooltip[data-placement^='top'] > :global(.tippy-arrow) {
  bottom: var(--arrow-offset);
  border-top-color: var(--tooltip-bg-color);
}

which will be converted by css modules let's say into this

.MyComponent_tooltip[data-placement^='top'] > .tippy-arrow {
  bottom: var(--arrow-offset);
  border-top-color: var(--tooltip-bg-color);
}

So .tippy-arrow classname stays untouched. And element with that classname is produced by the third party tippy.js library, that's why I want to keep it untouched, I don't want to mangle it.

But then rcs.process.auto does rename .tippy-arrow classname anyway, so selector stops matching the element <div class="tippy-arrow">

.a[data-placement^='top'] > .b{
  bottom: var(--arrow-offset);
  border-top-color: var(--tooltip-bg-color);
}

Is there a way to ignore specific classnames?

[JPeer264]

Sure thing, you can ignore specific class names. I will add it to the README. That is how you do it with rename-css-selectors@3.*:

Install the dependency:

$ npm install rcs-core@2.6.3 -D

Exclude before you call rcs.process.auto:

import rcsCore from 'rcs-core';
// or
const rcsCore = require('rcs-core');

rcsCore.selectorLibrary.setExclude('tippy-arrow');

Feel free to reopen if something is unclear