🚨 SASS: Degradation from gulp-spfx to heft-spfx

Target SharePoint environment

SharePoint Online - SPFx 1.22.0-beta.4

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework 1.22.0-beta.4

Issue 1: SASS

"quiteDeps": "true"

Documentation reference: configure-sass

This is not a valid options anymore:

Which causes the build chain to break completely:

This was replaced with:

"ignoreDeprecationsInDependencies": true

After that, the build chain works again and creates new CSS files. In general, it would be good practice and easier for everyone if it supported the default SASS options, instead of newly invented options.](https://sass-lang.com/documentation/js-api/interfaces/options/).

Critical Issue 2: CSS Modules not working

A CSS like this:

@use 'sass:meta';

.themeExporter {
  content: "";

  // Global test 1
  :global(.my-theme) {
    .container {
      content: "Hello, World!";
    }
  }

  // Global test 2
  :global {
    .container2 {
      content: "Hello, World!";
    }
  }
}

.container {
  text-align: center;
}

No generates the following output in the lib folder:

.themeExporter {
  content: "";
}
.themeExporter :global(.my-theme) .container {
  content: "Hello, World!";
}
.themeExporter :global .container2 {
  content: "Hello, World!";
}

.container {
  text-align: center;
}

Which now creates only global CSS classes and allows for easy overwriting of styles outside of the web part. Removing the Suitebar, for example, is no problem anymore, and everyone can do this accidentally or on purpose.

The same behaviour also exists with the default React option.

import styles from './Asdasd.module.scss';

This import imports a file that does not exist, and magically it does not cast any error on this:

<ul className={styles.links}>

These are the files that get compiled:

The compiles source cannot find a definiton for this:

So this web part should not even work, but however it works later in the browser, with the corrected styles.

So there is some magic going on here.

Issue 3 - No more 3rd party libraries

Since the :global and :local scoping does not work anymore no 3rd party library such as sliders, or htwoo and other compontents of the web, can be integrated into SharePoint Framework anymore.

Even a scope import such as:

@use 'sass:meta';

.myWebPartRoot{
  :global {
    @include meta.load-css('node_modules/@n8d/htwoo-core/lib/sass/htwoo-core');
  }
}

Which makes the 3rd party CSS isolated to the .myWebPartRoot as it is in the current version, not possible anymore, since all CSS classes with be now treated equally and replaced to this:

.hoo-button-primary_990cf4a2{}

When it should be like:

.myWebPartRoot_990cf4a2 .hoo-button-primary

Key Fixes Required

• Update SASS configuration to use valid options.
• Reinforce CSS isolation and type safety in the SPFx build pipeline as it was in the current system.
• Ensure SCSS imports are validated during build.
• Restore compatibility with external libraries by fixing CSS Module Scoping.