CSS rule precedence requirements

[zen14774]

Describe the bug. I encountered an issue when using CSS files with @import rules, only the ones in the first file are actually applied.

According to MDN:

Imported rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

Tweego seems to bundle all the files wrapping them in a single <style> tag, which causes @import rules in files other than the first to appear below all the CSS rules from the first file.

To Reproduce: I was able to reproduce the issue using 3 files:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
h1 { font-family: 'Pacifico'; }

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
h2 { font-family: 'Dancing Script'; }

:: StoryTitle
CSS Trouble

:: StoryData
{
    "ifid": "16a54ca0-77f6-4ca5-b201-ba9d62e56e74",
    "format": "SugarCube",
    "format-version": "2.33.2"
}

:: Start
<h1>The quick brown fox</h1>
<h2>jumps over the lazy dog</h2>

When opening the resulting HTML only the first title is displayed with the desired font.

Expected behavior. I'm looking for a solution that allows me to include any third party CSS files without having to modify them. I think using separate <style> tags for each CSS file would work.

Project details.

• Tweego Version: 2.1.1
• Browser & Version: Chromium 93, Firefox 91

[tmedwards]

The module option (-m SRC, --module=SRC) exists specifically to bundle 3rd-party libraries. I suggest looking into it.

[zen14774]

Moving the CSS to a separate directory and using -m works fine, thanks.

Out of curiosity I also tried using two [stylesheet] passages with the same CSS and it seems to have the same limitation. That's not something I need to use or anything but I thought I'd mention it just in case.