How to implement ::v-deep on Sass suffixes (&__) selector in Vue2? - sass

Question

I am working on scoping all the styles of our Vue2 frontend codebase to prepare for the transition into Vue3. I have read on Vue docs that the ::v-deep directive enables the child component to receive the scoped styles from their parent components.
We use Sass. Some child component classes don't get the style applied even though I have implemented ::v-deep on their parent component.
Here's the code of the style section:
<style lang="scss" scoped>
.support-category::v-deep {
.icon-back {
font-size: 14px;
color: color(text4);
}
.border-bottom {
border-bottom: 1px solid color(bg3);
}
&__subject {
font-size: 18px;
font-weight: 700;
}
&__accordion {
font-size: 15px;
ul,
ol {
margin-bottom: 0.75rem;
margin-left: 14px;
margin-top: 3px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
}
}
</style>
Here's the portion of code of the template section:
<div v-if="hasSupportCategories">
<div
v-for="category in mainSupportCategory.support_categories"
:key="category.id"
class="mb-8"
>
<v-row>
<v-col :size="12">
<v-accordion
class="support-category__accordion"
:initial-active="mainSupportCategory.support_categories.length === 1"
>
<template v-slot:title>
<div class="support-category__subject pb-3 border-bottom">
{{ category.title }}
</div>
</template>
<div
v-for="item in category.support_items"
:key="item.id"
>
<v-accordion class="support-category__accordion border-bottom py-3">
<template v-slot:title>
<div class="font-bold">
{{ item.title }}
</div>
</template>
<v-markdown
:source="item.text"
class="pt-3 pb-2"
/>
</v-accordion>
</div>
</v-accordion>
</v-col>
</v-row>
</div>
</div>
The v-accordion component has ::v-deep implemented as well:
<style lang="scss" scoped>
.accordion::v-deep {
.icon-left {
margin-right: 0.75rem;
font-size: 12px;
color: color(text4);
}
}
</style>
<div class="accordion flex flex-col w-full">
<div
class="cursor-pointer"
#click="toggle"
>
<slot name="title" />
</div>
<div v-show="active">
<slot />
</div>
</div>
I have tried many techniques but nothing worked out:
&::v-deep(__subject) {
font-size: 18px;
font-weight: 700;
}
or
&::v-deep(&__subject) {
font-size: 18px;
font-weight: 700;
}
The only solution that worked is to make this suffixe selector an independent child selector.
.subject {
font-size: 18px;
font-weight: 700;
}
That works for this case but since we use suffixes a lot in the codebase I would like to find a solid solution.
Thanks!

Answer 1

Answer:
Use a postcss.config.js file and add a 'postcss-prefix-selector' like so to give each class a prefix.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-prefix-selector': {
prefix: '#single-spa-application',
},
},
};