Article
0 comment

The Secret Life of Tilde in SPFx’s CSS

Like in the movie “Secret Life of Walter Mitty“, there are things out there we are not aware of. At least, I was not aware, which also don’t mean a lot.

We all know the following statement, which we find in CSS of every new web part.

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

TLDR
The ~ aka tilde is a shortcut to the node_modules folder, but I haven’t found any clear documentation but it works.

The odd thing about tilde

While we might know things like ‘~sitecollection’ and a couple of other occasions where the tilde gets used in SharePoint, it becomes odd for the link like that on the file system.

The tilde sign is a shortcut for the home drive under Linux, BSD, macOS, and other POSIX operating systems.

So why would I load for a web part something from my home drive? I don’t know.

For a proper filesystem path, there is a slash missing. The following statement illustrates what this would look.

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

With ‘~@microsoft’, someone could also assume it is a shortcut just for Microsoft. Even C# use ‘~/’ and not the tilde directly.

On the contrary, whenever you import something from the node_modules folder (“Advertisement Warning”) like hTWOo.

You can simply write the following instead of:

@import 'node_modules/@n8d/htwoo-core/lib/components/base';

You can just write:

@import '~@n8d/htwoo-core/lib/components/base';

The unfortunate side effect of not having this documented is that millions of solutions in the wild might reference the ‘node_modules’ folder directly.

I had an issue in SharePoint Framework 1.14 of the SharePoint Framework where a reference to node_modules seemed broken.

Over it should be known what it stands for. Do I like the tilde? Yes and No – I rarely see the use of this character in meaning like this. It is something Microsoft special, so if someone has a good example where a tiled gets used. Please comment below.

The old official documentaion on how to integrate Office UI Fabric integration

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.