feat: added github action for Check for embedded CSS and the correct stylesheet in Typescript files #2907

.github/workflows/css_check.py

@@ -0,0 +1,121 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""Check TypeScript files for CSS violations and embedded CSS."""
+
+import argparse
+import os
+import re
+import sys
+
+
+def check_embedded_css(content: str) -> list:
+    """
+    Check for embedded CSS in the content.
+
+    Args:
+        content: The content of the file to check.
+
+    Returns:
+        A list of embedded CSS violations found.
+    """
+    embedded_css_pattern = r'#([0-9a-fA-F]{3}){1,2}'
+    return re.findall(embedded_css_pattern, content)
+
+
+def check_files(directory: str, exclude_files: list, exclude_directories: list) -> tuple:
+    """
+    Check TypeScript files for CSS violations and print correct CSS imports.
+
+    Args:
+        directory: The directory to check.
+        exclude_files: List of files to exclude from analysis.
+        exclude_directories: List of directories to exclude from analysis.
+
+    Returns:
+        A tuple containing lists of violations, correct CSS imports, and embedded CSS violations.
+    """
+    violations = []
+    correct_css_imports = []
+    embedded_css_violations = []
+
+    # Normalize exclude paths
+    exclude_files = set(os.path.abspath(file) for file in exclude_files)
+    exclude_directories = set(os.path.abspath(dir) for dir in exclude_directories)
+
+    for root, _, files in os.walk(directory):
+        # Skip excluded directories
+        if any(root.startswith(exclude_dir) for exclude_dir in exclude_directories):
+            continue
+
+        for file in files:
+            file_path = os.path.abspath(os.path.join(root, file))
+
+            # Skip excluded files
+            if file_path in exclude_files:
+                continue
+
+            # Process TypeScript files
+            if file.endswith((".ts", ".tsx")) and "test" not in root:
+                with open(file_path, "r", encoding="utf-8") as f:
+                    content = f.read()
+
+                    # Check for CSS imports with an improved regex pattern
+                    css_imports = re.findall(r'import\s+.*?["\'](.*?\.css)["\'];', content)
+                    for css_file in css_imports:
+                        # Check if the CSS import ends with /app.module.css
+                        if css_file.endswith("/app.module.css"):
+                            correct_css_imports.append(f"Correct CSS import ({css_file}) in {file_path}")
+                        else:
+                            violations.append(f"Invalid CSS import ({css_file}) in {file_path}")
+
+                    # Check for embedded CSS
+                    embedded_css = check_embedded_css(content)
+                    if embedded_css:
+                        embedded_css_violations.append(f"Embedded CSS found in {file_path}: {', '.join(embedded_css)}")
+
+    return violations, correct_css_imports, embedded_css_violations
+
+
+def main():
+    """Run the CSS check script."""
+    parser = argparse.ArgumentParser(description="Check for CSS violations in TypeScript files.")
+    parser.add_argument("--directory", required=True, help="Directory to check.")
+    parser.add_argument(
+        "--exclude_files", nargs="*", default=[],
+        help="Specific files to exclude from analysis."
+    )
+    parser.add_argument(
+        "--exclude_directories", nargs="*", default=[],
+        help="Directories to exclude from analysis."
+    )
+    args = parser.parse_args()
+
+    violations, correct_css_imports, embedded_css_violations = check_files(
+        directory=args.directory,
+        exclude_files=args.exclude_files,
+        exclude_directories=args.exclude_directories
+    )
+
+    if violations:
+        print("\nCSS Import Violations:")
+        print("\n".join(violations))
+
+    if embedded_css_violations:
+        print("\nEmbedded CSS Violations:")
+        print("\n".join(embedded_css_violations))
+
+    if correct_css_imports:
+        print("\nCorrect CSS Imports:")
+        print("\n".join(correct_css_imports))
+    else:
+        print("\nNo correct CSS imports found.")
+
+    if violations or embedded_css_violations:
+        sys.exit(1)  # Exit with error code if violations found
+    else:
+        print("\nNo CSS violations found.")
+        sys.exit(0)  # Exit with success code
+
+
+if __name__ == "__main__":
+    main()

.github/workflows/pull-request.yml

@@ -39,6 +39,12 @@ jobs:
         run: |
           chmod +x ./.github/workflows/countline.py
           ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx src/components/TagActions/TagActionsMocks.ts src/utils/interfaces.ts src/screens/MemberDetail/MemberDetail.tsx
+
+         # Run the CSS import check script
+      - name: Check for CSS violations and print correct imports
+        run: |
+          chmod +x ./.github/workflows/css_check.py  
+          ./.github/workflows/css_check.py --directory .    
 
       - name: Get changed TypeScript files
         id: changed-files