learning-website-framework1-4  Exercise 2: Migrate an Accent to a Variable Safely
===========================================================================================

Write a script that takes a fragment and its accent colour and replaces the
colour, inside <style> blocks only, with var(--accent, <the same colour>). The
fallback value means the fragment still looks the same if the variable is not
defined, so you can migrate one file at a time with no risk of breaking pages.

Save as accent_to_var.py:

import re, sys

STYLE = re.compile(r"(<style[^>]*>)(.*?)(</style>)", re.S | re.I)

def convert(text, accent):
    """Replace the accent colour inside <style> blocks with var(--accent, <accent>).
    Returns (new_text, number_of_replacements)."""
    count = 0
    pattern = re.compile(re.escape(accent) + r"(?![0-9a-fA-F])", re.I)

    def fix(m):
        nonlocal count
        css, n = pattern.subn(f"var(--accent, {accent})", m.group(2))
        count += n
        return m.group(1) + css + m.group(3)

    return STYLE.sub(fix, text), count

def balanced(text):
    css = "".join(m.group(2) for m in STYLE.finditer(text))
    return css.count("{") == css.count("}")

if __name__ == "__main__":
    path, accent = sys.argv[1], sys.argv[2]
    original = open(path, encoding="utf-8").read()
    new, n = convert(original, accent)
    print(f"{path.split('/')[-1]}: {n} replacements of {accent}")
    print(f"braces balanced after: {balanced(new)}")
    outside_before = STYLE.sub("", original)
    outside_after = STYLE.sub("", new)
    print(f"markup outside <style> unchanged: {outside_before == outside_after}")
    print(f"size: {len(original.encode('utf-8')):,} -> {len(new.encode('utf-8')):,} bytes")

Run it on a real chapter (the original file is NOT modified; the script only
reports what it would change):

  python accent_to_var.py "<debserver>/claude-projects/website-content/content/hungary/hungarian-basic-3/hungarian_basic_conversation_3_1.html" "#5aa469"

Output (checked by running it):

hungarian_basic_conversation_3_1.html: 9 replacements of #5aa469
braces balanced after: True
markup outside <style> unchanged: True
size: 34,716 -> 34,851 bytes

How it is used later
--------------------
The site layout sets the variable for each language or site, for example:

  <div class="hu-lesson" style="--accent: #5aa469"> ... </div>
or in the site's CSS:
  .hu-lesson { --accent: #5aa469; }

Because every accent use now reads var(--accent, #5aa469), a new language needs
one line of CSS instead of a copy of the whole stylesheet.

WHY THIS WORKS AS AN ANSWER
---------------------------
Big design migrations fail when they must be done all at once. The fallback
value makes each change independently safe, the check that braces are balanced
and the markup outside <style> is unchanged catches mistakes, and the script
can be run over one course, then another, at your own pace.