From 617a2ec7cc6b25f43b0d06b360cabcc95b6d746c Mon Sep 17 00:00:00 2001 From: Mihai Parparita Date: Mon, 25 Jul 2022 17:51:06 -0700 Subject: [PATCH] cmd/tsconnect: add Tailwind CSS support and switch to using it Integrates Tailwind CSS as an esbuild plugin that invokes the CLI to process the input. It takes ~400ms, so it seems like the easiest option (vs running a separate process for dev mode). Existing minimal look and feel is replicated with Tailwind classes, mostly to prove that the entire system works, including unused class removal. Also fixes yarn warnings about package.json not having a license (which were showing up when invoking any scripts). Fixes #5136 Fixes #5129 Signed-off-by: Mihai Parparita --- cmd/tsconnect/common.go | 34 +++ cmd/tsconnect/index.html | 12 +- cmd/tsconnect/package.json | 4 +- cmd/tsconnect/src/index.css | 90 +------ cmd/tsconnect/src/login.ts | 11 +- cmd/tsconnect/src/ssh.ts | 9 +- cmd/tsconnect/tailwind.config.js | 8 + cmd/tsconnect/yarn.lock | 419 ++++++++++++++++++++++++++++++- 8 files changed, 485 insertions(+), 102 deletions(-) create mode 100644 cmd/tsconnect/tailwind.config.js diff --git a/cmd/tsconnect/common.go b/cmd/tsconnect/common.go index eb47a0a5a..2f15d230e 100644 --- a/cmd/tsconnect/common.go +++ b/cmd/tsconnect/common.go @@ -13,6 +13,7 @@ "path/filepath" "runtime" "strconv" + "time" esbuild "github.com/evanw/esbuild/pkg/api" ) @@ -44,6 +45,12 @@ func commonSetup(dev bool) (*esbuild.BuildOptions, error) { LogLevel: esbuild.LogLevelInfo, Define: map[string]string{"DEBUG": strconv.FormatBool(dev)}, Target: esbuild.ES2017, + Plugins: []esbuild.Plugin{{ + Name: "tailscale-tailwind", + Setup: func(build esbuild.PluginBuild) { + setupEsbuildTailwind(build, dev) + }, + }}, }, nil } @@ -111,3 +118,30 @@ type EsbuildMetadata struct { EntryPoint string `json:"entryPoint,omitempty"` } `json:"outputs,omitempty"` } + +func setupEsbuildTailwind(build esbuild.PluginBuild, dev bool) { + build.OnLoad(esbuild.OnLoadOptions{ + Filter: "./src/index.css$", + }, func(args esbuild.OnLoadArgs) (esbuild.OnLoadResult, error) { + start := time.Now() + yarnArgs := []string{"--silent", "tailwind", "-i", args.Path} + if !dev { + yarnArgs = append(yarnArgs, "--minify") + } + cmd := exec.Command(*yarnPath, yarnArgs...) + tailwindOutput, err := cmd.Output() + log.Printf("Ran tailwind in %v\n", time.Since(start)) + if err != nil { + if exitErr, ok := err.(*exec.ExitError); ok { + log.Printf("Tailwind stderr: %s", exitErr.Stderr) + } + return esbuild.OnLoadResult{}, fmt.Errorf("Cannot run tailwind: %w", err) + } + tailwindOutputStr := string(tailwindOutput) + return esbuild.OnLoadResult{ + Contents: &tailwindOutputStr, + Loader: esbuild.LoaderCSS, + }, nil + + }) +} diff --git a/cmd/tsconnect/index.html b/cmd/tsconnect/index.html index 837098ea5..ddcebc248 100644 --- a/cmd/tsconnect/index.html +++ b/cmd/tsconnect/index.html @@ -5,12 +5,14 @@ - -