Merge pull request #47 from marp-team/improve-style-customization

Improve appending/prepending style on ThemeSet#pack

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- **[BREAKING]** Improve appending/prepending style on `ThemeSet#pack` ([#47](https://github.com/marp-team/marpit/pull/47))
+  - `ThemeSet#pack`'s [`appendStyle` option](https://github.com/marp-team/marpit/blob/c1fce7c7f80fb563111b8b0e34d98eabc5c834a3/src/theme_set.js#L171) is renamed to [`after`](https://github.com/marp-team/marpit/blob/e68f0bb38a6d894cce80fa811d41952635a886b6/src/theme_set.js#L172).
 - Migrate test framework from mocha to jest ([#43](https://github.com/marp-team/marpit/pull/43))
 - Migrate CI from Travis CI to CircleCI ([#44](https://github.com/marp-team/marpit/pull/44))
 - Mark Marpit's `options` property as immutable ([#46](https://github.com/marp-team/marpit/pull/46))

index.d.ts

@@ -19,7 +19,8 @@ declare module '@marp-team/marpit' {
   }
 
   type ThemeSetPackOptions = {
-    appendStyle?: string
+    after?: string
+    before?: string
     containers?: Element[]
     printable?: boolean
     inlineSVG?: boolean
@@ -39,6 +40,7 @@ declare module '@marp-team/marpit' {
     protected applyMarkdownItPlugins(md: any): void
     protected renderMarkdown(markdown: string): string
     protected renderStyle(theme?: string): string
+    protected themeSetPackOptions(): ThemeSetPackOptions
   }
 
   export class Element {

src/marpit.js

@@ -170,12 +170,17 @@ class Marpit {
    * @returns {string} The result string of rendering style.
    */
   renderStyle(theme) {
-    return this.themeSet.pack(theme, {
-      appendStyle: this.lastStyles && this.lastStyles.join('\n'),
+    return this.themeSet.pack(theme, this.themeSetPackOptions())
+  }
+
+  /** @private */
+  themeSetPackOptions() {
+    return {
+      after: this.lastStyles ? this.lastStyles.join('\n') : undefined,
       containers: [...this.containers, ...this.slideContainers],
       inlineSVG: this.options.inlineSVG,
       printable: this.options.printable,
-    })
+    }
   }
 }
 

src/theme_set.js

@@ -168,7 +168,8 @@ class ThemeSet {
    * @param {string} name The theme name. It will use the instance's default
    *     theme or scaffold theme when a specific named theme does not exist.
    * @param {Object} [opts] The option object passed by {@link Marpit#render}.
-   * @param {string} [opts.appendStyle] A CSS string to append into theme.
+   * @param {string} [opts.after] A CSS string to append into after theme.
+   * @param {string} [opts.before] A CSS string to prepend into before theme.
    * @param {Element[]} [opts.containers] Container elements wrapping whole
    *     slide deck.
    * @param {boolean} [opts.printable] Make style printable to PDF.
@@ -183,20 +184,23 @@ class ThemeSet {
     if (opts.inlineSVG)
       slideElements.unshift({ tag: 'svg' }, { tag: 'foreignObject' })
 
-    let append
+    const additionalCSS = css => {
+      if (!css) return undefined
 
-    try {
-      if (opts.appendStyle)
-        append = postcss([postcssImportSuppress(this)]).process(
-          opts.appendStyle
-        ).css
-    } catch (e) {
-      // Ignore invalid style
+      try {
+        return postcss([postcssImportSuppress(this)]).process(css).css
+      } catch (e) {
+        return undefined
+      }
     }
 
+    const after = additionalCSS(opts.after)
+    const before = additionalCSS(opts.before)
+
     const packer = postcss(
       [
-        append && (css => css.last.after(append)),
+        before && (css => css.first.before(before)),
+        after && (css => css.last.after(after)),
         postcssImportReplace(this),
         opts.printable &&
           postcssPrintable({