feat: use root styles & fix pre handler

dantio · Jun 24, 2022 · d841667 · d841667
1 parent 5eb27b8
commit d841667
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 38 deletions.
diff --git a/examples/all.html b/examples/all.html
@@ -41,7 +41,7 @@ <h6 data-toc-item>H6</h6>
     <br>
     <img src="https://picsum.photos/100/200" width="100px" height="100px" alt="image"
          style="opacity: 0.4;object-fit: contain"/>
-    <div style="display: flex; gap: 20px; page-break-after: always">
+    <div style="display: flex; gap: 10px; page-break-after: always">
         <b style="width: 200px;">Bold Text <small>Small</small></b>
         <i>Italic Text</i>
         <i>Column 3</i>

diff --git a/examples/tables.html b/examples/tables.html
@@ -1,24 +1,28 @@
 <div>
     <h1>Tables</h1>
-    <p>Like in Browser table borders are not collapsed.</p>
+    <p>As in the browser, the table borders are separated by default.</p>
     <div style="display: flex; align-items: flex-start">
         <table>
             <tr>
-                <th style="text-align: center">td align center</th>
+                <th style="text-align: center;"><sup>td align center</sup></th>
+                <th style="text-align: right"><sup>colspan</sup></th>
             </tr>
             <tr>
-                <td style="text-align: right">td align right</td>
+                <td style="text-align: right" colspan="2">is supported</td>
             </tr>
         </table>
 
-        <table style="border: 1px dashed black">
-            <tr>
-                <th style="text-align: center; background: darkslategray; color: white">th background</th>
-            </tr>
-            <tr>
-                <td style="text-align: right; border: 3px solid green">td border</td>
-            </tr>
-        </table>
+        <figure>
+            <table style="border: 1px dashed black; border-spacing: 10px">
+                <tr>
+                    <th style="text-align: center; background: darkslategray; color: white">th background</th>
+                </tr>
+                <tr>
+                    <td style="text-align: right; border: 3px solid green">td border</td>
+                </tr>
+            </table>
+            <figcaption>border-spacing: 10px</figcaption>
+        </figure>
 
         <table style="padding: 20px; border: 1px solid red; background: #7f7f7f">
             <tr>

diff --git a/src/global-styles.ts b/src/global-styles.ts
@@ -1,6 +1,9 @@
-export const globalStyles = () => ({
+import {CssStyles} from './types/global.types.js';
+
+export const globalStyles = (): CssStyles => ({
   ':root': {
-    'font-size': '16px'
+    'font-size': '16px',
+    'line-height': 1.2
   },
   h1: {
     'font-size': '32px',
@@ -60,6 +63,10 @@ export const globalStyles = () => ({
     'font-size': '22px',
     'vertical-align': 'sub'
   },
+  sup: {
+    'font-size': '13px',
+    'vertical-align': 'super'
+  },
   small: {
     'font-size': '13px'
   },
@@ -81,11 +88,11 @@ export const globalStyles = () => ({
     'margin-top': '16px',
     'margin-bottom': '16px'
   },
-  table: {
-    border: 'none',
+  figure: {
+    padding: '16px 40px'
   },
   tr: {
-  /*  margin: '4px 0'*/
+    /*  margin: '4px 0'*/
   },
   th: {
     'font-weight': 'bold',

diff --git a/src/parser/index.ts b/src/parser/index.ts
@@ -5,7 +5,8 @@ import {
   IS_NEWLINE,
   IS_WHITESPACE,
   META,
-  NODE, POST_HANDLER,
+  NODE,
+  POST_HANDLER,
   START_WITH_NEWLINE,
   START_WITH_WHITESPACE,
   STYLE
@@ -28,7 +29,7 @@ import {parseTable} from './parse-table.js';
 import {parseText} from './parse-text.js';
 
 const parseAsHTMLCollection = (el: El): el is Element => ['TABLE', 'TBODY', 'TR', 'COLGROUP', 'COL', 'UL', 'OL', 'SELECT'].includes(el.nodeName) && 'children' in el;
-export const stackRegex = /^(address|blockquote|body|center|colgroup|dir|div|dl|fieldset|form|h[1-6]|hr|isindex|menu|noframes|noscript|ol|p|pre|table|ul|dd|dt|frameset|li|tbody|td|tfoot|th|thead|tr|html)$/i;
+export const stackRegex = /^(address|blockquote|body|center|colgroup|dir|div|dl|fieldset|figure|figcaption|form|h[1-6]|hr|isindex|menu|noframes|noscript|ol|p|pre|table|ul|dd|dt|frameset|li|tbody|td|tfoot|th|thead|tr|html)$/i;
 export const isStackItem = (el: El) => stackRegex.test(el.nodeName);
 
 export const parseChildren = (el: El, ctx: Context, parentItem?: LazyItem): Item[] => {
@@ -278,7 +279,7 @@ const getItemByRule = (el: El, ctx: Context): LazyItem | null => {
   throw new Error('Unsupported Node Type: ' + (el as El).nodeType);
 };
 
-const parseLazyChildren = (item: MetaNode<LazyItem>, ctx: Context) => {
+const evaluateLazyChildren = (item: MetaNode<LazyItem>, ctx: Context) => {
   const el = item[META][NODE];
 
   if ('stack' in item && typeof item.stack === 'function') {
@@ -299,21 +300,31 @@ const parseLazyChildren = (item: MetaNode<LazyItem>, ctx: Context) => {
   }
 };
 
-export const processItems = (lazyItem: MetaNode<LazyItem>, ctx: Context, parentItem?: LazyItem): MetaNode<Item> | null => {
-  const item = preHandleLazyItem(lazyItem);
-  if (item === null) {
+const parseLazyChildren = (item: MetaNode<LazyItem>, ctx: Context, parentItem?: LazyItem) => {
+  if (typeof item === 'string') {
+    return preHandleLazyItem(item);
+  }
+
+  const props = computeProps(item, ctx, parentItem);
+  Object.assign(item, props);
+
+  const preHandled = preHandleLazyItem(item);
+  if (preHandled === null) {
     return null;
   }
 
-  if (typeof item !== 'string') {
-    const props = computeProps(item, ctx, parentItem);
+  evaluateLazyChildren(preHandled, ctx);
 
-    Object.assign(item, props);
+  return preHandled;
+};
 
-    parseLazyChildren(item, ctx);
+export const processItems = (item: MetaNode<LazyItem>, ctx: Context, parentItem?: LazyItem): MetaNode<Item> | null => {
+  const withChildren = parseLazyChildren(item, ctx, parentItem);
+  if (withChildren === null) {
+    return null;
   }
 
-  return postHandleItem(item as MetaNode<Item>);
+  return postHandleItem(withChildren as MetaNode<Item>);
 };
 
 export const parseByRule = (el: El, ctx: Context, parentItem?: LazyItem): MetaNode<Item> | null => {

diff --git a/src/parser/parse-table.ts b/src/parser/parse-table.ts
@@ -143,7 +143,7 @@ export const parseTable = (): LazyTable | null => {
         }
 
         const collapseBorder = item?.[META]?.[STYLE]?.['border-collapse'] === 'collapse';
-        const percentageWidth = (item?.[META]?.[STYLE]?.['width']?.indexOf('%') || -1) > -1;
+        const percentageWidth = String(item?.[META]?.[STYLE]?.['width']).indexOf('%') > -1;
 
         const longestRow = rows.reduce((a, b) => a.length <= b.length ? b : a).length;
 

diff --git a/src/props/index.ts b/src/props/index.ts
@@ -28,7 +28,7 @@ export const computeProps = (item: MetaNode<LazyItemNode>, ctx: Context, parentI
 
   const elementStyles = selectStyles(selectors, styles);
   const inheritedStyles = inheritStyle(el, parentItem);
-  const cssStyles: Styles = Object.assign({}, elementStyles, inheritedStyles, getInlineStyles(el));
+  const cssStyles: Styles = Object.assign({}, rootStyles, inheritedStyles, elementStyles, getInlineStyles(el));
 
   const styleProps = styleToProps(item, ctx, cssStyles, rootStyles);
 

diff --git a/src/props/inherit-style.ts b/src/props/inherit-style.ts
@@ -9,8 +9,8 @@ export const inheritStyle = (el: El, parentItem?: LazyItem): Styles => {
 
   const styles = parentItem[META]?.[STYLE] || {};
 
-  // TR does not really exist
-  const isTr = parentItem?.[META]?.[NODE]?.nodeName === 'TR';
+  // TODO check how to proper inherit BG
+  const inheritBG = parentItem?.[META]?.[NODE]?.nodeName === 'TR' || parentItem && 'text' in parentItem;
 
   // TODO what do we want to exclude ?
   const pick: Record<string, boolean> = {
@@ -24,8 +24,8 @@ export const inheritStyle = (el: El, parentItem?: LazyItem): Styles => {
     'list-style': true,
     'text-align': true,
 
-    background: isTr,
-    'background-color': isTr,
+    background: inheritBG,
+    'background-color': inheritBG,
     'font-style': true,
     'font-feature-settings': true,
     'white-space': true,

diff --git a/src/props/padding.ts b/src/props/padding.ts
@@ -1,4 +1,4 @@
-import {MARGIN, META, PADDING, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_TOP} from '../constants.js';
+import {META, PADDING, POS_BOTTOM, POS_LEFT, POS_RIGHT, POS_TOP} from '../constants.js';
 import {LazyItem} from '../types/lazy-item.types.js';
 import {ComputedProps} from '../types/props.types.js';
 import {isTable, isTdOrTh} from '../utils/type-guards.js';
@@ -42,7 +42,7 @@ export const computePadding = (item: LazyItem, props: ComputedProps, directive:
     props[META][PADDING] = [...padding];
 
     if (!isTdOrTh(item)) {
-      const margin = props[META][MARGIN] || item[META]?.[MARGIN] || [0, 0, 0, 0];
+      const margin = props.margin ?? [0, 0, 0, 0];
       props.margin = margin;
       const marginValue = margin[index];
       props.margin[index] = value + marginValue;

diff --git a/src/props/style-to-props.ts b/src/props/style-to-props.ts
@@ -237,7 +237,7 @@ export const styleToProps = (item: LazyItemNode, ctx: Context, styles: Styles, r
         props.opacity = Number(parseFloat(value));
         break;
       case 'gap':
-        props.columnGap = toUnit(value);
+        props.columnGap = toUnit(value) / 2; // TODO check
         break;
       case 'list-style-type':
       case 'list-style':

diff --git a/src/types/global.types.ts b/src/types/global.types.ts
@@ -6,5 +6,5 @@ export type El = Element | Node;
 export type NodeRule = (el: El, ctx: Context) => LazyItem | null | undefined
 export type StyleRule = (directive: string, value: string, props: ComputedProps) => boolean | undefined
 
-export type Styles = Record<string, string>;
+export type Styles = Record<string, string | number>;
 export type CssStyles = Record<string, Styles>;