fix: The headless template included inline CSS (#8291)

fsbraun · web-flow · commit 17c91b4207fa · 2025-07-15T23:35:12.000+05:30
diff --git a/cms/static/cms/sass/cms.headless.scss b/cms/static/cms/sass/cms.headless.scss
@@ -0,0 +1,29 @@
+@import "settings/all";
+
+html.cms-structure-mode-structure section {
+    margin-inline-end: 436px;
+}
+
+.cms-placeholder-view section {
+    font: normal 18px/24px Helvetica,Arial,sans-serif;
+    padding: 20px;
+}
+
+.cms-placeholder-view h1 {
+    margin: 0 0 20px;
+    padding: 0;
+    padding-bottom: 10px;
+    font-size: 1.5em;
+    border-bottom: 1px solid $gray-light;
+    small {
+        font-size: 0.5em;
+        color: $gray;
+    }
+}
+
+.cms-placeholder-view section img {
+    max-width: 100%;
+    padding: 3px;
+    margin: -5px;
+    border: 1px solid $gray-light;
+}
diff --git a/cms/templates/cms/headless/placeholder.html b/cms/templates/cms/headless/placeholder.html
@@ -1,38 +1,11 @@
-<!DOCTYPE html>{% load cms_tags menu_tags sekizai_tags static i18n %}{% spaceless %}
+<!DOCTYPE html>{% load cms_tags cms_static menu_tags sekizai_tags static i18n %}{% spaceless %}
     {% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
     <html class="cms-placeholder-view" lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
         <head>
             <meta charset="utf-8"/>
             <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
             <title>{% block title %}{{ request.current_page.get_page_title|striptags }}{% endblock %}</title>
-            <style>
-                html.cms-structure-mode-structure section {
-                    margin-inline-end: 436px;
-                }
-                .cms-placeholder-view section {
-                    font: normal 18px/24px Helvetica,Arial,sans-serif;
-                    margin: 20px;
-                    padding: 20px;
-                    border: 1px solid #ccc;
-                }
-                .cms-placeholder-view h1 {
-                    margin: 0 0 20px;
-                    padding: 0;
-                    padding-bottom: 10px;
-                    font-size: 1.5em;
-                    border-bottom: 1px solid #ccc;
-                    small {
-                        font-size: 0.5em;
-                        color: #999;
-                    }
-                }
-                .cms-placeholder-view section img {
-                    max-width: 100%;
-                    padding: 3px;
-                    margin: -5px;
-                    border: 1px solid #ccc;
-                }
-            </style>
+            <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.headless.css' %}"/>
 {% endspaceless %}{% render_block 'css' %}{% spaceless %}
     {% block page_head %}{% endblock %}
         </head>
