Make a demo page to fix unbalanced comments, quotes, and parenthesis.

NV · NV · commit cea3d5bb9a55 · 2019-02-04T17:55:06.000-08:00
http://nv.github.io/CSSOM/docs/fix-value/
diff --git a/docs/fix-value/fix-value.js b/docs/fix-value/fix-value.js
@@ -0,0 +1,90 @@
+var input = document.getElementById("input");
+
+function doStuff() {
+    let output = document.getElementById("output");
+    output.textContent = fixCssValue(input.textContent.trim());
+}
+
+doStuff();
+
+input.focus();
+
+input.oninput = function() {
+    doStuff();
+};
+
+function fixCssValue(value) {
+    let length = value.length;
+    let parenthesisUnclosedCount = 0;
+
+    const State = {
+        Data: 0,
+        SingleQuoteString: 2,
+        DoubleQuoteString: 3,
+        Comment: 4
+    };
+
+    let state = State.Data;
+
+    for (let i = 0; i < length; i++) {
+        let char = value[i];
+        switch (char) {
+        case "'":
+            if (state === State.Data)
+                state = State.SingleQuoteString;
+            else if (state === State.SingleQuoteString)
+                state = State.Data;
+            break;
+
+        case "\"":
+            if (state === State.Data)
+                state = State.DoubleQuoteString;
+            else if (state === State.DoubleQuoteString)
+                state = State.Data;
+            break;
+
+        case "(":
+            if (state === State.Data)
+                ++parenthesisUnclosedCount;
+            break;
+
+        case ")":
+            if (state === State.Data && parenthesisUnclosedCount)
+                --parenthesisUnclosedCount;
+            break;
+
+        case "/":
+            if (state === State.Data) {
+                if (i + 1 < length && value[i + 1] === "*")
+                    state = State.Comment;
+            }
+            break;
+
+        case "*":
+            if (state === State.Comment) {
+                if (i + 1 < length && value[i + 1] === "/")
+                    state = State.Data;
+            }
+            break;
+
+        }
+    }
+
+    let suffix = "";
+    switch (state) {
+    case State.SingleQuoteString:
+        suffix = "'";
+        break;
+    case State.DoubleQuoteString:
+        suffix = "\"";
+        break;
+    case State.Comment:
+        suffix = "*/";
+        break;
+    }
+
+    if (parenthesisUnclosedCount)
+        suffix += ")".repeat(parenthesisUnclosedCount);
+
+    return suffix;
+}
diff --git a/docs/fix-value/index.html b/docs/fix-value/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Fix CSS values</title>
+    <style>
+    body {
+        font: 2em Menlo, monospace;
+    }
+    #output {
+        background-color: hsl(90, 100%, 94%);
+        color: green;
+    }
+    </style>
+</head>
+<body>
+<span id="input" contenteditable="plaintext-only" autofocus>url('</span>
+<span id="output"></span>
+<script src="fix-value.js"></script>
+</body>
+</html>
