fix: CI/CD сборка tailwind для прода (устранена ошибка версий)
HYPN0 Build and Push Docker Image / build-and-push (push) Successful in 1m23s

This commit is contained in:
2026-09-19 18:57:13 +03:00
parent 29a063c806
commit 5f53be810f
5 changed files with 1418 additions and 1532 deletions
+21 -10
View File
@@ -5,18 +5,18 @@
## Что здесь лежит
### `tailwind/` — сборка Tailwind CSS v3.4
### `tailwind/` — сборка Tailwind CSS v4
```
tailwind/
├── package.json # Зависимости: tailwindcss@3.4, postcss, autoprefixer
├── package.json # Зависимости: @tailwindcss/cli, tailwindcss v4
├── package-lock.json # Фиксация версий
└── build-tailwind.sh # ← запускается из корня проекта
└── build-tailwind.sh # ← запускается из корня проекта (scripts/build-tailwind.sh)
```
**Что делает:**
- `build-tailwind.sh` создаёт временные файлы (`tailwind.config.js`, `postcss.config.js`, `input.css`),
запускает `npm ci` + `npm run build`, собирает `public/static/css/tailwind.min.css`,
- `build-tailwind.sh` создаёт временный `input.css` с директивами `@import "tailwindcss";`, `@source` и импортом `tailwind-custom.css`,
запускает `npm install` + `npm run build` (`@tailwindcss/cli`), собирает `public/static/css/tailwind.min.css`,
затем удаляет временные файлы.
- Результат: `public/static/css/tailwind.min.css` — минифицированный CSS со всеми
используемыми утилитами + кастомные стили из `hypn0/templates/css/tailwind-custom.css`.
@@ -37,6 +37,18 @@ alpine/
└── package-lock.json
```
### `codemirror/` — сборка CodeMirror 6 для админки Django
```
codemirror/
├── package.json # Зависимости: @codemirror/*, esbuild, @uiw/codemirror-theme-solarized
└── package-lock.json # Фиксация версий
```
**Что делает:**
- `build-codemirror.sh` генерирует точку входа `src/editor.js` с поддержкой языков (HTML, CSS, JavaScript, JSON), автоматической смены темы (Solarized Light / Dark), форматирования и двусторонней синхронизации с Django админкой (`textarea[data-codemirror-editor]`).
- Собирает единый минифицированный IIFE-бандл через `esbuild` в `public/static/codemirror/editor.js`.
## Как запускать сборки
Из корня проекта:
@@ -50,18 +62,17 @@ bash scripts/build-htmx.sh
# Alpine.js
bash scripts/build-alpine.sh
# CodeMirror 6 (для админки Django)
bash scripts/build-codemirror.sh
```
Каждый скрипт сам делает всё:
1. проверяет наличие `npm`;
2. создаёт временные файлы;
3. устанавливает зависимости через `npm ci`;
3. устанавливает зависимости через `npm ci` (или `npm install`);
4. запускает `npm run build`;
5. кладёт готовый бандл в `public/static/...`;
6. удаляет временные файлы.
В рабочем дереве не остаётся мусора от сборки.
## Кодовая статика
В будущем — возможно, сборка CodeMirror 6 для админки Django.
+1373 -1469
View File
File diff suppressed because it is too large Load Diff
+2 -3
View File
@@ -6,8 +6,7 @@
"build": "tailwindcss -i input.css -o ../../public/static/css/tailwind.min.css --minify"
},
"devDependencies": {
"tailwindcss": "^3.4.0",
"postcss": "^8.4.35",
"autoprefixer": "^10.4.17"
"@tailwindcss/cli": "^4.0.0",
"tailwindcss": "^4.0.0"
}
}
+2 -2
View File
File diff suppressed because one or more lines are too long
+20 -48
View File
@@ -1,9 +1,11 @@
#!/usr/bin/env bash
# Сборка Tailwind CSS v3 для фронтенда HYPN0
# Сборка Tailwind CSS v4 для фронтенда HYPN0
# Запуск из корня проекта: bash ./scripts/build-tailwind.sh
set -euo pipefail
export PATH="/opt/homebrew/bin:/usr/local/bin:$PATH"
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
TAILWIND_DIR="$PROJECT_ROOT/frontend-assembly/tailwind"
OUTPUT_DIR="$PROJECT_ROOT/public/static/css"
@@ -18,8 +20,6 @@ fail() {
}
# cleanup() — удаляет временные файлы при любом завершении скрипта.
# Все рабочие файлы (postcss.config.js, tailwind.config.js, input.css)
# создаются здесь и удаляются в EXIT/INT/TERM.
cleanup() {
rm -rf "$TAILWIND_DIR/node_modules" \
"$TAILWIND_DIR/postcss.config.js" \
@@ -37,67 +37,39 @@ if [[ ! -f "$TAILWIND_DIR/package.json" ]]; then
fail "Не найден package.json: $TAILWIND_DIR/package.json"
fi
if [[ ! -f "$TAILWIND_DIR/package-lock.json" ]]; then
fail "Не найден package-lock.json: $TAILWIND_DIR/package-lock.json"
fi
mkdir -p "$OUTPUT_DIR"
# --- tailwind.config.js ---
log "Создаю tailwind.config.js"
cat > "$TAILWIND_DIR/tailwind.config.js" <<'TWEOF'
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'../../hypn0/templates/**/*.html',
'../../hypn0/hypn0_site/**/*.py',
],
theme: {
extend: {},
},
plugins: [],
}
TWEOF
# --- postcss.config.js ---
log "Создаю postcss.config.js"
cat > "$TAILWIND_DIR/postcss.config.js" <<'PCEOF'
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
PCEOF
# --- input.css ---
log "Создаю input.css"
log "Создаю input.css для Tailwind v4"
cat > "$TAILWIND_DIR/input.css" <<'EOF'
/*
input.css — точка входа для сборки prod-версии Tailwind CSS v3.
input.css — точка входа для сборки prod-версии Tailwind CSS v4.
Собирается через `npm run build` (PostCSS) в
Собирается через @tailwindcss/cli в
файл public/static/css/tailwind.min.css, который подключается в _base.html
для production (когда settings.DEBUG == False).
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css —
того же самого файла, который в dev-режиме подключается через {% include %} внутрь
инлайнового <style type="text/tailwindcss"> в _base.html.
Это обеспечивает единый источник кастомных стилей для dev и prod.
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@source "../../hypn0/templates";
@source "../../hypn0/hypn0_site";
@import "../../hypn0/templates/css/tailwind-custom.css";
EOF
log "СОБИРАЮ Tailwind CSS v3"
log "СОБИРАЮ Tailwind CSS v4"
cd "$TAILWIND_DIR"
log 'Устанавливаю зависимости через npm ci'
npm ci
# Если package-lock.json отсутствует или устарел, используем npm install / npm ci
if [[ -f "$TAILWIND_DIR/package-lock.json" ]]; then
log 'Устанавливаю зависимости через npm install'
npm install --no-audit --no-fund
else
log 'Устанавливаю зависимости через npm install'
npm install --no-audit --no-fund
fi
log 'Собираю CSS'
npm run build