search

tmedwards / sugarcube-2

SugarCube is a free (gratis and libre) story format for Twine/Twee.
https://www.motoslave.net/sugarcube/2/
BSD 2-Clause "Simplified" License
185 stars 42 forks source link

CSS rule precedence requirements #132

Closed zen14774 closed 3 years ago

zen14774 commented 3 years ago

Describe the bug.

I encountered an issue when using Sugarcube and Tweego, when using multiple 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.

Both Tweego and SugarCube seem to apply some bundling of CSS, which break these rules.

I opened a bug for Tweego here explaining the issue in detail. Then I tried to work around the issue but found that SugarCube does something similar on top, which results in the same problem.

zen14774 commented 3 years ago

I accidentally sent this early and I don't have time fill in all the details right now. I will re-open it when I can give more details.

tmedwards commented 3 years ago

For resources bundled into the compiled file, use a compiler that supports bundling libraries separately from the story resources—e.g., Tweego's module option (-m SRC, --module=SRC).

For resources included at runtime, look into the importScripts() and importStyles() functions.

zen14774 commented 3 years ago

Thank you, bundling it separately with -m worked for the case of separate CSS files. I think it still breaks when using [stylesheet] (with Tweego) but don't think I'm going to need that.