Add base styles

examples/assets/styles/index.css

-html {
+/*html {
     box-sizing: border-box;
-}
-*, *:before, *:after {
+}*/
+/**, *:before, *:after {
     box-sizing: border-box;
-}
+}*/
 
 :root {
     /* --width: 8.5in; */
@@ -11,12 +11,6 @@ html {
     --margin: 1.2in;
 }
 
-@page {
-  size: var(--width) var(--height);
-  margin: 0;
-  padding: 0;
-}
-
 /* section {
   break-before: column;
 } */
@@ -87,8 +81,8 @@ html {
 
 }
 
-.page {
-  /* border: 1px solid black; */
+/*.page {
+  box-sizing: border-box;
   width: var(--width);
   height: var(--height);
   overflow: hidden;
@@ -98,6 +92,10 @@ html {
   grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
 }
 
+.page * {
+  box-sizing: border-box;
+}
+
 .top {
   width: var(--width);
   height: var(--margin-top);
@@ -128,7 +126,6 @@ html {
   width: var(--margin-right);
   display: flex;
   flex-direction: column;
-  position: absolute;
   right: 0;
   grid-column: right;
   grid-row: page;
@@ -167,7 +164,6 @@ html {
 .left {
   height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
   width: var(--margin-left);
-  top: var(--margin-top);
   display: flex;
   flex-direction: column;
   grid-column: left;
@@ -186,24 +182,27 @@ html {
   height: 100%;
 }
 
-.page .top .top-right {
-  /* position: relative; */
-  /* flex: none; */
-}
-
 .page {
   counter-increment: page;
 }
 
 
-.page .content {
-  /* width: 100%;
+.page .top > div,
+.page .bottom > div {
   height: 100%;
   display: flex;
   justify-content: center;
-  align-items: center; */
+  align-items: center;
 }
 
+.page .left > div,
+.page .right > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}*/
+
 
 @media screen {
   .top .top-left-corner,

src/styles/base.js

+export default `
+.page {
+  box-sizing: border-box;
+  width: var(--width);
+  height: var(--height);
+  overflow: hidden;
+  position: relative;
+  display: grid;
+  grid-template-columns: [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right);
+  grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
+}
+
+.page * {
+  box-sizing: border-box;
+}
+
+.top {
+  width: var(--width);
+  height: var(--margin-top);
+  display: flex;
+  grid-column: left / right;
+  grid-row: header;
+}
+
+.top .top-left-corner {
+  width: var(--margin-left);
+  height: var(--margin-top);
+  flex: none;
+}
+
+.top .top-right-corner {
+  width: var(--margin-right);
+  height: var(--margin-top);
+  flex: none;
+}
+
+.top > div {
+  flex-grow: 1;
+  position: relative;
+}
+
+.right {
+  height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
+  width: var(--margin-right);
+  display: flex;
+  flex-direction: column;
+  right: 0;
+  grid-column: right;
+  grid-row: page;
+}
+
+.right > div {
+  flex-grow: 1;
+  position: relative;
+}
+
+.bottom {
+  width: var(--width);
+  height: var(--margin-bottom);
+  display: flex;
+  grid-column: left / right;
+  grid-row: footer;
+}
+
+.bottom .bottom-left-corner {
+  width: var(--margin-left);
+  height: var(--margin-bottom);
+  flex: none;
+}
+
+.bottom .bottom-right-corner {
+  width: var(--margin-right);
+  height: var(--margin-bottom);
+  flex: none;
+}
+
+.bottom > div {
+  flex-grow: 1;
+  position: relative;
+}
+
+.left {
+  height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
+  width: var(--margin-left);
+  display: flex;
+  flex-direction: column;
+  grid-column: left;
+  grid-row: page;
+}
+
+.left > div {
+  flex-grow: 1;
+  position: relative;
+}
+
+.page > .area {
+  grid-column: center;
+  grid-row: page;
+  width: 100%;
+  height: 100%;
+}
+
+.page {
+  counter-increment: page;
+}
+
+
+.page .top > div,
+.page .bottom > div {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.page .left > div,
+.page .right > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+`;

src/styles/sheet.js

@@ -25,6 +25,7 @@ class Sheet {
 
 		if ("*" in this.pages) {
 			this.addRootVars(this.ast, this.pages["*"].width, this.pages["*"].height);
+			this.addRootPage(this.ast, this.pages["*"].width, this.pages["*"].height);
 		}
 	}
 
@@ -33,7 +34,6 @@ class Sheet {
 		// send to csstree
 		let ast = csstree.parse(text);
 		// return ast
-		// console.log(ast);
 		return ast;
 	}
 
@@ -120,16 +120,6 @@ class Sheet {
 
 		this.addPageClasses(pages, ast);
 		// return collection of pages
-		/*
-		{
-			":" : {},
-			":left" : {},
-			":right" : {},
-			":first" : {},
-			":black" : {},
-			"named" : {},
-		}
-		*/
 		return pages;
 	}
 
@@ -348,13 +338,6 @@ class Sheet {
 		let selectors = new csstree.List();
 		let name;
 
-		// let selector = selectorList.createItem({
-		// 	type: 'Selector',
-		// 	children: selectors
-		// });
-    //
-		// selectorList.insert(selectors);
-
 		selectors.insert(selectors.createItem({
 			type: 'ClassSelector',
 			name: 'page'
@@ -368,12 +351,12 @@ class Sheet {
 			}));
 		}
 
-		if (page.name && page.psuedo) {
-			selectors.insert(selectors.createItem({
-				type: 'Combinator',
-				name: " "
-			}));
-		}
+		// if (page.name && page.psuedo) {
+		// 	selectors.insert(selectors.createItem({
+		// 		type: 'Combinator',
+		// 		name: " "
+		// 	}));
+		// }
 
 		// PsuedoSelector
 		if (page.psuedo) {
@@ -485,8 +468,8 @@ class Sheet {
 	}
 
 	addMarginalia(page, list, item) {
-		for (let name in page.marginalia) {
-			let item = page.marginalia[name];
+		for (let loc in page.marginalia) {
+			let item = page.marginalia[loc];
 			let selectorList = new csstree.List();
 			let selectors = new csstree.List();
 
@@ -526,7 +509,7 @@ class Sheet {
 
 			selectors.insert(selectors.createItem({
 				type: 'ClassSelector',
-				name: name
+				name: loc
 			}));
 
 			selectors.insert(selectors.createItem({
@@ -620,6 +603,87 @@ class Sheet {
 		ast.children.append(rule);
 	}
 
+	addRootPage(ast, width, height) {
+		/*
+		@page {
+		  size: var(--width) var(--height);
+		  margin: 0;
+		  padding: 0;
+		}
+		*/
+		let children = new csstree.List();
+		let dimensions = new csstree.List();
+
+		dimensions.append(dimensions.createItem({
+			type: 'Dimension',
+			unit: width.unit,
+			value: width.value
+		}));
+
+		dimensions.append(dimensions.createItem({
+			type: 'WhiteSpace',
+			value: " "
+		}));
+
+		dimensions.append(dimensions.createItem({
+			type: 'Dimension',
+			unit: height.unit,
+			value: height.value
+		}));
+
+		children.append(children.createItem({
+			type: 'Declaration',
+			property: "size",
+			loc: null,
+			value: {
+				type: "Value",
+				children: dimensions
+			}
+		}));
+
+		children.append(children.createItem({
+			type: 'Declaration',
+			property: "margin",
+			loc: null,
+			value: {
+				type: "Value",
+				children: [{
+					type: 'Dimension',
+					unit: 'px',
+					value: 0
+				}]
+			}
+		}));
+
+		children.append(children.createItem({
+			type: 'Declaration',
+			property: "padding",
+			loc: null,
+			value: {
+				type: "Value",
+				children: [{
+					type: 'Dimension',
+					unit: 'px',
+					value: 0
+				}]
+			}
+		}));
+
+
+		let rule = ast.children.createItem({
+			type: 'Atrule',
+			prelude: null,
+			name: "page",
+			block: {
+					type: 'Block',
+					loc: null,
+					children: children
+			}
+		});
+
+		ast.children.append(rule);
+	}
+
 	addScope(ast, id) {
 		// Get all selector lists
 		// add an id

src/styles/styler.js

 import Sheet from './sheet.js';
+import baseStyles from './base.js';
 
 class Styler {
 	constructor() {
 		this.sheets = [];
+		this.addBase();
 	}
 
 	async add() {
@@ -16,7 +18,7 @@ class Styler {
 
 		return await Promise.all(fetched)
 			.then((originals) => {
-				let text;
+				let text = "";
 				let pageBreaks = {};
 
 				originals.forEach((original, index) => {
@@ -38,8 +40,8 @@ class Styler {
 			});
 	}
 
-	root() {
-
+	addBase() {
+		this.insert(baseStyles);
 	}
 
 	mergeBreaks(pageBreaks, newBreaks) {