CSS build pipeline broken with modern CSS and layered styles.

[StfBauer]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [X] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

SPFx version: 1.16.1

Describe the bug / error

CSS file gets truncated with the following code it:

.mylayer {
  max-width: 80ch;
  margin: 2rem auto;
  font-size: 1.25rem;
  box-sizing: border-box;
  padding: 1rem;
}

@layer red,green;

@layer red {
  .mylayer {
    border: 1px red solid;
    color: red;
    padding: 2rem;
  }
}

@layer green {
  .mylayer {
    border: 1px green solid;
    color: green;
    padding: 3rem;
  }
}

The CSS code is not the problem but instead of having the same style in the outputted CSS the following is the result.

.mylayer{max-width:80ch;margin:2rem auto;font-size:1.25rem;box-sizing:border-box;padding:1rem}@layer red,green;
@layer red{color:red;padding:2rem}

So there must be some false treatment in the build chain because the green layer will not come through. CSS doesn't get applied to the web part too, so there must be an issue with loading the styles to the page.

Here is a working CSS Sample: https://codepen.io/StfBauer/pen/wvxjJap

Steps to reproduce

1. Create a web part with the version 1.16.1
2. add the style sheet code in the SCSS File.
3. add the following code to the web part.

  public render(): void {    
    this.domElement.innerHTML = `<div class="${styles.mylayer}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit assumenda deserunt culpa dolore provident cupiditate suscipit. Laboriosam non laborum dolorem necessitatibus quo! Perferendis nemo natus mollitia deserunt ex deleniti tempora.</div>`;
  }

Run the web part and check the lib folder to see if the same CSS was generated as the origin.

Expected behavior

Input CSS = Output CSS and leave my CSS alone.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions[bot]]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.

[StfBauer]

The issue is not fixed in the build chain; it requires the following configuration to make it work:

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

With this modification, it works. The issue is the outdated and 7-year-old clean-css and auto-prefixer configuration.

[Ashlesha-MSFT]

@StfBauer, Thank you for reporting this issue! We verified that it has been fixed in SPFx 1.22.0-beta.4. All CSS layers (both red and green) are now properly preserved through the build pipeline, bundled correctly, and render as expected at runtime. The truncation issue present in SPFx 1.16.1 no longer occurs.

Could you please test this on your end with SPFx 1.22.0-beta.4 and confirm if the issue is resolved for you as well? If I've missed anything or if you still experience issues, please let me know and I'll be happy to investigate further!

[StfBauer]

@Ashlesha-MSFT sure will do but I suspect it works there.