NiklasPor/prettier-plugin-go-template

Weird issue with templating inside <style> tags...

Closed this issue · 9 comments

duckpuppy commented

I have a layout file I'm creating for RevealJS presentations. Inside it, I include reveal CSS from a module using templating tags... however, when prettier runs it does a strange transformation to the file. If I just use the normal html parser, nothing happens.

Original file:

<!DOCTYPE html>
<html lang="{{ with .Site.Language }}{{ . }}{{ else }}en-us{{ end }}">
  <head>
    {{ block "title" . }}
      <title>{{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ end }}</title>
    {{ end }}
    <style>
      {{ $cssMain := resources.Get "mod/revealjs/dist/reveal.css" | toCSS | minify }}
      {{ $cssMain.Content | safeCSS }}
      {{ $cssTheme := resources.Get "mod/revealjs/dist/theme/black.css" | toCSS | minify }}
      {{ $cssTheme.Content | safeCSS }}
      .reveal li:before {
        content: none;
      }
    </style>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        {{- $content := replace .Content "<hr>" "<hr />" -}}
        {{- range (split $content "<hr />") -}}
          <section>
            {{- . | safeHTML -}}
          </section>
        {{- end -}}
      </div>
    </div>
    {{ partialCached "reveal" . }}
  </body>
</html>

If I run bin-prettier.js --parser go-template layouts/presentations/single.html, I get:

<!DOCTYPE html>
<html lang="{{ with .Site.Language }}{{ . }}{{ else }}en-us{{ end }}">
  <head>
    {{ block "title" . }}
      <title>
        {{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }} ::
        {{ $.Site.Title }}{{ end }}
      </title>
    {{ end }}
    <style>
      <!--BPGTBPGT13EPGTEPGT--
        > <!--BPGTBPGT14EPGTEPGT--
        > <!--BPGTBPGT15EPGTEPGT--
        > <!--BPGTBPGT16EPGTEPGT--
        > .reveal
        li:before {
        content: none;
      }
    </style>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        {{- $content := replace .Content "<hr>" "<hr />" -}}
        {{- range (split $content "<hr />") -}}
          <section>
            {{- . | safeHTML -}}
          </section>
        {{- end -}}
      </div>
    </div>
    {{ partialCached "reveal" . }}
  </body>
</html>

The template functions inside the <style> tags are replaced with commented strings... hashes, maybe? Except they're all the same, so I'm not sure what they're hashes of if they are.

duckpuppy commented

It seems to be the addition of the additional style:

      .reveal li:before {
        content: none;
      }

If I remove that, the strange behavior goes away.

NiklasPor commented

Probably a regex mismatch. I'll try it out later this day.

timecode commented

In case you need another test case / example, I've noticed the following...

Initial code:

<section class="error {{ .Params.custom_class }}" {{ .Params.custom_attributes | safeHTMLAttr }}>
<div class="error-template">
{{/* ... */}}
</div>
</section>

After running once (on the immediately above code) all looks great :

<section
  class="error {{ .Params.custom_class }}"
  {{ .Params.custom_attributes | safeHTMLAttr }}
>
  <div class="error-template">
    {{/* ... */}}
  </div>
</section>

After running again (on the immediately above code) it trips up :

<section class="error {{ .Params.custom_class }}" <!--BPGTBPGT50EPGTEPGT-->
  >
  <div class="error-template">
    {{/* ... */}}
  </div>
</section>

Hope the examples help

NiklasPor commented

Hi, with #49 this would be formatted like this:

<!DOCTYPE html>
<html
  lang="{{ with .Site.Language }}
    {{ . }}
  {{ else }}
    en-us
  {{ end }}"
>
  <head>
    {{ block "title" . }}
      <title>
        {{ if .IsHome }}
          {{ $.Site.Title }}
        {{ else }}
          {{ .Title }} :: {{ $.Site.Title }}
        {{ end }}
      </title>
    {{ end }}
    <style>
      {{ $cssMain := resources.Get "mod/revealjs/dist/reveal.css" | toCSS | minify }}
        {{ $cssMain.Content | safeCSS }}
        {{ $cssTheme := resources.Get "mod/revealjs/dist/theme/black.css" | toCSS | minify }}
        {{ $cssTheme.Content | safeCSS }}
        .reveal
        li:before {
        content: none;
      }
    </style>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        {{- $content := replace .Content "<hr>" "<hr />" -}}
        {{ range (split $content "<hr />") }}
          <section>{{- . | safeHTML -}}</section>
        {{ end }}
      </div>
    </div>
    {{ partialCached "reveal" . }}
  </body>
</html>

I can see that the splitting up of single if / else blocks could be quite annoying, especially if all of the code is in the same line.

Could you tell me whether this looks fine for you, except for the if / else multiline break part?

duckpuppy commented

It's at least not broken... there does seem to be an extra indent on some of the lines (all the template lines after the first one in the <style> tag, and the li:before line). It's still functional, but maybe not "prettier".

NiklasPor commented

Yeah, the style formatting (just like the JS formatting), is a whole different story than the HTML stuff.
I'd hope to get this resolved once the HTML formatting is working like a charm.

I'll leave this open for now.

NiklasPor commented

Also with the new if / else behavior it'll be at least a bit smaller:

<!DOCTYPE html>
<html lang="{{ with .Site.Language }}{{ . }}{{ else }}en-us{{ end }}">
  <head>
    {{ block "title" . }}
      <title>
        {{ if .IsHome }}
          {{ $.Site.Title }}
        {{ else }}
          {{ .Title }} :: {{ $.Site.Title }}
        {{ end }}
      </title>
    {{ end }}
    <style>
      {{ $cssMain := resources.Get "mod/revealjs/dist/reveal.css" | toCSS | minify }}
        {{ $cssMain.Content | safeCSS }}
        {{ $cssTheme := resources.Get "mod/revealjs/dist/theme/black.css" | toCSS | minify }}
        {{ $cssTheme.Content | safeCSS }}
        .reveal
        li:before {
        content: none;
      }
    </style>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        {{- $content := replace .Content "<hr>" "<hr />" -}}
        {{ range (split $content "<hr />") }}<section>{{- . | safeHTML -}}</section>{{ end }}
      </div>
    </div>
    {{ partialCached "reveal" . }}
  </body>
</html>
NiklasPor commented

prettier-plugin-go-template@0.0.11-beta.15 automatically ignores <script> and <style> tags that cannot be formatted 🚀

NiklasPor commented

prettier-plugin-go-template@0.0.11 is now released