jasmincss 1.0.0

package/src/core/compiler.js

@@ -0,0 +1,135 @@
+import fs from 'fs';
+import path from 'path';
+import fg from 'fast-glob';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+import { resolveConfig } from '../config/loader.js';
+import { generateUtilities } from './utilities/index.js';
+import { generateComponents } from '../components/index.js';
+import { generateBase } from './base.js';
+
+export async function compileCSS(config, options = {}) {
+  const { usedClasses, minify = false, includeAll = false } = options;
+
+  // Resolve configuration
+  const resolvedConfig = resolveConfig(config);
+
+  // Generate CSS parts
+  const parts = [];
+
+  // 1. Base styles and CSS variables
+  parts.push(generateBase(resolvedConfig));
+
+  // 2. Utility classes
+  const utilities = generateUtilities(resolvedConfig, {
+    usedClasses,
+    includeAll
+  });
+  parts.push(utilities.css);
+
+  // 3. Component styles
+  const components = generateComponents(resolvedConfig, {
+    selected: config.components,
+    usedClasses,
+    includeAll
+  });
+  parts.push(components.css);
+
+  // Combine all CSS
+  let css = parts.join('\n\n');
+
+  // Process with PostCSS
+  let minified = null;
+  if (minify) {
+    const result = await postcss([
+      cssnano({
+        preset: ['default', {
+          discardComments: { removeAll: true },
+          normalizeWhitespace: true
+        }]
+      })
+    ]).process(css, { from: undefined });
+
+    minified = result.css;
+  }
+
+  return {
+    css,
+    minified,
+    stats: {
+      utilities: utilities.count,
+      components: components.count
+    }
+  };
+}
+
+export async function scanForUsedClasses(cwd, patterns) {
+  const usedClasses = new Set();
+
+  // Find all matching files
+  const files = await fg(patterns, {
+    cwd,
+    absolute: true,
+    ignore: ['**/node_modules/**', '**/dist/**', '**/.git/**']
+  });
+
+  // Regex to match class-like patterns
+  // Matches: class="...", className="...", :class="...", class:..., etc.
+  const classPatterns = [
+    /class(?:Name)?=["'`]([^"'`]+)["'`]/g,
+    /class(?:Name)?=\{["'`]([^"'`]+)["'`]\}/g,
+    /class:([a-zA-Z0-9_-]+)/g,
+    /:class=["'`]\{([^}]+)\}["'`]/g,
+    /classList\.(?:add|toggle)\(["'`]([^"'`]+)["'`]\)/g,
+    /clsx\(([^)]+)\)/g,
+    /cn\(([^)]+)\)/g,
+    /classnames\(([^)]+)\)/g
+  ];
+
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, 'utf-8');
+
+      for (const pattern of classPatterns) {
+        let match;
+        while ((match = pattern.exec(content)) !== null) {
+          // Extract individual classes
+          const classes = match[1]
+            .split(/\s+/)
+            .map(c => c.trim())
+            .filter(c => c && !c.includes('{') && !c.includes('$'));
+
+          classes.forEach(cls => usedClasses.add(cls));
+        }
+        // Reset regex lastIndex
+        pattern.lastIndex = 0;
+      }
+    } catch (err) {
+      // Skip files that can't be read
+    }
+  }
+
+  return usedClasses;
+}
+
+export function shouldIncludeClass(className, usedClasses, includeAll) {
+  if (includeAll) return true;
+  if (!usedClasses) return true;
+
+  // Check exact match
+  if (usedClasses.has(className)) return true;
+
+  // Check responsive variants
+  const breakpoints = ['sm', 'md', 'lg', 'xl', '2xl'];
+  for (const bp of breakpoints) {
+    if (usedClasses.has(`${bp}:${className}`)) return true;
+  }
+
+  // Check state variants
+  const states = ['hover', 'focus', 'active', 'disabled', 'dark'];
+  for (const state of states) {
+    if (usedClasses.has(`${state}:${className}`)) return true;
+  }
+
+  return false;
+}

package/src/core/utilities/accessibility.js

@@ -0,0 +1,290 @@
+// Accessibility utilities for JasminCSS
+
+export function generateAccessibilityUtilities(config) {
+  const classes = [];
+
+  // Screen Reader Only - visually hidden but accessible
+  classes.push({
+    name: 'sr-only',
+    css: `.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}`
+  });
+
+  // Not Screen Reader Only - reverses sr-only
+  classes.push({
+    name: 'not-sr-only',
+    css: `.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}`
+  });
+
+  // Focus variants for sr-only (show on focus)
+  classes.push({
+    name: 'sr-only-focusable',
+    css: `.sr-only-focusable:not(:focus):not(:focus-within) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}`
+  });
+
+  // Focus Visible - only show focus ring on keyboard navigation
+  classes.push({
+    name: 'focus-visible-ring',
+    css: `.focus-visible-ring:focus {
+  outline: none;
+}
+.focus-visible-ring:focus-visible {
+  outline: 2px solid var(--j-primary);
+  outline-offset: 2px;
+}`
+  });
+
+  // Focus Within
+  classes.push({
+    name: 'focus-within-ring',
+    css: `.focus-within-ring:focus-within {
+  outline: 2px solid var(--j-primary);
+  outline-offset: 2px;
+}`
+  });
+
+  // Skip Link - for skip to main content
+  classes.push({
+    name: 'skip-link',
+    css: `.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 9999;
+  padding: 1rem 1.5rem;
+  background-color: var(--j-primary);
+  color: white;
+  font-weight: 600;
+  text-decoration: none;
+  transition: top 150ms ease-in-out;
+}
+.skip-link:focus {
+  top: 0;
+}`
+  });
+
+  // Reduced Motion - respect user preference
+  classes.push({
+    name: 'motion-safe',
+    css: `@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\\:animate { animation-play-state: running; }
+  .motion-safe\\:transition { transition-property: all; }
+}`
+  });
+
+  classes.push({
+    name: 'motion-reduce',
+    css: `@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\\:animate-none { animation: none; }
+  .motion-reduce\\:transition-none { transition: none; }
+}`
+  });
+
+  // Global reduced motion
+  classes.push({
+    name: 'reduce-motion',
+    css: `@media (prefers-reduced-motion: reduce) {
+  .reduce-motion,
+  .reduce-motion * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}`
+  });
+
+  // High Contrast Mode
+  classes.push({
+    name: 'forced-colors',
+    css: `@media (forced-colors: active) {
+  .forced-colors\\:visible { visibility: visible; }
+  .forced-colors\\:border { border: 1px solid CanvasText; }
+}`
+  });
+
+  // Focus trap container (visual indicator)
+  classes.push({
+    name: 'focus-trap',
+    css: `.focus-trap { position: relative; }`
+  });
+
+  // Keyboard focus indicator enhancement
+  classes.push({
+    name: 'focus-ring',
+    css: `.focus-ring:focus {
+  outline: 2px solid var(--j-primary);
+  outline-offset: 2px;
+}`
+  });
+
+  classes.push({
+    name: 'focus-ring-inset',
+    css: `.focus-ring-inset:focus {
+  outline: 2px solid var(--j-primary);
+  outline-offset: -2px;
+}`
+  });
+
+  // Focus ring colors
+  const colors = ['primary', 'secondary', 'success', 'warning', 'error', 'info'];
+  colors.forEach(color => {
+    classes.push({
+      name: `focus-ring-${color}`,
+      css: `.focus-ring-${color}:focus {
+  outline: 2px solid var(--j-${color});
+  outline-offset: 2px;
+}`
+    });
+  });
+
+  // No focus outline (use sparingly, only with alternative indication)
+  classes.push({
+    name: 'focus-none',
+    css: `.focus-none:focus { outline: none; }`
+  });
+
+  // Touch target sizing (minimum 44x44px for accessibility)
+  classes.push({
+    name: 'touch-target',
+    css: `.touch-target {
+  min-width: 44px;
+  min-height: 44px;
+}`
+  });
+
+  classes.push({
+    name: 'touch-target-sm',
+    css: `.touch-target-sm {
+  min-width: 36px;
+  min-height: 36px;
+}`
+  });
+
+  // Aria hidden visual
+  classes.push({
+    name: 'aria-hidden',
+    css: `.aria-hidden[aria-hidden="true"] { display: none; }`
+  });
+
+  // Disabled state styling
+  classes.push({
+    name: 'disabled',
+    css: `.disabled, [disabled], [aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}`
+  });
+
+  // Live region announcement (for dynamic content)
+  classes.push({
+    name: 'live-polite',
+    css: `.live-polite { /* Use with aria-live="polite" */ }`
+  });
+
+  classes.push({
+    name: 'live-assertive',
+    css: `.live-assertive { /* Use with aria-live="assertive" */ }`
+  });
+
+  // Selection customization
+  classes.push({
+    name: 'selection-primary',
+    css: `.selection-primary::selection {
+  background-color: var(--j-primary);
+  color: white;
+}`
+  });
+
+  // Caret/cursor color
+  classes.push({
+    name: 'caret-primary',
+    css: `.caret-primary { caret-color: var(--j-primary); }`
+  });
+
+  classes.push({
+    name: 'caret-transparent',
+    css: `.caret-transparent { caret-color: transparent; }`
+  });
+
+  colors.forEach(color => {
+    classes.push({
+      name: `caret-${color}`,
+      css: `.caret-${color} { caret-color: var(--j-${color}); }`
+    });
+  });
+
+  // Accent color (for form elements)
+  classes.push({
+    name: 'accent-primary',
+    css: `.accent-primary { accent-color: var(--j-primary); }`
+  });
+
+  colors.forEach(color => {
+    classes.push({
+      name: `accent-${color}`,
+      css: `.accent-${color} { accent-color: var(--j-${color}); }`
+    });
+  });
+
+  // Print utilities
+  classes.push({
+    name: 'print-hidden',
+    css: `@media print { .print-hidden { display: none !important; } }`
+  });
+
+  classes.push({
+    name: 'print-only',
+    css: `.print-only { display: none; }
+@media print { .print-only { display: block; } }`
+  });
+
+  classes.push({
+    name: 'print-break-before',
+    css: `@media print { .print-break-before { break-before: page; } }`
+  });
+
+  classes.push({
+    name: 'print-break-after',
+    css: `@media print { .print-break-after { break-after: page; } }`
+  });
+
+  classes.push({
+    name: 'print-break-inside-avoid',
+    css: `@media print { .print-break-inside-avoid { break-inside: avoid; } }`
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/animations.js

@@ -0,0 +1,205 @@
+export function generateAnimationUtilities(config) {
+  const classes = [];
+
+  // Transition Property
+  classes.push({ name: 'transition-none', css: '.transition-none { transition-property: none; }' });
+  classes.push({ name: 'transition-all', css: '.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+  classes.push({ name: 'transition', css: '.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+  classes.push({ name: 'transition-colors', css: '.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+  classes.push({ name: 'transition-opacity', css: '.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+  classes.push({ name: 'transition-shadow', css: '.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+  classes.push({ name: 'transition-transform', css: '.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }' });
+
+  // Transition Duration
+  const durations = [0, 75, 100, 150, 200, 300, 500, 700, 1000];
+  durations.forEach(d => {
+    classes.push({ name: `duration-${d}`, css: `.duration-${d} { transition-duration: ${d}ms; }` });
+  });
+
+  // Transition Timing Function
+  classes.push({ name: 'ease-linear', css: '.ease-linear { transition-timing-function: linear; }' });
+  classes.push({ name: 'ease-in', css: '.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }' });
+  classes.push({ name: 'ease-out', css: '.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }' });
+  classes.push({ name: 'ease-in-out', css: '.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }' });
+  classes.push({ name: 'ease-spring', css: '.ease-spring { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }' });
+  classes.push({ name: 'ease-bounce', css: '.ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }' });
+
+  // Transition Delay
+  durations.forEach(d => {
+    classes.push({ name: `delay-${d}`, css: `.delay-${d} { transition-delay: ${d}ms; }` });
+  });
+
+  // Keyframe Animations
+  const keyframes = `
+@keyframes j-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes j-ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+
+@keyframes j-pulse {
+  50% { opacity: .5; }
+}
+
+@keyframes j-bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+@keyframes j-shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+@keyframes j-wiggle {
+  0%, 100% { transform: rotate(-3deg); }
+  50% { transform: rotate(3deg); }
+}
+
+@keyframes j-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes j-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes j-slide-in-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes j-slide-in-down {
+  from { transform: translateY(-100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes j-slide-in-left {
+  from { transform: translateX(-100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes j-slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes j-zoom-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes j-zoom-out {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.95); opacity: 0; }
+}
+
+@keyframes j-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes j-glow {
+  0%, 100% { box-shadow: 0 0 5px var(--j-primary), 0 0 10px var(--j-primary); }
+  50% { box-shadow: 0 0 20px var(--j-primary), 0 0 30px var(--j-primary); }
+}
+
+@keyframes j-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes j-heartbeat {
+  0%, 100% { transform: scale(1); }
+  14% { transform: scale(1.3); }
+  28% { transform: scale(1); }
+  42% { transform: scale(1.3); }
+  70% { transform: scale(1); }
+}
+
+@keyframes j-flip {
+  0% { transform: perspective(400px) rotateY(0); }
+  100% { transform: perspective(400px) rotateY(360deg); }
+}
+`;
+
+  classes.push({ name: 'keyframes', css: keyframes });
+
+  // Animation Classes
+  classes.push({ name: 'animate-none', css: '.animate-none { animation: none; }' });
+  classes.push({ name: 'animate-spin', css: '.animate-spin { animation: j-spin 1s linear infinite; }' });
+  classes.push({ name: 'animate-ping', css: '.animate-ping { animation: j-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }' });
+  classes.push({ name: 'animate-pulse', css: '.animate-pulse { animation: j-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }' });
+  classes.push({ name: 'animate-bounce', css: '.animate-bounce { animation: j-bounce 1s infinite; }' });
+  classes.push({ name: 'animate-shake', css: '.animate-shake { animation: j-shake 0.5s ease-in-out; }' });
+  classes.push({ name: 'animate-wiggle', css: '.animate-wiggle { animation: j-wiggle 0.5s ease-in-out infinite; }' });
+
+  // Fade animations
+  classes.push({ name: 'animate-fade-in', css: '.animate-fade-in { animation: j-fade-in 0.3s ease-out forwards; }' });
+  classes.push({ name: 'animate-fade-out', css: '.animate-fade-out { animation: j-fade-out 0.3s ease-out forwards; }' });
+
+  // Slide animations
+  classes.push({ name: 'animate-slide-in-up', css: '.animate-slide-in-up { animation: j-slide-in-up 0.3s ease-out forwards; }' });
+  classes.push({ name: 'animate-slide-in-down', css: '.animate-slide-in-down { animation: j-slide-in-down 0.3s ease-out forwards; }' });
+  classes.push({ name: 'animate-slide-in-left', css: '.animate-slide-in-left { animation: j-slide-in-left 0.3s ease-out forwards; }' });
+  classes.push({ name: 'animate-slide-in-right', css: '.animate-slide-in-right { animation: j-slide-in-right 0.3s ease-out forwards; }' });
+
+  // Zoom animations
+  classes.push({ name: 'animate-zoom-in', css: '.animate-zoom-in { animation: j-zoom-in 0.3s ease-out forwards; }' });
+  classes.push({ name: 'animate-zoom-out', css: '.animate-zoom-out { animation: j-zoom-out 0.3s ease-out forwards; }' });
+
+  // Futuristic animations
+  classes.push({ name: 'animate-float', css: '.animate-float { animation: j-float 3s ease-in-out infinite; }' });
+  classes.push({ name: 'animate-glow', css: '.animate-glow { animation: j-glow 2s ease-in-out infinite; }' });
+  classes.push({ name: 'animate-shimmer', css: `.animate-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); background-size: 200% 100%; animation: j-shimmer 1.5s infinite; }` });
+  classes.push({ name: 'animate-heartbeat', css: '.animate-heartbeat { animation: j-heartbeat 1.5s ease-in-out infinite; }' });
+  classes.push({ name: 'animate-flip', css: '.animate-flip { animation: j-flip 1s ease-in-out; }' });
+
+  // Animation Duration
+  const animDurations = ['75', '100', '150', '200', '300', '500', '700', '1000', '2000', '3000'];
+  animDurations.forEach(d => {
+    classes.push({
+      name: `animate-duration-${d}`,
+      css: `.animate-duration-${d} { animation-duration: ${d}ms; }`
+    });
+  });
+
+  // Animation Delay
+  animDurations.forEach(d => {
+    classes.push({
+      name: `animate-delay-${d}`,
+      css: `.animate-delay-${d} { animation-delay: ${d}ms; }`
+    });
+  });
+
+  // Animation Iteration Count
+  classes.push({ name: 'animate-infinite', css: '.animate-infinite { animation-iteration-count: infinite; }' });
+  classes.push({ name: 'animate-once', css: '.animate-once { animation-iteration-count: 1; }' });
+  classes.push({ name: 'animate-twice', css: '.animate-twice { animation-iteration-count: 2; }' });
+
+  // Animation Direction
+  classes.push({ name: 'animate-normal', css: '.animate-normal { animation-direction: normal; }' });
+  classes.push({ name: 'animate-reverse', css: '.animate-reverse { animation-direction: reverse; }' });
+  classes.push({ name: 'animate-alternate', css: '.animate-alternate { animation-direction: alternate; }' });
+  classes.push({ name: 'animate-alternate-reverse', css: '.animate-alternate-reverse { animation-direction: alternate-reverse; }' });
+
+  // Animation Fill Mode
+  classes.push({ name: 'animate-fill-none', css: '.animate-fill-none { animation-fill-mode: none; }' });
+  classes.push({ name: 'animate-fill-forwards', css: '.animate-fill-forwards { animation-fill-mode: forwards; }' });
+  classes.push({ name: 'animate-fill-backwards', css: '.animate-fill-backwards { animation-fill-mode: backwards; }' });
+  classes.push({ name: 'animate-fill-both', css: '.animate-fill-both { animation-fill-mode: both; }' });
+
+  // Animation Play State
+  classes.push({ name: 'animate-running', css: '.animate-running { animation-play-state: running; }' });
+  classes.push({ name: 'animate-paused', css: '.animate-paused { animation-play-state: paused; }' });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}