Styles use Inline `@import`/`@layer` Instead of `<link>` Tags

[wesleyboar]

Note

Generated by AI. Edited by @wesleyboar.

Summary

Templates such as assets_core.html and assets_site.html include built CSS using inline <style> blocks with @import and @layer, switching behavior based on TACC_CORE_STYLES_VERSION. This deviates from common static asset practices and harms cacheability and debugability.

Files / Locations

• taccsite_cms/templates/assets_core.html
• taccsite_cms/templates/assets_site.html
• taccsite_cms/settings.py (references to TACC_CORE_STYLES_VERSION)

Problems / Impact

• Inline @import prevents browsers from discovering assets early, reduces parallel downloads, and complicates caching and CDNs.
• Harder to inspect which file URL a particular CSS rule originates from during debugging.
• Makes proper cache-busting and preloading more difficult.

Ideas

☢️ Prefer <link>

Prefer <link rel="stylesheet" href="{% static '.../build/...' %}"> for built/compiled assets.

But there is no layer support for <link> yet.

If @import is required for layering capabilities, evaluate whether it is truly required. Consider backwards compatibility.

👍 If Must @import, Clearly Document

If @import is required for layering capabilities, clearly document why and add server-side cache headers and preload hints for large files.

🧠 Use <link>, Move Layering into Stylesheet

If @import is required for layering capabilities, move the @layer/layer() syntax into the stylesheet.