bundle css with esbuild

4 years ago · f7d8feac5d
parent cd2ea2e579
commit f7d8feac5d
9 changed files with 21 additions and 18 deletions
--- a/.goreleaser.yml
+++ b/.goreleaser.yml
@ -10,9 +10,9 @@ before:
    - rm -rf data/web
    - mkdir -p data
    - cp -r static data/web
-    - cp -r css data/web/
    - npm install
-    - cp node_modules/a17t/dist/a17t.css data/web/css/
+    - mkdir -p data/web/css
+    - npx esbuild --bundle css/base.css --outfile=build/data/web/css/bundle.css --external:remixicon.css --minify
    - cp node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 data/web/css/
    - cp -r html data/
    - cp -r lang data/
--- a/14
+++ b/14
@ -43,11 +43,13 @@ compile:
 compress:
 	upx --lzma build/jfa-go

-copy:
-	$(info copying css)
+bundle-css:
 	-mkdir -p build/data/web/css
-	cp -r css build/data/web/
-	cp node_modules/a17t/dist/a17t.css build/data/web/css/
+	$(info bundling css)
+	npx esbuild --bundle css/base.css --outfile=build/data/web/css/bundle.css --external:remixicon.css --minify
+
+copy:
+	$(info copying fonts)
 	cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 build/data/web/css/
 	$(info copying html)
 	cp -r html build/data/
@ -61,5 +63,5 @@ copy:
 install:
 	cp -r build $(DESTDIR)/jfa-go

-all: configuration npm email version typescript swagger compile copy
-debug: configuration npm email version ts-debug swagger compile copy
+all: configuration npm email version typescript bundle-css swagger compile copy
+debug: configuration npm email version ts-debug bundle-css swagger compile copy
--- a/css/base.css
+++ b/css/base.css
@ -1,9 +1,9 @@
-@import "a17t.css";
+@import "../node_modules/a17t/dist/a17t.css";
@import "remixicon.css";
-@import "modal.css";
-@import "dark.css";
-@import "tooltip.css";
-@import "loader.css";
+@import "./modal.css";
+@import "./dark.css";
+@import "./tooltip.css";
+@import "./loader.css";

 :root {
    --border-width-default: 2px;
--- a/html/404.html
+++ b/html/404.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="{{ .cssClass }}">
    <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
+        <link rel="stylesheet" type="text/css" href="css/bundle.css">
        {{ template "header.html" . }}
        <title>404 - jfa-go</title>
    </head>
--- a/html/admin.html
+++ b/html/admin.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="{{ .cssClass }}">
    <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
+        <link rel="stylesheet" type="text/css" href="css/bundle.css">
        <script>
            window.URLBase = "{{ .urlBase }}";
            window.notificationsEnabled = {{ .notifications }};
--- a/html/form.html
+++ b/html/form.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="{{ .cssClass }}">
    <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
+        <link rel="stylesheet" type="text/css" href="css/bundle.css">
        {{ template "header.html" . }}
        <title>{{ .strings.pageTitle }}</title>
    </head>
--- a/html/invalidCode.html
+++ b/html/invalidCode.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" class="{{ .cssClass }}">
    <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
+        <link rel="stylesheet" type="text/css" href="css/bundle.css">
        {{ template "header.html" . }}
        <title>Invalid Code - jfa-go</title>
    </head>
--- a/test.css
+++ b/test.css
--- a/views.go
+++ b/views.go
@ -7,7 +7,7 @@ import (
 	"github.com/gin-gonic/gin"
 )

-var css = []string{"base.css", "a17t.css", "remixicon.css", "modal.css", "dark.css", "tooltip.css", "loader.css"}
+var css = []string{"bundle.css", "remixicon.css"}
 var cssHeader = func() string {
 	l := len(css)
 	h := ""