Pass css file into PDFMake styles

Question

I'm currently trying to print a string containing HTML markup to pdf using the HTML-to-pdfmake and pdf make libraries. The HTML contains a lot of classes and ids and I have styling for those in a CSS file. Is there a way to pass that CSS file to the styles attribute in pdfmake instead of writing all the styles in the content definition section?

This is what I currently have:

   let documentDefinition = {
    pageSize: "A4",
    pageOrientation: "portrait",
    footer: footer,
    header: header,
    content: [
      {
        text: htmlToPdfmake(documentBody, {
          window: window,
        }),
      },
    ],
    styles: {
      header: {
        fontSize: 22,
        bold: true,
      },
      anotherStyle: {
        italics: true,
        alignment: "right",
      },
    },
  }

The goal would be to reference these styles from a css instead as I have a 1000 lines long css styling. So would be something like this:

   let documentDefinition = {
    pageSize: "A4",
    pageOrientation: "portrait",
    footer: footer,
    header: header,
    content: [
      {
        text: htmlToPdfmake(documentBody, {
          window: window,
        }),
      },
    ],
    styles: {
      path: "./styles/style.css"

    }
     
  }

Answer 1

FYI: pdfmake style's are not CSS and the html-to-pdfmake module only supports a limited set of CSS properties.

CSS can create very complex design, however this framework can only handle the most simple HTML / CSS. The support of CSS style is limited and might not work in all cases with all values:

Having said that, if you want to externalize this part of your configuration you can move it to a different JS (or even JSON) file and load it using your favorite module loader, as you would with any regular JS or JSON file.