@thejaredwilcurt/csslop 0.0.20 → 0.0.21

package/src/value/syntax.js

@@ -53,4 +53,85 @@ function findMatchingParenthesis (value, openParenIndex) {
   return -1;
 }
 
-export { findMatchingParenthesis };
+/**
+ * Splits a CSS value into its top-level components, keeping parenthesized
+ * function arguments and quoted strings intact. Components are separated by
+ * whitespace, or by a `#`, which always starts a hash token and therefore ends
+ * any component already in progress.
+ *
+ * For example, `rgb(0 0 0) red` yields `["rgb(0 0 0)", "red"]`, and the
+ * minified `red#00f` yields `["red", "#00f"]`.
+ *
+ * @param  {string} value  The CSS value to split.
+ * @return {Array}         The top-level components of the value.
+ */
+function splitTopLevelComponents (value) {
+  const components = [];
+  let current = '';
+  let depth = 0;
+  let activeQuote = '';
+  let index = 0;
+
+  while (index < value.length) {
+    const character = value[index];
+
+    if (activeQuote) {
+      current += character;
+      if (character === '\\') {
+        current += value[index + 1] ?? '';
+        index += 2;
+        continue;
+      }
+      if (character === activeQuote) {
+        activeQuote = '';
+      }
+      index++;
+      continue;
+    }
+
+    if (character === '"' || character === '\'') {
+      activeQuote = character;
+      current += character;
+      index++;
+      continue;
+    }
+
+    if (character === '(') {
+      depth++;
+    }
+    if (character === ')' && depth > 0) {
+      depth--;
+    }
+
+    // Match any whitespace character, which separates components at depth zero
+    const isSeparator = depth === 0 && /\s/.test(character);
+    if (isSeparator) {
+      if (current) {
+        components.push(current);
+        current = '';
+      }
+      index++;
+      continue;
+    }
+
+    const startsHashToken = character === '#' && depth === 0 && current !== '';
+    if (startsHashToken) {
+      components.push(current);
+      current = '';
+    }
+
+    current += character;
+    index++;
+  }
+
+  if (current) {
+    components.push(current);
+  }
+
+  return components;
+}
+
+export {
+  findMatchingParenthesis,
+  splitTopLevelComponents
+};