Update app.py

app.py

@@ -2,27 +2,54 @@ import re
 import streamlit as st
 from bs4 import BeautifulSoup
 
-# Streamlit App
-st.title("HTML to Twig and SCSS Converter")
-
-# Functions to parse variables and convert CSS to SCSS
 def parse_variable_file(variable_content):
     """Parses the SCSS variable content and returns a mapping of color names to their values."""
     variables = {}
+    # First pass: collect all variable definitions
     for line in variable_content.splitlines():
-        # Match SCSS variables (e.g., `$white: #fff !default;`)
-        match = re.match(r"^\s*\$([\w-]+):\s*(#[a-fA-F0-9]{3,6}|rgba?\(.+?\))", line)
+        # Match SCSS variables with more flexible pattern
+        match = re.match(r'^\s*\$([\w-]+)\s*:\s*([^;]+)\s*(!default)?;?', line)
         if match:
-            variables[match.group(2)] = f"${match.group(1)}"  # Color value as key, variable name as value
+            var_name = match.group(1)
+            var_value = match.group(2).strip()
+            variables[var_value] = f"${var_name}"
+            # Also store the variable name itself for reference
+            variables[f"${var_name}"] = f"${var_name}"
     return variables
 
 def convert_css_to_scss(css_content, variable_mapping):
     """Converts CSS content to SCSS by replacing color values with variable names."""
-    for color, variable in variable_mapping.items():
-        css_content = css_content.replace(color, variable)
-    return css_content
+    # Sort the color mappings by length (longest first) to avoid partial replacements
+    sorted_mappings = sorted(variable_mapping.items(), key=lambda x: len(x[0]), reverse=True)
+    
+    # Process the content line by line
+    converted_lines = []
+    for line in css_content.splitlines():
+        processed_line = line
+        
+        # Skip comments
+        if '/*' in line and '*/' in line:
+            comment_start = line.index('/*')
+            comment_end = line.index('*/') + 2
+            before_comment = line[:comment_start]
+            comment = line[comment_start:comment_end]
+            after_comment = line[comment_end:]
+            
+            # Process only the non-comment parts
+            for value, variable in sorted_mappings:
+                before_comment = before_comment.replace(value, variable)
+                after_comment = after_comment.replace(value, variable)
+            
+            processed_line = before_comment + comment + after_comment
+        else:
+            # Process normal lines
+            for value, variable in sorted_mappings:
+                processed_line = processed_line.replace(value, variable)
+        
+        converted_lines.append(processed_line)
+    
+    return '\n'.join(converted_lines)
 
-# Functions to convert HTML to Twig and CSS to SCSS
 def extract_css_and_replace_with_variables(css_content, variables_content):
     """Replaces CSS properties with SCSS variables."""
     try:
@@ -31,7 +58,7 @@ def extract_css_and_replace_with_variables(css_content, variables_content):
     except Exception as e:
         st.error(f"Error processing CSS to SCSS: {e}")
         return None
-
+        
 def convert_html_to_twig(html_content):
     """Converts HTML to Twig format."""
     try: