refactor: split CSS and JS into modular files (SRP)

tests/unit/test_static_files.py

@@ -41,8 +41,9 @@ class TestCSSFileServing:
 
     @pytest.mark.asyncio
     async def test_css_contains_expected_variables(self, client):
-        """Test that styles.css contains expected CSS variables."""
-        response = await client.get("/static/css/styles.css")
+        """Test that CSS variables are defined in base/variables.css."""
+        # Variables are now in a separate module file
+        response = await client.get("/static/css/base/variables.css")
         
         assert response.status_code == 200
         content = response.text
@@ -56,22 +57,21 @@ class TestCSSFileServing:
 
     @pytest.mark.asyncio
     async def test_css_contains_dark_theme_support(self, client):
-        """Test that styles.css contains dark theme support."""
-        response = await client.get("/static/css/styles.css")
+        """Test that dark theme support is in base/variables.css."""
+        # Dark theme variables are now in a separate module file
+        response = await client.get("/static/css/base/variables.css")
         
         assert response.status_code == 200
         content = response.text
         
         # Check for dark theme variables
         assert '[data-theme="dark"]' in content
-        assert "--color-bg-primary-dark:" in content
-        assert "--color-text-primary-dark:" in content
 
     @pytest.mark.asyncio
     async def test_css_contains_responsive_design(self, client):
         """Test that CSS files contain responsive design media queries."""
-        # Test styles.css
-        response = await client.get("/static/css/styles.css")
+        # Responsive styles are now in utilities/responsive.css
+        response = await client.get("/static/css/utilities/responsive.css")
         assert response.status_code == 200
         assert "@media" in response.text
 
@@ -195,18 +195,29 @@ class TestCSSContentIntegrity:
 
     @pytest.mark.asyncio
     async def test_styles_css_structure(self, client):
-        """Test that styles.css has proper structure."""
+        """Test that styles.css is a modular entry point with @import statements."""
         response = await client.get("/static/css/styles.css")
         assert response.status_code == 200
         
         content = response.text
         
+        # styles.css is now an entry point with @import statements
+        assert "@import" in content
+        
+        # Check for imports of base, components, pages, and utilities
+        assert 'base/' in content or "base" in content.lower()
+
+    @pytest.mark.asyncio
+    async def test_css_variables_file_structure(self, client):
+        """Test that base/variables.css has proper structure."""
+        response = await client.get("/static/css/base/variables.css")
+        assert response.status_code == 200
+        
+        content = response.text
+        
         # Should have CSS variable definitions
         assert ":root" in content
         
-        # Should have base element styles
-        assert "body" in content or "html" in content
-        
         # Should not have syntax errors (basic check)
         # Count braces - should be balanced
         open_braces = content.count("{")
@@ -229,12 +240,17 @@ class TestCSSContentIntegrity:
     @pytest.mark.asyncio
     async def test_css_file_sizes_reasonable(self, client):
         """Test that CSS files are not empty and have reasonable sizes."""
-        # Test styles.css
+        # Test styles.css (now just @imports, so smaller)
         response = await client.get("/static/css/styles.css")
         assert response.status_code == 200
-        assert len(response.text) > 1000, "styles.css seems too small"
+        assert len(response.text) > 100, "styles.css seems too small"
         assert len(response.text) < 500000, "styles.css seems unusually large"
 
+        # Test variables.css (has actual content)
+        response = await client.get("/static/css/base/variables.css")
+        assert response.status_code == 200
+        assert len(response.text) > 500, "variables.css seems too small"
+
         # Test ux_features.css
         response = await client.get("/static/css/ux_features.css")
         assert response.status_code == 200