Sp-dev-docs: 🐞 Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.

[michel-weber]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

A newly created SPFx WebPart (@microsoft/[email protected], React) should build without warnings.

Observed Behavior

The gulp build --ship command emits a warning. This breaks the build on VSTS as gulp is returning with an exit code of 1.

##[section]Starting: gulp build --ship
==============================================================================
Task         : Gulp
Description  : Node.js streaming task based build system
Version      : 0.5.31
Author       : Microsoft Corporation
Help         : [More Information](https://go.microsoft.com/fwlink/?LinkID=613721)
==============================================================================
[command]C:\NPM\Modules\gulp.cmd build --gulpfile d:\a\1\s\spfx\gulpfile.js --ship
Build target: SHIP
[14:11:59] Using gulpfile d:\a\1\s\spfx\gulpfile.js
[14:11:59] Starting gulp
[14:11:59] Starting 'build'...
[14:11:59] Starting subtask 'configure-sp-build-rig'...
[14:11:59] Finished subtask 'configure-sp-build-rig' after 5.82 ms
[14:11:59] Starting subtask 'pre-copy'...
[14:11:59] Finished subtask 'pre-copy' after 5.88 ms
[14:11:59] Starting subtask 'copy-static-assets'...
[14:11:59] Starting subtask 'sass'...
- Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.
[14:12:00] Finished subtask 'sass' after 910 ms
[14:12:00] Starting subtask 'tslint'...
[14:12:01] Starting subtask 'typescript'...
[14:12:01] [typescript] TypeScript version: 2.4.2
[14:12:01] Finished subtask 'copy-static-assets' after 1.86 s
[14:12:01] Finished subtask 'tslint' after 1.42 s
[14:12:04] Finished subtask 'typescript' after 2.95 s
[14:12:04] Starting subtask 'ts-npm-lint'...
[14:12:04] Finished subtask 'ts-npm-lint' after 25 ms
[14:12:04] Starting subtask 'api-extractor'...
[14:12:04] Finished subtask 'api-extractor' after 658 μs
[14:12:04] Starting subtask 'post-copy'...
[14:12:04] Finished subtask 'post-copy' after 144 μs
[14:12:04] Finished 'build' after 4.83 s
[14:12:04] ==================[ Finished ]==================
- Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.
[14:12:05] Project sbb-gamo version: 0.0.1
[14:12:05] Build tools version: 3.0.5
[14:12:05] Node version: v6.10.0
[14:12:05] Total duration: 7.73 s
[14:12:05] Task warnings: 1
- ##[error]Gulp failed with error: C:\NPM\Modules\gulp.cmd failed with return code: 1
##[section]Finishing: gulp build --ship

Steps to Reproduce

1) Create a new SPFx WebPart with React:

λ yo @microsoft/sharepoint

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |  SharePoint Client-side  |
    ( _´U`_ )    |    Solution Generator    |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? test-todelete
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or
adding apps in sites? No
? Which type of client-side component to create? WebPart
? What is your Web part name? HelloWorld
? What is your Web part description? HelloWorld description
? Which framework would you like to use? React

2) Run gulp build --ship

Thoughts

I see at least two scenarios how I could solve this:
1) Tell gulp to ignore warnings (or not fail on warnings)
2) Do not use Office UI Fabric (e.g. Bootstrap)

Any help is greatly appreciated!

[michel-weber]

Perhaps related to?
Style Reference to SPFabricCore.scss #1060

[StfBauer]

@michel-weber: Can you please provide a sample with the CSS code. Especially that part where you used .ms-Grid inside your SASS file?

[michel-weber]

@StfBauer This is the default SPFx React app created by the generator. I have not modified the generated code.

[StfBauer]

I get the same warnings like you. But the overall procsit works for me as curious as it sounds what version of NPM you have installed?

In my case:

npm: 5.2.0
node: 6.12.0

In my case I had to downgrade npm because there are some issues where partially packages get corrupt or have been wrong downloaded. I my case it was related to SASS.

[michel-weber]

As far as I know, npm version 4 is the latest supported version for SPFx.

I have these versions installed:
npm: 4.6.1
node: 6.11.2

[waldekmastykarz]

The failure described by @michel-weber applies to running a build in VSTS where build fails on warnings. To avoid this issue, you could try to change your build settings not to treat warnings as errors, but ideally, I agree, standard web part scaffolded by the generator shouldn't yield any warnings/errors.

[michel-weber]

@waldekmastykarz Yes you are correct. I have now set the build tasks to just ignore errors which is even worse than NOT treating warnings as errors.

I'll have to figure out how to change the gulp build to NOT treat warnings as errors. So far, I haven't found a solution ...

[StfBauer]

@michel-weber What you can do meanwhile is to wrap the code that causes this warning in the CSS Module pseudo-class global

In case of the default web part this looks like this:

    .column {
         :global {
            @include ms-Grid-col;
        }
        @include ms-lg10;
        @include ms-xl8;
        @include ms-xlPush2;
        @include ms-lgPush1;
    }

The CSS compilation then ignore the .ms-Grid class and won't auto-postfix this class. You don't need to change anything in the web part code because it won't be used there anyway.
If you would have used it in the web part, an error will be raised. You would have than to change the class definition from something like:

<div class='${ style['ms-Grid'] }'>
To:
<div class='ms-Grid'>

The cause of this warning is that the generated style object has a dash in its name, and this is not a valid property name of a JSON object that can be accessed directly. Instead, you have to use the array notation.

You will find more on this warning on CSS Modules in the section 'naming'.

This should help you at least for now until a better solution can be found.

[nero120]

@StfBauer I'm including office-ui-fabric-react in my module.scss via:

@import '~office-ui-fabric-react/dist/sass/Fabric';

as I'm using the fabric mixins in my styles, but whenever I run a build I get many 'The local CSS class ... is not camelCase and will not be type-safe' warnings for every style in fabric, i.e.:

Warning - [sass] The local CSS class 'ms-slideRightIn10' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-fadeIn' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideLeftIn10' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideRightIn20' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideLeftIn20' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideRightIn40' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideLeftIn40' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideRightIn400' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideLeftIn400' is not camelCase and will not be type-safe.
Warning - [sass] The local CSS class 'ms-slideRightOut40' is not camelCase and will not be type-safe.
...

What can I do to surpress these warnings?

[StfBauer]

@nero120 this is precisely the same problem. Office UI Fabric uses dashes in class names that are not accessible directly as properties. That what the warning means.
You can avoid this warning if you import it directly into your web part container class and wrap the import statement inside a global block.

.myWebPartContainer{
    :global{
        @import '~office-ui-fabric-react/dist/sass/Fabric';
    }
}

The fact that Office UI Fabric already got registered on the web page you don't need to use this import statement at all and use the given class names directly on your web part code.

In the default provisioned "Hello World" web part you already see examples of this usage.

My overall recommendation is not to use and import of Office UI Fabric.
For special things like the grid system only use:

    @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore'

That was recently released and is a specific Office UI Fabric version and Tool for the use in SPFx.

[nero120]

Thanks @StfBauer, I was actually following the advice on this page when using the Fabric UI React controls, but I'd imported the wrong file, it should have been:

@import '~office-ui-fabric-react/dist/sass/References.scss';

After changing the reference to this, the warnings have disappeared. 😄

[andrewconnell]

Pretty sure this can get closed as the v1.4 drop includes an ignore rule for this... right @VesaJuvonen ?

[sbhuttan]

We are seeing the same warnings and it appears that the classes (including ms-Grid) are being ignored and are not available in the final compiled CSS.

We noticed this issue two days ago, where Grid classes are not available anymore.

[andrewconnell]

Closing as this has been fixed in current builds.

[StfBauer]

@andrewconnell it is still not fixed but the warning is now suppressed. The issue still exists.

[andrewconnell]

@StfBauer _technically_ the issue is resolved as the OP said the issue was the warning :P

MSFT hasn't recognized the fact the class has a hyphen is an issue... if so, seems like it should be it's own issue sep. from this.

[michel-weber]

Best practice: Ignore warnings - and thus do not fix the underlying issue/cause ;-).

I agree that it should be tracked in it's own issue.

[simkessy]

I still see the warnings

[LuisEnMarroquin]

You can ignore the warning adding the following on your gulpfile.js

const build = require('@microsoft/sp-build-web');

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