Web dev blog
This is a production-ready component-based starter that features Nunjucks, SCSS, TailwindCSS (with JIT compiler), Webpack, ESNext, and live reloading.
This starter uses twig melody parser to format .njk files with Prettier automatically on each commit. However, there is a known issue when trying to use {% if %} block in a html attribute.
For example, the following code would throw a syntax error during the code formatting:
<p class="{% if someExpression %}some-class-name{% endif %}">Some paragraph</p>
To avoid it use {% set %} wrapped in html comment (melody parser ignore html comments by default) like this:
<!-- {% set someClass = "some-class" if true %} -->
then you can use `someClass` in the markup like this.
<p class="{{ someClass }}">
Use any other expression instead of `true` in {% set %} block. You can also use `else` if you need. This syntax is called `if expression` in Nunjucks. It is similar to JavaScript ternary or Python one-line if expression.
For example, this text has html class attribute (check the code) calculated using an `if` statement and `{% set %}` block.
NOTE. If you are still experiencing issues with formatting .njk files, just remove `prettier-plugin-twig-nunjucks-melody` npm package from your project and .njk files will not be formatted anymore.