Update app.py

app.py

@@ -1,149 +1,158 @@
 import re
 import streamlit as st
 from bs4 import BeautifulSoup
+from copy import deepcopy
 
 def parse_variable_file(variable_content):
     """Parses the SCSS variable content and returns a mapping of color names to their values."""
     variables = {}
-    variable_references = {}
+    temp_references = {}
     
     # First pass: collect direct color definitions
-    # Match both with and without !default, including rgba values
     color_pattern = re.compile(r'^\s*\$([\w-]+):\s*(#[a-fA-F0-9]{3,6}|rgba?\([^)]+\))\s*(!default)?\s*;')
-    # Match variable references
     reference_pattern = re.compile(r'^\s*\$([\w-]+):\s*\$([\w-]+)\s*(!default)?\s*;')
     
-    # Process each line
     lines = variable_content.splitlines()
     for line in lines:
-        # Skip comments and empty lines
-        if line.strip().startswith('//') or not line.strip():
+        if not line.strip() or line.strip().startswith('//') or 'map-merge' in line:
             continue
             
-        # Skip map-merge blocks
-        if 'map-merge' in line:
-            continue
-            
-        # Try to match direct color values
         color_match = color_pattern.match(line)
         if color_match:
             var_name = color_match.group(1)
             color_value = color_match.group(2)
             variables[color_value] = f"${var_name}"
-            # Store the variable name itself as a key for reference
-            variables[f"${var_name}"] = f"${var_name}"
             continue
             
-        # Try to match variable references
         ref_match = reference_pattern.match(line)
         if ref_match:
-            var_name = ref_match.group(1)
+            referencing_var = ref_match.group(1)
             referenced_var = ref_match.group(2)
-            variable_references[var_name] = referenced_var
+            temp_references[referencing_var] = referenced_var
+    
+    final_variables = deepcopy(variables)
     
-    # Second pass: resolve variable references
-    for var_name, referenced_var in variable_references.items():
-        for color, original_var in variables.items():
-            if f"${referenced_var}" == original_var:
-                variables[f"${var_name}"] = original_var
+    for referencing_var, referenced_var in temp_references.items():
+        for color, var_name in variables.items():
+            if var_name == f"${referenced_var}":
+                final_variables[color] = f"${referencing_var}"
+                break
     
-    return variables
+    return final_variables
 
 def convert_css_to_scss(css_content, variable_mapping):
     """Converts CSS content to SCSS by replacing color values with variable names."""
-    # Sort mappings by length of the color value (longest first)
-    sorted_mappings = sorted(variable_mapping.items(), 
-                           key=lambda x: len(x[0]) if not x[0].startswith('$') else 0, 
-                           reverse=True)
+    replacements = sorted(
+        list(variable_mapping.items()),
+        key=lambda x: len(x[0]) if not x[0].startswith('$') else 0,
+        reverse=True
+    )
     
-    # Process each line while preserving comments
     result_lines = []
     for line in css_content.splitlines():
         processed_line = line
         
-        # Handle lines with comments
         if '/*' in line and '*/' in line:
-            parts = re.split(r'(/\*.*?\*/)', line)
-            for i, part in enumerate(parts):
-                if not part.startswith('/*'):
-                    # Only process non-comment parts
-                    for color, variable in sorted_mappings:
-                        if not color.startswith('$'):  # Only replace actual color values
-                            part = part.replace(color, variable)
-                    parts[i] = part
-            processed_line = ''.join(parts)
+            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:]
+            
+            for color, variable in replacements:
+                if not color.startswith('$'):
+                    before_comment = before_comment.replace(color, variable)
+                    after_comment = after_comment.replace(color, variable)
+            
+            processed_line = before_comment + comment + after_comment
         else:
-            # Process lines without comments
-            for color, variable in sorted_mappings:
-                if not color.startswith('$'):  # Only replace actual color values
+            for color, variable in replacements:
+                if not color.startswith('$'):
                     processed_line = processed_line.replace(color, variable)
         
         result_lines.append(processed_line)
     
     return '\n'.join(result_lines)
 
-def extract_css_and_replace_with_variables(css_content, variables_content):
-    """Replaces CSS properties with SCSS variables."""
-    try:
-        variable_mapping = parse_variable_file(variables_content)
-        scss_content = convert_css_to_scss(css_content, variable_mapping)
-        return scss_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:
         soup = BeautifulSoup(html_content, "html.parser")
-
+        
+        # First pass: collect all tags that will need variables
+        tags_with_content = set()
         for tag in soup.find_all():
-            # Replace text with Twig variables
             if tag.string and tag.string.strip():
-                tag.string = f"{{{{ {tag.name}_content }}}}"  # Example: <h1>{{ h1_content }}</h1>
-
+                tags_with_content.add(tag.name)
+        
+        # Second pass: replace content and attributes
+        for tag in soup.find_all():
+            # Replace text content with Twig variables
+            if tag.string and tag.string.strip():
+                tag.string = f"{{{{ {tag.name}_content }}}}"
+            
             # Replace attributes with Twig variables
-            for attr, value in tag.attrs.items():
-                tag[attr] = f"{{{{ {attr}_{tag.name} }}}}"  # Example: src="{{ src_img }}"
-
-        # Add comments for Twig variables
-        twig_comments = "\n".join(
-            [
-                f"<!-- `{{{{ {tag.name}_content }}}}`: Content for <{tag.name}> -->"
-                for tag in soup.find_all() if tag.string
-            ]
-        )
-
-        return f"{twig_comments}\n{soup.prettify()}"
+            for attr, value in list(tag.attrs.items()):  # Use list to avoid runtime modification issues
+                tag[attr] = f"{{{{ {attr}_{tag.name} }}}}"
+        
+        # Generate comments for Twig variables
+        twig_comments = []
+        for tag_name in sorted(tags_with_content):
+            twig_comments.append(
+                f"<!-- `{{{{ {tag_name}_content }}}}`: Content for <{tag_name}> -->"
+            )
+        
+        return f"{chr(10).join(twig_comments)}\n{soup.prettify()}"
     except Exception as e:
         st.error(f"Error converting HTML to Twig: {e}")
         return None
 
+def extract_css_and_replace_with_variables(css_content, variables_content):
+    """Replaces CSS properties with SCSS variables."""
+    try:
+        variable_mapping = parse_variable_file(variables_content)
+        return convert_css_to_scss(css_content, variable_mapping)
+    except Exception as e:
+        st.error(f"Error processing CSS to SCSS: {e}")
+        print(f"Debug - Error details: {str(e)}")
+        return None
+
+# Streamlit app
+st.title("HTML to Twig and SCSS Converter")
+
 # File uploaders
 html_file = st.file_uploader("Upload HTML File", type=["html"], key="html_file")
-css_file = st.file_uploader("Upload CSS File (Optional)", type=["css"], key="css_file")
+css_file = st.file_uploader("Upload CSS File", type=["css"], key="css_file")
 variables_file = st.file_uploader("Upload SCSS Variables File", type=["scss"], key="variables_file")
 
 # Handle HTML to Twig conversion
 if html_file:
     html_content = html_file.read().decode("utf-8")
     twig_content = convert_html_to_twig(html_content)
-
     if twig_content:
         st.subheader("Twig Output")
         st.code(twig_content, language="twig")
-
-        st.download_button("Download Twig File", data=twig_content, file_name="output.twig", mime="text/plain")
+        st.download_button(
+            "Download Twig File",
+            data=twig_content,
+            file_name="output.twig",
+            mime="text/plain"
+        )
 
 # Handle CSS to SCSS conversion
 if css_file and variables_file:
-    css_content = css_file.read().decode("utf-8")
-    variables_content = variables_file.read().decode("utf-8")
-
-    scss_content = extract_css_and_replace_with_variables(css_content, variables_content)
-
-    if scss_content:
-        st.subheader("SCSS Output")
-        st.code(scss_content, language="scss")
-
-        st.download_button("Download SCSS File", data=scss_content, file_name="styles.scss", mime="text/plain")
+    try:
+        css_content = css_file.read().decode("utf-8")
+        variables_content = variables_file.read().decode("utf-8")
+        scss_content = extract_css_and_replace_with_variables(css_content, variables_content)
+        if scss_content:
+            st.subheader("SCSS Output")
+            st.code(scss_content, language="scss")
+            st.download_button(
+                "Download SCSS File",
+                data=scss_content,
+                file_name="converted.scss",
+                mime="text/plain"
+            )
+    except Exception as e:
+        st.error(f"An error occurred: {str(e)}")