Use Hugo for Sass processing (#9404)

* Move all Sass into a common /assets directory

* Remove node-sass make command

* Change head partial to accommodate full Sass rules

* Bump Hugo version in Netlify config

* Use separate partial for CSS imports

* Bump Hugo version

* Remove PostCSS from the pipeline

* Un-bump version

* Update Hugo version to 0.44

* Update Hugo version in Makefile

* Update production Hugo version

* Fix misspelled variable name

* Add ./resources folder to Git

* Update Hugo version in Netlify config to 0.45.1

* Use un-cached css.html partial

* Re-work extra CSS logic for .Params.css

Makefile

@@ -1,5 +1,5 @@
 DOCKER       = docker
-HUGO_VERSION = 0.40.3
+HUGO_VERSION = 0.44
 DOCKER_IMAGE = kubernetes-hugo
 DOCKER_RUN   = $(DOCKER) run --rm --interactive --tty --volume $(PWD):/src
 
@@ -10,18 +10,14 @@ help: ## Show this help.
 
 all: build ## Build site with production settings and put deliverables in _site.
 
-sass: # Rebuild the SASS source into CSS
-	node-sass --output-style compact ./src/sass/styles.sass ./static/css/styles.css
-	node-sass --output-style compact ./src/sass/case_study_styles.sass ./static/css/case_study_styles.css
-
 build: ## Build site with production settings and put deliverables in _site.
 	hugo
 
 build-preview: ## Build site with drafts and future posts enabled.
 	hugo -D -F
 
 serve: ## Boot the development server.
-	hugo server
+	hugo server --ignoreCache --disableFastRender
 
 docker-image:
 	$(DOCKER) build . --tag $(DOCKER_IMAGE) --build-arg HUGO_VERSION=$(HUGO_VERSION)

content/en/docs/home/_index.md

@@ -12,5 +12,3 @@ linkTitle: "Documentation"
 main_menu: true
 weight: 5
 ---
-
-

layouts/partials/css.html

@@ -0,0 +1,33 @@
+{{- $mainSass := "sass/styles.sass" }}
+{{- $caseStudySass := "sass/case_study_styles.sass" }}
+<link rel="stylesheet" type="text/css" href="/css/base_fonts.css">
+{{- if .Site.IsServer }}
+{{- $mainCssOpts := (dict "targetPath" "css/styles.css") }}
+{{- $mainCss := resources.Get $mainSass | toCSS $mainCssOpts }}
+<link rel="stylesheet" media="screen" href="{{ $mainCss.RelPermalink }}"><!-- default styles.css on -->
+{{- else }}
+{{- $mainCssOpts := (dict "targetPath" "css/styles.css") }}
+{{- $mainCss := resources.Get $mainSass | toCSS $mainCssOpts | minify | fingerprint }}
+<link rel="stylesheet" media="screen" href="{{ $mainCss.RelPermalink }}" integrity="{{ $mainCss.Data.Integrity }}"><!-- default styles.css on -->
+{{- end }}
+{{- if .Params.case_study_styles }}
+{{- $caseStudyCssOpts := (dict "targetPath" "css/styles.css") }}
+{{- $caseStudyCss := resources.Get $caseStudySass | toCSS $caseStudyCssOpts | minify | fingerprint }}
+<link rel="stylesheet" media="screen" href="{{ $caseStudyCss.Permalink }}" integrity="{{ $caseStudyCss.Data.Integrity }}"><!-- custom case_study_styles on -->
+{{- end }}
+<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+<link rel="stylesheet" type="text/css" href="{{ "css/callouts.css" | relURL }}">
+<link rel="stylesheet" type="text/css" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
+{{- if .Params.deprecated }}
+<link rel="stylesheet" type="text/css" href="{{ "css/deprecation-warning.css" | relURL }}">
+{{- end }}
+{{- if eq .Params.class "gridPage" }}
+<link rel="stylesheet" type="text/css" href="{{ "css/gridpage.css" | relURL }}">
+{{- end }}
+{{- with .Params.css }}
+{{- range (split . ",") }}
+{{- $url := trim . " " | relURL }}
+<link rel="stylesheet" type="text/css" href="{{ $url }}"><!-- custom css added -->
+{{- end }}
+{{- end }}

layouts/partials/head.html

@@ -11,16 +11,7 @@
 <title>{{ if .Title }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="shortcut icon" type="image/png" href="{{ "images/favicon.png" | relURL }}">
-<link rel="stylesheet" type="text/css" href="/css/base_fonts.css">
-{{ if .Params.case_study_styles }}<link rel="stylesheet" type="text/css" href="{{ "css/case_study_styles.css" | relURL }}"><!-- custom case_study_styles on -->{{ else }}<link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | relURL }}"><!-- default styles.css on -->{{ end }}
-<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
-<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-<link rel="stylesheet" type="text/css" href="{{ "css/callouts.css" | relURL }}">
-<link rel="stylesheet" type="text/css" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
-{{ if .Params.deprecated }}<link rel="stylesheet" type="text/css" href="{{ "css/deprecation-warning.css" | relURL }}">{{ end }}
-{{ if eq .Params.class "gridPage" }}<link rel="stylesheet" type="text/css" href="{{ "css/gridpage.css" | relURL }}">{{ end }}
-{{ with .Params.css }}{{ range (split . ",") }}<link rel="stylesheet" type="text/css" href="{{ (trim . " ") | relURL }}"><!-- custom css added -->
-{{ end }}{{ else }}<!-- no custom css detected -->{{ end }}
+{{ partial "css.html" . }}
 {{ if .Params.description }}
 <meta name="description" content="{{ .Params.description }}" />
 <meta property="og:description" content="{{ .Params.description }}" />

netlify.toml

@@ -5,21 +5,21 @@ command = "hugo --enableGitInfo && cp netlify_noindex_headers.txt public/_header
 
 [context.production.environment]
 HUGO_BASEURL = "https://kubernetes.io/"
-HUGO_VERSION = "0.40.3"
+HUGO_VERSION = "0.45.1"
 HUGO_ENV = "production"
 HUGO_ENABLEGITINFO = "true"
 
 [context.deploy-preview]
 command = "hugo --enableGitInfo -b $DEPLOY_PRIME_URL"
 
 [context.deploy-preview.environment]
-HUGO_VERSION = "0.40.3"
+HUGO_VERSION = "0.45.1"
 
 [context.branch-deploy]
 command = "hugo --enableGitInfo -b $DEPLOY_PRIME_URL"
 
 [context.branch-deploy.environment]
-HUGO_VERSION = "0.40.3"
+HUGO_VERSION = "0.45.1"
 
 [context.master]
 # This context is triggered by the master branch and allows search indexing 

resources/_gen/assets/sass/cn/sass/styles.sass_cb957da2191fde4902dd41b139c8069d.json

@@ -0,0 +1 @@
+{"Target":"css/styles.min.cc96976ab977e15130372b9aa336567b7cd2c0cfdbacc2884d84a5f56868cc20.css","MediaType":"text/css","Data":{"Integrity":"sha256-zJaXarl34VEwNyuaozZWe3zSwM/brMKITYSl9WhozCA="}}

resources/_gen/assets/sass/sass/case_study_styles.sass_cb957da2191fde4902dd41b139c8069d.json

@@ -0,0 +1 @@
+{"Target":"css/styles.min.3a4a157b6c0f5130dd7ada2cc65c770a1e7b22b443594d9f713ff99fd6ca0425.css","MediaType":"text/css","Data":{"Integrity":"sha256-OkoVe2wPUTDdetosxlx3Ch57IrRDWU2fcT/5n9bKBCU="}}

resources/_gen/assets/sass/sass/styles.sass_cb957da2191fde4902dd41b139c8069d.json

@@ -0,0 +1 @@
+{"Target":"css/styles.min.cc96976ab977e15130372b9aa336567b7cd2c0cfdbacc2884d84a5f56868cc20.css","MediaType":"text/css","Data":{"Integrity":"sha256-zJaXarl34VEwNyuaozZWe3zSwM/brMKITYSl9WhozCA="}}