update sheet

examples/aurorae/paged-js/layout-pagedjs.css

@@ -28,6 +28,10 @@ html{
 
   }
 
+  @page fred {
+    background-image:  none;
+  }
+
   @page:first {
     margin: 0;
     background: url("/examples/aurorae/images/cover.jpg");

src/chunker/chunker.js

@@ -3,7 +3,7 @@ import Page from "./page";
 import ContentParser from "./parser";
 // import PagedBody from "../utils/paged-body.js";
 
-const MAX_SECTIONS = false;
+const MAX_SECTIONS = 1;
 
 const TEMPLATE = `<div class="page">
 	<div class="top">

src/styles/parser.js

@@ -322,7 +322,7 @@ class StylesParser {
 						visit: "TypeSelector",
 						enter: (node, item, list) => {
 
-							name = node.name + "_page";
+							name = node.name + "_named_page";
 
 							sel.insert(sel.createItem({
 								type: 'ClassSelector',
@@ -443,7 +443,7 @@ class StylesParser {
 				}
 			}
 		});
-
+		console.log(this.pages);
 		return csstree.generate(ast);
 	}
 

src/styles/sheet.js

 import StylesParser from './parser.js';
+import csstree from 'css-tree';
 
 class Sheet {
-  constructor(text) {
-    this.original = text;
-    this.text = this.parse(text);
-    this.add(this.text);
-  }
-
-  parse(text) {
-    let parser = new StylesParser(text);
-
-    // Add root vars
-    let rootVars = `:root {
-      --width: ${parser.width};
-      --height: ${parser.height};
-    }`;
-    this.add(rootVars);
-
-    return parser.text;
-  }
-
-  add(text){
-    let head = document.querySelector("head");
-    let style = document.createElement("style");
-    style.type = "text/css";
-
-    style.appendChild(document.createTextNode(text));
-
-    head.appendChild(style);
-  }
+	constructor(text) {
+		this.original = text;
+		// Parse the text
+		this.ast = this.parse(text);
+		// Remove @page rules
+		this.pages = this.removePages(this.ast);
+		// this.add(this.text);
+	}
+
+	// parse(text) {
+	//   let parser = new StylesParser(text);
+	//
+	//   // Add root vars
+	//   let rootVars = `:root {
+	//     --width: ${parser.width};
+	//     --height: ${parser.height};
+	//   }`;
+	//   this.add(rootVars);
+	//
+	//   return parser.text;
+	// }
+
+	// parse
+	parse(text) {
+		// send to csstree
+		let ast = csstree.parse(text);
+		// return ast
+		return ast
+	}
+
+	pageModel(name) {
+		return {
+			name: name,
+			marginalia: {},
+			width: undefined,
+			height: undefined,
+			margin : {
+				top: {value: 0, unit: "px"},
+				right: {value: 0, unit: "px"},
+				left: {value: 0, unit: "px"},
+				bottom: {value: 0, unit: "px"}
+			},
+			block: {},
+			marks: undefined
+		}
+	}
+
+	removePages(ast) {
+		let pages = {};
+		// Find and Remove @page rules
+		csstree.walk(ast, {
+			visit: 'Atrule',
+			enter: (node, item, list) => {
+				const basename = csstree.keyword(node.name).basename;
+
+				if (basename === "page") {
+					let name = "";
+
+					if (node.prelude) {
+						let named = this.getTypeSelector(node);
+						if (named) {
+							name += named;
+						}
+
+						let psuedo = this.getPsuedoSelector(node);
+						if (psuedo) {
+							name += ":" + psuedo;
+						}
+					} else {
+						name = ":";
+					}
+
+					let page = this.pageModel(name);
+
+					if (name in pages) {
+						// TODO: already present, need to merge
+						console.log("page needs merge");
+					} else {
+						pages[name] = page;
+					}
+					// Remove the rule
+					list.remove(item);
+				}
+			}
+		})
+
+		// return collection of pages
+		/*
+		{
+			":" : {},
+			":left" : {},
+			":right" : {},
+			":first" : {},
+			":black" : {},
+			"named" : {},
+		}
+		*/
+		console.log(pages);
+		return pages;
+	}
+
+	getTypeSelector(ast) {
+		// Find page name
+		let name;
+
+		csstree.walk(ast, {
+			visit: "TypeSelector",
+			enter: (node, item, list) => {
+				console.log(node.name);
+				name = node.name
+			}
+		});
+		console.log(name);
+		return name;
+	}
+
+	getPsuedoSelector(ast) {
+		// Find if it has :left & :right & :black & :first
+		let name;
+
+		csstree.walk(ast, {
+			visit: "PseudoClassSelector",
+			enter: (node, item, list) => {
+				name = node.name;
+			}
+		});
+
+		return name;
+	}
+
+	addPageClasses(pages) {
+
+	}
+
+	addPageResets(ast) {
+
+	}
+
+	addRootVars(ast) {
+
+	}
+
+	scope(ast) {
+		// Get all selector lists
+		// add an id
+	}
+
+	// generate string
+	toString(ast) {
+		return csstree.generate(ast || this.ast);
+	}
+
+	// add(text){
+	// 	let head = document.querySelector("head");
+	// 	let style = document.createElement("style");
+	// 	style.type = "text/css";
+	//
+	// 	style.appendChild(document.createTextNode(text));
+	//
+	// 	head.appendChild(style);
+	// }
 
 }
 

src/styles/styler.js

@@ -10,8 +10,12 @@ class Styler {
 	 	return await fetch(href)
 			.then((response) => {
 				return response.text();
-			}).then((text) => {
-				sheet = new Sheet(text);
+			}).then((original) => {
+				sheet = new Sheet(original);
+
+				let text = sheet.toString();
+				console.log(text);
+				this.insert(text);
 			});
 	}
 
@@ -19,6 +23,16 @@ class Styler {
 
 	}
 
+	insert(text){
+		let head = document.querySelector("head");
+		let style = document.createElement("style");
+		style.type = "text/css";
+
+		style.appendChild(document.createTextNode(text));
+
+		head.appendChild(style);
+	}
+
 }
 
 export default Styler;