Suggestions for the `namespace` and `css` twig tags to make templating more component oriented. #9939

mikesnoeren · 2021-10-06T15:19:09Z

mikesnoeren
Oct 6, 2021

Suggestions for the `{% namespace %}` and `{% css %}` twig tags to make templating more component oriented.

1. withClasses as default.

Specifying withClasses gets a bit tedious, wouldn't it make more sense to have that functionality enabled by default? Or perhaps, it could be a config setting?

{% namespace 'component' withClasses %} 
    <style>
        .container {
            background: red;
        }
    </style>
{% endnamespace %}

2. Make namespaces respect css tag

The following currently doesn't work, meaning {% namespace %} is only usable if you have <style> tags in your body, which isn't ideal.

{% namespace 'component' withClasses %} 
   {% css %} 
        .container {
            background: red;
        }
  {% endcss %}
{% endnamespace %}

3. Add an option to the css tag to generate a css file

This is a new feature, but would make templating a lot easier... Yes, it would generate the content on every pageload, but it could be set up in a way that it won't generate the files anymore when within an enabled {% cache %} tag?

{% namespace 'component' withClasses %} 
   {% css as 'component.css' %}
        .container {
            background: red;
        }
  {% endcss %}
{% endnamespace %}

How my template would look if all suggestions were to be accepted:

{% cache %}
    {% namespace 'component' %} 
        {% css as 'assets/css/component.css' %}
            .container {
                background: red;
            }
        {% endcss %}

        <head>
            <link href="/assets/css/component.css" rel="stylesheet">
        </head>

        <body> 
            <div class="container">
                {# ... #}
            </div>
        </body>
    {% endnamespace %}
{% endcache %}

Answered by brandonkelly

Oct 7, 2021

withClasses as default.

{% namespace %} is generally used to namespace IDs and form input names. Prefixing class names by default would be a massive breaking change that would require most instances adding a withoutClasses, so not going to happen. Even if it were just configurable but disabled by default, that would still have other consequences, such as for plugins that provide example front-end template code.

Make namespaces respect css tag

Agree we should probably apply withClasses to nested {% css %} tags. That would also be a breaking change (albeit less risky), so I’ll look into it for Craft 4.

Add an option to the css tag to generate a css file

This wouldn’t work on loa…

View full answer

brandonkelly · 2021-10-07T03:00:07Z

brandonkelly
Oct 7, 2021
Maintainer

withClasses as default.

{% namespace %} is generally used to namespace IDs and form input names. Prefixing class names by default would be a massive breaking change that would require most instances adding a withoutClasses, so not going to happen. Even if it were just configurable but disabled by default, that would still have other consequences, such as for plugins that provide example front-end template code.

Make namespaces respect css tag

Agree we should probably apply withClasses to nested {% css %} tags. That would also be a breaking change (albeit less risky), so I’ll look into it for Craft 4.

Add an option to the css tag to generate a css file

This wouldn’t work on load-balanced servers as the file would only be generated on the server that served the initial page request.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Suggestions for the `namespace` and `css` twig tags to make templating more component oriented. #9939

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Suggestions for the namespace and css twig tags to make templating more component oriented. #9939

mikesnoeren Oct 6, 2021