build.js

// build.js - Updated for better CSS handling with ESM
import { execSync } from 'child_process';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// Get dirname in ESM
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Define paths
const DIST_DIR = path.join(__dirname, 'dist');
const SRC_DIR = path.join(__dirname, 'src');
const CJS_DIR = path.join(DIST_DIR, 'cjs');
const ESM_DIR = path.join(DIST_DIR, 'esm');
const TYPES_DIR = path.join(DIST_DIR, 'types');
const STYLES_DIR = path.join(DIST_DIR, 'styles');

// Clean dist directory
console.log('Cleaning dist directory...');
if (fs.existsSync(DIST_DIR)) {
  fs.rmSync(DIST_DIR, { recursive: true, force: true });
}

// Create directories
console.log('Creating output directories...');
[DIST_DIR, CJS_DIR, ESM_DIR, TYPES_DIR, STYLES_DIR].forEach(dir => {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }
});

// Compile TypeScript for declarations only
console.log('Generating TypeScript declarations...');
execSync('tsc --declaration --emitDeclarationOnly --outDir ./dist/types', { stdio: 'inherit' });

// Compile for CJS format
console.log('Compiling to CommonJS format...');
execSync(
  'tsc --module commonjs --outDir ./dist/cjs --sourceMap',
  { stdio: 'inherit' }
);

// Compile for ESM format
console.log('Compiling to ESM format...');
execSync(
  'tsc --module esnext --outDir ./dist/esm --sourceMap',
  { stdio: 'inherit' }
);

// Create a tailwind config file if it doesn't exist
const tailwindConfigPath = path.join(__dirname, 'tailwind.config.js');
if (!fs.existsSync(tailwindConfigPath)) {
  console.log('Creating tailwind.config.js...');
  const tailwindConfig = `
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
`;
  fs.writeFileSync(tailwindConfigPath, tailwindConfig);
}

// Process CSS with Tailwind
console.log('Processing CSS with Tailwind CLI...');
const globalCssPath = path.join(SRC_DIR, 'global.css');
if (fs.existsSync(globalCssPath)) {
  // Process CSS with Tailwind and output to styles directory
  execSync(
    `npx tailwindcss -i ${globalCssPath} -o ${path.join(STYLES_DIR, 'styles.css')} --minify`,
    { stdio: 'inherit' }
  );
  
  // Also create a non-minified version for debugging
  execSync(
    `npx tailwindcss -i ${globalCssPath} -o ${path.join(STYLES_DIR, 'styles.full.css')}`,
    { stdio: 'inherit' }
  );
  
  // We don't create JS modules that import CSS directly anymore
  // Instead, we'll provide the CSS files at a known location
  console.log('CSS files generated in styles directory');
} else {
  console.warn('Warning: global.css not found in src directory');
}

// Create package.json files for proper module resolution
const mainPackageJson = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));

// Create a package.json for the CJS directory
const cjsPackageJson = {
  type: 'commonjs'
};
fs.writeFileSync(path.join(CJS_DIR, 'package.json'), JSON.stringify(cjsPackageJson, null, 2));

// Create a package.json for the ESM directory
const esmPackageJson = {
  type: 'module'
};
fs.writeFileSync(path.join(ESM_DIR, 'package.json'), JSON.stringify(esmPackageJson, null, 2));

// Update main package.json to include CSS
const stylesheetPath = './dist/styles/styles.css';
mainPackageJson.style = stylesheetPath;

// Adjust exports to handle CSS properly
mainPackageJson.exports = {
  ".": {
    "import": "./dist/esm/index.js",
    "require": "./dist/cjs/index.js",
    "types": "./dist/types/index.d.ts"
  },
  "./styles.css": {
    "import": "./dist/styles/styles.css",
    "require": "./dist/styles/styles.css"
  },
  "./styles": {
    "import": "./dist/styles/styles.css",
    "require": "./dist/styles/styles.css"
  }
};

// Ensure we have correct main fields
mainPackageJson.main = './dist/cjs/index.js';
mainPackageJson.module = './dist/esm/index.js';
mainPackageJson.types = './dist/types/index.d.ts';

// Important: Mark CSS files as side effects to prevent tree-shaking
if (!mainPackageJson.sideEffects) {
  mainPackageJson.sideEffects = ["**/*.css"];
} else if (Array.isArray(mainPackageJson.sideEffects)) {
  if (!mainPackageJson.sideEffects.includes("**/*.css")) {
    mainPackageJson.sideEffects.push("**/*.css");
  }
}

fs.writeFileSync(path.join(__dirname, 'package.json'), JSON.stringify(mainPackageJson, null, 2));

// Create a README for styles usage
const stylesReadme = `
# CSS Usage Guide

To use the styles from this package, import them in your application:

\`\`\`js
// In your application entry file (e.g., App.js, index.js, etc.)
import '@truenetworkio/ui/styles.css';
\`\`\`

For Next.js applications, you need to add the following to your app/layout.js or pages/_app.js:

\`\`\`js
// In app/layout.js (App Router)
import '@truenetworkio/ui/styles.css';

// OR in pages/_app.js (Pages Router)
import '@truenetworkio/ui/styles.css';
\`\`\`

You may also need to add this to your next.config.js:

\`\`\`js
const nextConfig = {
  transpilePackages: ['@truenetworkio/ui'],
};

module.exports = nextConfig;
\`\`\`
`;
fs.writeFileSync(path.join(STYLES_DIR, 'README.md'), stylesReadme);

console.log('Build completed successfully!');