CSS nesting

[Chiogros]

Hey!

First, thank you for your gorgeous work!

Since a few times, CSS supports nesting like SCSS does and this feature is supported on several browsers like Firefox, Chrome and Safari.

I have tried to use it on Marp with VScode:

section {
    > ul {
        /* Deleted content for clearer reading */
    }
}

Which, once exported to HTML is rendered:

div#\:\$p>svg>foreignObject>section {
  div#\:\$p>svg>foreignObject>section>ul {
  }
}

However, for nesting to work it should be rendered:

div#\:\$p>svg>foreignObject>section {
  >ul {
  }
}

Would that feature require a big amount of work for Marp to support it?
I'm not used to TS nor Web stack... but still I will give a try hoping to be able to contribute!

Thank you :)

[yhatt]

Marpit framework, the base engine of Marp, is not yet supported CSS nesting because the style converter of Marpit are depending on styles that not including nests.

Probably that would have to redesign of the architecture for handling styles, and need big amount of works to support CSS nesting in current Marpit with keeping an original nesting on the result. So we postponed supporting CSS nesting to the re-architectured next-gen framework. Our roadmap about the next-gen framework has included the task of right support for CSS nesting, : https://github.com/orgs/marp-team/projects/2?pane=issue&itemId=41960271

If there is no need to keep nesting on the result, I think prepending preprocess with postcss-nesting to make flatten nested styles would be working well.
https://github.com/marp-team/marpit/blob/c481ff8687527169dcf5e87eedf06c9960759b00/src/theme_set.js#L278

[yhatt]

UPDATE: Initial support for CSS nesting has been shipped as Marpit v3.1.0 (marp-team/marpit#399).

Marpit will try to make flatten nested CSS rules before processing powered by postcss-nesting (CSS Nesting Module compliant), for getting compatibility with CSS manipulations by current Marpit. So the result of styling might become slightly different from native CSS nesting.