ps-css-build

Solid

Sets up a modern CSS build pipeline for a PrestaShop child theme: source partials in _dev/css/, lightningcss bundle+minify to a single generated assets/css/custom.css, pnpm 11 with supply-chain hardening, pre-commit hook with zero-dependency Node fallback, and agent/team documentation. Replaces runtime @import chains and manual ?v= cache-bust versioning. Use when scaffolding CSS architecture for a new PS child theme, when a theme has multiple @import'ed CSS partials loaded at runtime, when the user mentions manual CSS version bumps, CSS cache busting problems, "el CSS no se actualiza", or wants the Milagros-style CSS build on another project.

Web & Frontend 3 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 79/100

Stars 20%
20
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# PS CSS Build — pipeline para child themes Montado y probado en `milagros-colombia-b2b-v9.1` (PS 9.1, child de Panda). Sustituye: `@import` runtime (N requests encadenados) + bumps manuales `?v=N` + hacks tipo `_bust={$smarty.now}` (que anulan caché por completo). ## Resultado final ``` themes/{child}/ ├── _dev/ │ ├── README.md # doc del sistema (plantilla abajo) │ └── css/ │ ├── custom.css # entry point: @import de los parciales (SIN ?v=) │ ├── tokens.css # :root design tokens │ ├── base.css │ ├── components.css │ ├── utilities.css │ └── pages/*.css ├── scripts/bundle-css.js # fallback cero-deps para el hook ├── assets/css/custom.css # GENERADO — único CSS servido ├── package.json # pnpm + scripts css/watch ├── pnpm-workspace.yaml # supply-chain hardening ├── pnpm-lock.yaml └── .gitignore # node_modules/ .githooks/pre-commit # raíz del repo .gitattributes # dist marcado generated ``` PS core auto-registra `assets/css/custom.css` como `theme-custom` — mantener ese path/nombre exacto = cero cambios PHP, tema padre intacto. ## Paso 1 — Mover fuentes ```bash cd themes/{child} mkdir -p _dev/css git mv assets/css/*.css _dev/css/ # parciales + custom.css git mv assets/css/pages _dev/css/pages # si existe ``` Limpiar el entry point `_dev/css/custom.css`: - Quitar todos los `?v=N` de los imports: `sed -i '' -E "s/\.css\?v=[0-9]+'/.css'/g" _dev/css...

Details

Author
educlopez
Repository
educlopez/mallard
Created
2 months ago
Last Updated
today
Language
Go
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

ps-watch

Sets up BrowserSync live-reload watcher for PrestaShop Panda child theme development in Lando. Auto-detects child theme name and Lando proxy URL. Watches child theme CSS/JS/TPL files and reloads the browser automatically on save. Use when working on PS frontend/maquetación in Lando and the user wants auto-reload, live reload, watcher, or is tired of reloading the browser manually after CSS changes.

3 Updated today
educlopez
AI & Automation Solid

ps-new-project

Orchestrate the day-1 setup that remains after cloning a PrestaShop repo and running lando-setup: scaffold the child theme (panda or elementflow track), wire the CSS build, and write CLAUDE.md. Composes existing skills (ps-css-build, ps-project-doc, lando-setup). Does NOT create the GitLab repo, the server, or install PrestaShop core. Use when starting a new client project locally and you need the standard scaffold fast.

3 Updated today
educlopez
Code & Development Solid

ps-email-preview

Generates a full-featured email template viewer for PrestaShop projects, deployed as email-preview/index.php (subfolder, ROOT = dirname(__DIR__)). Features: Geist font + Geist Mono UI matching Vercel design system; PS admin authentication via Cookie class (always denies on failure — never allows by default); CSRF protection on all write endpoints; sandboxed iframe (sandbox="allow-scripts"); shop logo and favicon resolved dynamically from PS DB; source version pill dropdown (custom, not native select) showing child/parent/core with colored dots and count badge; language pill dropdown (same custom pattern); sidebar with real-time search (F shortcut), Geist-style tabs in drawer and preview bar, source stack dots per template; "↑ child" button with Geist confirmation modal to copy template to child theme override; "Eliminar override" button with Geist destructive modal (red band, irreversibility warning) to delete the child override and revert to parent/core; Variables inspector drawer (tabs: Variables with clipb

3 Updated today
educlopez