Automating Angular Component Styling with Python
Manually managing CSS styles for Angular components can be a tedious and error-prone process, especially when dealing with multiple projects and numerous files. Repeatedly opening HTML files in Notepad++, extracting < style > blocks, creating or appending to CSS files, and then meticulously adding classes to HTML elements becomes a significant time investment. This workflow is not only inefficient but also increases the risk of inconsistencies and mistakes across your codebase. Imagine having to perform these steps for hundreds of components – the effort quickly becomes overwhelming.
Streamlining Workflow with Python Scripting
A more efficient approach is to leverage the power of Python scripting to automate this entire process. By creating a Python script, you can effectively replace the manual steps with a single command. The script can traverse your project directories, identify .component.html files, extract both inline and embedded styles, generate corresponding CSS files, and seamlessly inject the necessary classes into the HTML. This automation significantly reduces the time spent on styling tasks, allowing developers to focus on more critical aspects of project development.

Centralized Style Management and Enhanced Consistency
Using a Python script for CSS extraction and injection offers several key advantages. First, it centralizes the style management process. All the logic for handling styles resides in a single script, making it easier to maintain and update. Second, it promotes consistency across projects. The same script can be used for all your Angular projects, ensuring that styles are handled uniformly. Third, it eliminates human error. By automating the extraction and injection of styles, the risk of typos, missed elements, or inconsistent class names is greatly reduced. This leads to cleaner, more maintainable code and a more streamlined development workflow.
import re
import os

... (save_to_file, extract_styles, flatten_css, extract_and_replace_inline_styles functions remain the same)

def extract_styles(html_content):
# 1. Remove HTML comments:
html_content = re.sub(r"(?=(html comment removed: )([\s\S]*?))", "", html_content, re.DOTALL) # Correct regex for comments
html_content = re.sub(r"//gs", "", html_content, re.DOTALL)

# 2. Extract <style> tags (now that comments are gone):
style_pattern = re.compile(r'<style[^>]*>(.*?)</style>', re.DOTALL | re.IGNORECASE)  # Case insensitive
styles = style_pattern.findall(html_content)

# 3. Remove <style> tags from the HTML content:
cleaned_html = style_pattern.sub('', html_content)

# Convert styles list to a dictionary with unique class names
styles_dict = {}
for i, style in enumerate(styles):
    class_name = "embedded-style-" + str(i + 1)
    styles_dict[class_name] = style.strip()  # Remove extra whitespace

return cleaned_html, styles_dict

def flatten_css(styles_dict):
flattened_css = []
for cls, style in styles_dict.items():
# Split the style into individual rules
rules = style.split("}")
for rule in rules:
rule = rule.strip()
if not rule:
continue
# Extract the selector and properties
if "{" in rule:
selector, properties = rule.split("{", 1)
selector = selector.strip()
properties = properties.strip()
# Prepend the parent class to the selector
flattened_css.append(".{} {} {{\n{}\n}}".format(cls, selector, properties))
return "\n".join(flattened_css)

def extract_and_replace_inline_styles(html_content):
inline_style_pattern = re.compile(r'style="([\s\S]*?)"', re.IGNORECASE)

styles = {}
cleaned_html = ""
last_match_end = 0

for match in inline_style_pattern.finditer(html_content):
    style_content = match.group(1)
    start, end = match.span()

    class_name = "inline-style-" + str(len(styles) + 1)
    styles[class_name] = style_content.strip()  # Remove extra whitespace

    # Find the opening tag more reliably (handles multi-line attributes)
    tag_start = -1
    for i in range(start - 1, -1, -1):  # Search backwards
        if html_content[i] == "<":
            tag_start = i
            break

    if tag_start != -1:
        tag_end = html_content.find(">", start)  # Find the closing >

        if tag_end != -1:
            tag = html_content[tag_start_end + 1]  # Extract the entire tag

            # Check if class attribute already exists
            if "class=" in tag:
                new_tag = tag.replace('class="', 'class="{} '.format(class_name))  # Add class to existing
            else:
                new_tag = tag.replace(">", ' class="{}">'.format(class_name))  # Add class attribute
            new_tag = new_tag.replace('style="{}"'.format(style_content), '')  # Remove the original style attribute
            cleaned_html += html_content[last_match_end_start] + new_tag
            last_match_end = tag_end + 1
        else:
            cleaned_html += html_content[last_match_end]  # Handle malformed tags
            last_match_end = end
    else:
        cleaned_html += html_content[last_match_end]  # Handle malformed tags
        last_match_end = end

cleaned_html += html_content[last_match_end:]
return cleaned_html, styles

def save_to_file(file_path, content, append=False): #Append parameter
mode = 'a' if append else 'w' #Choose mode
with open(file_path, mode, encoding='utf-8') as file:
file.write(content)

def process_directory(directory):
for root, _, files in os.walk(directory):
for file in files:
if file.endswith('.component.html'):
html_file_path = os.path.join(root, file)
css_file_path = os.path.join(root, file[:-5] + '.css')
embedded_css_file_path = os.path.join(root, file[:-5] + '.css')

            try:
                with open(html_file_path, 'r', encoding='utf-8') as html_file:
                    html_content = html_file.read()

                cleaned_html1, styles1 = extract_styles(html_content)
                cleaned_html, styles = extract_and_replace_inline_styles(cleaned_html1)

                save_to_file(html_file_path, cleaned_html)  # Save HTML (overwrite)

                if styles:
                    css_content = "\n".join([".{} {{ {} }}".format(cls, style) for cls, style in styles.items()])
                    save_to_file(css_file_path,"/*inlinestyle*/\n",append=os.path.exists(css_file_path)) # Append if file exists
                    save_to_file(css_file_path, css_content, append=os.path.exists(css_file_path)) # Append if file exists

                if styles1:
                    css_content1 = flatten_css(styles1)
                    save_to_file(css_file_path,"/*embedded style*/\n",append=os.path.exists(css_file_path)) # Append if file exists
                    save_to_file(embedded_css_file_path, css_content1, append=os.path.exists(embedded_css_file_path)) # Append if file exists

                print(f"Processed: {html_file_path}")

            except Exception as e:
                print(f"Error processing {html_file_path}: {e}")

... (main function remains the same)

if name == "main":
app_directory = "src/app" # Replace with your app directory
process_directory(app_directory)
print("Processing complete.")