[SASS] Change output style comments to non-rendered comments in invisibles files

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `tableCaption` prop to `EuiBasicTable` and improved the default one ([#2782](https://github.com/elastic/eui/pull/2782))
+- Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 
 ## [`18.3.0`](https://github.com/elastic/eui/tree/v18.3.0)
 

src/global_styling/mixins/_beta_badge.scss

@@ -1,26 +1,24 @@
 
-/**
- * 1. Extend beta badges to at least 40% of the container's width
- * 2. Fix for IE to ensure badges are visible outside of a <button> tag
- */
+// 1. Extend beta badges to at least 40% of the container's width
+// 2. Fix for IE to ensure badges are visible outside of a <button> tag
 
 @mixin euiHasBetaBadge($selector, $spacing: $euiSize) {
   #{$selector}--hasBetaBadge {
     position: relative;
-    overflow: visible; /* 2 */
+    overflow: visible; // 2
 
     #{$selector}__betaBadgeWrapper {
       position: absolute;
       top: ($euiSizeL / -2);
       left: 50%;
       transform: translateX(-50%);
       z-index: 3; // get above abs positioned image
-      min-width: 40%; /* 1 */
+      min-width: 40%; // 1
       max-width: calc(100% - #{($spacing * 2)});
 
       .euiToolTipAnchor,
       #{$selector}__betaBadge {
-        width: 100%; /* 1 */
+        width: 100%; // 1
       }
 
       #{$selector}__betaBadge {

src/global_styling/mixins/_button.scss

@@ -33,10 +33,9 @@
   }
 }
 
-/**
- * 1. Apply margin to all but last item in the flex.
- * 2. Margin gets flipped because of the row-reverse.
- */
+// 1. Apply margin to all but last item in the flex.
+// 2. Margin gets flipped because of the row-reverse.
+
 @mixin euiButtonContent($isReverse: false) {
   height: 100%;
   width: 100%;
@@ -51,16 +50,16 @@
     flex-direction: row-reverse;
 
     > * + * {
-      margin-left: 0; /* 1 */
-      margin-right: $euiSizeS; /* 1 */
+      margin-left: 0; // 1, 2
+      margin-right: $euiSizeS; // 1, 2
     }
   } @else {
     display: flex;
     justify-content: center;
     align-items: center;
 
     > * + * {
-      margin-left: $euiSizeS; /* 1 */
+      margin-left: $euiSizeS; // 1
     }
   }
 }

src/global_styling/mixins/_form.scss

@@ -65,10 +65,6 @@
   );
 }
 
-/**
- * 3. Must supply both values to background-size or some browsers apply the single value to both directions
- */
-
 @mixin euiFormControlText {
   @include euiFont;
   font-size: $euiFontSizeS;
@@ -129,11 +125,13 @@
   }
 }
 
+// 1. Must supply both values to background-size or some browsers apply the single value to both directions
+
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
   // sass-lint:disable-block indentation
   background-color: $euiFormBackgroundColor;
   background-repeat: no-repeat;
-  background-size: 0% 100%; /* 3 */
+  background-size: 0% 100%; // 1
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -161,7 +159,7 @@
   // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
-  background-size: 100% 100%; /* 3 */
+  background-size: 100% 100%; // 1
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -198,9 +196,8 @@
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 }
 
-/**
- * 4. Override invalid state with focus state.
- */
+
+// 2. Override invalid state with focus state.
 
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
   @include euiFormControlSize($includeAlternates: $includeSizes);
@@ -212,11 +209,11 @@
   padding: $euiFormControlPadding;
 
   @if ($includeStates) {
-    &:invalid { /* 4 */
+    &:invalid { // 2
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 4 */
+    &:focus { // 2
       @include euiFormControlFocusStyle;
     }
 
@@ -248,11 +245,11 @@
   border-radius: $euiFormControlCompressedBorderRadius;
 
   @if ($includeStates) {
-    &:invalid { /* 4 */
+    &:invalid { // 2
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 4 */
+    &:focus { // 2
       @include euiFormControlFocusStyle($borderOnly: true);
     }
 

src/global_styling/mixins/_panel.scss

@@ -1,8 +1,3 @@
-/**
- *  Mixin for use in:
- *  - EuiCard
- *  - EuiPageContent
-*/
 @mixin euiPanel($selector) {
   @if variable-exists(selector) == false {
     @error 'A $selector must be provided to @mixin euiPanel().';

src/global_styling/mixins/_typography.scss

@@ -116,11 +116,11 @@
 
 @mixin euiTextTruncate {
   // sass-lint:disable-block no-important
-  max-width: 100%; /* 1 */
+  max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
-  word-wrap: normal !important; /* 2 */
+  word-wrap: normal !important; // 2
 }
 
 @mixin euiNumberFormat {

src/global_styling/variables/_form.scss

@@ -39,8 +39,8 @@ $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackgroun
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
 
 // Control Layout
-$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default; /* 1 */
-$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default; /* 1 */
+$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
+$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
 $euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;
 
 // Range