npm - @cwcss/crosswind - Versions diffs - 0.1.5 → 0.2.0 - Mend

@cwcss/crosswind 0.1.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/LICENSE.md +21 -0
package/README.md +52 -0
package/dist/bin/cli.js +14615 -0
package/dist/build.d.ts +24 -0
package/dist/config.d.ts +5 -0
package/dist/generator.d.ts +31 -0
package/dist/index.d.ts +10 -0
package/dist/parser.d.ts +42 -0
package/dist/plugin.d.ts +22 -0
package/dist/preflight-forms.d.ts +5 -0
package/dist/preflight.d.ts +2 -0
package/dist/rules-advanced.d.ts +27 -0
package/dist/rules-effects.d.ts +25 -0
package/dist/rules-forms.d.ts +7 -0
package/dist/rules-grid.d.ts +13 -0
package/dist/rules-interactivity.d.ts +41 -0
package/dist/rules-layout.d.ts +26 -0
package/dist/rules-transforms.d.ts +33 -0
package/dist/rules-typography.d.ts +41 -0
package/dist/rules.d.ts +39 -0
package/dist/scanner.d.ts +18 -0
package/dist/src/index.js +12848 -0
package/dist/transformer-compile-class.d.ts +37 -0
package/{src/types.ts → dist/types.d.ts} +17 -86
package/package.json +2 -16
package/PLUGIN.md +0 -235
package/benchmark/framework-comparison.bench.ts +0 -850
package/bin/cli.ts +0 -365
package/bin/crosswind +0 -0
package/bin/headwind +0 -0
package/build.ts +0 -8
package/crosswind.config.ts +0 -9
package/example/comprehensive.html +0 -70
package/example/index.html +0 -21
package/example/output.css +0 -236
package/examples/plugin/README.md +0 -112
package/examples/plugin/build.ts +0 -32
package/examples/plugin/src/index.html +0 -34
package/examples/plugin/src/index.ts +0 -7
package/headwind +0 -2
package/src/build.ts +0 -101
package/src/config.ts +0 -529
package/src/generator.ts +0 -2173
package/src/index.ts +0 -10
package/src/parser.ts +0 -1471
package/src/plugin.ts +0 -118
package/src/preflight-forms.ts +0 -229
package/src/preflight.ts +0 -388
package/src/rules-advanced.ts +0 -477
package/src/rules-effects.ts +0 -461
package/src/rules-forms.ts +0 -103
package/src/rules-grid.ts +0 -241
package/src/rules-interactivity.ts +0 -525
package/src/rules-layout.ts +0 -385
package/src/rules-transforms.ts +0 -412
package/src/rules-typography.ts +0 -486
package/src/rules.ts +0 -809
package/src/scanner.ts +0 -84
package/src/transformer-compile-class.ts +0 -275
package/test/advanced-features.test.ts +0 -911
package/test/arbitrary.test.ts +0 -396
package/test/attributify.test.ts +0 -592
package/test/bracket-syntax.test.ts +0 -1133
package/test/build.test.ts +0 -99
package/test/colors.test.ts +0 -934
package/test/flexbox.test.ts +0 -669
package/test/generator.test.ts +0 -597
package/test/grid.test.ts +0 -584
package/test/layout.test.ts +0 -404
package/test/modifiers.test.ts +0 -417
package/test/parser.test.ts +0 -564
package/test/performance-regression.test.ts +0 -376
package/test/performance.test.ts +0 -568
package/test/plugin.test.ts +0 -160
package/test/scanner.test.ts +0 -94
package/test/sizing.test.ts +0 -481
package/test/spacing.test.ts +0 -394
package/test/transformer-compile-class.test.ts +0 -287
package/test/transforms.test.ts +0 -448
package/test/typography.test.ts +0 -632
package/test/variants-form-states.test.ts +0 -225
package/test/variants-group-peer.test.ts +0 -66
package/test/variants-media.test.ts +0 -213
package/test/variants-positional.test.ts +0 -58
package/test/variants-pseudo-elements.test.ts +0 -47
package/test/variants-state.test.ts +0 -62
package/tsconfig.json +0 -18

package/examples/plugin/README.md DELETED Viewed

@@ -1,112 +0,0 @@
-# Crosswind Bun Plugin Example
-This example demonstrates how to use the Crosswind Bun plugin to automatically generate and inject CSS into your HTML files during the build process.
-## Project Structure
-```
-examples/plugin/
-├── src/
-│   ├── index.ts       # TypeScript entrypoint that imports HTML
-│   └── index.html     # HTML file with utility classes
-├── build.ts           # Build script
-└── README.md
-```
-## Usage
-The plugin works by intercepting HTML imports in your TypeScript/JavaScript code. When you import an HTML file, the plugin:
-1. Scans the HTML for Crosswind utility classes
-2. Generates the corresponding CSS
-3. Injects the CSS into the `<head>` section
-4. Returns the processed HTML
-### Basic Setup
-```typescript
-import { plugin } from '@cwcss/crosswind'
-await Bun.build({
-  entrypoints: ['./src/index.ts'],
-  outdir: './dist',
-  plugins: [plugin()],
-})
-```
-**Your TypeScript file** (`src/index.ts`):
-```typescript
-import html from './index.html'
-// Use the HTML content (it will have CSS injected)
-document.body.innerHTML = html
-```
-### With Custom Configuration
-```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',
-          },
-        },
-      },
-      includePreflight: true,
-    }),
-  ],
-})
-```
-## Running This Example
-```bash
-# Build the example
-bun run build.ts
-# The output will be in ./dist/
-```
-## How It Works
-1. The plugin hooks into Bun's module loading system via `onLoad`
-2. When a `.html` file is imported, the plugin intercepts the load
-3. It extracts utility classes from the HTML using Crosswind's parser
-4. It generates CSS for those classes using Crosswind's generator
-5. The generated CSS is injected into the `<head>` section
-6. The processed HTML is returned as a string in the bundled output
-## Options
-### `config`
-Custom Crosswind configuration to override defaults. This can include:
-- `minify`: Minify the generated CSS
-- `theme`: Custom theme colors, spacing, fonts, etc.
-- `shortcuts`: Define utility class shortcuts
-- `safelist`: Classes to always include
-- And more...
-### `includePreflight`
-Whether to include preflight (reset) CSS. Default: `true`
-## Use Cases
-This plugin is ideal for:
-- Single Page Applications (SPAs) that import HTML templates
-- Component-based architectures where HTML is imported as strings
-- Build processes that need automatic CSS generation from HTML
-- Projects using Bun's native bundler with HTML assets

package/examples/plugin/build.ts DELETED Viewed

@@ -1,32 +0,0 @@
-import { plugin } from '@cwcss/crosswind'
-// Build with crosswind plugin
-// The plugin will automatically process HTML files that are imported in your TypeScript/JavaScript code
-const result = await Bun.build({
-  entrypoints: ['./src/index.ts'], // Your TS entrypoint that imports HTML files
-  outdir: './dist',
-  plugins: [
-    plugin({
-      // Optional: provide custom config
-      config: {
-        minify: true,
-        theme: {
-          colors: {
-            primary: '#3b82f6',
-            secondary: '#10b981',
-          },
-        },
-      },
-      // Optional: include preflight CSS
-      includePreflight: true,
-    }),
-  ],
-})
-if (result.success) {
-  console.log('Build complete!')
-  console.log(`Generated ${result.outputs.length} output(s)`)
-}
-else {
-  console.error('Build failed:', result.logs)
-}

package/examples/plugin/src/index.html DELETED Viewed

@@ -1,34 +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 Bun Plugin Example</title>
-</head>
-<body>
-  <div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600">
-    <h1 class="text-2xl font-bold">Hello Crosswind!</h1>
-    <button class="px-4 py-2 bg-white text-blue-500 rounded hover:bg-gray-100">
-      Click me
-    </button>
-  </div>
-  <div class="container mx-auto mt-8 p-6">
-    <h2 class="text-xl font-semibold mb-4">Features</h2>
-    <ul class="space-y-2">
-      <li class="flex items-center gap-2">
-        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
-        <span class="text-gray-700">Automatic CSS generation</span>
-      </li>
-      <li class="flex items-center gap-2">
-        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
-        <span class="text-gray-700">On-demand utilities</span>
-      </li>
-      <li class="flex items-center gap-2">
-        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
-        <span class="text-gray-700">Tailwind-compatible</span>
-      </li>
-    </ul>
-  </div>
-</body>
-</html>

package/examples/plugin/src/index.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// Import HTML file - the plugin will process it and inject Crosswind CSS
-import html from './index.html'
-// You can use the HTML content
-document.body.innerHTML = html
-export default html

package/headwind DELETED Viewed

	@@ -1,2 +0,0 @@
1	- #!/usr/bin/env bun
2	- import('./bin/cli')

package/src/build.ts DELETED Viewed

@@ -1,101 +0,0 @@
-import type { CrosswindConfig } from './types'
-import { CSSGenerator } from './generator'
-import { Scanner } from './scanner'
-import { CompileClassTransformer } from './transformer-compile-class'
-export interface BuildResult {
-  css: string
-  classes: Set<string>
-  duration: number
-  compiledClasses?: Map<string, { className: string, utilities: string[] }>
-  transformedFiles?: Map<string, string>
-}
-/**
- * Build CSS from content patterns
- */
-export async function build(config: CrosswindConfig): Promise<BuildResult> {
-  const startTime = performance.now()
-  // Initialize compile class transformer if enabled
-  const transformer = config.compileClass?.enabled
-    ? new CompileClassTransformer({
-      trigger: config.compileClass.trigger,
-      classPrefix: config.compileClass.classPrefix,
-      layer: config.compileClass.layer,
-    })
-    : null
-  // Scan files for utility classes
-  const scanner = new Scanner(config.content, transformer, {
-    attributify: config.attributify,
-    bracketSyntax: config.bracketSyntax,
-  })
-  const { classes, transformedFiles } = await scanner.scan()
-  // Add safelist classes
-  for (const cls of config.safelist) {
-    classes.add(cls)
-  }
-  // If using compile class transformer, also add compiled utilities
-  if (transformer) {
-    const compiledClasses = transformer.getCompiledClasses()
-    for (const [, { utilities }] of compiledClasses) {
-      for (const utility of utilities) {
-        classes.add(utility)
-      }
-    }
-  }
-  // Generate CSS
-  const generator = new CSSGenerator(config)
-  for (const className of classes) {
-    generator.generate(className)
-  }
-  // Preflight CSS is now added by generator.toCSS()
-  const css = generator.toCSS(true, config.minify)
-  const duration = performance.now() - startTime
-  return {
-    css,
-    classes,
-    duration,
-    compiledClasses: transformer?.getCompiledClasses(),
-    transformedFiles,
-  }
-}
-/**
- * Write CSS to output file
- */
-export async function writeCSS(css: string, outputPath: string): Promise<void> {
-  await Bun.write(outputPath, css)
-}
-/**
- * Write transformed files to disk
- */
-export async function writeTransformedFiles(transformedFiles: Map<string, string>): Promise<void> {
-  const writes = Array.from(transformedFiles.entries()).map(([path, content]) =>
-    Bun.write(path, content),
-  )
-  await Promise.all(writes)
-}
-/**
- * Build and write CSS to output file
- */
-export async function buildAndWrite(config: CrosswindConfig): Promise<BuildResult> {
-  const result = await build(config)
-  await writeCSS(result.css, config.output)
-  // Write transformed files if compile class is enabled
-  if (result.transformedFiles && result.transformedFiles.size > 0) {
-    await writeTransformedFiles(result.transformedFiles)
-  }
-  return result
-}