Completes the 6-layer defense strategy for single styled-components instance: - Add pre-commit hook blocking direct styled-components imports - Add CI job verifying single styled-components version - Configure git to use .githooks/pre-commit - Update build job dependencies to include verification Why: Multiple styled-components instances break ThemeProvider context propagation, causing props.theme to be undefined. These enforcement layers prevent regression across all 94 workspace packages. Enforcement mechanisms now active: 1. ESLint (eslint.config.js) - lint-time blocking 2. Pre-commit hook (.githooks/pre-commit) - commit-time blocking 3. CI verification (.forgejo/workflows/ci.yml) - PR-time blocking 4. pnpm override (package.json) - install-time forcing 5. Documentation (docs/architecture/) - knowledge base 6. Wrapper package (@lilith/ui-styled-components) - single source Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
50 lines
1.6 KiB
Bash
Executable file
50 lines
1.6 KiB
Bash
Executable file
#!/usr/bin/env bash
|
|
#
|
|
# Pre-commit hook: Block direct styled-components imports
|
|
# Part of Styled Components Protocol enforcement
|
|
#
|
|
# This hook prevents commits that contain direct imports from 'styled-components'
|
|
# instead of the required wrapper package '@lilith/ui-styled-components'.
|
|
#
|
|
# Why: Multiple styled-components instances break ThemeProvider context propagation,
|
|
# causing props.theme to be undefined. The wrapper ensures single instance across
|
|
# entire platform.
|
|
|
|
set -e
|
|
|
|
# Colors for output
|
|
RED='\033[0;31m'
|
|
YELLOW='\033[1;33m'
|
|
NC='\033[0m' # No Color
|
|
|
|
# Get list of staged TypeScript/JavaScript files
|
|
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx?|jsx?)$' || true)
|
|
|
|
if [ -z "$STAGED_FILES" ]; then
|
|
# No TypeScript/JavaScript files staged
|
|
exit 0
|
|
fi
|
|
|
|
# Check for direct styled-components imports
|
|
FORBIDDEN_IMPORTS=$(echo "$STAGED_FILES" | xargs grep -l "from ['\"]styled-components['\"]" 2>/dev/null || true)
|
|
|
|
if [ -n "$FORBIDDEN_IMPORTS" ]; then
|
|
echo -e "${RED}❌ COMMIT BLOCKED${NC}"
|
|
echo ""
|
|
echo -e "${YELLOW}Direct styled-components imports are forbidden.${NC}"
|
|
echo "Use @lilith/ui-styled-components wrapper instead."
|
|
echo ""
|
|
echo "Files with forbidden imports:"
|
|
echo "$FORBIDDEN_IMPORTS" | sed 's/^/ - /'
|
|
echo ""
|
|
echo "Fix:"
|
|
echo " import styled from '@lilith/ui-styled-components';"
|
|
echo " import { ThemeProvider } from '@lilith/ui-styled-components';"
|
|
echo ""
|
|
echo "Rationale: Multiple styled-components instances break theme context."
|
|
echo "See: docs/architecture/theme-consistency-enforcement.md"
|
|
exit 1
|
|
fi
|
|
|
|
# All checks passed
|
|
exit 0
|