feat: adds instance element access + gets the todo example functional

2 files changed, 20 insertions, 14 deletions

diff --git a/examples/form/signup.css b/examples/form/signup.css
index e633243..3433b87 100644
--- a/examples/form/signup.css
+++ b/examples/form/signup.css
@@ -4,10 +4,11 @@
   max-width: 700px;
   margin: 1rem auto;
 
-  --cssx-disgustingly-set-innerhtml: "<h1 class='form-title'>Sign-<b>Up</b></h1>";
+  --count: '0';
 
+  --cssx-disgustingly-set-innerhtml:
+    "<h1 class='form-title'>Sign-<b>Up</b></h1>";
   --cssx-children: form#form;
-  --count: '0';
 }
 
 .form-title {
@@ -25,11 +26,15 @@
 #form {
   display: block;
 
-  --cssx-on-submit: prevent-default() add-class(form, 'submitting')
-    request('/examples/') remove-class(form, 'submitting')
-    add-class(form, 'submitted');
+  --cssx-on-submit:
+    prevent-default()
+    add-class(form, 'submitting')
+    request('/examples/')
+    remove-class(form, 'submitting')
+    add-class(form, 'submitted')
+  ;
 
-  --cssx-children: input#input-email input#input-password actions #message;
+  --cssx-children: input#input-email input#input-password #actions #message;
 }
 #form.submitted #message::after {
   display: block;
diff --git a/examples/form/style.css b/examples/form/style.css
index 63f758b..8229ef0 100644
--- a/examples/form/style.css
+++ b/examples/form/style.css
@@ -1,9 +1,7 @@
 body {
-  --cssx-children: button#signup-btn signup-page;
-}
-body * {
-  box-sizing: border-box;
+  --cssx-children: button#signup-btn #signup-page;
 }
+body * { box-sizing: border-box; }
 
 #signup-btn {
   display: inline-block;
@@ -14,10 +12,13 @@ body * {
   padding: 0.5rem 1rem;
   cursor: pointer;
 
-  --cssx-on-click: add-class(signup-page, 'loading')
-    add-class(signup-btn, 'loading') delay(0.5s)
+  --cssx-on-click:
+    add-class(signup-page, 'loading')
+    add-class(signup-btn, 'loading')
+    delay(0.5s)
     load-cssx(signup-page-content, './signup.css')
-    remove-class(signup-page, 'loading') remove-class(signup-btn, 'loading');
+    remove-class(signup-page, 'loading')
+    remove-class(signup-btn, 'loading');
 }
 #signup-btn::after {
   content: 'Register now to start your free trial for $99';
@@ -31,7 +32,7 @@ body * {
 }
 
 #signup-page {
-  --cssx-children: signup-page-content;
+  --cssx-children: div#signup-page-content;
 }
 #signup-page.loading::after {
   content: 'Loading...';