Inline styles generated via toCSS transformation function

support
1

Hi.

  1. I love new pipes :slight_smile:
  2. I am not great at Go :frowning:

Stylesheet of my website is extremely small so I inline it in a head. Until now I was doing it like this…

<style>{{ readFile "static/css/style.css" | safeCSS }}</style>

Is it possible to inline a result of toCSS transformation function in a similar way? Ideally without even outputting the resources directory. If yes, is it going to work when I deploy it to Netlify (not sure if they have an extended version with pipes).

Thanks a lot in advance

2

I don’t have PostCSS installed, but I do see that you can simply access the .Content variable on a style.

For example:

{{ $styles := resources.Get "/css/hellothere.scss" | toCSS (dict "enableSourceMap" true) }}

{{ $styles.Content }}

Returns

article, aside, footer, header, main, nav, 
section { display: block; } html { font-size: 
100%; -ms-text-size-adjust: none; -webkit-text-size-adjust: none;
 } body { margin: 0; font-family: 

etc etc
1 Like
3

@Jura is correct. And as to “writing to /public” – these transformations are lazily generated and published:

  • Nothing is published until you access it via .RelPermalink or .Permalink
  • If you access it via .Content, you get the content, but nothing is published to /public
4
  • Run hugo locally and commit the content or /resources to GitHub (or whatever) and Netlify can use that with the “basic Hugo 0.43 edition”
  • A related tip: Run hugo --gc to clean up unused stuff inside /resources.
1 Like
5

Also see