Magento UI - Cleanup of undefined mixins parameters and usage of "leaking" variables scope #11371
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Backstory
It's not a secret that I don't like LESS, but because of SASS Blank project, I often have to deep dive into Magento UI LESS library code.
Unfortunately, 9 of 10 times I got a punch of weirdness of language "features" mixed with the inconsistency of the implementation right in the face.
That's why I decided to do something with it and clean up most annoying places.
It may be considered as heavily opinionated changes, but all of this code is 100% safe and didn't change the output CSS, the goal is to make working on this code less painful, especially for porting into languages that care more about scope and execution order, but it also should help people working directly on LESS, because all of the changes can be considered as a good practice in any programing language.
Technical reason of changes
In LESS variables have kinda weird scope rules, which I'm considering as a leaking scope and the source of confusion i.e. functions (mixins) invoked inside function declaration inherits all variables of the parent function.
An example in a JS-like code to show weirdness of the LESS scoping:
It's not a common practice in other languages used in FE development and it not clear for developers, so will be nice to avoid it.
The goal is to pass all necessary values to mixin only through parameters or using global variables as default values of parameters.
Same example, but with this new rules applied:
Description of changes
I removed all fallbacks to variables not existing in the global scope, defined all variables used inside mixins as parameters and added all missing parameters to the places where mixins are invoked.
Also mixin that was used just once, was moved and simplified, to reduce usage of weird LESS scoping, where variables defined in mixin are accessible in the place where mixin is invoked.