Change components through variants

How to do it

Give each component a short, closed list of variants, typed where the language allows it. When a screen needs a new look, add a variant to the component in its own change. Ban !important and selectors that reach into the library's class names from screen files.

Example

type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium';
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export function Button({ variant = 'secondary', size = 'medium', ...rest }: ButtonProps) {
  return <button className={`ui-button ui-button--${variant} ui-button--${size}`} {...rest} />;
}

import pathlib
import re
import sys

REACHES_INTO_LIBRARY = re.compile(r"\.ui-[\w-]+|!important")
problems = [
    str(path) for path in pathlib.Path("src/screens").rglob("*.css")
    if REACHES_INTO_LIBRARY.search(path.read_text())
]
print("\n".join(problems) or "screens use variants only")
sys.exit(1 if problems else 0)

How to check

Search screen styles for the library's class prefix and for !important. There are no matches.