search

MadLittleMods / postcss-increase-specificity

Why? Dealing with CSS you can't remove(mainly from a 3rd party). Increases specificity of selectors.
MIT License
50 stars 16 forks source link

Set increased specificity on 'same level' as well #21

Closed xaviarnl closed 1 year ago

xaviarnl commented 4 years ago

Currently, when I increase the specificity (with a stackableRoot of .vue-clm), it turns a rule like

Input:

.someclass {
  ...
}

Output:

.vue-clm .someclass {
  ...
}

What I would like to do, is to also set this specificity on the same level as the stackableRoot, so that I end up with the new rule with no space between the root and the class.

Expected:

.vue-clm.someclass {
 ...
}

Use case

I need this as we have an app that uses both BS3 and BS4. The newer parts use BS4, so for those we use the prefix, and then include a postcss-ed, prefixed BS4 css file. And in all new parts, we set vue-clm on the 'top' level element to make sure the new components use BS4. Which works fine.

There are, however, some elements that temporarily get added to page outside of the new components' context (mostly tooltips, which are attached to the page on the body-level by Bootstrap-vue). For those elements, I have an observer that adds '.vue-clm' top the top node of that element (complicated, I know). Which mostly works fine.

However, if the top element itself contains BS4 classes, they will not be applied, because of the space in the specificity rule. So that is why I want to add the rules without the spaces as well. Preferably at the same time when I am adding the 'normal' prefix (with a space in front of it).

MadLittleMods commented 1 year ago

It sounds like you need both the stackableRoot to be a descendant selector and at the same level. I'm not sure how we would differentiate the need between rules in the same file.

In general, this doesn't seem like the right plugin to accomplish this either. Maybe you want some plugin that just prefixes everything with a class (not sure if that exists).