Julien Clemence Wordpress Tooling

WordPress Tooling - clemencefouquet.fr

Build tools, CSS architecture, and deployment workflows for the Clémence Fouquet WordPress theme.

Quick Reference

Resources: linter-configs.md | git-workflows.md

1. Build Tools

Stack

Installation rapide

npm init -y
npm install --save-dev @wordpress/scripts stylelint stylelint-config-standard @wordpress/eslint-plugin

composer require --dev squizlabs/php_codesniffer wp-coding-standards/wpcs

Commandes

npm run lint          # Lint tout
npm run lint:css:fix  # Fix CSS
npm run build         # Production

Configs complètes: references/linter-configs.md

2. CSS Architecture

Règles NON NÉGOCIABLES

CSS Layers

@layer reset, base, blocks, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer components {
  .l-header { backdrop-filter: blur(10px); }
}

WordPress Overrides (CRITIQUE)

CSS hors @layer bat TOUJOURS CSS dans @layer. WordPress génère CSS sans @layer.

/* HORS @layer - pour battre WordPress */
body .alignfull,
html body .alignfull {
  max-width: none;
  width: 100vw;
}

/* DANS @layer - nos styles custom */
@layer components {
  .l-header { /* ... */ }
}

// Priorité 20 pour charger après WordPress (défaut 10)
add_action('wp_enqueue_scripts', 'clemence_enqueue_assets', 20);

Tokens theme.json

/* Couleurs */
var(--wp--preset--color--violet-500)    /* #5b2e7f */
var(--wp--preset--color--orange-500)    /* #f89420 */

/* Espacements */
var(--wp--preset--spacing--50)          /* 24px */
var(--wp--preset--spacing--70)          /* 48px */

/* Typo */
var(--wp--preset--font-family--fraunces)
var(--wp--preset--font-size--large)

Commandes utiles

grep -rn '!important' assets/css/           # Trouver !important
grep -oE '#[0-9a-fA-F]{3,6}' assets/css/*.css | wc -l  # Compter couleurs hardcodées

3. Git Workflows

Workflow: Local → Production

Laragon → Git commit → GitHub push → VPS deploy

Quick deploy

# 1. Sync et commit
robocopy "$LOCAL_THEME" "$PROJECT_THEME" /MIR /XD .git
git add . && git commit -m "feat(header): update styles"
git push origin main

# 2. Deploy
tar -czf /tmp/theme.tar.gz . && scp /tmp/theme.tar.gz srv759970:/tmp/
ssh srv759970 "docker cp /tmp/theme.tar.gz wordpress-clemence:/tmp/ && \
  docker exec wordpress-clemence bash -c 'cd /var/www/html/wp-content/themes/clemence-theme && tar -xzf /tmp/theme.tar.gz'"

Workflow: Production → Local (Sync Clémence)

VPS Gutenberg → Backup → Git commit → Laragon sync

Quick sync

# 1. Backup obligatoire
ssh srv759970 "docker exec wordpress-clemence wp db export /tmp/backup.sql --allow-root"

# 2. Export thème
ssh srv759970 "docker exec wordpress-clemence tar -czf /tmp/theme.tar.gz -C /var/www/html/wp-content/themes clemence-theme"
scp srv759970:/tmp/theme.tar.gz ./backups/

# 3. Commit
git checkout -b content-sync/$(date +%Y%m%d)
git add . && git commit -m "sync: Import modifications Clémence"

Workflows détaillés: references/git-workflows.md

Commit format

feat(header): réduire espacement logo-navigation

- Gap réduit de 2rem à 1rem
- Test mobile OK

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Types: feat, fix, refactor, style, sync Scopes: header, footer, hero, css, deploy

Skill Chaining

Input Expected

• Projet WordPress theme FSE
• Accès SSH au VPS (srv759970)
• Node.js et Composer installés

Output Produced

• Configs linters prêtes (.stylelintrc.json, etc.)
• Architecture CSS avec @layer
• Workflows Git configurés

Skills Required Before

• Aucun (skill de setup)

Compatible Skills After

• julien-clemence-wordpress-contracts: Utilise les tokens et conventions CSS
• julien-clemence-wordpress-remote: Utilise les workflows de déploiement

Tools Used

• Read - Lire configs existantes
• Write - Créer configs linters
• Edit - Modifier package.json, functions.php
• Bash - npm install, git commands
• Grep - Rechercher !important, couleurs hardcodées
• Glob - Trouver fichiers CSS/JS