frontend/fix-mixins.cjs

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

// Mixin replacements
const mixinReplacements = {
  '@include overflow-overlay();': 'overflow: auto;\n  overflow: overlay;',
  '@include absolute-0();': 'position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;',
  '@include ellipsis-oneline();': 'overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;',
  '@include flex-grid-layout();': 'display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;',
  '@include flex-grid-layout-children(2, 48%);': 'width: 48%;\n  margin-bottom: calc(#{100 - 2 * 48%} / #{2 - 1});\n\n  &:not(:nth-child(2n)) {\n    margin-right: calc(#{100 - 2 * 48%} / #{2 - 1});\n  }',
  '@include flex-grid-layout-children(3, 31%);': 'width: 31%;\n  margin-bottom: calc(#{100 - 3 * 31%} / #{3 - 1});\n\n  &:not(:nth-child(3n)) {\n    margin-right: calc(#{100 - 3 * 31%} / #{3 - 1});\n  }',
  '@include flex-grid-layout-children(4, 24%);': 'width: 24%;\n  margin-bottom: calc(#{100 - 4 * 24%} / #{4 - 1});\n\n  &:not(:nth-child(4n)) {\n    margin-right: calc(#{100 - 4 * 24%} / #{4 - 1});\n  }',
  '@include flex-grid-layout-children(5, 18%);': 'width: 18%;\n  margin-bottom: calc(#{100 - 5 * 18%} / #{5 - 1});\n\n  &:not(:nth-child(5n)) {\n    margin-right: calc(#{100 - 5 * 18%} / #{5 - 1});\n  }',
  '@include flex-grid-layout-children(5, 16%);': 'width: 16%;\n  margin-bottom: calc(#{100 - 5 * 16%} / #{5 - 1});\n\n  &:not(:nth-child(5n)) {\n    margin-right: calc(#{100 - 5 * 16%} / #{5 - 1});\n  }',
  '@include flex-grid-layout-children(5, 19%);': 'width: 19%;\n  margin-bottom: calc(#{100 - 5 * 19%} / #{5 - 1});\n\n  &:not(:nth-child(5n)) {\n    margin-right: calc(#{100 - 5 * 19%} / #{5 - 1});\n  }',
  '@include flex-grid-layout-children(6, 14%);': 'width: 14%;\n  margin-bottom: calc(#{100 - 6 * 14%} / #{6 - 1});\n\n  &:not(:nth-child(6n)) {\n    margin-right: calc(#{100 - 6 * 14%} / #{6 - 1});\n  }',
  '@include flex-grid-layout-children(8, 12%);': 'width: 12%;\n  margin-bottom: calc(#{100 - 8 * 12%} / #{8 - 1});\n\n  &:not(:nth-child(8n)) {\n    margin-right: calc(#{100 - 8 * 12%} / #{8 - 1});\n  }',
  '@include flex-grid-layout-children(10, 8%);': 'width: 8%;\n  margin-bottom: calc(#{100 - 10 * 8%} / #{10 - 1});\n\n  &:not(:nth-child(10n)) {\n    margin-right: calc(#{100 - 10 * 8%} / #{10 - 1});\n  }',
  '@include flex-grid-layout-children(10, 9%);': 'width: 9%;\n  margin-bottom: calc(#{100 - 10 * 9%} / #{10 - 1});\n\n  &:not(:nth-child(10n)) {\n    margin-right: calc(#{100 - 10 * 9%} / #{10 - 1});\n  }',
  '@include flex-grid-layout-children(10, 7%);': 'width: 7%;\n  margin-bottom: calc(#{100 - 10 * 7%} / #{10 - 1});\n\n  &:not(:nth-child(10n)) {\n    margin-right: calc(#{100 - 10 * 7%} / #{10 - 1});\n  }'
};

function processFile(filePath) {
  try {
    let content = fs.readFileSync(filePath, 'utf8');
    let modified = false;
    
    for (const [mixin, replacement] of Object.entries(mixinReplacements)) {
      if (content.includes(mixin)) {
        content = content.replace(new RegExp(mixin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), replacement);
        modified = true;
      }
    }
    
    if (modified) {
      fs.writeFileSync(filePath, content, 'utf8');
      console.log(`Fixed mixins in: ${filePath}`);
    }
  } catch (error) {
    console.error(`Error processing ${filePath}:`, error.message);
  }
}

function walkDirectory(dir) {
  const files = fs.readdirSync(dir);
  
  for (const file of files) {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);
    
    if (stat.isDirectory()) {
      walkDirectory(filePath);
    } else if (file.endsWith('.vue') || file.endsWith('.scss')) {
      processFile(filePath);
    }
  }
}

// Start processing from src directory
walkDirectory('./src');
console.log('Mixin replacement completed!');