Unexpected behavior of Marp when importing css in a scoped style

[weshouman]

Version of Marp Tool

marp-vscode

Operating System

Linux

Environment

• OS version: Linux
• Marp for VS Code: [VS Code 1.80.0] [Marp extension 4/6/2023]
• Marp-CLI: [marp-cli v3.1.0] [marp-core v3.7.0]

How to reproduce

Using a scoped import in a section, for example:

---
<style scoped>
@import url('custom-theme-scoped.css');
</style>
# Section 1
---

Where the content of custom-theme-scoped.css is for example

h2 {
  color: orange;
}

Expected behavior

The current section only gets the h2 headers colored in orange.

Actual behavior

VSCode: All sections gets h2 headers gets colored in Orange

Marp CLI: No section gets the `h2 headers colored in Orange

Additional information

Reference: This question on StackOverflow addresses this issue

[yhatt]

Unfortunately, Marp (Marpit framework) has limited support about using @import for external CSS.

By the spec of CSS, @import rule(s) for importing external styles always must be at the top of the CSS document. So @import url(...) in Marp document will work, as like as that statements are always at the top of whole in the slide document. So <style scoped> is not working because @import will always be loaded first than theme styles and other inline styles.

In addition, @import will bypass scoping the output CSS itself when building Marp slide. CSS scoping is important for making a boundary of Marp app styles and slide styles. If bypassed, the outside of slides by Marp apps may not be rendered correctly, or may see inconsistent slide results by apps (as you have seen).

For better result, you should make inlining external CSS.