From 051e0bc24fa79f1a0bc489abfe36ab71740a4346 Mon Sep 17 00:00:00 2001
From: Ben Firshman <ben@firshman.co.uk>
Date: Sat, 16 Jun 2018 21:23:48 +0300
Subject: [PATCH] Build CSS and add to rendered documents

---
 Dockerfile               | 13 ++++++++++++-
 package.json             |  1 +
 script/docker-run        |  1 +
 src/converter/latexml.js |  1 +
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 8db56845..860e6540 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -58,7 +58,7 @@ RUN mkdir -p /app /node_modules
 RUN chown engrafo:engrafo /app /node_modules
 WORKDIR /app
 
-# Run user as non privileged.
+# Install Node packages as non-root so that headless Chrome runs
 USER engrafo
 
 # Node
@@ -72,3 +72,14 @@ ENV PATH /node_modules/.bin:$PATH
 ENV PATH="/app/bin:${PATH}"
 
 COPY . /app
+
+# Build production CSS as root because non-root user can't write to /app for
+# some reason
+USER root
+
+# Build production CSS and JS
+RUN yarn run build
+
+# Run everything as normal user so headless Chrome runs. And, you know, for
+# security and whatever.
+USER engrafo
diff --git a/package.json b/package.json
index 6378d1a9..68045dbe 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "author": "Andreas Jansson & Ben Firshman",
   "license": "Apache-2.0",
   "scripts": {
+    "build": "parcel build src/assets/css/index.scss",
     "convert": "LATEXML_DOCKER=true bin/engrafo",
     "prettier": "prettier --write {src,tests}/**/*.js",
     "server": "LATEXML_DOCKER=true bin/engrafo-server",
diff --git a/script/docker-run b/script/docker-run
index 32578366..35c0dc88 100755
--- a/script/docker-run
+++ b/script/docker-run
@@ -1,6 +1,7 @@
 #!/bin/bash
 ENGRAFO_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )"
 
+script/run yarn build
 exec docker run \
     --init \
     -v "$ENGRAFO_DIR:/app" \
diff --git a/src/converter/latexml.js b/src/converter/latexml.js
index 99916d4b..89a1a72e 100644
--- a/src/converter/latexml.js
+++ b/src/converter/latexml.js
@@ -18,6 +18,7 @@ function createChildProcess({ htmlPath, texPath, outputDir }) {
   const latexmlArgs = [
     "--format", "html5",
     "--nodefaultresources",
+    "--css", "/app/dist/index.css",
     "--mathtex",
     "--svg",
     "--verbose",