@cwcss/crosswind 0.1.5 → 0.2.0

package/bin/cli.ts

@@ -1,365 +0,0 @@
-#!/usr/bin/env bun
-import type { CrosswindConfig } from '../src/types'
-import { existsSync, watch } from 'node:fs'
-import { unlink } from 'node:fs/promises'
-import process from 'node:process'
-import { CLI } from '@stacksjs/clapp'
-import { version } from '../package.json'
-import { build, buildAndWrite } from '../src/build'
-import { config } from '../src/config'
-import { tailwindPreflight } from '../src/preflight'
-
-const cli = new CLI('crosswind')
-
-interface GlobalOptions {
-  verbose?: boolean
-  config?: string
-}
-
-interface BuildOptions extends GlobalOptions {
-  output?: string
-  minify?: boolean
-  watch?: boolean
-  content?: string
-  noPreflight?: boolean
-}
-
-interface InitOptions {
-  force?: boolean
-}
-
-interface AnalyzeOptions extends GlobalOptions {
-  json?: boolean
-  top?: number
-}
-
-/**
- * Load custom config if specified
- */
-async function loadCustomConfig(configPath?: string): Promise<CrosswindConfig> {
-  if (configPath) {
-    if (!existsSync(configPath)) {
-      console.error(`❌ Config file not found: ${configPath}`)
-      process.exit(1)
-    }
-    try {
-      const customConfig = await import(configPath)
-      return { ...config, ...(customConfig.default || customConfig) }
-    }
-    catch (error) {
-      console.error(`❌ Failed to load config file: ${configPath}`)
-      console.error(error)
-      process.exit(1)
-    }
-  }
-  return config
-}
-
-/**
- * Merge CLI options with config
- */
-function mergeConfig(baseConfig: CrosswindConfig, options: BuildOptions): CrosswindConfig {
-  return {
-    ...baseConfig,
-    output: options.output || baseConfig.output,
-    minify: options.minify ?? baseConfig.minify,
-    content: options.content ? [options.content] : baseConfig.content,
-    verbose: options.verbose ?? baseConfig.verbose,
-  }
-}
-
-/**
- * Run the build process
- */
-async function runBuild(buildConfig: CrosswindConfig, options: BuildOptions): Promise<void> {
-  try {
-    const startMsg = options.verbose ? '🚀 Building CSS (verbose mode)...' : '🚀 Building CSS...'
-    console.log(startMsg)
-
-    if (options.verbose) {
-      console.log(`📂 Content patterns: ${buildConfig.content.join(', ')}`)
-      console.log(`📝 Output: ${buildConfig.output}`)
-      console.log(`🗜️  Minify: ${buildConfig.minify ? 'Yes' : 'No'}`)
-    }
-
-    const result = await buildAndWrite(buildConfig)
-
-    console.log(`✅ Built ${result.classes.size} classes in ${result.duration.toFixed(2)}ms`)
-    console.log(`📝 Output: ${buildConfig.output}`)
-
-    // Show compile class stats if enabled
-    if (result.compiledClasses && result.compiledClasses.size > 0) {
-      console.log(`🔨 Compiled ${result.compiledClasses.size} class groups`)
-      if (result.transformedFiles) {
-        console.log(`📝 Transformed ${result.transformedFiles.size} files`)
-      }
-
-      if (options.verbose) {
-        console.log(`\n📦 Compiled classes:`)
-        for (const [, { className, utilities }] of result.compiledClasses) {
-          console.log(`  ${className} ← ${utilities.join(' ')}`)
-        }
-      }
-    }
-
-    if (options.verbose && result.classes.size > 0) {
-      const classesArray = Array.from(result.classes).sort()
-      console.log(`\n📋 Classes found (${result.classes.size}):`)
-      classesArray.forEach(cls => console.log(`  - ${cls}`))
-    }
-
-    // Show size info
-    if (existsSync(buildConfig.output)) {
-      const file = Bun.file(buildConfig.output)
-      const sizeKB = (file.size / 1024).toFixed(2)
-      console.log(`📦 File size: ${sizeKB} KB`)
-    }
-  }
-  catch (error) {
-    console.error('❌ Build failed:', error)
-    if (options.verbose && error instanceof Error) {
-      console.error(error.stack)
-    }
-    process.exit(1)
-  }
-}
-
-/**
- * Setup file watching
- */
-function setupWatch(buildConfig: CrosswindConfig, options: BuildOptions): void {
-  console.log('👀 Watching for changes...')
-
-  // Watch content directories
-  const watchDirs = new Set<string>()
-  for (const pattern of buildConfig.content) {
-    const dir = pattern.split('**')[0] || '.'
-    watchDirs.add(dir)
-  }
-
-  for (const dir of watchDirs) {
-    watch(dir, { recursive: true }, async (eventType, filename) => {
-      if (filename && /\.(?:html|js|ts|jsx|tsx|stx)$/.test(filename)) {
-        console.log(`\n📝 ${filename} changed, rebuilding...`)
-        await runBuild(buildConfig, options)
-      }
-    })
-  }
-
-  console.log(`\n👀 Watching: ${Array.from(watchDirs).join(', ')}`)
-}
-
-// Build command
-cli
-  .command('build', 'Build CSS from content files')
-  .option('--output <path>', 'Output CSS file path')
-  .option('--minify', 'Minify CSS output')
-  .option('--watch', 'Watch for file changes')
-  .option('--content <pattern>', 'Content file pattern (can override config)')
-  .option('--config <path>', 'Path to config file')
-  .option('--verbose', 'Show detailed output')
-  .option('--no-preflight', 'Skip preflight CSS')
-  .example('crosswind build')
-  .example('crosswind build --output ./dist/styles.css')
-  .example('crosswind build --minify --watch')
-  .example('crosswind build --verbose')
-  .example('crosswind build --config ./custom.config.ts')
-  .action(async (options: BuildOptions) => {
-    const baseConfig = await loadCustomConfig(options.config)
-    const buildConfig = mergeConfig(baseConfig, options)
-
-    await runBuild(buildConfig, options)
-
-    if (options.watch) {
-      setupWatch(buildConfig, options)
-    }
-  })
-
-// Watch command (alias for build --watch)
-cli
-  .command('watch', 'Build and watch for changes')
-  .option('--output <path>', 'Output CSS file path')
-  .option('--minify', 'Minify CSS output')
-  .option('--content <pattern>', 'Content file pattern')
-  .option('--config <path>', 'Path to config file')
-  .option('--verbose', 'Show detailed output')
-  .example('crosswind watch')
-  .example('crosswind watch --output ./dist/styles.css')
-  .example('crosswind watch --verbose')
-  .action(async (options: BuildOptions) => {
-    const baseConfig = await loadCustomConfig(options.config)
-    const buildConfig = mergeConfig(baseConfig, options)
-
-    await runBuild(buildConfig, options)
-    setupWatch(buildConfig, options)
-  })
-
-// Init command - Create a config file
-cli
-  .command('init', 'Create a crosswind.config.ts file')
-  .option('--force', 'Overwrite existing config file')
-  .example('crosswind init')
-  .example('crosswind init --force')
-  .action(async (options: InitOptions) => {
-    const configPath = './crosswind.config.ts'
-
-    if (existsSync(configPath) && !options.force) {
-      console.error('❌ Config file already exists. Use --force to overwrite.')
-      process.exit(1)
-    }
-
-    const defaultConfig = `import type { CrosswindOptions } from '@cwcss/crosswind'
-
-const config = {
-  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
-  output: './dist/crosswind.css',
-  minify: false,
-  watch: false,
-} satisfies CrosswindOptions
-
-export default config
-`
-
-    try {
-      await Bun.write(configPath, defaultConfig)
-      console.log('✅ Created crosswind.config.ts')
-      console.log('\nNext steps:')
-      console.log('  1. Update the content paths in crosswind.config.ts')
-      console.log('  2. Run: crosswind build')
-    }
-    catch (error) {
-      console.error('❌ Failed to create config file:', error)
-      process.exit(1)
-    }
-  })
-
-// Analyze command - Show statistics
-cli
-  .command('analyze', 'Analyze utility class usage')
-  .option('--config <path>', 'Path to config file')
-  .option('--verbose', 'Show detailed output')
-  .option('--json', 'Output as JSON')
-  .option('--top <n>', 'Show top N most used classes', { default: 10 })
-  .example('crosswind analyze')
-  .example('crosswind analyze --top 20')
-  .example('crosswind analyze --json')
-  .action(async (options: AnalyzeOptions) => {
-    try {
-      const baseConfig = await loadCustomConfig(options.config)
-
-      if (!options.json) {
-        console.log('🔍 Analyzing utility classes...\n')
-      }
-
-      const result = await build(baseConfig)
-
-      // Group classes by utility type
-      const utilityGroups = new Map<string, string[]>()
-      for (const cls of result.classes) {
-        const utility = cls.split('-')[0].split(':').pop() || 'other'
-        if (!utilityGroups.has(utility)) {
-          utilityGroups.set(utility, [])
-        }
-        utilityGroups.get(utility)!.push(cls)
-      }
-
-      const stats = {
-        totalClasses: result.classes.size,
-        buildTime: result.duration,
-        outputSize: existsSync(baseConfig.output) ? Bun.file(baseConfig.output).size : 0,
-        utilityGroups: Object.fromEntries(
-          Array.from(utilityGroups.entries())
-            .map(([key, value]) => [key, value.length] as [string, number])
-            .sort((a, b) => (b[1] as number) - (a[1] as number)),
-        ),
-        topClasses: Array.from(result.classes).slice(0, options.top || 10),
-      }
-
-      if (options.json) {
-        console.log(JSON.stringify(stats, null, 2))
-      }
-      else {
-        console.log(`📊 Total classes: ${stats.totalClasses}`)
-        console.log(`⏱️  Build time: ${stats.buildTime.toFixed(2)}ms`)
-        console.log(`📦 Output size: ${(stats.outputSize / 1024).toFixed(2)} KB\n`)
-
-        console.log(`🏷️  Utility groups (top ${options.top}):`)
-        const topGroups = Object.entries(stats.utilityGroups).slice(0, options.top || 10)
-        for (const [utility, count] of topGroups) {
-          console.log(`  ${utility.padEnd(20)} ${count} classes`)
-        }
-
-        if (options.verbose) {
-          console.log(`\n📋 All classes:`)
-          for (const cls of Array.from(result.classes).sort()) {
-            console.log(`  - ${cls}`)
-          }
-        }
-      }
-    }
-    catch (error) {
-      console.error('❌ Analysis failed:', error)
-      process.exit(1)
-    }
-  })
-
-// Clean command - Remove output file
-cli
-  .command('clean', 'Remove the output CSS file')
-  .option('--config <path>', 'Path to config file')
-  .example('crosswind clean')
-  .action(async (options: GlobalOptions) => {
-    try {
-      const baseConfig = await loadCustomConfig(options.config)
-
-      if (!existsSync(baseConfig.output)) {
-        console.log('ℹ️  Output file does not exist')
-        return
-      }
-
-      await unlink(baseConfig.output)
-      console.log(`✅ Removed ${baseConfig.output}`)
-    }
-    catch (error) {
-      console.error('❌ Failed to remove output file:', error)
-      process.exit(1)
-    }
-  })
-
-// Preflight command - Generate just the preflight CSS
-cli
-  .command('preflight', 'Generate preflight CSS only')
-  .option('--output <path>', 'Output CSS file path', { default: './preflight.css' })
-  .example('crosswind preflight')
-  .example('crosswind preflight --output ./reset.css')
-  .action(async (options: { output?: string }) => {
-    try {
-      const outputPath = options.output || './preflight.css'
-      const preflightCSS = tailwindPreflight.getCSS()
-
-      await Bun.write(outputPath, preflightCSS)
-      console.log(`✅ Generated preflight CSS`)
-      console.log(`📝 Output: ${outputPath}`)
-
-      const file = Bun.file(outputPath)
-      const sizeKB = (file.size / 1024).toFixed(2)
-      console.log(`📦 File size: ${sizeKB} KB`)
-    }
-    catch (error) {
-      console.error('❌ Failed to generate preflight CSS:', error)
-      process.exit(1)
-    }
-  })
-
-// Version command
-cli
-  .command('version', 'Show the version of Crosswind')
-  .action(() => {
-    console.log(version)
-  })
-
-cli.version(version)
-cli.help()
-
-// Parse arguments
-cli.parse()

package/build.ts

@@ -1,8 +0,0 @@
-import { dts } from 'bun-plugin-dtsx'
-
-await Bun.build({
-  entrypoints: ['src/index.ts'],
-  outdir: './dist',
-  target: 'bun',
-  plugins: [dts()],
-})

package/crosswind.config.ts

@@ -1,9 +0,0 @@
-import type { CrosswindOptions } from './src/types'
-
-const config: CrosswindOptions = {
-  content: ['./example/**/*.html'],
-  output: './example/output.css',
-  minify: false,
-}
-
-export default config

package/example/comprehensive.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Crosswind - Comprehensive Example</title>
-</head>
-<body>
-  <!-- Layout Utilities -->
-  <div class="relative top-4 z-10 aspect-square">
-    <div class="absolute inset-0 overflow-hidden">Content</div>
-  </div>
-
-  <!-- Grid Utilities -->
-  <div class="grid grid-cols-3 gap-4">
-    <div class="col-span-2">Span 2</div>
-    <div>Cell</div>
-  </div>
-
-  <!-- Typography -->
-  <div class="uppercase italic underline whitespace-nowrap truncate">
-    Styled Text
-  </div>
-
-  <!-- Transforms -->
-  <div class="scale-150 rotate-45 translate-x-4 skew-x-12">
-    Transformed
-  </div>
-
-  <!-- Transitions -->
-  <button class="transition-all duration-300 ease-in-out hover:opacity-50">
-    Animated Button
-  </button>
-
-  <!-- Filters -->
-  <div class="blur-sm grayscale-100 brightness-150">
-    Filtered Content
-  </div>
-
-  <!-- Interactivity -->
-  <div class="cursor-pointer select-none pointer-events-auto resize-both">
-    Interactive
-  </div>
-
-  <!-- Arbitrary Values -->
-  <div class="w-[250px] p-[2.5rem] bg-[#ff6b6b]">
-    Custom Values
-  </div>
-
-  <!-- Important Modifier -->
-  <div class="!text-white !bg-black !p-8">
-    Important Styles
-  </div>
-
-  <!-- SVG -->
-  <svg class="fill-current stroke-current">
-    <circle cx="50" cy="50" r="40" />
-  </svg>
-
-  <!-- Table -->
-  <table class="border-collapse table-fixed">
-    <tr><td>Cell</td></tr>
-  </table>
-
-  <!-- Scroll -->
-  <div class="scroll-smooth scroll-p-4 snap-y">
-    Scrollable
-  </div>
-</body>
-</html>

package/example/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Crosswind Example</title>
-</head>
-<body>
-  <div class="flex flex-col items-center justify-center h-screen bg-gray-100">
-    <h1 class="text-4xl font-bold text-gray-900 mb-4">
-      Welcome to Crosswind
-    </h1>
-    <p class="text-lg text-gray-600 mb-8">
-      A Bun-powered CSS utility framework
-    </p>
-    <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">
-      Get Started
-    </button>
-  </div>
-</body>
-</html>

package/example/output.css

@@ -1,236 +0,0 @@
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
-.bg-gray-100 {
-  background-color: #f3f4f6;
-}
-
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.text-gray-900 {
-  color: #111827;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-gray-600 {
-  color: #4b5563;
-}
-
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.bg-blue-500 {
-  background-color: blue-500;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-.hover\:bg-blue-600:hover {
-  background-color: blue-600;
-}
-
-.focus\:outline-none:focus {
-  outline-width: none;
-}
-
-.relative {
-  position: relative;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.z-10 {
-  z-index: 10;
-}
-
-.aspect-square {
-  aspect-ratio: 1 / 1;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.grid {
-  display: grid;
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.underline {
-  text-decoration-line: underline;
-}
-
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.scale-150 {
-  transform: scale(1.5);
-}
-
-.rotate-45 {
-  transform: rotate(45deg);
-}
-
-.translate-x-4 {
-  transform: translateX(1rem);
-}
-
-.skew-x-12 {
-  transform: skewX(12deg);
-}
-
-.transition-all {
-  transition-property: all;
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.hover\:opacity-50:hover {
-  opacity: 0.5;
-}
-
-.blur-sm {
-  filter: blur(4px);
-}
-
-.grayscale-100 {
-  filter: grayscale(1);
-}
-
-.brightness-150 {
-  filter: brightness(1.5);
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.select-none {
-  user-select: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.fill-current {
-  fill: currentColor;
-}
-
-.stroke-current {
-  stroke: currentColor;
-}
-
-.border-collapse {
-  border-collapse: collapse;
-}
-
-.table-fixed {
-  table-layout: fixed;
-}
-
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
-
-.scroll-p-4 {
-  scroll-padding: 1rem;
-}
-
-.snap-y {
-  scroll-snap-type: y mandatory;
-}