Fixes and avif and async css (#315)

* Fixing async script and add avif for pngs * Switching async css methods
gauntface · Oct 8, 2022 · fd47dfb · fd47dfb
1 parent b5d2eb7
commit fd47dfb
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 17 deletions.
diff --git a/cmds/genimgs/genimgs.go b/cmds/genimgs/genimgs.go
@@ -385,16 +385,12 @@ func (c *client) generateImageSet(imgPath string) ([]generateImage, error) {
 				width:        s,
 				outputPath:   path.Join(outputDir, fmt.Sprintf("%v%v", s, ".webp")),
 			},
-		)
-
-		// avif library doesn't support alpha channel
-		if !strings.HasSuffix(imgPath, ".png") {
-			genImgs = append(genImgs, generateImage{
+			generateImage{
 				originalPath: imgPath,
 				width:        s,
 				outputPath:   path.Join(outputDir, fmt.Sprintf("%v%v", s, ".avif")),
-			})
-		}
+			},
+		)
 	}
 
 	return genImgs, nil

diff --git a/embedassets/assets/js/bootstrap/always-async.js b/embedassets/assets/js/bootstrap/always-async.js
diff --git a/go.mod b/go.mod
@@ -43,7 +43,7 @@ require (
 	github.com/tdewolff/minify/v2 v2.12.0 // indirect
 	golang.org/x/crypto v0.0.0-20220824171710-5757bc0c5503 // indirect
 	golang.org/x/image v0.0.0-20220902085622-e7cb96979f69 // indirect
-	golang.org/x/sys v0.0.0-20220919091848-fb04ddd9f9c8 // indirect
+	golang.org/x/sys v0.0.0-20221006211917-84dc82d7e875 // indirect
 	golang.org/x/term v0.0.0-20220919170432-7a66f970e087 // indirect
 	gopkg.in/yaml.v2 v2.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect

diff --git a/go.sum b/go.sum
@@ -645,6 +645,8 @@ golang.org/x/sys v0.0.0-20220913175220-63ea55921009 h1:PuvuRMeLWqsf/ZdT1UUZz0syh
 golang.org/x/sys v0.0.0-20220913175220-63ea55921009/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220919091848-fb04ddd9f9c8 h1:h+EGohizhe9XlX18rfpa8k8RAc5XyaeamM+0VHRd4lc=
 golang.org/x/sys v0.0.0-20220919091848-fb04ddd9f9c8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20221006211917-84dc82d7e875 h1:AzgQNqF+FKwyQ5LbVrVqOcuuFB67N47F9+htZYH0wFM=
+golang.org/x/sys v0.0.0-20221006211917-84dc82d7e875/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.0.0-20220526004731-065cf7ba2467 h1:CBpWXWQpIRjzmkkA+M7q9Fqnwd2mZr3AFqexg8YTfoM=

diff --git a/manipulations/injectassets/injectassets.go b/manipulations/injectassets/injectassets.go
@@ -63,13 +63,16 @@ func Manipulator(runtime manipulations.Runtime, doc *html.Node) error {
 
 	assetOrder := []assets.Type{
 		assets.InlineCSS,
-		assets.PreloadCSS,
 		assets.InlineJS,
-		assets.SyncJS,
-		assets.AsyncJS,
+
+		assets.PreloadCSS,
 		assets.PreloadJS,
-		assets.SyncCSS,
+
 		assets.AsyncCSS,
+		assets.AsyncJS,
+
+		assets.SyncCSS,
+		assets.SyncJS,
 	}
 
 	sortedKeys := keys.Sorted()

diff --git a/manipulations/injectassets/injectassets_test.go b/manipulations/injectassets/injectassets_test.go
@@ -200,7 +200,7 @@ func TestManipulator(t *testing.T) {
 					},
 				},
 			},
-			wantHTML: `<html><head><style>example-1 inline contents 1</style><style>example-1 inline contents 2</style><link href="/example-1-sync.css" rel="stylesheet"/></head><body><div class="example-1 example-2"></div><link href="/example-1-sync.print.css" rel="stylesheet" media="print"/><link href="/example-1-async.css" rel="stylesheet"/><link href="/example-1-async.print.css" rel="stylesheet" media="print"/></body></html>`,
+			wantHTML: `<html><head><style>example-1 inline contents 1</style><style>example-1 inline contents 2</style><link href="/example-1-sync.css" rel="stylesheet"/></head><body><div class="example-1 example-2"></div><link href="/example-1-async.css" rel="stylesheet" media="print" onload="this.media=&#39;all&#39;"/><link href="/example-1-async.print.css" rel="stylesheet" media="print"/><link href="/example-1-sync.print.css" rel="stylesheet" media="print"/></body></html>`,
 		},
 		{
 			description: "add preload assets",

diff --git a/static/js/bootstrap/always-async.ts b/static/js/bootstrap/always-async.ts
@@ -39,4 +39,4 @@ function run() {
   addJSLoadedSignal();
 }
 
-OnLoad(run);
+OnLoad(() => run);
diff --git a/utils/html/htmlparsing/htmlparsing.go b/utils/html/htmlparsing/htmlparsing.go
@@ -17,6 +17,7 @@
 package htmlparsing
 
 import (
+	"fmt"
 	"sort"
 	"strings"
 
@@ -78,10 +79,19 @@ func AsyncCSSTag(cm CSSMediaPair) *html.Node {
 	attr := []html.Attribute{
 		{Key: "href", Val: cm.URL},
 		{Key: "rel", Val: "stylesheet"},
+		{Key: "media", Val: "print"},
 	}
-	if cm.Media != "" {
-		attr = append(attr, html.Attribute{Key: "media", Val: cm.Media})
+	if cm.Media != "print" {
+		finalMedia := "all"
+		if cm.Media != "" {
+			finalMedia = cm.Media
+		}
+		attr = append(attr, html.Attribute{
+			Key: "onload",
+			Val: fmt.Sprintf(`this.media='%v'`, finalMedia),
+		})
 	}
+
 	return &html.Node{
 		Type: html.ElementNode,
 		Data: "link",
-Original file line number
+Diff line change
@@ Expand Up / @@ -200,7 +200,7 @@ func TestManipulator(t *testing.T) { @@
     					},
     				},
     			},
-    			wantHTML: `<html><head><style>example-1 inline contents 1</style><style>example-1 inline contents 2</style><link href="/example-1-sync.css" rel="stylesheet"/></head><body><div class="example-1 example-2"></div><link href="/example-1-sync.print.css" rel="stylesheet" media="print"/><link href="/example-1-async.css" rel="stylesheet"/><link href="/example-1-async.print.css" rel="stylesheet" media="print"/></body></html>`,
+    			wantHTML: `<html><head><style>example-1 inline contents 1</style><style>example-1 inline contents 2</style><link href="/example-1-sync.css" rel="stylesheet"/></head><body><div class="example-1 example-2"></div><link href="/example-1-async.css" rel="stylesheet" media="print" onload="this.media=&#39;all&#39;"/><link href="/example-1-async.print.css" rel="stylesheet" media="print"/><link href="/example-1-sync.print.css" rel="stylesheet" media="print"/></body></html>`,
     		},
     		{
     			description: "add preload assets",
@@ Expand Down @@