Fix an edge case about failure of global directive injection by CLI with --html option

.circleci/config.yml

@@ -41,15 +41,15 @@ commands:
 
       - restore_cache:
           keys:
-            - v2.3-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
-            - v2.3-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-
-            - v2.3-dependencies-{{ .Environment.CIRCLE_JOB }}-
+            - v2.4-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
+            - v2.4-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-
+            - v2.4-dependencies-{{ .Environment.CIRCLE_JOB }}-
 
       - run: yarn install --frozen-lockfile
       - steps: << parameters.postinstall >>
 
       - save_cache:
-          key: v2.3-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
+          key: v2.4-dependencies-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
           paths:
             - ~/.cache/yarn
 

CHANGELOG.md

@@ -13,6 +13,10 @@
 - Upgrade dependent packages to the latest version ([#517](https://github.com/marp-team/marp-cli/pull/517))
 - Change `id` attribute for the whole of `bespoke` template's HTML document, to avoid conflicting with slugs generated from Markdown headings ([#516](https://github.com/marp-team/marp-cli/pull/516))
 
+### Fixed
+
+- Fix an edge case about failure of global directive injection by CLI with `--html` option ([#511](https://github.com/marp-team/marp-cli/issues/511), [#519](https://github.com/marp-team/marp-cli/pull/519))
+
 ## v2.4.0 - 2023-02-19
 
 ### Changed

src/converter.ts

@@ -6,6 +6,7 @@ import chalk from 'chalk'
 import type { Browser, Page, HTTPRequest } from 'puppeteer-core'
 import { silence, warn } from './cli'
 import { Engine, ResolvedEngine } from './engine'
+import { generateOverrideGlobalDirectivesPlugin } from './engine/directive-plugin'
 import infoPlugin, { engineInfo, EngineInfo } from './engine/info-plugin'
 import metaPlugin from './engine/meta-plugin'
 import {
@@ -154,16 +155,6 @@ export class Converter {
       return undefined
     }
 
-    let additionals = ''
-
-    for (const directive of Object.keys(globalDirectives)) {
-      if (globalDirectives[directive] !== undefined) {
-        additionals += `\n<!-- ${directive}: ${JSON.stringify(
-          globalDirectives[directive]
-        )} -->`
-      }
-    }
-
     let template = this.template
     if (fallbackToPrintableTemplate && !template.printable) template = bare
 
@@ -177,9 +168,11 @@ export class Converter {
           : undefined,
       renderer: async (tplOpts) => {
         const engine = await this.generateEngine(tplOpts)
+        engine.use(generateOverrideGlobalDirectivesPlugin(globalDirectives))
+
         tplOpts.modifier?.(engine)
 
-        const ret = engine.render(stripBOM(`${markdown}${additionals}`))
+        const ret = engine.render(stripBOM(markdown))
 
         const info = engine[engineInfo]
         const outline = engine[pdfOutlineInfo]

src/engine/directive-plugin.ts

@@ -0,0 +1,30 @@
+export const generateOverrideGlobalDirectivesPlugin = (
+  directives: Record<string, any>
+) => {
+  return function overrideGlobalDirectivesPlugin(md: any) {
+    md.core.ruler.after(
+      'inline',
+      'marp_cli_override_global_directives',
+      (state) => {
+        if (state.inlineMode) return
+
+        for (const [key, value] of Object.entries(directives)) {
+          if (value !== undefined) {
+            const kv = `${key}: ${value}`
+            const marpitCommentToken = new state.Token('marpit_comment', '', 0)
+
+            marpitCommentToken.hidden = true
+            marpitCommentToken.content = kv
+            marpitCommentToken.markup = `<!-- ${kv} -->`
+            marpitCommentToken.meta = {
+              marpitParsedDirectives: { [key]: value },
+              marpitCommentParsed: 'marp-cli-overridden-global-directives',
+            }
+
+            state.tokens.push(marpitCommentToken)
+          }
+        }
+      }
+    )
+  }
+}

test/converter.ts

@@ -143,6 +143,15 @@ describe('Converter', () => {
       expect(disabled.html).toContain('<i>Hello!</i>')
     })
 
+    it('correctly applies overridden global directives even if enabled HTML option', async () => {
+      const { rendered } = await instance({
+        html: true,
+        globalDirectives: { title: 'Hello' },
+      }).convert('<p>test</p>')
+
+      expect(rendered.title).toBe('Hello')
+    })
+
     it('strips UTF-8 BOM', async () => {
       const noBOM = await instance().convert('---\ntitle: test\n---')
       const BOM = await instance().convert('\ufeff---\ntitle: test\n---')