Force a specific mode using {# fmt:mode #}

Author: JaapJoris

README.md

@@ -2,6 +2,28 @@
 
 ***A pure-Python Django/Jinja template indenter without dependencies.***
 
+```jinja
+{% block content %}
+    <blockquote
+        cite="Guido Van Rossum"
+        class="pythonic"
+    >
+        Don't you hate code that's not properly indented?
+    </blockquote>
+{% endblock %}
+
+<style>
+    .pythonic {
+        font-style: italic;
+
+        {% if dark_mode %}
+            background: black;
+            color: white;
+        {% endif %}
+    }
+</style>
+```
+
 DjHTML indents mixed HTML/CSS/JavaScript templates that contain
 [Django](https://docs.djangoproject.com/en/stable/ref/templates/language/)
 or [Jinja](https://jinja.palletsprojects.com/templates/) template
@@ -15,64 +37,6 @@ other characters. The goal is to correctly indent already
 well-structured templates, not to fix broken ones.
 
 
-### New! Multi-line HTML elements
-
-As of version 3, DjHTML indents multi-line HTML elements and
-multi-line attribute values like this:
-
-```jinja
-<blockquote cite="Guido Van Rossum"
-            style="font-style: italic;
-                   {% if dark_mode %}
-                       background: black;
-                   {% endif %}
-                  ">
-    Don't you hate code that's not properly indented?
-</blockquote>
-```
-
-
-### New! Multi-line CSS indentation
-
-Multi-line CSS values are now continued at the same indentation level:
-
-```jinja
-<style>
-    @font-face {
-        font-family: Helvetica;
-        src: {% for format, filename in licensed_fonts %}
-                 url('{% static filename %}') format('{{ format }}'),
-             {% endfor %}
-             url('Arial.woff2') format('woff2'),
-             url('Arial.woff') format('woff');
-    }
-</style>
-```
-
-
-### New! Improved JavaScript indentation
-
-Many new JavaScript indention rules have been added, such as the
-indentation of method chaining:
-
-```jinja
-<script>
-    window.fetch('/test.html')
-        .then((html) => {
-            document.body.innerHTML = html;
-            {% block extra_statements %}
-            {% endblock %}
-        });
-</script>
-```
-
-
-### New! Tabwidth guessing
-
-Without the `-t` / `--tabwidth` argument, DjHTML no longer defaults to
-a tabwidth of 4 but instead guesses the correct tabwidth.
-
-
 ## Installation
 
 DjHTML requires Python 3.8 or higher and is compatible with all
@@ -123,6 +87,17 @@ You can exclude specific lines from being processed with the
 {# fmt:on #}
 ```
 
+You can also force a specific mode with `fmt:html`, `fmt:css` or `fmt:js`:
+
+```jinja
+{% block extra_css %}
+    {# fmt:css #}
+    a {
+        color: red;
+    }
+{% endblock %}
+```
+
 Contents inside `<pre> ... </pre>`, `<!-- ... --->`, `/* ... */`, and
 `{% comment %} ... {% endcomment %}` tags are also ignored (depending
 on the current mode).

djhtml/modes.py

@@ -189,6 +189,10 @@ class DjTXT(BaseMode):
     RAW_TOKENS = [
         r"\n",
         r"{%[-+]?.*?[-+]?%}",
+        r"{# fmt:off #}",
+        r"{# fmt:html #}",
+        r"{# fmt:css #}",
+        r"{# fmt:js #}",
         r"{#",
         r"{{.*?}}",
     ]
@@ -228,13 +232,18 @@ def create_token(self, raw_token, src, line):
                 token = Token.CloseAndOpen(raw_token, mode=DjTXT, **self.offsets)
             else:
                 token = Token.Text(raw_token, mode=DjTXT, **self.offsets)
-        elif raw_token == "{#":
-            token, mode = Token.Open(raw_token, mode=DjTXT, ignore=True), Comment(
+        elif raw_token == "{# fmt:off #}":
+            token, mode = Token.Text(raw_token, mode=DjTXT, ignore=True), Comment(
                 "{# fmt:on #}", mode=DjTXT, return_mode=self
-            ) if src.startswith(" fmt:off #}") else Comment(
-                "#}", mode=DjTXT, return_mode=self
             )
-
+        elif raw_token == "{# fmt:html #}":
+            token, mode = Token.Text(raw_token, mode=DjHTML, ignore=True), DjHTML(return_mode=self)
+        elif raw_token == "{# fmt:css #}":
+            token, mode = Token.Text(raw_token, mode=DjCSS, ignore=True), DjCSS(return_mode=self)
+        elif raw_token == "{# fmt:js #}":
+            token, mode = Token.Text(raw_token, mode=DjJS, ignore=True), DjJS(return_mode=self)
+        elif raw_token == "{#":
+            token, mode = Token.Open(raw_token, mode=DjTXT, ignore=True), Comment("#}", mode=DjTXT, return_mode=self)
         else:
             token = Token.Text(raw_token, mode=self.__class__, **self.offsets)
 

tests/suite/django.html

@@ -195,3 +195,21 @@ <h1>Welcome, {{ request.user }}</h1>
 {% customtag %}
     <div></div>
 {% endcustomtag %}
+
+
+<!-- Force specific modes -->
+{# fmt:css #}
+a {
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+{# fmt:js #}
+function f() {
+    return 42;
+}
+{# fmt:html #}
+<ul>
+    <li/>
+</ul>

tests/suite/django.tokens

@@ -1,9 +1,9 @@
 Line([Open('<!--', mode=DjHTML, ignore=True), Text(' The example from the README ', mode=Comment, ignore=True), Close('-->', mode=DjHTML, ignore=True)], ignore=True)
 Line([Text('<', mode=DjHTML), Text('div ', mode=InsideHTMLTag, absolute=5), Text('class=', mode=InsideHTMLTag, absolute=5), Text('"', mode=InsideHTMLTag, absolute=12)])
-Line([Text('    ', mode=InsideHTMLTag, absolute=12), Open('{#', mode=DjTXT, ignore=True), Text(' fmt:off #}', mode=Comment, ignore=True)], ignore=True)
-Line([Text('      ,-._|\\', mode=Comment, ignore=True)], level=1, ignore=True)
-Line([Text('     /     .\\', mode=Comment, ignore=True)], level=1, ignore=True)
-Line([Text('     \\_,--._/', mode=Comment, ignore=True)], level=1, ignore=True)
+Line([Text('    ', mode=InsideHTMLTag, absolute=12), Text('{# fmt:off #}', mode=DjTXT, ignore=True)], ignore=True)
+Line([Text('      ,-._|\\', mode=Comment, ignore=True)], ignore=True)
+Line([Text('     /     .\\', mode=Comment, ignore=True)], ignore=True)
+Line([Text('     \\_,--._/', mode=Comment, ignore=True)], ignore=True)
 Line([Text('    ', mode=Comment, ignore=True), Close('{# fmt:on #}', mode=DjTXT, ignore=True)], ignore=True)
 Line([Text('           ', mode=InsideHTMLTag, absolute=12), Text('"', mode=InsideHTMLTag, absolute=11), Text('/>', mode=DjHTML)], offset=11)
 Line([])
@@ -195,4 +195,22 @@ Line([Open('<!--', mode=DjHTML, ignore=True), Text(' Custom tag ', mode=Comment,
 Line([Open('{% customtag %}', mode=DjTXT)])
 Line([Text('    ', mode=DjHTML), Text('<', mode=DjHTML), Text('div', mode=InsideHTMLTag, absolute=5), Open('>', mode=DjHTML, level=1), Close('</div>', mode=DjHTML)], level=1)
 Line([Close('{% endcustomtag %}', mode=DjTXT)])
+Line([])
+Line([])
+Line([Open('<!--', mode=DjHTML, ignore=True), Text(' Force specific modes ', mode=Comment, ignore=True), Close('-->', mode=DjHTML, ignore=True)], ignore=True)
+Line([Text('{# fmt:css #}', mode=DjCSS, ignore=True)], ignore=True)
+Line([Text('a ', mode=DjCSS), Open('{', mode=DjCSS)])
+Line([Text('    ', mode=DjCSS), Text('text-decoration: ', mode=DjCSS), Text('none', mode=DjCSS, absolute=17), Text(';', mode=DjCSS)], level=1)
+Line([Text('    &:hover ', mode=DjCSS), Open('{', mode=DjCSS, level=1)], level=1)
+Line([Text('        ', mode=DjCSS), Text('text-decoration: ', mode=DjCSS), Text('underline', mode=DjCSS, absolute=17), Text(';', mode=DjCSS)], level=2)
+Line([Text('    ', mode=DjCSS), Close('}', mode=DjCSS)], level=1)
+Line([Close('}', mode=DjCSS)])
+Line([Text('{# fmt:js #}', mode=DjJS, ignore=True)], ignore=True)
+Line([Text('function f', mode=DjJS), Open('(', mode=DjJS), Close(')', mode=DjJS), Text(' ', mode=DjJS), Open('{', mode=DjJS)])
+Line([Text('    return 42;', mode=DjJS)], level=1)
+Line([Close('}', mode=DjJS)])
+Line([Text('{# fmt:html #}', mode=DjHTML, ignore=True)], ignore=True)
+Line([Text('<', mode=DjHTML), Text('ul', mode=InsideHTMLTag, absolute=4), Open('>', mode=DjHTML)])
+Line([Text('    ', mode=DjHTML), Text('<', mode=DjHTML), Text('li', mode=InsideHTMLTag, absolute=4), Text('/>', mode=DjHTML)], level=1)
+Line([Close('</ul>', mode=DjHTML)])
 Line([])