Client Resource Manager fails when @import is within the CSS file

[markmcavoy]

Description of bug

Starting in release 9.11.0 we are seeing that a module.css file what we are loading into the page using the ClientResourceManager breaks the rendering of the page.

The issue is down to a line within the CSS file that is used to import a Google Font. This previously worked fine before upgrading to 9.11.0.

The line is question is this

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap');

It doesn't make any difference if we enable/disable the minify CSS feature.

Steps to reproduce

List the precise steps to reproduce the bug:

1. Create a simple module and add to the page. In the module code load a CSS file into the page. ClientResourceManager.RegisterStyleSheet(this.Page, Globals.ResolveUrl("~/DesktopModules/MyModule/module.css"));
2. In the module.css have this line. @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap');
3. Increment the Client Resource Manager on the Server > Performance tab to regenerate a new CSS/JS file bundle.
4. View the module on the page

Current behavior

Page is not render correctly in our module.

Expected behavior

The page should look like this

Removing the @import statement fixes the page to render like this.

Affected version

• [ ] 10.00.00 alpha build
• [x] 09.11.00 release candidate
• [ ] 09.10.02 release candidate
• [ ] 09.10.01 latest supported release

Affected browser

• [x] Chrome
• [x] Firefox
• [x] Safari
• [x] Internet Explorer 11
• [x] Microsoft Edge (Classic)
• [x] Microsoft Edge Chromium

[bdukes]

I tested combining a CSS file with @import in DNN 9.6.2 and it did not correctly move the @import directive to the top of the combined CSS (causing the @import to be ignored). Are you seeing something different than that?

[markmcavoy]

Let me double check and come back to you.

[markmcavoy]

So looking at this again, its a more profound issue than the ordering of the @import statement.

When we have a @import for something as simple as a Google Font in the module.css the site renders broken and we are missing a lot styles. The page at that point is unusable.

We are using the client resource manage to generate a minify CSS and JS file, that is the key bit to getting it to break. Previously this worked fine. But start in 9.11.0 the same module.css now breaks the sites when this feature is turned on.

@bdukes Please let me know if I can be of further help?

[stale[bot]]

We have detected this issue has not had any activity during the last 90 days. That could mean this issue is no longer relevant and/or nobody has found the necessary time to address the issue. We are trying to keep the list of open issues limited to those issues that are relevant to the majority and to close the ones that have become 'stale' (inactive). If no further activity is detected within the next 14 days, the issue will be closed automatically. If new comments are are posted and/or a solution (pull request) is submitted for review that references this issue, the issue will not be closed. Closed issues can be reopened at any time in the future. Please remember those participating in this open source project are volunteers trying to help others and creating a better DNN Platform for all. Thank you for your continued involvement and contributions!