clean-css.cjs

const fs = require('fs');
const path = require('path');

const cssPath = path.join(__dirname, 'src', 'index.css');
let css = fs.readFileSync(cssPath, 'utf8');

// We have duplicated CSS properties in the buttons because of previous blind replaces.
// Let's clean them up by finding the new theme styles and removing the trailing old styles.

// The old styles that linger typically look like:
// color: white;
// border-radius: 10px;
// font-size: 16px; (keep this)
// font-family: ... (keep this)
// font-weight: 600; (we added 500, but 600 is fine)
// text-align: center;
// transition: all 0.3s ease;
// margin-top: 20px;

// Inside hover:
// transform: translateY(-2px);
// box-shadow: 0 5px 20px -5px rgba(255, 0, 0, 0.5);

// Let's just remove the conflicting duplicates:
css = css.replace(/transition:\s*all\s*0\.3s\s*ease;/g, '');
css = css.replace(/transform:\s*translateY\(-2px\);/g, '');
css = css.replace(/box-shadow:\s*0\s*5px\s*20px\s*-5px\s*rgba\(255,\s*0,\s*0,\s*0\.5\);/g, '');

// There is a duplicate `border-radius: 10px;` and `color: white;` right after `transition: all 0.4s...`
css = css.replace(/transition:\s*all\s*0\.4s\s*cubic-bezier\([^\)]+\);\s*color:\s*white;\s*border-radius:\s*10px;/g, 'transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);');

fs.writeFileSync(cssPath, css);
console.log('Cleaned up duplicated CSS properties.');