updateFeatures.ts•4.94 kB
#!/usr/bin/env node
/**
* Automated CSS Feature Update Script
* Uses context7 MCP to fetch latest CSS features from MDN and update feature modules
*/
/* eslint-disable no-console */
import { discoverRecentCSSFeatures, convertToStandardFeatures } from '../services/css/featureDiscovery.js';
import { writeFileSync, readFileSync } from 'fs';
import { join } from 'path';
/**
* Update modern CSS features module with discovered features
*/
async function updateModernFeaturesModule() {
try {
console.log('🚀 Starting automated feature discovery and update...');
// Discover features using context7
const discoveredFeatures = await discoverRecentCSSFeatures();
const standardFeatures = convertToStandardFeatures(discoveredFeatures);
if (Object.keys(standardFeatures).length === 0) {
console.log('⚠️ No new features discovered. Skipping update.');
return;
}
// Read current modern features file
const modernFeaturesPath = join(process.cwd(), 'src/services/css/features/modern/properties.ts');
try {
readFileSync(modernFeaturesPath, 'utf-8');
} catch {
console.log('📝 Creating new modern features file...');
}
// Generate updated content
const updatedContent = generateModernFeaturesContent(standardFeatures);
// Write updated content
writeFileSync(modernFeaturesPath, updatedContent, 'utf-8');
console.log(`✅ Successfully updated modern features module with ${Object.keys(standardFeatures).length} features`);
// Generate summary report
generateUpdateReport(standardFeatures);
} catch (error) {
console.error('❌ Failed to update features:', error);
process.exit(1);
}
}
/**
* Generate TypeScript content for modern features module
*/
function generateModernFeaturesContent(features: Record<string, any>): string {
const imports = `/**
* Modern CSS Features (2021-2025) - Auto-discovered and integrated from MDN
* Last updated: ${new Date().toISOString()}
* Generated by automated feature discovery using context7 MCP
*/
import { CSSFeature, CSSFeatureCategory } from '../../types.js';`;
const featuresObject = `
export const MODERN_CSS_FEATURES: Record<string, CSSFeature> = {${
Object.entries(features).map(([key, feature]) => `
${key}: {
name: "${feature.name}",
category: CSSFeatureCategory.${feature.category.toUpperCase()},
properties: [${feature.properties.map((p: string) => `"${p}"`).join(', ')}],
description: "${feature.description.replace(/"/g, '\\"')}",
support_level: "${feature.support_level}",
mdn_url: "${feature.mdn_url}"
}`).join(',')
}
};`;
const keywords = `
export const MODERN_CSS_KEYWORDS = [${
Object.values(features).flatMap((f: any) => f.properties)
.concat(['container', 'query', 'dvh', 'color-mix', 'has', 'nesting', 'aspect-ratio', 'clamp', 'subgrid', 'backdrop-filter'])
.map(k => `'${k}'`).join(', ')
}];`;
return imports + featuresObject + keywords;
}
/**
* Generate update report
*/
function generateUpdateReport(features: Record<string, any>) {
const reportPath = join(process.cwd(), 'FEATURE_UPDATE_REPORT.md');
const categorySummary: Record<string, number> = {};
const supportSummary: Record<string, number> = {};
Object.values(features).forEach((feature: any) => {
categorySummary[feature.category] = (categorySummary[feature.category] || 0) + 1;
supportSummary[feature.support_level] = (supportSummary[feature.support_level] || 0) + 1;
});
const report = `# CSS Feature Update Report
**Generated:** ${new Date().toISOString()}
**Total Features:** ${Object.keys(features).length}
## 📊 Category Breakdown
${Object.entries(categorySummary).map(([category, count]) =>
`- **${category}**: ${count} features`
).join('\n')}
## 🚀 Browser Support Summary
${Object.entries(supportSummary).map(([support, count]) =>
`- **${support}**: ${count} features`
).join('\n')}
## 🆕 Recently Added Features
${Object.entries(features).map(([key, feature]) => `
### ${feature.name}
- **Category:** ${feature.category}
- **Support:** ${feature.support_level}
- **Properties:** ${feature.properties.join(', ')}
- **MDN:** [Documentation](${feature.mdn_url})
`).join('')}
## 🔧 Integration Notes
- All features have been automatically categorized using context7 MDN integration
- Features are available in the \`MODERN_CSS_FEATURES\` registry
- Syntax examples and guidance are available in respective modules
- Browser support information is included for each feature
---
*This report was generated automatically by the CSS feature discovery system.*
`;
writeFileSync(reportPath, report, 'utf-8');
console.log(`📋 Feature update report generated: ${reportPath}`);
}
/**
* Main execution
*/
if (require.main === module) {
updateModernFeaturesModule().catch(console.error);
}
export { updateModernFeaturesModule };