Repository: Mogztter/asciidoctor-pdf.js (js)

Issue:
Allow to specify multiple stylesheets (values are separated by semicolon)
In order to promote, re-usability and composability, I think we should be able define multiple stylesheets.

Upstream issue: https://github.com/asciidoctor/asciidoctor/issues/3471

Pull request:
resolves #103 allow to specify multiple stylesheets

Patch:
diff --git a/lib/document/templates.js b/lib/document/templates.js
index a034c24..43a44b6 100644
--- a/lib/document/templates.js
+++ b/lib/document/templates.js
@@ -31,33 +31,39 @@ const titleDocumentStyleContent = fs.readFileSync(`${stylesDirectoryPath}/featur
 const titlePageStyleContent = fs.readFileSync(`${stylesDirectoryPath}/features/title-page-numbering.css`, 'utf8')
 
 const styles = (node) => {
-  const stylesheet = node.getAttribute('stylesheet')
-  if (stylesheet && stylesheet !== '') {
-    let href
-    if (path.isAbsolute(stylesheet)) {
-      href = stylesheet
-    } else {
-      const stylesDirectory = node.getAttribute('stylesdir')
-      let start = node.getDocument().getBaseDir()
-      if (stylesDirectory) {
-        if (path.isAbsolute(stylesDirectory)) {
-          start = stylesDirectory
+  const stylesheetAttribute = node.getAttribute('stylesheet')
+  if (stylesheetAttribute && stylesheetAttribute.trim() !== '') {
+    return stylesheetAttribute
+      .split(';')
+      .map(value => value.trim())
+      .filter(value => value !== '')
+      .map(stylesheet => {
+        let href
+        if (path.isAbsolute(stylesheet)) {
+          href = stylesheet
         } else {
-          start = path.join(node.getDocument().getBaseDir(), stylesDirectory)
+          const stylesDirectory = node.getAttribute('stylesdir')
+          let start = node.getDocument().getBaseDir()
+          if (stylesDirectory) {
+            if (path.isAbsolute(stylesDirectory)) {
+              start = stylesDirectory
+            } else {
+              start = path.join(node.getDocument().getBaseDir(), stylesDirectory)
+            }
+          } else {
+            start = node.getDocument().getBaseDir()
+          }
+          href = path.join(start, stylesheet)
         }
-      } else {
-        start = node.getDocument().getBaseDir()
-      }
-      href = path.join(start, stylesheet)
-    }
-    return `<link href="${href}" rel="stylesheet">`
-  } else {
-    return `<style>
+        return `<link href="${href}" rel="stylesheet">`
+      })
+      .join('\n')
+  }
+  return `<style>
 ${asciidoctorStyleContent}
 ${documentStyleContent}
 ${titlePageStyle(node)}
 </style>`
-  }
 }
 
 const titlePageStyle = (node) => {


Test patch:
diff --git a/test/fixtures/theme.css b/test/fixtures/theme.css
new file mode 100644
index 0000000..c503309
--- /dev/null
+++ b/test/fixtures/theme.css
@@ -0,0 +1,3 @@
+#footer {
+  background-color: var(--footer-bg-color);
+}
diff --git a/test/fixtures/variable.css b/test/fixtures/variable.css
new file mode 100644
index 0000000..ccd3a1a
--- /dev/null
+++ b/test/fixtures/variable.css
@@ -0,0 +1,4 @@
+:root {
+  --main-bg-color: #efefef1c;
+  --footer-bg-color: #454545;
+}
diff --git a/test/templates_test.js b/test/templates_test.js
index 3350752..8564640 100644
--- a/test/templates_test.js
+++ b/test/templates_test.js
@@ -72,6 +72,14 @@ Guillaume Grossetie
     expect($(`head > link[href="${__dirname}/fixtures/custom.css"]`).length).to.equal(1)
   })
 
+  it('should load multiple stylesheets', () => {
+    const doc = asciidoctor.load('Hello world', { attributes: { stylesheet: `${__dirname}/fixtures/variable.css; ;${__dirname}/fixtures/theme.css;` } })
+    const $ = cheerio.load(doc.convert({ header_footer: true }))
+    expect($('head').html()).to.not.have.string('Asciidoctor default stylesheet')
+    expect($(`head > link[href="${__dirname}/fixtures/variable.css"]`).length).to.equal(1)
+    expect($(`head > link[href="${__dirname}/fixtures/theme.css"]`).length).to.equal(1)
+  })
+
   describe('Stem', () => {
     const fileUrl = require('file-url')
     const mathjaxFileUrl = fileUrl(require.resolve('mathjax/es5/tex-chtml-full.js'))