templ version

[matthewmueller]

a-h/templ#740

Input:

package view

templ Story(story *hackernews.Story) {
  <div class="story">
    <div>
      <a>
        { story.Title }
      </a>
      if story.URL  != "" {
        <a class="url" href={ templ.URL(story.URL) }>({ formatURL(story.URL) })</a>
      }
    </div>
    <div class="meta">
      { strconv.Itoa(story.Points) } points by { story.Author } • { " " }
      @Time(story.CreatedAt)
    </div>
    <style scoped>{`
      .story {
        background: red;
      }
      .url {
        text-transform: none;
      }
      .meta {
        padding: 10px;
      }
    `}</style>
  </div>
}

Output:

import Style from "styled-jsx";

package view

templ Story(story *hackernews.Story) {
  <div class="jsx-4GjC3K story">
    <div class="jsx-4GjC3K">
      <a class="jsx-4GjC3K">
        { story.Title }
      </a>
      if story.URL  != "" {
        <a class="jsx-4GjC3K url" href={ templ.URL(story.URL) }>({ formatURL(story.URL) })</a>
      }
    </div>
    <div class="jsx-4GjC3K meta">
      { strconv.Itoa(story.Points) } points by { story.Author } • { " " }
      @Time(story.CreatedAt)
    </div>
    <Style scoped id="jsx-4GjC3K">{`.story.jsx-4GjC3K { background: red }
.url.jsx-4GjC3K { text-transform: none }
.meta.jsx-4GjC3K { padding: 10px }`}</Style>
  </div>
}

Issues (so far):

• Scoped CSS is not removed
• import Style from "styled-jsx"; is invalid
• No way in styledjsx yet to yank out the CSS