SPFX - Learning And Findings - Part One

This blog is about findings on SPFx projects.

Introduction 

 

Hello everyone, I work on SharePoint, so I like to play around. This time I thought maybe I pen down my learnings and findings. This is my first blog so I will try to start with less complicated stuff.

 

This blog is about SPFx and my findings. I cannot write everything in one blog, so I have created a series, and this is the first in that series.

 

Warning suppression in SPFx

 

I was working on one of the projects where I wanted to use office fabric 7 but as you know scaffolding gives you only fabric 6 for now, so I went ahead and updated the fabric version. I thought things will break but it worked fine for me. I tested this on classic page, and I found some styling issues. OOB css from corev15 was overriding few of fabric CSS. To fix that it was simple, I just reset it to default in my SPFx scss file. Below is the few sample css changes:

:global{
  .ms-core-tableNoSpace{
    width: 80%;
  }
  .ms-Callout-container{
    input[type=button], input[type=reset], input[type=submit], button {
      min-width: initial;
      margin-left: initial;
    }
    input, select, label, textarea, button, option {
       vertical-align: initial;
    }
    input[type=button]:active, input[type=reset]:active, input[type=submit]:active,
    input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
      border-color: initial;
      background-color:initial;
    }
    button:hover{
      border-color: rgba(0,0,0,0);
    }
  }
}

.customWebpart {
  input[type=password], input[type=text], input[type=file], input:not([type]), select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox {
    border:initial;
}
input[type=button], input[type=reset], input[type=submit], button {
  min-width: initial;
  margin-left: initial;
}
input, select, label, textarea, button, option {
   vertical-align: initial;
}

input[type=button]:hover , input[type=reset]:hover, input[type=submit]:hover, button:hover,
input[type=button]:active, input[type=reset]:active, input[type=submit]:active, button:active,
:not(:global(.ms-Button:hover)),:not(:global(.ms-Button:active))  {
  border-color: initial;
  background-color:initial;

}
}

By default, you would only want to target the CSS for the controls which is inside your webpart, not the whole page due to which I have overridden CSS inside the class. Few of them are global because callouts are at body level so to fix those you must have globally.

 

The issues got fixed but I started getting below warning. Due to this warning, I was not able to package my solution.

Warning - [sass] The local CSS class 'ms-Callout-container' is not camelCase and will not be type-safe.

This warning is because the class names defined are not according to tslint standard. One side there is these CSS class names and another side is warning which prevents me in creating a package. I cannot change the CSS class name as it is SharePoint CSS, so we must fix the warning part.

 

To fix the warning, open the "gulpfile.js” from the project. In the file you will see below line:

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

As you see SPFx guys are also trying to suppress one of the warnings. We do the same thing we add our own suppression and add below line:

build.addSuppression(/^.*The local CSS class(.*)is not camelCase and will not be type-safe\.$/);

If you read the above line, we have suppressed all CSS warnings of similar nature by passing a regex expression. You can pass a regex expression or pass a string in the "add Suppression" method. Once the warnings are gone, I was able to create my package.

 

I will come up with more, but please let me know in comments how it was and how can I make it better.