Support CSS

GameDungeon · Jul 13, 2023 · 986d693 · 986d693
1 parent b25b22c
commit 986d693
Show file tree

Hide file tree

Showing 12 changed files with 761 additions and 447 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "url": "https://gamedungeon.github.io/Tiddly2PDF/",
   "license": "MIT",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "reset": "rimraf ./**/node_modules",
     "clean": "rimraf dist",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@modern-js/eslint-config": "^2.22.1",
     "@modern-js/tsconfig": "^2.22.1",
+    "@types/css": "^0.0.33",
     "@types/html-to-pdfmake": "^2.4.1",
     "@types/node": "^20.2.5",
     "@types/pdfmake": "^0.2.2",
@@ -47,6 +48,7 @@
     "typescript": "^5.1.3"
   },
   "dependencies": {
+    "css": "^3.0.0",
     "fflate": "^0.8.0",
     "html-to-pdfmake": "^2.4.22",
     "pdfmake": "^0.2.7",

diff --git a/src/Tiddly2PDF/ExportAsPDFWidget.ts b/src/Tiddly2PDF/ExportAsPDFWidget.ts
@@ -2,6 +2,8 @@ import { IWidgetEvent } from 'tiddlywiki';
 import { widget as Widget } from '$:/core/modules/widgets/widget.js';
 import { decompressSync, strFromU8, strToU8 } from 'fflate';
 
+import css from "css";
+
 // @ts-ignore
 import pdfMake from "pdfmake/build/pdfmake";
 
@@ -77,13 +79,39 @@ class ExportAsPDF extends Widget {
     getPDFStyles() {
         let styleTiddlers = this.getTidsFromFilterTid(STYLEFILTER);
 
-        let styleJSONS: any[] = [];
+        let cssString: string = "";
         styleTiddlers.forEach(tiddler => {
-            styleJSONS.push(JSON.parse(this.getTiddlerContent(tiddler)))
+            cssString += "\n" + this.getTiddlerContent(tiddler)
+        });
+
+        let styles: css.Stylesheet = css.parse(cssString);
+
+        var parsedStyles: any = {};
+
+        styles.stylesheet!.rules.forEach((rule: css.Rule) => {
+            if(rule['type'] !== 'rule')
+                return;
+
+            rule.selectors!.forEach(selectorOrg => {
+                let selector = selectorOrg.charAt(0) == '.' ? selectorOrg.substring(1) : selectorOrg;
+                selector = selector.charAt(selector.length-1) == ':' ? selector.substring(0, selector.length-1) : selector;
+                rule.declarations!.forEach((declaration: css.Declaration) => {
+                    if(parsedStyles[selector] === undefined)
+                        parsedStyles[selector] = {}
+
+
+                    let val = declaration.value;
+                    try {
+                        val = JSON.parse(declaration.value!);
+                    } catch {
+                    }
+
+                    parsedStyles[selector][declaration.property!] = val;
+                });
+            });
         });
 
-        // @ts-ignore
-        return Object.assign(...styleJSONS);
+        return parsedStyles;
     }
 
     async createPDF() {
@@ -193,7 +221,7 @@ class ExportAsPDF extends Widget {
 
             widgetNode.render(container, null);
 
-            let bodyHtml = container.innerHTML;
+            let bodyHtml = container.innerHTML; 
 
             let title = tiddlerTitle;
             if((tiddler as any).getFieldString("pdf-title") == "hide") {
@@ -245,4 +273,4 @@ class ExportAsPDF extends Widget {
     };
 }
 
-exports.exportAsPDF = ExportAsPDF;
+exports.exportAsPDF = ExportAsPDF;
diff --git a/src/Tiddly2PDF/pdfstyles/defaultFooterStyle.tid b/src/Tiddly2PDF/pdfstyles/defaultFooterStyle.tid
@@ -1,11 +1,8 @@
 title: $:/plugins/GameDungeon/Tiddly2PDF/pdfstyles/defaultFooterStyle
 tags: $:/tags/Tiddly2PDF/pdfStyle
-type: json
 
-{
-    "pdf-footer": {
-        "alignment": "right",
-        "color": "#797979",
-        "marginRight": 24
-    }
-}
+.pdf-footer: {
+    alignment: right;
+    color: #797979;
+    marginRight: 24;
+}
diff --git a/src/Tiddly2PDF/pdfstyles/defaultPDFStyle.tid b/src/Tiddly2PDF/pdfstyles/defaultPDFStyle.tid
@@ -1,89 +1,110 @@
 title: $:/plugins/GameDungeon/Tiddly2PDF/pdfstyles/defaultStyles
 tags: $:/tags/Tiddly2PDF/pdfStyle
 type: json
+list-before:
 
-{
-    "html-b": {
-        "bold": true
-    },
-    "html-strong": {
-        "bold": true
-    },
-    "html-u": {
-        "decoration": "underline"
-    },
-    "html-s": {
-        "decoration":  "lineThrough"
-    },
-    "html-em": {
-        "italics": true
-    },
-    "html-i": {
-        "italics": true
-    },
-    "html-h1": {
-        "fontSize": 24, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-h2": {
-        "fontSize": 20, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-h3": {
-        "fontSize": 16, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-h4": {
-        "fontSize": 18, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-h5": {
-        "fontSize": 14, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-h6": {
-        "fontSize": 12, 
-        "bold": true, 
-        "marginBottom": 5
-    },
-    "html-a": {
-        "color": "blue", 
-        "decoration": "underline"
-    },
-    "html-strike": {
-        "decoration": "lineThrough"
-    },
-    "html-p": {
-        "margin": [0, 5, 0, 10]
-    },
-    "html-ul": {
-        "marginBottom": 5
-    },
-    "html-li": {
-        "marginLeft": 5
-    },
-    "html-table": {
-        "marginBottom": 5
-    },
-    "html-th": {
-        "bold": true, 
-        "fillColor": "#EEEEEE"
-    },
-    "bold": {
-        "bold": true
-    },
-    "italic": {
-        "italics": true
-    },
-    "center": {
-        "alignment": "center"
-    },
-    "tc-inline-style": {
-        "background": "#ffff78"
-    }
-}
+.html-b: {
+    bold: true;
+}
+
+.html-strong: {
+    bold: true;
+}
+
+.html-u: {
+    decoration: underline;
+}
+
+.html-s: {
+    decoration:  lineThrough;
+}
+
+.html-em: {
+    italics: true;
+}
+
+.html-i: {
+    italics: true;
+}
+
+.html-h1: {
+    fontSize: 24;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-h2: {
+    fontSize: 20;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-h3: {
+    fontSize: 16;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-h4: {
+    fontSize: 18;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-h5: {
+    fontSize: 14;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-h6: {
+    fontSize: 12;
+    bold: true;
+    marginBottom: 5;
+}
+
+.html-a: {
+    color: blue;
+    decoration: underline;
+}
+
+.html-strike: {
+    decoration: lineThrough;
+}
+
+.html-p: {
+    margin: [0, 5, 0, 10];
+}
+
+.html-ul: {
+    marginBottom: 5;
+}
+
+.html-li: {
+    marginLeft: 5;
+}
+
+.html-table: {
+    marginBottom: 5;
+}
+
+.html-th: {
+    bold: true;
+    fillColor: #EEEEEE;
+}
+
+.bold: {
+    bold: true;
+}
+
+.italic: {
+    italics: true;
+}
+
+.center: {
+    alignment: center;
+}
+
+.tc-inline-style: {
+    background: #ffff78;
+}
diff --git a/src/Tiddly2PDF/pdfstyles/titleStyle.tid b/src/Tiddly2PDF/pdfstyles/titleStyle.tid
@@ -2,8 +2,8 @@ title: $:/plugins/GameDungeon/Tiddly2PDF/pdfstyles/titleStyle
 tags: $:/tags/Tiddly2PDF/pdfStyle
 type: json
 
-{
-    "pdf-title": {
-        "alignment": "center"
-    }
+
+.pdf-title: {
+    alignment: center
 }
+
diff --git a/src/Tiddly2PDF/plugin.info b/src/Tiddly2PDF/plugin.info
@@ -4,7 +4,7 @@
   "author": "GameDungeon",
   "description": "Export Tiddlers as Styled PDFs",
   "plugin-type": "plugin",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "list": [
     "readme",
     "credits"

diff --git a/wiki/tiddlers/Compatibility.tid b/wiki/tiddlers/Compatibility.tid
@@ -0,0 +1,9 @@
+created: 20230713223907367
+modified: 20230713224549695
+tags: pdf
+title: Compatibility
+type: text/vnd.tiddlywiki
+
+! highlight.js
+
+Grab a style sheet from [[here|https://github.com/highlightjs/highlight.js/tree/main/src/styles]], and use it like any other Tiddly2PDF style. 
diff --git a/wiki/tiddlers/PDF Styling.tid b/wiki/tiddlers/PDF Styling.tid
@@ -1,28 +1,26 @@
 created: 20230607192040212
 list-after: Tiddly2PDF Documentation
-modified: 20230630175548101
+modified: 20230713221359781
 tags: pdf
 title: PDF Styling
 type: text/vnd.tiddlywiki
 
-PDFs are styled with a CSS-like system used by PDFMake. Stylesheet tiddlers are supposed to be JSON tiddlers. 
-
+PDFs are styled with a CSS-like system used by PDFMake. Stylesheet tiddlers are written like css, but many of the properties are different. 
 The PDF Stylesheets option is a filter to grab stylesheets. By default it is set to get all tiddlers tagged with "$:/tags/Tiddly2PDF/pdfStyle"
 
 The [[available styling options|https://pdfmake.github.io/docs/0.1/document-definition-object/styling/#style-properties]]  are listed here. (''These are different then the basic CSS ones, and many CSS ones are not supported'')
 
-Styles can be applied by adding a class matching a style key to an element. 
+Styles can be applied by adding a class matching a style key to an element. Styles referring to html elements have a html- prefix, while styles referring to classes do not. 
 
 Example:
 
-```
-{
-    "html-ele": {
-        "bold": true
-    },
-    "other-class": {
-        "fontSize": 26
-    }
+```css
+.html-ele, .bold: {
+    bold: true
+}
+
+.other-class: {
+    fontSize: 26
 }
 ```