Open oofdere opened 1 month ago
For now I'm just using lodash's merge, while it does have pitfalls compared to composeVisitors
it's a good temporary solution
export function composePlugins<C extends CustomAtRules>(plugins: (Plugin<C> | Visitor<C>)[]) {
let customAtRules: CustomAtRules = {};
let visitor: Visitor<CustomAtRules> = {};
plugins.forEach(p => {
if ('visitor' in p) {
_.merge(visitor, p.visitor)
if (p.customAtRules) { Object.assign(customAtRules, p.customAtRules) }
} else {
_.merge(visitor, p)
}
});
return { customAtRules, visitor }
}
The below code outputs
.foo{color:red;@light{&{color:green}}@dark{&{color:#ff0}}}
. Each rule works on their own, for example if I delete the light rule then the dark rule works:.foo{color:red;@light{&{color:green}}@media (prefers-color-scheme:dark){&{color:#ff0}}}
.