Imagine the following selector:
[dir="ltr"] .m_foobar {
padding-left: 10px;
}
We still want to prefix the class name but the prefix should be added after [dir="ltr"]:
[dir="ltr"] .prefix .m_foobar {
padding-left: 10px;
}
It'd be really nice to have a transform function that allows to manually specify where the prefix is added.
Something like:
transform: (selector, prefix) => {
const insertIndex = selector.indexOf(".m_");
// If `.m_` not found, just return selector unchanged
if (insertIndex === -1) {
return selector;
}
// Place the prefix (with a space) before the `.m_`
return (
selector.slice(0, insertIndex) +
`${prefix} ` +
selector.slice(insertIndex)
);
}