ThisIsManta/stylus-supremacy

insertColons option: "preserve" mode for accessing nested variables

Closed this issue · 5 comments

qnp commented

Greetings,

In the light of this Stylus issue stylus/stylus#2357, accessing a nested variable can be ambiguous without colon, e.g.

color $colors.primary

is considered as a CSS selector, while:

color: $colors.primary

is considered as a CSS property.

However, stylus supremacy insertColons option is a Boolean so only offers a toggle mode: with or without colons. In all our codebase we don't want to use colons, but only in the case when accessing nested variables.

Stylus supremacy insertColons should provide a "preserve" mode which does not affect at all the way the developer used colons or not. That is, insertColons as a String with three possible values: "preserve", "always", "none".

I've looked into the code but I am not quite sure how to do it so I cannot make a PR for that.

Please tell me what do you think about this proposition.

I understand the problem, but can you give me some context of color $colors.primary being a selector and property respectively?

qnp commented

There is no such case when color $colors.primary is used as a selector. It would be weird.

However Stylus itself does compile it as a selector, because he cannot discriminate between a nested variable access and a selector (see the above linked issue and its following comments).

When we format our stylus code, we use stylus supremacy insertColons: false option so all our declarations are free of colons. Hence, all instances of color: $colors.primary (or similar) are transformed to color $colors.primary, and then Stylus compilation fails partially or has unexpected behavior as it consider them as selectors.

qnp commented

@ThisIsManta any update on this Issue ?
If you provide me with few guidance on the source code & project architecture, I can handle a PR for that.

qnp commented

I have done a PR #82 to cover the needs

Thanks for the PR, but I have to reject it as I came up with different solution. See my explanation at #82 (comment)