@cwcss/crosswind 0.1.5 → 0.2.0

package/dist/transformer-compile-class.d.ts

@@ -0,0 +1,37 @@
+import type { CrosswindConfig } from './types';
+/**
+ * Extract compile class markers from content
+*/
+export declare function extractCompileClasses(content: string, options?: CompileClassOptions): Map<string, string[]>;
+/**
+ * Transform content by replacing compile markers with generated class names
+*/
+export declare function transformContent(content: string, compiledClassMap: Map<string, string>, options?: CompileClassOptions): string;
+/**
+ * Generate class names for compiled classes
+*/
+export declare function generateCompiledClassNames(compiledClasses: Map<string, string[]>, options?: CompileClassOptions): Map<string, string>;
+export declare interface CompileClassOptions {
+  trigger?: string
+  classPrefix?: string
+  hashFn?: (content: string) => string
+  layer?: string
+}
+/**
+ * Main transformer class
+*/
+export declare class CompileClassTransformer {
+  private compiledClasses: any;
+  private classNameMap: any;
+  private options: CompileClassOptions;
+  constructor(options?: CompileClassOptions);
+  processFile(content: string): { content: string, hasChanges: boolean };
+  getCompiledClasses(): Map<string, { className: string, utilities: string[] }>;
+  generateCSS(config: CrosswindConfig, generator: any): string;
+  reset(): void;
+  getStats(): {
+    totalGroups: number
+    totalUtilities: number
+    averageUtilitiesPerGroup: number
+  };
+}

package/{src/types.ts → dist/types.d.ts}

@@ -1,68 +1,20 @@
-export interface CompileClassConfig {
-  /**
-   * Enable compile class transformer
-   * @default false
-   */
+export declare interface CompileClassConfig {
   enabled?: boolean
-  /**
-   * Trigger string to mark classes for compilation
-   * @default ':hw:'
-   */
   trigger?: string
-  /**
-   * Prefix for generated class names
-   * @default 'hw-'
-   */
   classPrefix?: string
-  /**
-   * Layer name for compiled classes
-   * @default 'shortcuts'
-   */
   layer?: string
 }
-
-export interface AttributifyConfig {
-  /**
-   * Enable attributify mode
-   * Allows using HTML attributes instead of class names
-   * e.g., <div hw-flex hw-bg="blue-500">
-   * @default false
-   */
+export declare interface AttributifyConfig {
   enabled?: boolean
-  /**
-   * Prefix for attributify attributes (to avoid conflicts with HTML attributes)
-   * e.g., with prefix 'hw-': <div hw-flex hw-bg="blue-500">
-   * @default 'hw-'
-   */
   prefix?: string
-  /**
-   * Attributes to ignore (won't be treated as utilities)
-   * @default ['class', 'className', 'style', 'id', ...]
-   */
   ignoreAttributes?: string[]
 }
-
-export interface BracketSyntaxConfig {
-  /**
-   * Enable bracket/grouped syntax
-   * Allows grouping utilities like: flex[col jc-center ai-center] or text[white 2rem 700]
-   * @default false
-   */
+export declare interface BracketSyntaxConfig {
   enabled?: boolean
-  /**
-   * Enable colon syntax for simple values
-   * e.g., bg:black, w:100%, text:white
-   * @default false
-   */
   colonSyntax?: boolean
-  /**
-   * Mapping of shorthand abbreviations to full utility names
-   * e.g., { 'jc': 'justify', 'ai': 'items', 'col': 'col' }
-   */
   aliases?: Record<string, string>
 }
-
-export interface CrosswindConfig {
+export declare interface CrosswindConfig {
   content: string[]
   output: string
   minify: boolean
@@ -79,11 +31,9 @@ export interface CrosswindConfig {
   compileClass?: CompileClassConfig
   attributify?: AttributifyConfig
   bracketSyntax?: BracketSyntaxConfig
-  /** Generate :root CSS variables from theme colors (e.g., --monokai-bg: #2d2a2e) */
   cssVariables?: boolean
 }
-
-export interface Theme {
+export declare interface Theme {
   colors: Record<string, string | Record<string, string>>
   spacing: Record<string, string>
   fontSize: Record<string, [string, { lineHeight: string }]>
@@ -91,25 +41,20 @@ export interface Theme {
   screens: Record<string, string>
   borderRadius: Record<string, string>
   boxShadow: Record<string, string>
-  /** Extend theme values without replacing defaults */
   extend?: Partial<Omit<Theme, 'extend'>>
 }
-
-export interface VariantConfig {
+export declare interface VariantConfig {
   'responsive': boolean
   'hover': boolean
   'focus': boolean
   'active': boolean
   'disabled': boolean
   'dark': boolean
-  // Group/Peer
   'group': boolean
   'peer': boolean
-  // Pseudo-elements
   'before': boolean
   'after': boolean
   'marker': boolean
-  // Pseudo-classes - Basic
   'first': boolean
   'last': boolean
   'odd': boolean
@@ -120,7 +65,6 @@ export interface VariantConfig {
   'checked': boolean
   'focus-within': boolean
   'focus-visible': boolean
-  // Pseudo-classes - Form states
   'placeholder': boolean
   'selection': boolean
   'file': boolean
@@ -129,7 +73,6 @@ export interface VariantConfig {
   'invalid': boolean
   'read-only': boolean
   'autofill': boolean
-  // Pseudo-classes - Additional states
   'open': boolean
   'closed': boolean
   'empty': boolean
@@ -139,49 +82,38 @@ export interface VariantConfig {
   'indeterminate': boolean
   'default': boolean
   'optional': boolean
-  // Media
   'print': boolean
-  // Direction
   'rtl': boolean
   'ltr': boolean
-  // Motion
   'motion-safe': boolean
   'motion-reduce': boolean
-  // Contrast
   'contrast-more': boolean
   'contrast-less': boolean
 }
-
-export interface ParsedClass {
+export declare interface ParsedClass {
   raw: string
   variants: string[]
   utility: string
   value?: string
   important: boolean
   arbitrary: boolean
-  typeHint?: string // Type hint for arbitrary values, e.g., 'color' in text-[color:var(--muted)]
+  typeHint?: string
 }
-
-export interface CSSRule {
+export declare interface CSSRule {
   selector: string
   properties: Record<string, string>
   mediaQuery?: string
-  childSelector?: string // For utilities like space-x that need child selectors
+  childSelector?: string
 }
-
-export interface UtilityRuleResult {
+export declare interface UtilityRuleResult {
   properties: Record<string, string>
   childSelector?: string
-  pseudoElement?: string // e.g., '::placeholder' — appended to selector without space
+  pseudoElement?: string
 }
-
-export type CustomRule = [RegExp, (match: RegExpMatchArray) => Record<string, string> | undefined]
-
-export interface Preflight {
+export declare interface Preflight {
   getCSS: () => string
 }
-
-export interface Preset {
+export declare interface Preset {
   name: string
   theme?: Partial<Theme>
   rules?: CustomRule[]
@@ -189,9 +121,8 @@ export interface Preset {
   variants?: Partial<VariantConfig>
   preflights?: Preflight[]
 }
-
-type DeepPartial<T> = {
+export type CustomRule = [RegExp, (_match: RegExpMatchArray) => Record<string, string> | undefined]
+declare type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
 }
-
-export type CrosswindOptions = DeepPartial<CrosswindConfig>
+export type CrosswindOptions = DeepPartial<CrosswindConfig>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cwcss/crosswind",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A performant Utility-First CSS framework. Similar to Tailwind or UnoCSS.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "crosswind": "./dist/bin/cli.js"
+    "crosswind": "./dist/cli.js"
   },
   "files": [
     "README.md",
@@ -72,21 +72,7 @@
     "@stacksjs/clapp": "^0.2.0",
     "bunfig": "^0.15.0"
   },
-  "overrides": {
-    "unconfig": "0.3.10"
-  },
   "lint-staged": {
     "*.{js,ts}": "bunx --bun pickier run --mode lint --fix"
-  },
-  "devDependencies": {
-    "@tailwindcss/node": "^4.1.14",
-    "@tailwindcss/postcss": "^4.1",
-    "@tailwindcss/vite": "^4.1",
-    "@unocss/core": "^66.5.4",
-    "@unocss/preset-wind": "^66.5.4",
-    "mitata": "^1.0.34",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3",
-    "tailwindcss-v4": "npm:tailwindcss@^4"
   }
 }

package/PLUGIN.md

@@ -1,235 +0,0 @@
-# Crosswind Bun Plugin
-
-A Bun plugin that automatically generates and injects Crosswind CSS into your HTML files during the build process.
-
-## Installation
-
-```bash
-bun add @cwcss/crosswind
-```
-
-## Quick Start
-
-**1. Create your HTML file** (`src/template.html`):
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>My App</title>
-</head>
-<body>
-  <div class="flex items-center p-4 bg-blue-500 text-white rounded-lg">
-    <h1 class="text-2xl font-bold">Hello Crosswind!</h1>
-  </div>
-</body>
-</html>
-```
-
-**2. Import it in your TypeScript** (`src/index.ts`):
-
-```typescript
-import template from './template.html'
-
-// The HTML now has Crosswind CSS injected
-document.body.innerHTML = template
-```
-
-**3. Build with the plugin**:
-
-```typescript
-import { plugin } from '@cwcss/crosswind'
-
-await Bun.build({
-  entrypoints: ['./src/index.ts'],
-  outdir: './dist',
-  plugins: [plugin()],
-})
-```
-
-The plugin will automatically:
-
-- Scan the HTML for utility classes
-- Generate CSS for those classes
-- Inject the CSS into the `<head>` section
-
-## Configuration
-
-### Basic Configuration
-
-```typescript
-import { plugin } from '@cwcss/crosswind'
-
-await Bun.build({
-  entrypoints: ['./src/index.ts'],
-  outdir: './dist',
-  plugins: [
-    plugin({
-      includePreflight: true, // Include CSS reset (default: true)
-    }),
-  ],
-})
-```
-
-### Custom Theme
-
-```typescript
-import { plugin } from '@cwcss/crosswind'
-
-await Bun.build({
-  entrypoints: ['./src/index.ts'],
-  outdir: './dist',
-  plugins: [
-    plugin({
-      config: {
-        minify: true,
-        theme: {
-          colors: {
-            primary: '#3b82f6',
-            secondary: '#10b981',
-            danger: '#ef4444',
-          },
-          spacing: {
-            18: '4.5rem',
-            88: '22rem',
-          },
-        },
-        shortcuts: {
-          btn: 'px-4 py-2 rounded bg-primary text-white hover:bg-blue-600',
-          card: 'p-6 bg-white rounded-lg shadow-md',
-        },
-      },
-    }),
-  ],
-})
-```
-
-### Advanced Configuration
-
-```typescript
-import { plugin } from '@cwcss/crosswind'
-
-await Bun.build({
-  entrypoints: ['./src/index.ts'],
-  outdir: './dist',
-  plugins: [
-    plugin({
-      config: {
-        minify: true,
-        safelist: ['bg-red-500', 'text-green-500'], // Always include these
-        blocklist: ['debug-*'], // Never include these
-        theme: {
-          colors: {
-            brand: {
-              50: '#f0f9ff',
-              100: '#e0f2fe',
-              500: '#0ea5e9',
-              900: '#0c4a6e',
-            },
-          },
-        },
-        shortcuts: {
-          'btn-primary': 'px-4 py-2 rounded bg-brand-500 text-white hover:bg-brand-600',
-        },
-      },
-      includePreflight: true,
-    }),
-  ],
-})
-```
-
-## API Reference
-
-### `plugin(options?)`
-
-Creates a Crosswind Bun plugin instance.
-
-#### Options
-
-- **`config`** (`Partial<CrosswindConfig>`) - Custom Crosswind configuration
-  - `minify` - Minify the generated CSS
-  - `theme` - Custom theme (colors, spacing, fonts, etc.)
-  - `shortcuts` - Utility class shortcuts
-  - `safelist` - Classes to always include
-  - `blocklist` - Classes to never include
-  - `variants` - Enable/disable variants
-  - And more...
-
-- **`includePreflight`** (`boolean`) - Include preflight CSS (default: `true`)
-
-## How It Works
-
-1. The plugin registers an `onLoad` handler for `.html` files
-2. When Bun encounters an HTML import, the plugin intercepts it
-3. It extracts all utility classes from the HTML using Crosswind's parser
-4. It generates CSS for those classes using Crosswind's generator
-5. The CSS is injected into the `<head>` section
-6. The processed HTML is returned to the bundle
-
-## Use Cases
-
-- **SPAs**: Import HTML templates with automatic CSS generation
-- **Web Components**: Load component templates with scoped styles
-- **Static Sites**: Process HTML pages during build
-- **Email Templates**: Generate inline CSS for email HTML
-
-## Examples
-
-See the [examples/plugin](./examples/plugin) directory for a complete working example.
-
-## Comparison with CLI
-
-| Feature | Plugin | CLI |
-|---------|--------|-----|
-| Automatic CSS generation | ✅ | ✅ |
-| Watches files | ✅ (via Bun) | ✅ |
-| Injects CSS | ✅ | ❌ |
-| Separate CSS file | ❌ | ✅ |
-| Build integration | ✅ | ❌ |
-| Standalone usage | ❌ | ✅ |
-
-## Performance
-
-The plugin is highly performant:
-
-- Processes 1000 utilities in ~7ms
-- Minimal overhead in build process
-- Lazy loading - only processes imported HTML files
-
-## TypeScript Support
-
-The plugin is fully typed. Import the types:
-
-```typescript
-import type { CrosswindPluginOptions } from '@cwcss/crosswind'
-
-const options: CrosswindPluginOptions = {
-  config: {
-    minify: true,
-  },
-}
-```
-
-## Configuration File
-
-The plugin also respects `crosswind.config.ts` in your project root:
-
-```typescript
-// crosswind.config.ts
-import type { CrosswindOptions } from '@cwcss/crosswind'
-
-export default {
-  minify: true,
-  theme: {
-    colors: {
-      primary: '#3b82f6',
-    },
-  },
-} satisfies CrosswindOptions
-```
-
-The plugin will merge this config with any options passed to it.
-
-## License
-
-MIT