The use method is defined in a new WithUsables mixin. For mixin builders, it creates a new selector using the current context and the mixin context. It combines these into a single selector and applies the styles. It then returns the original builder. Thus, when a mixin is applied using use it cannot be changed anymore. Also, what I still have to figure out
- Should a mixin be nested, or extend a selector? We can either do
const context = usable.getMixinContext();
_selectByContext([...this.context, ...context], this.postcssContainer, this.postcssRoot).style(styles);
or
const context = usable.getMixinContext();
_selectByContext(this.context, this.postcssContainer, this.postcssRoot).select(context).style(styles);
So the first would combine selectors, the second one would nest them. Issue with nesting is that something like
export const surimiIconAfter = mixin(':after').style({
content: "'🍣'",
position: 'absolute',
});Would not select the after pseudo element of the current context, but of all descendants.
We would need something like
which is, I think, not valid?
The mixin builder is a bit odd currently, as it would allow to put multiple .style calls in between some selections. That does nothing though, as the 'style' method just updates an object. That is also related to the question of how is a mixin different from a selector builder.
The
usemethod is defined in a newWithUsablesmixin. Formixin builders, it creates a new selector using the current context and the mixin context. It combines these into a single selector and applies the styles. It then returns the original builder. Thus, when a mixin is applied usinguseit cannot be changed anymore. Also, what I still have to figure outor
So the first would
combineselectors, the second one wouldnestthem. Issue with nesting is that something likeWould not select the
afterpseudo element of the current context, but of all descendants.We would need something like
which is, I think, not valid?
The
mixinbuilder is a bit odd currently, as it would allow to put multiple .style calls in between some selections. That does nothing though, as the 'style' method just updates an object. That is also related to the question of how is a mixin different from a selector builder.