Every developer should have the tools to create beautiful, high-performance web applications without unnecessary hurdles. In today’s fast-evolving digital environment, keeping pace with the latest CSS innovations is crucial.

Yet, in the SharePoint Framework, we face limitations that prevent us from utilising many mainstream-supported CSS features. Let me show you how to overcome these barriers, enabling you to write less JavaScript and craft optimised, efficient designs. I believe what you should be able to use in a standalone ReactJS application using CSS should also be possible in the SharePoint Framework.

Build Chain Problem – Autoprefixer

A while back, I wrote a block post on how to disable IE11 support in SharePoint Framework, solely focusing on the JavaScript aspects of this.

I was unaware that SharePoint Framework, until the last version, SPFx 1.19, still has CSS support for Internet Explorer 10+. This option is handled by a tool named autoprefixer.

The default configuration is set to the following:

{
  "browserslist": [
    ">1%", "last 2 versions", "ie >= 10"
  ]
}

This configuration means 86.4% of browsers globally should be supported.

The CSS works in almost any browser, but there is still support for IE 10+, which does not align properly.

This configuration can be changed in the gulp file inside your SharePoint Framework solution. For example:

build.sass.setConfig({
  autoprefixerOptions: {
    overrideBrowserslist: ["> 0.5%", "last 2 versions", "not dead"]
  }
})

build.initialize(require('gulp'));

“not dead” will remove all deprecated browsers, such as IE 10.
The update configuration above gives you browser support than the default option but is just one of many. For more, check out browsersli.sts.

Clean CSS

Who would prefer to avoid having clean CSS? In the case of SharePoint Framework, it’s another cause of problems. The build chain in the case of CSS works like this:

1. Compile SASS
2. Run CSS Modules
3. Run Autoprefixer
4. Run Clean-CSS
5. Run CSS minify

A lot of individual packages are chained together. As you can see, there is a clean-css package.

Clean CSS is also very useful in general. It ensures that your components don’t have any unused CSS or empty expressions. Sadly, it does more than that. This tool also removes any strange-looking CSS statements it doesn’t understand.

Modern things like cascaded CSS layers or CSS Queries get whipped out of existence. No matter how hard you try to include them in your style, they get removed. This behaviour affects custom styles and things like @layer that have been used by TailwindcSS.

According to npmjs, the reason is that clean-CSS is used in version 4.2.1, released over six years ago. Those six years make up about 48 human years.

“sp-build-core-tasks” and “spfx-heft-plugins” use the most recent clean CSS version, 5.3.3. And here is the Catch-22: neither Heft nor the sp-build-core-tasks are used by SPFx. As far as I have seen, they sit there and do nothing.

The only way to make contemporary CSS work is to turn off the clean-css plugin and the minifying process. We only need to set one additional property on the previous SASS configuration.

build.sass.setConfig({
  cleanCssOptions: { level: 0 },
  autoprefixerOptions: {
     overrideBrowserslist: ["> 1%", "last 2 versions", "not dead"]
  }
})

‘cleanCssOptions’ set to level 0.

Level 0 optimizations simply means “no optimizations”. Use it when you’d like to inline imports and / or rebase URLs but skip everything else.

With this setting, you don’t fall into the trap that CSS many browsers can already get stripped away.

There is only one caveat: Your CSS won’t be minified anymore, and it will look something like this in the ‘/lib’ folder.

.helloworldcontainer_2e4f0223 {
    display: flex;
    container-type: inline-size;
    container-name: helloworld
}

@container helloworld (width > 300px) {
    .helloworldcontainer_2e4f0223 .helloworld_2e4f0223 {
        background-color: green
    }
}

.helloworld_2e4f0223 {
    background-color: lime
}

The fact that there is no minifying of your CSS is no big deal because webpack, after the CSS is compiled, will still minify the CSS anyway. So it would be optimised two times anyway.

One last quick tip when you write container queries like shown above. Make sure you have them nested inside of a regular class in SASS.

.helloworldcontainer {
  display: flex;
  container-type: inline-size;
  container-name: helloworld;


  @container helloworld (width > 300px) {

    .helloworld {
      background-color: green;
    }
  }

}

Adding the @container on the root level haven’t worked but not caused by clean-css.

Conclusion

I hope this will be only an intermediate fix for the SharePoint framework. Still, these configuration changes are necessary for anyone who aims to write the state of the Microsoft 365 customisations.

PS:
Microsoft seems to put a lot of effort into Rushstack and Heft, while it hasn’t made a huge impact on the overall web development community. ‘@microsoft/sharepoint’ can create an SPFx project using Heft white the option ‘–help’. Sadly, you end up with a project you cannot compile, run or even develop. Looking at the statistics on npmjs, it also seems that they will be downloaded a lot but not used a lot.