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')}}">
|
<link rel="stylesheet" type="text/css" href="{{asset_url('styles/blog-content.css')}}">
|
||||||
|
|
||||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
<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/all.min.css')}}">
|
||||||
<link rel="stylesheet" href="{{asset_url('fontawesome/css/v4-shims.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" />
|
<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/cards.css">
|
||||||
<link rel="stylesheet" type="text/css" href="{asset_url}/styles/blog-content.css">
|
<link rel="stylesheet" type="text/css" href="{asset_url}/styles/blog-content.css">
|
||||||
<meta name="csrf-token" content="{csrf}">
|
<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/all.min.css">
|
||||||
<link rel="stylesheet" href="{asset_url}/fontawesome/css/v4-shims.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">
|
<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;"
|
"body{margin:0;min-height:100vh;display:flex;align-items:center;"
|
||||||
"justify-content:center;font-family:system-ui,sans-serif;"
|
"justify-content:center;font-family:system-ui,sans-serif;"
|
||||||
"background:#fafaf9;color:#1c1917}")
|
"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")))
|
(link :rel "stylesheet" :href (str asset-url "/fontawesome/css/all.min.css")))
|
||||||
(body :class "bg-stone-50 text-stone-900"
|
(body :class "bg-stone-50 text-stone-900"
|
||||||
children))))
|
children))))
|
||||||
|
|||||||
Reference in New Issue
Block a user