Replace Tailwind CDN with pre-built CSS via standalone CLI
- Add shared/static/styles/tailwind.css as Tailwind v4 input with
explicit @source paths for all service templates and safelisted
dynamic classes (bg-{colour}-{shade}, text-{size})
- Build to shared/static/styles/tw.css (93KB minified)
- Replace <script src="cdn.tailwindcss.com"> with <link> to tw.css
in sx page shell, Jinja _head.html, and ~base-shell component
- Add build-tw.sh convenience script
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
9
build-tw.sh
Executable file
9
build-tw.sh
Executable file
@@ -0,0 +1,9 @@
|
||||
#!/usr/bin/env bash
|
||||
# Build Tailwind CSS from source templates.
|
||||
# Requires: tailwindcss CLI standalone binary on PATH.
|
||||
# curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 \
|
||||
# -o /usr/local/bin/tailwindcss && chmod +x /usr/local/bin/tailwindcss
|
||||
set -euo pipefail
|
||||
cd "$(dirname "$0")"
|
||||
tailwindcss -i shared/static/styles/tailwind.css -o shared/static/styles/tw.css --minify
|
||||
echo "Built shared/static/styles/tw.css ($(wc -c < shared/static/styles/tw.css) bytes)"
|
||||
@@ -6,7 +6,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset_url('styles/blog-content.css')}}">
|
||||
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{asset_url('styles/tw.css')}}">
|
||||
<link rel="stylesheet" href="{{asset_url('fontawesome/css/all.min.css')}}">
|
||||
<link rel="stylesheet" href="{{asset_url('fontawesome/css/v4-shims.min.css')}}">
|
||||
<link href="https://unpkg.com/prismjs/themes/prism.css" rel="stylesheet" />
|
||||
|
||||
30
shared/static/styles/tailwind.css
Normal file
30
shared/static/styles/tailwind.css
Normal file
@@ -0,0 +1,30 @@
|
||||
@import "tailwindcss" source(none);
|
||||
|
||||
/* Scan all template and component files */
|
||||
@source "../../../shared/sx/templates";
|
||||
@source "../../../shared/browser/templates";
|
||||
@source "../../../shared/static/scripts";
|
||||
@source "../../../blog/sx";
|
||||
@source "../../../blog/templates";
|
||||
@source "../../../market/sx";
|
||||
@source "../../../market/templates";
|
||||
@source "../../../cart/sx";
|
||||
@source "../../../cart/templates";
|
||||
@source "../../../events/sx";
|
||||
@source "../../../events/templates";
|
||||
@source "../../../federation/sx";
|
||||
@source "../../../federation/templates";
|
||||
@source "../../../account/sx";
|
||||
@source "../../../account/templates";
|
||||
@source "../../../orders/sx";
|
||||
@source "../../../orders/templates";
|
||||
|
||||
/* Dynamic classes from ~menu-row-sx: bg-{colour}-{shade}
|
||||
colour defaults to "sky", shade = 500 - (level * 100) for levels 0-4 */
|
||||
@source inline("bg-sky-{100,200,300,400,500}");
|
||||
@source inline("bg-stone-{100,200,300,400,500}");
|
||||
@source inline("bg-emerald-{100,200,300,400,500}");
|
||||
@source inline("bg-amber-{100,200,300,400,500}");
|
||||
|
||||
/* Dynamic text size in ~status-pill: text-{sz} */
|
||||
@source inline("text-{xs,sm,base,lg}");
|
||||
2
shared/static/styles/tw.css
Normal file
2
shared/static/styles/tw.css
Normal file
File diff suppressed because one or more lines are too long
@@ -379,7 +379,7 @@ _SX_PAGE_TEMPLATE = """\
|
||||
<link rel="stylesheet" type="text/css" href="{asset_url}/styles/cards.css">
|
||||
<link rel="stylesheet" type="text/css" href="{asset_url}/styles/blog-content.css">
|
||||
<meta name="csrf-token" content="{csrf}">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{asset_url}/styles/tw.css">
|
||||
<link rel="stylesheet" href="{asset_url}/fontawesome/css/all.min.css">
|
||||
<link rel="stylesheet" href="{asset_url}/fontawesome/css/v4-shims.min.css">
|
||||
<link href="https://unpkg.com/prismjs/themes/prism.css" rel="stylesheet">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"body{margin:0;min-height:100vh;display:flex;align-items:center;"
|
||||
"justify-content:center;font-family:system-ui,sans-serif;"
|
||||
"background:#fafaf9;color:#1c1917}")
|
||||
(script :src "https://cdn.tailwindcss.com")
|
||||
(link :rel "stylesheet" :type "text/css" :href (str asset-url "/styles/tw.css"))
|
||||
(link :rel "stylesheet" :href (str asset-url "/fontawesome/css/all.min.css")))
|
||||
(body :class "bg-stone-50 text-stone-900"
|
||||
children))))
|
||||
|
||||
Reference in New Issue
Block a user