MAGETWO-82667: Magento UI - Cleanup of undefined mixins parameters and usage of "leaking" variables scope #11371

Author: Oleksii Korshenko

lib/web/css/source/lib/_icons.less

@@ -285,6 +285,10 @@
     .lib-icon-text-hide();
 }
 
+._lib-icon-image-url(@_path) when not (@_path = false) {
+    .lib-css(background-image, url(@_path));
+}
+
 ._lib-icon-image(
     @_icon-image,
     @_icon-image-width,
@@ -294,9 +298,7 @@
     @_icon-image-position-x,
     @_icon-image-position-y
 ) {
-    .lib-url-check(@_icon-image);
-
-    .lib-css(background-image, @lib-url-check-output); // @lib-url-check-output is a returned variable of .lib-url-check() mixin
+    ._lib-icon-image-url(@_icon-image);
     .lib-css(background-position-x, @_icon-image-position-x);
     .lib-css(background-position-y, @_icon-image-position-y);
     .lib-css(line-height, @_icon-image-height);

lib/web/css/source/lib/_pages.less

@@ -119,20 +119,26 @@
     ._lib-pager-label-display(  // To hide or to display label
         @_pager-label-display: @_pager-label-display,
         @_pager-font-size: @_pager-font-size,
+        @_pager-font-weight: @_pager-font-weight,
         @_pager-line-height: @_pager-line-height
     );
 
     .items {
-        ._lib-pager-inline-block-spaces-container();
+        ._lib-pager-inline-block-spaces-container(
+            @_pager-reset-spaces,
+            @_pager-item-display
+        );
         .lib-list-reset-styles();
         .lib-css(display, @_pager-item-display);
         .lib-css(font-weight, @_pager-font-weight);
     }
 
     .item {
         ._lib-pager-inline-block-spaces-item(
-            @_pager-font-size: @_pager-font-size,
-            @_pager-line-height: @_pager-line-height
+            @_pager-reset-spaces,
+            @_pager-item-display,
+            @_pager-font-size,
+            @_pager-line-height
         );
         .lib-css(margin, @_pager-item-margin);
         .lib-css(display, @_pager-item-display);
@@ -204,8 +210,10 @@
         );
         .lib-css(border, @_pager-current-border);
         ._lib-pager-inline-block-spaces-item(
-            @_pager-font-size: @_pager-font-size,
-            @_pager-line-height: @_pager-line-height
+            @_pager-reset-spaces,
+            @_pager-item-display,
+            @_pager-font-size,
+            @_pager-line-height
         );
         .lib-css(color, @_pager-current-color);
         .lib-css(display, @_pager-item-display);
@@ -266,12 +274,13 @@
 
         &.next {
             ._lib-pager-icon (
-                @_pager-icon-use: @_pager-icon-use,
                 @_icon-font-content: @_pager-icon-next-content,
+                @_pager-icon-use: @_pager-icon-use,
                 @_icon-font: @_pager-icon-font,
                 @_icon-font-size: @_pager-icon-font-size,
                 @_icon-font-line-height: @_pager-icon-font-line-height,
                 @_icon-font-color: @_pager-action-color,
+                @_icon-font-color-visited: @_pager-action-color-visited,
                 @_icon-font-color-hover: @_pager-action-color-hover,
                 @_icon-font-color-active: @_pager-action-color-active,
                 @_icon-font-margin: @_pager-icon-font-margin,
@@ -283,12 +292,13 @@
 
         &.previous {
             ._lib-pager-icon (
-                @_pager-icon-use: @_pager-icon-use,
                 @_icon-font-content: @_pager-icon-previous-content,
+                @_pager-icon-use: @_pager-icon-use,
                 @_icon-font: @_pager-icon-font,
                 @_icon-font-size: @_pager-icon-font-size,
                 @_icon-font-line-height: @_pager-icon-font-line-height,
                 @_icon-font-color: @_pager-action-color,
+                @_icon-font-color-visited: @_pager-action-color-visited,
                 @_icon-font-color-hover: @_pager-action-color-hover,
                 @_icon-font-color-active: @_pager-action-color-active,
                 @_icon-font-margin: @_pager-icon-font-margin,
@@ -301,14 +311,19 @@
 }
 
 //  Delete spaces between elements when pager items have display: inline-block
-._lib-pager-inline-block-spaces-container() when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
+._lib-pager-inline-block-spaces-container(
+    @_pager-reset-spaces,
+    @_pager-item-display
+) when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
     .lib-inline-block-space-container();
     white-space: nowrap;
 }
 
 ._lib-pager-inline-block-spaces-item(
-    @_pager-font-size: @_pager-font-size,
-    @_pager-line-height: @_pager-line-height
+    @_pager-reset-spaces,
+    @_pager-item-display,
+    @_pager-font-size,
+    @_pager-line-height
 ) when (@_pager-reset-spaces = true) and (@_pager-item-display = inline-block) {
     .lib-inline-block-space-item(
         @_font-size: @_pager-font-size,
@@ -318,10 +333,10 @@
 
 // Display or hide "page" label
 ._lib-pager-label-display(
-    @_pager-label-display: @_pager-label-display,
-    @_pager-font-size: @_pager-font-size,
-    @_pager-font-weight: @_pager-font-weight,
-    @_pager-line-height: @_pager-line-height
+    @_pager-label-display,
+    @_pager-font-size,
+    @_pager-font-weight,
+    @_pager-line-height
 ) when not (@_pager-label-display = none){
     > .label {
         .lib-css(display, @_pager-label-display);
@@ -338,41 +353,41 @@
 }
 
 ._lib-pager-label-display(
-    @_pager-label-display: @_pager-label-display,
-    @_pager-font-size: @_pager-font-size,
-    @_pager-font-weight: @_pager-font-weight,
-    @_pager-line-height: @_pager-line-height
+    @_pager-label-display,
+    @_pager-font-size,
+    @_pager-font-weight,
+    @_pager-line-height
 ) when (@_pager-label-display = none) {
     > .label {
         .lib-visually-hidden();
     }
 }
 
 ._lib-pager-label-display(
-    @_pager-label-display: @_pager-label-display,
-    @_pager-font-size: @_pager-font-size,
-    @_pager-font-weight: @_pager-font-weight,
-    @_pager-line-height: @_pager-line-height
+    @_pager-label-display,
+    @_pager-font-size,
+    @_pager-font-weight,
+    @_pager-line-height
 ) when (@_pager-label-display = false) {
     > .label {
         .lib-visually-hidden();
     }
 }
 
 ._lib-pager-icon (
-    @_pager-icon-use: @_pager-icon-use,
+    @_pager-icon-use,
     @_icon-font-content,
-    @_icon-font: @_pager-icon-font,
-    @_icon-font-size: @_pager-icon-font-size,
-    @_icon-font-line-height: @_pager-icon-font-line-height,
-    @_icon-font-color: @_pager-action-color,
-    @_icon-font-color-visited: @_pager-action-color-visited,
-    @_icon-font-color-hover: @_pager-action-color-hover,
-    @_icon-font-color-active: @_pager-action-color-active,
-    @_icon-font-margin: @_pager-icon-font-margin,
-    @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
-    @_icon-font-position: @_pager-icon-font-position,
-    @_icon-font-text-hide: @_pager-icon-font-text-hide
+    @_icon-font,
+    @_icon-font-size,
+    @_icon-font-line-height,
+    @_icon-font-color,
+    @_icon-font-color-visited,
+    @_icon-font-color-hover,
+    @_icon-font-color-active,
+    @_icon-font-margin,
+    @_icon-font-vertical-align,
+    @_icon-font-position,
+    @_icon-font-text-hide
 ) when (@_pager-icon-use = true) and (@_icon-font-position = before) {
     &:visited {
         &:before {
@@ -402,19 +417,19 @@
 }
 
 ._lib-pager-icon (
-    @_pager-icon-use: @_pager-icon-use,
     @_icon-font-content,
-    @_icon-font: @_pager-icon-font,
-    @_icon-font-size: @_pager-icon-font-size,
-    @_icon-font-line-height: @_pager-icon-font-line-height,
-    @_icon-font-color: @_pager-action-color,
-    @_icon-font-color-visited: @_pager-action-color-visited,
-    @_icon-font-color-hover: @_pager-action-color-hover,
-    @_icon-font-color-active: @_pager-action-color-active,
-    @_icon-font-margin: @_pager-icon-font-margin,
-    @_icon-font-vertical-align: @_pager-icon-font-vertical-align,
-    @_icon-font-position: @_pager-icon-font-position,
-    @_icon-font-text-hide: @_pager-icon-font-text-hide
+    @_pager-icon-use,
+    @_icon-font,
+    @_icon-font-size,
+    @_icon-font-line-height,
+    @_icon-font-color,
+    @_icon-font-color-visited,
+    @_icon-font-color-hover,
+    @_icon-font-color-active,
+    @_icon-font-margin,
+    @_icon-font-vertical-align,
+    @_icon-font-position,
+    @_icon-font-text-hide
 ) when (@_pager-icon-use = true) and (@_icon-font-position = after) {
     .lib-icon-font(
         @_icon-font-content: @_icon-font-content,

lib/web/css/source/lib/_utilities.less

@@ -334,18 +334,6 @@
     @url: "@{baseDir}@{_module}/@{_path}";
 }
 
-//
-//  Url existing check
-//  ---------------------------------------------
-
-.lib-url-check(@_path) {
-    @lib-url-check-output: @_path;
-}
-
-.lib-url-check(@_path) when not (@_path = false) {
-    @lib-url-check-output: url(@_path);
-}
-
 //
 //  Arrow
 //  ---------------------------------------------