generateStyle.mjs

import fs from 'fs';
import path from 'path';

// Define paths
const inputFilePath = './src/data/tokens.json';
const outputDir = './src/styles/theme/';
const targetFiles = ['global.css', 'modes.css', 'props.css', 'theme.css'];

// Ensure the theme directory exists
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
  console.log(`Created theme directory: ${outputDir}`);
} else {
  // Delete only the specified target files
  targetFiles.forEach((file) => {
    const filePath = path.join(outputDir, file);
    if (fs.existsSync(filePath)) {
      fs.unlinkSync(filePath);
      console.log(`Deleted old file: ${filePath}`);
    }
  });
}

// Read and parse tokens.json as utf8
fs.readFile(inputFilePath, 'utf8', (err, data) => {
  if (err) {
    console.error(`Error reading tokens.json at ${inputFilePath}:`, err);
    return;
  }

  const tokens = JSON.parse(data);
  const globalProps = tokens.props.global;
  const lightTheme = tokens.props.theme.light;
  const darkTheme = tokens.props.theme.dark;

  // Generate global.css content
  const globalCSSContent = `/* Autogenerated from ${inputFilePath} */\n:root {\n${Object.entries(globalProps)
    .map(([key, value]) => `  --${key}: ${value};`)
    .join('\n')}\n}`;

  // Write global.css
  fs.writeFile(path.join(outputDir, 'global.css'), globalCSSContent, 'utf8', (err) => {
    if (err) {
      console.error('Error writing global.css:', err);
    } else {
      console.log('global.css has been generated successfully.');
    }
  });

  // Generate colors.css content
  const colorCSSContent = `/* Autogenerated from ${inputFilePath} */\n:root {\n${Object.keys(lightTheme)
    .map((key) => {
      if (key in darkTheme) {
        return `  --${key}: light-dark(${lightTheme[key]}, ${darkTheme[key]});`;
      }
      return `  --${key}: ${lightTheme[key]};`;
    })
    .join('\n')}\n}`;

  // Write colors.css
  fs.writeFile(path.join(outputDir, 'colors.css'), colorCSSContent, 'utf8', (err) => {
    if (err) {
      console.error('Error writing colors.css:', err);
    } else {
      console.log('colors.css has been generated successfully.');
    }
  });

  // Generate modes.css content
  const hasDarkTheme = Object.keys(darkTheme).length > 0;

  const modesCSSContent = hasDarkTheme
    ? `/* Autogenerated from ${inputFilePath} */\n:root {\n  color-scheme: light dark;\n}\n\n[data-theme="light"] {\n  color-scheme: light;\n}\n\n[data-theme="dark"] {\n  color-scheme: dark;\n}`
    : `/* Autogenerated from ${inputFilePath} */`;

  // Write modes.css
  fs.writeFile(path.join(outputDir, 'modes.css'), modesCSSContent.trim(), 'utf8', (err) => {
    if (err) {
      console.error('Error writing modes.css:', err);
    } else {
      console.log('modes.css has been generated successfully.');
    }
  });

  // Generate index.css content with imports for modes.css, colors.css, and global.css
  const indexCSSContent = `/* Autogenerated from ${inputFilePath} */\n@import './modes.css';\n@import './colors.css';\n@import './global.css';`;

  // Write theme.css
  fs.writeFile(path.join(outputDir, 'settings.css'), indexCSSContent, 'utf8', (err) => {
    if (err) {
      console.error('Error writing settings.css:', err);
    } else {
      console.log('settings.css has been generated successfully.');
    }
  });
});