[BUG] [Formatter] formatting not disabled inside {# djlint:off #} inside script tag

[thacoon]

• [x] I'm on the latest version of djLint
• [x] I've searched the issues
• [x] I've read the docs

System Info

• OS: macOS Sonoma
• Python Version 3.11.9
• djLint Version 1.34.1
• template language: django default templating language

Issue

I am sometimes using django templating language inside the script tag. When I reformat the code this gets reformatted as well, so I want to ignore that part using {# djlint:off #}. However this is ignored by djlint and it tries to reformat the code resulting in broken javascript code, event {# djlint:off #} gets reformatted as well. Currently I can only ignore the whole script tag, then nothing gets reformated inside the script tag, but as soon as I only want to ignore a specific part inside it, everything gets reformatted, which then also breaks my JS code.

A similar issue was reported, which was fixed in version 1.0.0 #166, however in that previous error the {# djlint:off #} comments itself have not been affected, which is now the case.

How to Reproduce

<script>
    {# djlint:off #}
    const _steps = {
      {% for step in steps %}
        '{{ step.id }}': true
        {% if not forloop.last %},{% endif %}
      {% endfor %}
    };
    {# djlint:on #}

    document.addEventListener('alpine:init', () => {
        Alpine.data('steps-table', () => {
            return {
               steps: _steps, 
            };
        });
    });
</script>

I run djlint --reformat --format-js server/templates/ and get:

<script>
    {
        # djlint: off #
    }
    const _steps = {
        {
            %
            for step in steps %
        }
        '{{ step.id }}': true {
            %
            if not forloop.last %
        },
        {
            % endif %
        } {
            % endfor %
        }
    };
    {
        # djlint: on #
    }
    document.addEventListener('alpine:init', () => {
        Alpine.data('steps-table', () => {
            return {
                steps: _steps,
            };
        });
    });
</script>

Contents of .djlintrc/pyproject.toml [tool.djlint]

[tool.djlint]
ignore = "H006,H030,H031"
include = "H017,H035"
indent = 2
blank_line_after_tag = "load,extends"
profile = "django"
max_line_length = 120
format_attrite_template_tags = true

[WellingtonNico]

up, same problem here:

update: i bet it would happen with css also

before:

<script>

       {# djlint:off #}
       {% if not open_form %}
	    console.log('my code that should not be formatted')
       {% endif %}
       {# djlint:on #}

    function my_function_that_should_be_indented() {
	     $("#client_form").show();
             $("#list_users").hide();
    }
 </script>

after:

<script>
    {
      # djlint: off #
    } {
      %
      if not open_form %
    }
    console.log('my code that should not be formatted') {
      % endif %
    } {
      # djlint: on #
    }

    function my_function_that_should_be_indented() {
       $("#client_form").show();
       $("#list_users").hide();
    }
 </script>

[monosans]

https://github.com/djlint/djLint/issues/931#issuecomment-2439661445

[gsnider2195]

#931 (comment)

I'm seeing another issue with djlint:off even with format_js=false and format_css=false:

{# djlint:off #}
{% block javascript %}
    <script>
        const someJavascript = "foo";
    </script>
{% endblock %}
{# djlint:on #}

Reformatting 16/16 files ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 00:00    


test_djlint.html
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -2,6 +2,6 @@

 {% block javascript %}
     <script>
         const someJavascript = "foo";
-    </script>
+</script>
 {% endblock %}
 {# djlint:on #}

I would expect this linter to not touch anything between the djlint:off and djlint:on directives.