feat: style injection

1 files changed, 37 insertions, 9 deletions

diff --git a/src/index.ts b/src/index.ts
index 37693ba..02da27a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,27 @@
 const UNSET_PROPERTY_VALUE = '<unset>';
+const EVENT_HANDLERS = {
+  click: '--cssx-on-click',
+  load: '--cssx-on-load',
+}
+
+const injectStyles = () => {
+  const STYLE_TAG_CLASS = 'cssx-style-root';
+  if (document.querySelector(`.${STYLE_TAG_CLASS}`)) return;
+
+  const $style = document.createElement('style');
+  $style.className = STYLE_TAG_CLASS;
+
+  const properties = [
+    '--cssx-children',
+    ...Object.values(EVENT_HANDLERS),
+  ];
+
+  $style.textContent = `.cssx-layer {
+    ${properties.map(p => `${p}: ${UNSET_PROPERTY_VALUE};`).join(' ')}
+  }`;
+
+  document.body.appendChild($style);
+}
 
 const getPropertyValue = ($element: HTMLElement, prop: string) => {
   const value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim()
@@ -7,27 +30,23 @@ const getPropertyValue = ($element: HTMLElement, prop: string) => {
 
 const getChildrenIds = ($element: HTMLElement) => {
   const value = getPropertyValue($element, '--cssx-children')
-  return value.split(/\s*,\s*/g).filter(Boolean)
+  return value.split(/(\s*,\s*)|\s*/g).filter(Boolean)
 }
 
 const handleEvents = ($element: HTMLElement) => {
-  const eventHandlers = {
-    click: '--cssx-on-click',
-    load: '--cssx-on-load',
-  }
-
-  Object.entries(eventHandlers).forEach(([event, property]) => {
+  Object.entries(EVENT_HANDLERS).forEach(([event, property]) => {
     const handlerExpr = getPropertyValue($element, property);
     if (handlerExpr) {
       // TODO: Parse onclick
-      console.log($element.id, event, handlerExpr);
+      // TODO: attach handler for eval
+      console.log(event, handlerExpr);
     }
   });
 };
 
 let iters = 0;
 const manageElement = ($element: HTMLElement) => {
-  if (iters++ > 100) return; // to prevent infinite rec
+  if (iters++ > 100) return; // NOTE: Temporary. To prevent infinite rec
 
   handleEvents($element);
 
@@ -44,4 +63,13 @@ const manageElement = ($element: HTMLElement) => {
   }
 }
 
+interface Options {
+  root?: HTMLElement;
+}
+const render = ({ root = document.body }: Options = {}) => {
+  injectStyles();
+  manageElement(root);
+}
+
+render();