From 0bfc6c107bf05e95cfac7a95824dc83edd823e49 Mon Sep 17 00:00:00 2001
From: Olav <olav.k.larseng@gmail.com>
Date: Wed, 2 Jul 2025 00:00:16 +0200
Subject: [PATCH 1/4] selector &

---
 cssr.js        | 103 ++++++++++++++++++++++++++++++++++---------------
 selectors.html |  58 ++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 31 deletions(-)
 create mode 100644 selectors.html

diff --git a/cssr.js b/cssr.js
index 768198d..e73c38d 100644
--- a/cssr.js
+++ b/cssr.js
@@ -1,49 +1,90 @@
 (() => {
   if (document.__cssr_mo) return;
-  let styleEl = document.head.appendChild(document.createElement("style"));
-  let gen = new Set();
-  let newRules = [];
 
-  let processNode = (node) => {
-    (node.getAttribute("class") || "")
-      .split(/\s+/)
-      .filter((t) => t.includes(":"))
-      .forEach((token) => {
-        if (gen.has(token)) return;
-
-        let [prop, val] = token.split(/:(.+)/);
-        let cssValue = val.replace(/_/g, " ");
-
-        if (!CSS.supports(prop, cssValue)) {
-          console.warn(`Unsupported CSS: ${prop}: ${cssValue}`);
-          return;
+  let styleElement = document.head.appendChild(document.createElement("style"));
+  let generatedTokens = new Set();
+  let pendingRules = [];
+
+  let escapeClassSelector = (className) => {
+    return "." + CSS.escape(className);
+  };
+
+  let parseDeclarations = (styleString) => {
+    if (!styleString) return [];
+    return styleString
+      .split(";")
+      .map((decl) => {
+        let [property, value] = decl.split(/:(.+)/);
+        if (!property || !value) return null;
+        return [property.trim(), value.replace(/_/g, " ").trim()];
+      })
+      .filter(Boolean);
+  };
+
+  let queueRule = (selector, declarations, token) => {
+    if (declarations.length === 0) return;
+    let ruleBody = declarations
+      .map(([prop, val]) => {
+        if (!CSS.supports || !CSS.supports(prop, val)) {
+          console.warn(`(Warning) Possibly unsupported CSS: ${prop}: ${val}`);
         }
+        return `${prop}: ${val};`;
+      })
+      .join(" ");
+    pendingRules.push(`${selector} { ${ruleBody} }`);
+    generatedTokens.add(token);
+  };
 
-        let rule = `.${CSS.escape(token)} { ${prop}: ${cssValue}; }`;
-        newRules.push(rule);
-        gen.add(token);
-      });
+  let processClassToken = (token) => {
+    if (generatedTokens.has(token)) return;
+    if (!token.includes(":")) return;
+    if (token.startsWith("&")) {
+      let firstColon = token.indexOf(":");
+      let selectorPart = token.slice(0, firstColon);
+      let stylePart = token.slice(firstColon + 1);
+      let baseSelector = escapeClassSelector(token);
+      let restSelector = selectorPart
+        .slice(1)
+        .replace(/_>_/g, " > ")
+        .replace(/_/g, " ");
+      let fullSelector = baseSelector + restSelector;
+      let declarations = parseDeclarations(stylePart);
+      queueRule(fullSelector, declarations, token);
+    } else {
+      let firstColon = token.indexOf(":");
+      let property = token.slice(0, firstColon);
+      let value = token.slice(firstColon + 1).replace(/_/g, " ");
+      let selector = escapeClassSelector(token);
+      queueRule(selector, [[property, value]], token);
+    }
+  };
+
+  let processNode = (node) => {
+    let classAttr = node.getAttribute("class") || "";
+    let tokens = classAttr.split(/\s+/).filter((t) => t.length > 0);
+    tokens.forEach(processClassToken);
+    flushRules();
   };
 
-  let updateStyle = () => {
-    if (newRules.length > 0) {
-      styleEl.textContent += "\n" + newRules.join("\n");
-      newRules = [];
+  let flushRules = () => {
+    if (pendingRules.length > 0) {
+      styleElement.textContent += "\n" + pendingRules.join("\n");
+      pendingRules = [];
     }
   };
 
   let processTree = (root) => {
-    root.querySelectorAll('[class*=":"]').forEach((node) => processNode(node));
-    updateStyle();
+    root.querySelectorAll('[class*=":"]').forEach(processNode);
+    flushRules();
   };
 
-  document.__cssr_mo = new MutationObserver((muts) => {
-    muts.forEach((m) =>
-      m.addedNodes.forEach(
-        (n) => n.nodeType === 1 && (processNode(n), processTree(n))
+  document.__cssr_mo = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) =>
+      mutation.addedNodes.forEach(
+        (node) => node.nodeType === 1 && (processNode(node), processTree(node))
       )
     );
-    updateStyle();
+    flushRules();
   });
 
   document.addEventListener("DOMContentLoaded", () => {
diff --git a/selectors.html b/selectors.html
new file mode 100644
index 0000000..19cd30d
--- /dev/null
+++ b/selectors.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Runtime CSS Generator with Regex Token Extraction</title>
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <script src="cssr.js"></script>
+  </head>
+  <body>
+    <div
+      id="styled-box"
+      class="color:red font-size:20px border:2px_solid_powderblue background-color:coral"
+    >
+      Styled box
+    </div>
+    <div
+      id="calc-box"
+      class="width:calc(100%_-_20px) height:calc(50vh_-_10px) padding:10px_20px"
+    >
+      Calc box
+    </div>
+    <div id="border-box" class="border:2px_solid_powderblue">Border box</div>
+
+    <button
+      id="add-btn"
+      onclick="document.body.insertAdjacentHTML('beforeend', `<div id='dynamic-box' class='color:#aaaeae padding:20px_25px width:calc(80%_-_30px)'>dynamic</div>`)"
+    >
+      Add Dynamic Box
+    </button>
+
+    <div id="test-output" class="test-result"></div>
+    <br />
+    <br />
+    <div class="&_>_div_>_h4:background-color:green">
+      Title
+      <div>
+        Subtitle
+        <h4>Subsubtitle</h4>
+      </div>
+    </div>
+
+    <div class="&_>_div:background-color:red;color:blue padding:10px_20px">
+      Title
+      <div>
+        Subtitle
+        <h4>Subsubtitle</h4>
+      </div>
+    </div>
+  </body>
+</html>

From b28c1d560e74a0991e4b730552444f4c06e5c542 Mon Sep 17 00:00:00 2001
From: Olav <olav.k.larseng@gmail.com>
Date: Wed, 2 Jul 2025 00:03:36 +0200
Subject: [PATCH 2/4] cssar namechange

---
 cssr.js => cssar.js | 6 +++---
 index.html          | 4 ++--
 selectors.html      | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename cssr.js => cssar.js (95%)

diff --git a/cssr.js b/cssar.js
similarity index 95%
rename from cssr.js
rename to cssar.js
index e73c38d..6cc1bf2 100644
--- a/cssr.js
+++ b/cssar.js
@@ -1,5 +1,5 @@
 (() => {
-  if (document.__cssr_mo) return;
+  if (document.__cssar_mo) return;
 
   let styleElement = document.head.appendChild(document.createElement("style"));
   let generatedTokens = new Set();
@@ -78,7 +78,7 @@
     flushRules();
   };
 
-  document.__cssr_mo = new MutationObserver((mutations) => {
+  document.__cssar_mo = new MutationObserver((mutations) => {
     mutations.forEach((mutation) =>
       mutation.addedNodes.forEach(
         (node) => node.nodeType === 1 && (processNode(node), processTree(node))
@@ -89,7 +89,7 @@
 
   document.addEventListener("DOMContentLoaded", () => {
     processTree(document.body);
-    document.__cssr_mo.observe(document.body, {
+    document.__cssar_mo.observe(document.body, {
       childList: true,
       subtree: true,
     });
diff --git a/index.html b/index.html
index fd5c059..c8eb28b 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Runtime CSS Generator with Regex Token Extraction</title>
+    <title>Runtime CSS Generator</title>
 
     <style>
       html,
@@ -22,7 +22,7 @@
         color: red;
       }
     </style>
-    <script src="cssr.js"></script>
+    <script src="cssar.js"></script>
   </head>
   <body>
     <!-- Elements under test -->
diff --git a/selectors.html b/selectors.html
index 19cd30d..ecb495b 100644
--- a/selectors.html
+++ b/selectors.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Runtime CSS Generator with Regex Token Extraction</title>
+    <title>Runtime CSS Generator</title>
 
     <style>
       html,
@@ -12,7 +12,7 @@
         padding: 0;
       }
     </style>
-    <script src="cssr.js"></script>
+    <script src="cssar.js"></script>
   </head>
   <body>
     <div

From 8e4e58caa417a2703eaf2812a82143922593c986 Mon Sep 17 00:00:00 2001
From: Olav <olav.k.larseng@gmail.com>
Date: Mon, 7 Jul 2025 16:55:48 +0200
Subject: [PATCH 3/4] sophisticated handletoken

---
 cssar.js       | 186 ++++++++++++++++++++++++++++++-------------------
 selectors.html |  36 ++++++++--
 2 files changed, 144 insertions(+), 78 deletions(-)

diff --git a/cssar.js b/cssar.js
index 6cc1bf2..7030dde 100644
--- a/cssar.js
+++ b/cssar.js
@@ -1,97 +1,141 @@
 (() => {
   if (document.__cssar_mo) return;
 
-  let styleElement = document.head.appendChild(document.createElement("style"));
-  let generatedTokens = new Set();
-  let pendingRules = [];
+  const styleEl = document.head.appendChild(document.createElement('style'));
+  const seen = new Set();
+  const rules = [];
 
-  let escapeClassSelector = (className) => {
-    return "." + CSS.escape(className);
-  };
+  const escapeClass = cls => '.' + CSS.escape(cls);
 
-  let parseDeclarations = (styleString) => {
-    if (!styleString) return [];
-    return styleString
-      .split(";")
-      .map((decl) => {
-        let [property, value] = decl.split(/:(.+)/);
-        if (!property || !value) return null;
-        return [property.trim(), value.replace(/_/g, " ").trim()];
-      })
-      .filter(Boolean);
-  };
+  const parseDecls = str =>
+    str
+      ? str
+          .split(';')
+          .map(d => d.split(/:(.+)/))
+          .filter(([p, v]) => p && v != null)
+          .map(([p, v]) => {
+            let val = v.replace(/_/g, ' ').trim();
+            // space‑wrap math ops between non‑spaces
+            val = val.replace(/(\S)([+\-*/])(\S)/g, '$1 $2 $3');
+            return [p.trim(), val];
+          })
+      : [];
 
-  let queueRule = (selector, declarations, token) => {
-    if (declarations.length === 0) return;
-    let ruleBody = declarations
-      .map(([prop, val]) => {
-        if (!CSS.supports || !CSS.supports(prop, val)) {
-          console.warn(`(Warning) Possibly unsupported CSS: ${prop}: ${val}`);
-        }
-        return `${prop}: ${val};`;
-      })
-      .join(" ");
-    pendingRules.push(`${selector} { ${ruleBody} }`);
-    generatedTokens.add(token);
+  const addRule = (sel, decls, tok) => {
+    if (!decls.length || seen.has(tok)) return;
+    rules.push(`${sel}{${decls.map(([p, v])=>`${p}:${v};`).join('')}}`);
+    seen.add(tok);
   };
 
-  let processClassToken = (token) => {
-    if (generatedTokens.has(token)) return;
-    if (!token.includes(":")) return;
-    if (token.startsWith("&")) {
-      let firstColon = token.indexOf(":");
-      let selectorPart = token.slice(0, firstColon);
-      let stylePart = token.slice(firstColon + 1);
-      let baseSelector = escapeClassSelector(token);
-      let restSelector = selectorPart
-        .slice(1)
-        .replace(/_>_/g, " > ")
-        .replace(/_/g, " ");
-      let fullSelector = baseSelector + restSelector;
-      let declarations = parseDeclarations(stylePart);
-      queueRule(fullSelector, declarations, token);
+  const handleToken = (token) => {
+    // 1) Skip if already seen or not a CSS token
+    if (seen.has(token) || !token.includes(':')) return;
+  
+    // 2) Which pseudos we support
+    const pseudos = ['hover','active','focus','visited','disabled','required'];
+  
+    // 3) Split on the *first* colon only
+    //    e.g. ['hover', '#submitBtn:background-color:green;color:white']
+    const [selPart, rest] = token.split(/:(.+)/);
+  
+    if (selPart.startsWith('&')) {
+      // ─── Nested selector branch ───
+      // Strip leading &, handle > + ~ and underscores
+      const raw = selPart.slice(1);
+      const path = raw
+        .replace(/([>+~])/g, ' $1 ')
+        .replace(/_/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+  
+      addRule(
+        escapeClass(token) + path,
+        parseDecls(rest),
+        token
+      );
+  
+    } else if (pseudos.includes(selPart)) {
+      // ─── Pseudo‑class branch ───
+      // rest might be:
+      //   a) property:value…           (apply to the element itself)
+      //   b) selector:property:value…  (apply to a nested selector)
+      const [maybeSel, declsPart] = rest.split(/:(.+)/);
+  
+      if (/^[#.]/.test(maybeSel) || maybeSel.startsWith('&')) {
+        // 3a) Pseudo on a nested selector
+        const raw = maybeSel.startsWith('&')
+          ? maybeSel.slice(1)
+          : maybeSel;
+        const path = raw
+          .replace(/([>+~])/g, ' $1 ')
+          .replace(/_/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim();
+  
+        addRule(
+          // .<full‑token‑class>:hover<div selector>
+          `${escapeClass(token)}:${selPart}${path}`,
+          parseDecls(declsPart),
+          token
+        );
+      } else {
+        // 3b) Pseudo on the element itself
+        addRule(
+          // .<full‑token‑class>:hover
+          `${escapeClass(token)}:${selPart}`,
+          parseDecls(rest),
+          token
+        );
+      }
+  
     } else {
-      let firstColon = token.indexOf(":");
-      let property = token.slice(0, firstColon);
-      let value = token.slice(firstColon + 1).replace(/_/g, " ");
-      let selector = escapeClassSelector(token);
-      queueRule(selector, [[property, value]], token);
+      // ─── Simple property:value branch ───
+      // single declaration—do math‑spacing & underscore conversion
+      const property = selPart.trim();
+      let value = rest
+        .replace(/_/g, ' ')
+        .replace(/(\S)([+\-*/])(\S)/g, '$1 $2 $3')
+        .trim();
+  
+      addRule(
+        escapeClass(token),
+        [[property, value]],
+        token
+      );
     }
   };
+  
 
-  let processNode = (node) => {
-    let classAttr = node.getAttribute("class") || "";
-    let tokens = classAttr.split(/\s+/).filter((t) => t.length > 0);
-    tokens.forEach(processClassToken);
-    flushRules();
-  };
+  const processNode = n =>
+    (n.className || '')
+      .split(/\s+/)
+      .filter(Boolean)
+      .forEach(handleToken);
 
-  let flushRules = () => {
-    if (pendingRules.length > 0) {
-      styleElement.textContent += "\n" + pendingRules.join("\n");
-      pendingRules = [];
-    }
-  };
-
-  let processTree = (root) => {
+  const processTree = root =>
     root.querySelectorAll('[class*=":"]').forEach(processNode);
-    flushRules();
+
+  const flush = () => {
+    if (!rules.length) return;
+    styleEl.textContent += '\n' + rules.join('\n');
+    rules.length = 0;
   };
 
-  document.__cssar_mo = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) =>
-      mutation.addedNodes.forEach(
-        (node) => node.nodeType === 1 && (processNode(node), processTree(node))
+  document.__cssar_mo = new MutationObserver(muts => {
+    muts.forEach(m =>
+      m.addedNodes.forEach(n =>
+        n.nodeType === 1 && (processNode(n), processTree(n))
       )
     );
-    flushRules();
+    flush();
   });
 
-  document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener('DOMContentLoaded', () => {
     processTree(document.body);
     document.__cssar_mo.observe(document.body, {
       childList: true,
-      subtree: true,
+      subtree: true
     });
+    flush();
   });
 })();
diff --git a/selectors.html b/selectors.html
index ecb495b..dd45f5d 100644
--- a/selectors.html
+++ b/selectors.html
@@ -23,7 +23,7 @@
     </div>
     <div
       id="calc-box"
-      class="width:calc(100%_-_20px) height:calc(50vh_-_10px) padding:10px_20px"
+      class="width:calc(100%_-_20px) height:calc(10vh_-_10px) padding:10px_20px"
     >
       Calc box
     </div>
@@ -31,7 +31,7 @@
 
     <button
       id="add-btn"
-      onclick="document.body.insertAdjacentHTML('beforeend', `<div id='dynamic-box' class='color:#aaaeae padding:20px_25px width:calc(80%_-_30px)'>dynamic</div>`)"
+      onclick="document.body.insertAdjacentHTML('beforeend', `<div id='dynamic-box' class='color:#aaaeae padding:20px_25px width:calc(80%-30px)'>dynamic</div>`)"
     >
       Add Dynamic Box
     </button>
@@ -39,7 +39,7 @@
     <div id="test-output" class="test-result"></div>
     <br />
     <br />
-    <div class="&_>_div_>_h4:background-color:green">
+    <div class="&>div>h4:background-color:green">
       Title
       <div>
         Subtitle
@@ -47,12 +47,34 @@ <h4>Subsubtitle</h4>
       </div>
     </div>
 
-    <div class="&_>_div:background-color:red;color:blue padding:10px_20px">
-      Title
+    <div class="&>div:background-color:red;color:blue padding:10px_20px">
+      Title222
       <div>
-        Subtitle
-        <h4>Subsubtitle</h4>
+        Subtitle222
+        <h4>Subsubtitle222</h4>
+      </div>
+    </div>
+
+    <div class="padding:10px_20px">
+      <a class="hover:background-color:red;color:blue text-decoration:underline">
+        Test
+        <p>Paragraph 1 in the div.</p>
+        <p>Paragraph 2 in the div.</p>
+        <section><p>Paragraph 3 in the div.</p></section>
+       </a>
+    </div>
+
+    <div class="hover:#submitBtn:background-color:green;color:white">
+      Title222
+      <div>
+        Subtitle222
+        <h4>Subsubtitle222</h4>
+
+        <div id="submitBtn">Submit</div>
+
       </div>
     </div>
+    
+
   </body>
 </html>

From 9638b606c2e2d6b9374fbd70c56c882bb3185037 Mon Sep 17 00:00:00 2001
From: Olav <olav.k.larseng@gmail.com>
Date: Tue, 8 Jul 2025 22:51:25 +0200
Subject: [PATCH 4/4] cssar test

---
 cssar.js       | 172 +++++++++++-------------
 selectors.html | 349 +++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 372 insertions(+), 149 deletions(-)

diff --git a/cssar.js b/cssar.js
index 7030dde..48ba56f 100644
--- a/cssar.js
+++ b/cssar.js
@@ -1,140 +1,124 @@
 (() => {
   if (document.__cssar_mo) return;
 
-  const styleEl = document.head.appendChild(document.createElement('style'));
+  const styleEl = document.head.appendChild(document.createElement("style"));
   const seen = new Set();
   const rules = [];
 
-  const escapeClass = cls => '.' + CSS.escape(cls);
+  const escapeClass = (cls) => "." + CSS.escape(cls);
 
-  const parseDecls = str =>
+  const parseDecls = (str) =>
     str
       ? str
-          .split(';')
-          .map(d => d.split(/:(.+)/))
+          .split(";")
+          .map((d) => d.split(/:(.+)/))
           .filter(([p, v]) => p && v != null)
           .map(([p, v]) => {
-            let val = v.replace(/_/g, ' ').trim();
+            let val = v.replace(/_/g, " ").trim();
             // space‑wrap math ops between non‑spaces
-            val = val.replace(/(\S)([+\-*/])(\S)/g, '$1 $2 $3');
+            val = val.replace(/(\S)([+\-*/])(\S)/g, "$1 $2 $3");
             return [p.trim(), val];
           })
       : [];
 
   const addRule = (sel, decls, tok) => {
     if (!decls.length || seen.has(tok)) return;
-    rules.push(`${sel}{${decls.map(([p, v])=>`${p}:${v};`).join('')}}`);
+    rules.push(`${sel}{${decls.map(([p, v]) => `${p}:${v};`).join("")}}`);
     seen.add(tok);
   };
 
   const handleToken = (token) => {
-    // 1) Skip if already seen or not a CSS token
-    if (seen.has(token) || !token.includes(':')) return;
-  
-    // 2) Which pseudos we support
-    const pseudos = ['hover','active','focus','visited','disabled','required'];
-  
-    // 3) Split on the *first* colon only
-    //    e.g. ['hover', '#submitBtn:background-color:green;color:white']
-    const [selPart, rest] = token.split(/:(.+)/);
-  
-    if (selPart.startsWith('&')) {
-      // ─── Nested selector branch ───
-      // Strip leading &, handle > + ~ and underscores
-      const raw = selPart.slice(1);
+    if (seen.has(token) || !token.includes(":")) return;
+
+    // our supported pseudos
+    const pseudos = new Set([
+      "hover",
+      "active",
+      "focus",
+      "visited",
+      "disabled",
+      "required",
+    ]);
+
+    // split into segments on every colon
+    const parts = token.split(":");
+    let idx = 0;
+
+    let selectorPrefix = ""; // will become something like ".\&\>div:hover"
+    let property, value;
+
+    // 1) Does the first part look like a nested selector?
+    const first = parts[idx];
+    const isSelector =
+      first.startsWith("&") || first.startsWith("#") || first.startsWith(".");
+    if (isSelector) {
+      // build the selector path from that first segment
+      const raw = first.startsWith("&") ? first.slice(1) : first;
       const path = raw
-        .replace(/([>+~])/g, ' $1 ')
-        .replace(/_/g, ' ')
-        .replace(/\s+/g, ' ')
+        .replace(/([>+~])/g, " $1 ")
+        .replace(/_/g, " ")
+        .replace(/\s+/g, " ")
         .trim();
-  
-      addRule(
-        escapeClass(token) + path,
-        parseDecls(rest),
-        token
-      );
-  
-    } else if (pseudos.includes(selPart)) {
-      // ─── Pseudo‑class branch ───
-      // rest might be:
-      //   a) property:value…           (apply to the element itself)
-      //   b) selector:property:value…  (apply to a nested selector)
-      const [maybeSel, declsPart] = rest.split(/:(.+)/);
-  
-      if (/^[#.]/.test(maybeSel) || maybeSel.startsWith('&')) {
-        // 3a) Pseudo on a nested selector
-        const raw = maybeSel.startsWith('&')
-          ? maybeSel.slice(1)
-          : maybeSel;
-        const path = raw
-          .replace(/([>+~])/g, ' $1 ')
-          .replace(/_/g, ' ')
-          .replace(/\s+/g, ' ')
-          .trim();
-  
-        addRule(
-          // .<full‑token‑class>:hover<div selector>
-          `${escapeClass(token)}:${selPart}${path}`,
-          parseDecls(declsPart),
-          token
-        );
-      } else {
-        // 3b) Pseudo on the element itself
-        addRule(
-          // .<full‑token‑class>:hover
-          `${escapeClass(token)}:${selPart}`,
-          parseDecls(rest),
-          token
-        );
-      }
-  
-    } else {
-      // ─── Simple property:value branch ───
-      // single declaration—do math‑spacing & underscore conversion
-      const property = selPart.trim();
-      let value = rest
-        .replace(/_/g, ' ')
-        .replace(/(\S)([+\-*/])(\S)/g, '$1 $2 $3')
-        .trim();
-  
-      addRule(
-        escapeClass(token),
-        [[property, value]],
-        token
-      );
+      selectorPrefix = escapeClass(token) + path;
+      idx++;
+    }
+
+    // pseudo?
+    let pseudo = "";
+    const maybePseudo = parts[idx];
+    if (pseudos.has(maybePseudo)) {
+      pseudo = maybePseudo;
+      idx++;
     }
+
+    // 3) We **must** now have property and value
+    if (parts.length - idx < 2) {
+      return;
+    }
+    property = parts[idx++];
+    value = parts.slice(idx).join(":");
+
+    // If there was no selectorPrefix, we apply to the element itself:
+    let fullSelector = selectorPrefix || escapeClass(token);
+    if (pseudo) {
+      fullSelector += `:${pseudo}`;
+    }
+
+    // 5) Normalize the value: underscores -> spaces, math ops spacing
+    let normalized = value
+      .replace(/_/g, " ")
+      .replace(/(\S)([+\-*/])(\S)/g, "$1 $2 $3")
+      .trim();
+
+    addRule(fullSelector, [[property.trim(), normalized]], token);
   };
-  
 
-  const processNode = n =>
-    (n.className || '')
-      .split(/\s+/)
-      .filter(Boolean)
-      .forEach(handleToken);
+  const processNode = (n) =>
+    (n.className || "").split(/\s+/).filter(Boolean).forEach(handleToken);
 
-  const processTree = root =>
+  const processTree = (root) =>
     root.querySelectorAll('[class*=":"]').forEach(processNode);
 
   const flush = () => {
     if (!rules.length) return;
-    styleEl.textContent += '\n' + rules.join('\n');
+    styleEl.textContent += "\n" + rules.join("\n");
     rules.length = 0;
   };
 
-  document.__cssar_mo = new MutationObserver(muts => {
-    muts.forEach(m =>
-      m.addedNodes.forEach(n =>
-        n.nodeType === 1 && (processNode(n), processTree(n))
+  document.__cssar_mo = new MutationObserver((muts) => {
+    muts.forEach((m) =>
+      m.addedNodes.forEach(
+        (n) => n.nodeType === 1 && (processNode(n), processTree(n))
       )
     );
     flush();
   });
 
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener("DOMContentLoaded", () => {
     processTree(document.body);
     document.__cssar_mo.observe(document.body, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
     flush();
   });
diff --git a/selectors.html b/selectors.html
index dd45f5d..6d563b2 100644
--- a/selectors.html
+++ b/selectors.html
@@ -2,79 +2,318 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Runtime CSS Generator</title>
-
+    <title>CSSAR Tests</title>
     <style>
-      html,
       body {
-        margin: 0;
-        padding: 0;
+        font-family: sans-serif;
+        padding: 20px;
+      }
+      .result {
+        margin-top: 1em;
+      }
+      button,
+      div,
+      ul,
+      p {
+        margin-bottom: 1em;
+      }
+      #container6,
+      #container14 {
+        width: 200px;
+        border: 1px solid #ccc;
+        padding: 10px;
+      }
+      #container14 {
+        width: 300px;
       }
     </style>
-    <script src="cssar.js"></script>
+
+    <!-- your simplified CSSar loader here -->
+    <script>
+      (() => {
+        if (document.__cssar) return;
+        const styleEl = document.head.appendChild(
+            document.createElement("style")
+          ),
+          seen = new Set(),
+          addRule = (sel, decls, tok) => {
+            if (seen.has(tok)) return;
+            styleEl.textContent += `${sel}{${decls
+              .map(([p, v]) => `${p}:${v};`)
+              .join("")}}`;
+            seen.add(tok);
+          },
+          processToken = (raw) => {
+            // split on ";" for extra declarations
+            const [head, ...more] = raw.split(";"),
+              parts = head.split(":");
+            if (parts.length < 2) return;
+            let idx = 0,
+              sel = "",
+              pseudo = "",
+              decls = [];
+
+            // selector or nested
+            if (parts[idx].startsWith("&")) {
+              sel =
+                "." +
+                CSS.escape(raw) +
+                parts[idx++].slice(1).replace(/_/g, " ").trim();
+            } else if (
+              parts[idx].startsWith("#") ||
+              parts[idx].startsWith(".")
+            ) {
+              sel = parts[idx++];
+            } else {
+              sel = "." + CSS.escape(raw);
+            }
+
+            // optional pseudo‑class
+            const pc = parts[idx];
+            if (
+              [
+                "hover",
+                "active",
+                "focus",
+                "visited",
+                "disabled",
+                "required",
+              ].includes(pc)
+            ) {
+              pseudo = ":" + parts[idx++];
+            }
+
+            // main decl
+            const prop = parts[idx++],
+              val = parts.slice(idx).join(":").replace(/_/g, " ");
+            decls.push([prop, val]);
+
+            // extras
+            more.forEach((x) => {
+              const [p2, ...v2] = x.split(":");
+              if (!p2 || !v2.length) return;
+              decls.push([p2, v2.join(":").replace(/_/g, " ")]);
+            });
+
+            addRule(sel + pseudo, decls, raw);
+          },
+          applyTo = (n) =>
+            (n.className || "")
+              .split(/\s+/)
+              .filter(Boolean)
+              .forEach(processToken),
+          scan = (root) =>
+            root.querySelectorAll('[class*=":"]').forEach(applyTo);
+
+        document.__cssar = new MutationObserver((muts) => {
+          muts.forEach((m) =>
+            m.addedNodes.forEach(
+              (n) => n.nodeType === 1 && (applyTo(n), scan(n))
+            )
+          );
+        });
+
+        window.addEventListener("DOMContentLoaded", () => {
+          scan(document.body);
+          document.__cssar.observe(document.body, {
+            childList: true,
+            subtree: true,
+          });
+        });
+      })();
+    </script>
   </head>
   <body>
-    <div
-      id="styled-box"
-      class="color:red font-size:20px border:2px_solid_powderblue background-color:coral"
-    >
-      Styled box
+    <h2>CSSAR Tests</h2>
+
+    <div id="test1" class="color:blue">Test 1: blue text</div>
+
+    <div id="test2" class="margin:5px_10px_15px_20px">
+      Test 2: margins 5/10/15/20
     </div>
-    <div
-      id="calc-box"
-      class="width:calc(100%_-_20px) height:calc(10vh_-_10px) padding:10px_20px"
-    >
-      Calc box
+
+    <div id="test3" class="padding:10px_20px">Test 3: padding-left = 20px</div>
+
+    <ul id="wrapper4" class="&>li:color:orange">
+      <li>Item A</li>
+      <li id="test4">Test 4: orange</li>
+    </ul>
+
+    <div class="#special:background-color:lightgray">
+      <p id="special">Test 5: lightgray bg</p>
     </div>
-    <div id="border-box" class="border:2px_solid_powderblue">Border box</div>
-
-    <button
-      id="add-btn"
-      onclick="document.body.insertAdjacentHTML('beforeend', `<div id='dynamic-box' class='color:#aaaeae padding:20px_25px width:calc(80%-30px)'>dynamic</div>`)"
-    >
-      Add Dynamic Box
-    </button>
-
-    <div id="test-output" class="test-result"></div>
-    <br />
-    <br />
-    <div class="&>div>h4:background-color:green">
-      Title
-      <div>
-        Subtitle
-        <h4>Subsubtitle</h4>
+
+    <div id="container6">
+      <div id="test6" class="width:calc(50%-20px);border:1px_solid_black;">
+        Test 6: width = calc(50% - 20px)
       </div>
     </div>
 
-    <div class="&>div:background-color:red;color:blue padding:10px_20px">
-      Title222
-      <div>
-        Subtitle222
-        <h4>Subsubtitle222</h4>
-      </div>
+    <div id="wrapper7" class="&>button+_button:margin-left:10px">
+      <button id="b71">One</button>
+      <button id="test7">Test 7: margin-left 10px</button>
     </div>
 
-    <div class="padding:10px_20px">
-      <a class="hover:background-color:red;color:blue text-decoration:underline">
-        Test
-        <p>Paragraph 1 in the div.</p>
-        <p>Paragraph 2 in the div.</p>
-        <section><p>Paragraph 3 in the div.</p></section>
-       </a>
+    <div id="test8" class="color:red;background-color:lightblue">
+      Test 8: red on lightblue
     </div>
 
-    <div class="hover:#submitBtn:background-color:green;color:white">
-      Title222
-      <div>
-        Subtitle222
-        <h4>Subsubtitle222</h4>
+    <div id="wrapper9" class="&>h3~_p:font-style:italic">
+      <h3>Heading</h3>
+      <p id="test9">Test 9: italic</p>
+    </div>
 
-        <div id="submitBtn">Submit</div>
+    <div id="wrapper10" class="& h4:font-weight:bold">
+      <h4 id="test10">Test 10: bold</h4>
+    </div>
 
-      </div>
+    <!-- Specificity Tests -->
+    <div id="spec1-wrapper" class=".cls:color:red &_h4:color:green">
+      <h4 id="spec1">Spec 1: nested should override → green</h4>
+    </div>
+
+    <div id="spec2-wrapper" class=".cls2:color:purple #spec2:color:pink">
+      <p id="spec2">Spec 2: ID should override class → pink</p>
     </div>
-    
 
+    <p id="spec3" class=".some:color:orange" style="color: navy">
+      Spec 3: inline-style should override loader → navy
+    </p>
+
+    <div id="spec4" class="color:red color:blue">
+      Spec 4: last declaration wins → blue
+    </div>
+
+    <div class="result" id="results"></div>
+
+    <script>
+      window.addEventListener("load", () => {
+        const results = [];
+        const check = (id, actual, expected) => ({
+          id,
+          actual,
+          expected,
+          pass: actual === expected,
+        });
+
+        results.push(
+          check(
+            "test1",
+            getComputedStyle(document.getElementById("test1")).color,
+            "rgb(0, 0, 255)"
+          )
+        );
+
+        const m2 = getComputedStyle(document.getElementById("test2"));
+        results.push(check("test2-top", m2.marginTop, "5px"));
+        results.push(check("test2-right", m2.marginRight, "10px"));
+        results.push(check("test2-bottom", m2.marginBottom, "15px"));
+        results.push(check("test2-left", m2.marginLeft, "20px"));
+
+        results.push(
+          check(
+            "test3",
+            getComputedStyle(document.getElementById("test3")).paddingLeft,
+            "20px"
+          )
+        );
+        results.push(
+          check(
+            "test4",
+            getComputedStyle(document.getElementById("test4")).color,
+            "rgb(255, 165, 0)"
+          )
+        );
+        results.push(
+          check(
+            "test5",
+            getComputedStyle(document.getElementById("special"))
+              .backgroundColor,
+            "rgb(211, 211, 211)"
+          )
+        );
+        results.push(
+          check(
+            "test6",
+            getComputedStyle(document.getElementById("test6")).width,
+            "80px"
+          )
+        );
+        results.push(
+          check(
+            "test7",
+            getComputedStyle(document.getElementById("test7")).marginLeft,
+            "10px"
+          )
+        );
+        results.push(
+          check(
+            "test8-color",
+            getComputedStyle(document.getElementById("test8")).color,
+            "rgb(255, 0, 0)"
+          )
+        );
+        results.push(
+          check(
+            "test8-bg",
+            getComputedStyle(document.getElementById("test8")).backgroundColor,
+            "rgb(173, 216, 230)"
+          )
+        );
+        results.push(
+          check(
+            "test9",
+            getComputedStyle(document.getElementById("test9")).fontStyle,
+            "italic"
+          )
+        );
+        results.push(
+          check(
+            "test10",
+            getComputedStyle(document.getElementById("test10")).fontWeight,
+            "700"
+          )
+        );
+
+        results.push(
+          check(
+            "spec1",
+            getComputedStyle(document.getElementById("spec1")).color,
+            "rgb(0, 128, 0)"
+          )
+        );
+        results.push(
+          check(
+            "spec2",
+            getComputedStyle(document.getElementById("spec2")).color,
+            "rgb(255, 192, 203)"
+          )
+        );
+        results.push(
+          check(
+            "spec3",
+            getComputedStyle(document.getElementById("spec3")).color,
+            "rgb(0, 0, 128)"
+          )
+        );
+        results.push(
+          check(
+            "spec4",
+            getComputedStyle(document.getElementById("spec4")).color,
+            "rgb(0, 0, 255)"
+          )
+        );
+
+        document.getElementById("results").innerHTML = results
+          .map(
+            (r) =>
+              `<div>${r.id}: expected <code>${r.expected}</code>, got <code>${
+                r.actual
+              }</code> — <strong>${r.pass ? "PASS" : "FAIL"}</strong></div>`
+          )
+          .join("");
+        results.forEach((r) => console.assert(r.pass, `${r.id} failed`));
+      });
+    </script>
   </body>
 </html>