@bookklik/senangstart-css 0.1.0

package/src/cli/commands/dev.js

@@ -0,0 +1,75 @@
+/**
+ * SenangStart CSS - Dev Command
+ * Watch mode with live compilation
+ */
+
+import chokidar from 'chokidar';
+import { build } from './build.js';
+import logger from '../../utils/logger.js';
+
+/**
+ * Dev command handler - watches files and rebuilds on changes
+ */
+export async function dev(options = {}) {
+  logger.watch('Starting development mode...');
+  
+  // Initial build
+  await build(options);
+  
+  // Watch patterns
+  const watchPatterns = [
+    './**/*.html',
+    './**/*.htm',
+    './src/**/*.{html,jsx,tsx,vue,svelte}',
+    './pages/**/*.{html,jsx,tsx}',
+    './components/**/*.{html,jsx,tsx,vue,svelte}'
+  ];
+  
+  // Ignore patterns
+  const ignorePatterns = [
+    '**/node_modules/**',
+    '**/dist/**',
+    '**/.git/**',
+    '**/public/**'
+  ];
+  
+  // Create watcher
+  const watcher = chokidar.watch(watchPatterns, {
+    ignored: ignorePatterns,
+    persistent: true,
+    ignoreInitial: true
+  });
+  
+  // Debounce timer
+  let debounceTimer = null;
+  
+  function debouncedBuild() {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    
+    debounceTimer = setTimeout(async () => {
+      logger.watch('Change detected, rebuilding...');
+      await build(options);
+    }, 100);
+  }
+  
+  // Watch events
+  watcher
+    .on('change', (path) => {
+      logger.info(`Changed: ${path}`);
+      debouncedBuild();
+    })
+    .on('add', (path) => {
+      logger.info(`Added: ${path}`);
+      debouncedBuild();
+    })
+    .on('unlink', (path) => {
+      logger.info(`Removed: ${path}`);
+      debouncedBuild();
+    });
+  
+  logger.watch('Watching for changes... (Ctrl+C to stop)');
+}
+
+export default dev;

package/src/cli/commands/init.js

@@ -0,0 +1,64 @@
+/**
+ * SenangStart CSS - Init Command
+ * Creates senangstart.config.js in the project root
+ */
+
+import { writeFileSync, existsSync, readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import logger from '../../utils/logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function init() {
+  const configPath = join(process.cwd(), 'senangstart.config.js');
+  
+  // Check if config already exists
+  if (existsSync(configPath)) {
+    logger.warn('senangstart.config.js already exists');
+    return;
+  }
+  
+  // Read template
+  const templatePath = join(__dirname, '../../../templates/senangstart.config.js');
+  let template;
+  
+  try {
+    template = readFileSync(templatePath, 'utf-8');
+  } catch (e) {
+    // Fallback template if file not found
+    template = `/**
+ * SenangStart CSS Configuration
+ */
+
+export default {
+  content: [
+    './**/*.html',
+    './src/**/*.{html,jsx,tsx,vue,svelte}',
+    './components/**/*.{html,jsx,tsx}'
+  ],
+
+  output: {
+    css: './public/senangstart.css',
+    minify: true,
+    aiContext: './.cursorrules',
+    typescript: './types/senang.d.ts'
+  },
+
+  theme: {
+    // Add custom spacing, colors, etc.
+  }
+}
+`;
+  }
+  
+  // Write config file
+  writeFileSync(configPath, template);
+  
+  logger.success('Created senangstart.config.js');
+  logger.info('Edit this file to customize your theme');
+  logger.info('Run "senangstart dev" to start watching files');
+}
+
+export default init;

package/src/cli/index.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * SenangStart CSS - CLI Entry Point
+ * The Intent-First CSS Engine
+ */
+
+import { program } from 'commander';
+import { init } from './commands/init.js';
+import { build } from './commands/build.js';
+import { dev } from './commands/dev.js';
+
+program
+  .name('senangstart')
+  .description('SenangStart CSS - The Intent-First CSS Engine\n\n  "Speak Human. Compile to Logic."')
+  .version('1.0.0');
+
+program
+  .command('init')
+  .description('Initialize a new senangstart.config.js')
+  .action(init);
+
+program
+  .command('build')
+  .description('Compile CSS from source files')
+  .option('--minify', 'Minify CSS output')
+  .option('--config <path>', 'Path to config file', 'senangstart.config.js')
+  .action(build);
+
+program
+  .command('dev')
+  .description('Watch mode with live compilation')
+  .option('--config <path>', 'Path to config file', 'senangstart.config.js')
+  .action(dev);
+
+program.parse();

package/src/compiler/generators/ai-context.js

@@ -0,0 +1,128 @@
+/**
+ * SenangStart CSS - AI Context Generator
+ * Generates .cursorrules or ai-context.md for LLM assistance
+ */
+
+/**
+ * Generate AI context file content
+ * @param {Object} config - Configuration object
+ * @returns {string} - AI context markdown content
+ */
+export function generateAIContext(config) {
+  const { theme } = config;
+  
+  return `# SenangStart CSS - AI Context Guide
+
+> This file helps AI assistants understand the SenangStart CSS framework.
+
+## Philosophy
+"Speak Human. Compile to Logic."
+Use natural adjectives instead of arbitrary numbers.
+
+## Tri-Attribute Syntax
+
+| Attribute | Purpose | Example |
+|-----------|---------|---------|
+| \`layout\` | Structure & position | \`layout="flex col center"\` |
+| \`space\` | Sizing & spacing | \`space="p:medium g:small"\` |
+| \`visual\` | Colors & appearance | \`visual="bg:white rounded:big"\` |
+
+## Spacing Scale (Natural Objects)
+
+| Keyword | Size | Mental Model |
+|---------|------|--------------|
+| \`none\` | ${theme.spacing.none} | No space |
+| \`tiny\` | ${theme.spacing.tiny} | Pebble - Borders, offsets |
+| \`small\` | ${theme.spacing.small} | Matchbox - Group related items |
+| \`medium\` | ${theme.spacing.medium} | Smartphone - Standard default |
+| \`big\` | ${theme.spacing.big} | Laptop - Separate sections |
+| \`giant\` | ${theme.spacing.giant} | Door - Layout divisions |
+| \`vast\` | ${theme.spacing.vast} | House - Hero sections |
+
+## Natural Language Mapping
+
+When users say... | Do this...
+------------------|------------
+"tighten it up" | Scale DOWN (medium → small → tiny)
+"give it air" / "breathe" | Scale UP (medium → big → giant)
+"make it pop" | Add \`shadow:big\`, increase \`rounded\`
+"subtle" | Use \`shadow:small\`, \`rounded:small\`
+"compact" | Use \`p:small g:tiny\`
+"spacious" | Use \`p:big g:medium\` or larger
+
+## Layout Keywords
+
+- **Display:** \`flex\`, \`grid\`, \`block\`, \`hidden\`
+- **Direction:** \`row\`, \`col\`, \`row-reverse\`, \`col-reverse\`
+- **Alignment:** \`center\`, \`between\`, \`start\`, \`end\`
+- **Position:** \`absolute\`, \`relative\`, \`fixed\`, \`sticky\`
+- **Z-Index:** \`z:base\`, \`z:low\`, \`z:mid\`, \`z:high\`, \`z:top\`
+
+## Space Syntax
+
+Pattern: \`[breakpoint]:[property]:[scale]\`
+
+- \`p:medium\` → padding: 16px
+- \`m-b:big\` → margin-bottom: 32px
+- \`g:small\` → gap: 8px
+- \`tab:p:big\` → padding: 32px on tablet+
+- \`w:[350px]\` → width: 350px (escape hatch)
+
+## Visual Keywords
+
+- **Background:** \`bg:white\`, \`bg:primary\`, \`bg:[#hex]\`
+- **Text:** \`text:dark\`, \`text:grey\`, \`text-size:big\`
+- **Font:** \`font:bold\`, \`font:medium\`, \`font:normal\`
+- **Rounded:** \`rounded:small\`, \`rounded:medium\`, \`rounded:big\`, \`rounded:round\`
+- **Shadow:** \`shadow:small\`, \`shadow:medium\`, \`shadow:big\`
+
+## Responsive Prefixes
+
+| Prefix | Breakpoint |
+|--------|------------|
+| \`mob:\` | ${theme.screens.mob}+ |
+| \`tab:\` | ${theme.screens.tab}+ |
+| \`lap:\` | ${theme.screens.lap}+ |
+| \`desk:\` | ${theme.screens.desk}+ |
+
+## Color Palette
+
+${Object.entries(theme.colors).map(([key, value]) => `- \`${key}\`: ${value}`).join('\n')}
+
+## Common Patterns
+
+### Card
+\`\`\`html
+<div
+  layout="flex col"
+  space="p:medium"
+  visual="bg:white rounded:big shadow:medium"
+>
+  Content
+</div>
+\`\`\`
+
+### Centered Container
+\`\`\`html
+<div space="max-w:[1200px] m-x:auto p-x:medium">
+  Content
+</div>
+\`\`\`
+
+### Navigation
+\`\`\`html
+<nav
+  layout="flex between center fixed z:top"
+  space="w:[100%] p-x:big p-y:small"
+  visual="bg:white shadow:small"
+>
+  Navigation items
+</nav>
+\`\`\`
+
+---
+*Generated by SenangStart CSS*
+`;
+}
+
+export default { generateAIContext };

package/src/compiler/generators/css.js

@@ -0,0 +1,344 @@
+/**
+ * SenangStart CSS - CSS Generator
+ * Generates CSS from tokens using attribute selectors
+ */
+
+/**
+ * Generate CSS custom properties from config
+ * @param {Object} config - Configuration object
+ * @returns {string} - CSS custom properties block
+ */
+export function generateCSSVariables(config) {
+  const { theme } = config;
+  let css = ':root {\n';
+  
+  // Spacing variables
+  for (const [key, value] of Object.entries(theme.spacing)) {
+    css += `  --s-${key}: ${value};\n`;
+  }
+  
+  // Radius variables
+  for (const [key, value] of Object.entries(theme.radius)) {
+    css += `  --r-${key}: ${value};\n`;
+  }
+  
+  // Shadow variables
+  for (const [key, value] of Object.entries(theme.shadow)) {
+    css += `  --shadow-${key}: ${value};\n`;
+  }
+  
+  // Font size variables
+  for (const [key, value] of Object.entries(theme.fontSize)) {
+    css += `  --font-${key}: ${value};\n`;
+  }
+  
+  // Font weight variables
+  for (const [key, value] of Object.entries(theme.fontWeight)) {
+    css += `  --fw-${key}: ${value};\n`;
+  }
+  
+  // Color variables
+  for (const [key, value] of Object.entries(theme.colors)) {
+    css += `  --c-${key}: ${value};\n`;
+  }
+  
+  // Z-index variables
+  for (const [key, value] of Object.entries(theme.zIndex)) {
+    css += `  --z-${key}: ${value};\n`;
+  }
+  
+  css += '}\n\n';
+  return css;
+}
+
+/**
+ * Generate CSS rule for a layout token
+ */
+function generateLayoutRule(token, config) {
+  const { property, value } = token;
+  
+  const layoutMap = {
+    // Display
+    'flex': 'display: flex;',
+    'grid': 'display: grid;',
+    'block': 'display: block;',
+    'inline': 'display: inline-block;',
+    'hidden': 'display: none;',
+    
+    // Flex direction
+    'row': 'flex-direction: row;',
+    'col': 'flex-direction: column;',
+    'row-reverse': 'flex-direction: row-reverse;',
+    'col-reverse': 'flex-direction: column-reverse;',
+    
+    // Alignment
+    'center': 'justify-content: center; align-items: center;',
+    'start': 'justify-content: flex-start; align-items: flex-start;',
+    'end': 'justify-content: flex-end; align-items: flex-end;',
+    'between': 'justify-content: space-between;',
+    'around': 'justify-content: space-around;',
+    'evenly': 'justify-content: space-evenly;',
+    
+    // Wrap
+    'wrap': 'flex-wrap: wrap;',
+    'nowrap': 'flex-wrap: nowrap;',
+    
+    // Position
+    'absolute': 'position: absolute;',
+    'relative': 'position: relative;',
+    'fixed': 'position: fixed;',
+    'sticky': 'position: sticky;'
+  };
+  
+  // Z-index
+  if (property === 'z') {
+    return `z-index: var(--z-${value});`;
+  }
+  
+  // Overflow
+  if (property === 'overflow') {
+    return `overflow: ${value};`;
+  }
+  
+  return layoutMap[property] || '';
+}
+
+/**
+ * Generate CSS rule for a space token
+ */
+function generateSpaceRule(token, config) {
+  const { property, value, isArbitrary } = token;
+  
+  // Determine the CSS value
+  const cssValue = isArbitrary ? value : `var(--s-${value})`;
+  
+  // Handle special values
+  if (value === 'auto') {
+    const autoValue = 'auto';
+    
+    const propertyMap = {
+      'm': `margin: ${autoValue};`,
+      'm-x': `margin-left: ${autoValue}; margin-right: ${autoValue};`,
+      'm-y': `margin-top: ${autoValue}; margin-bottom: ${autoValue};`,
+      'm-t': `margin-top: ${autoValue};`,
+      'm-r': `margin-right: ${autoValue};`,
+      'm-b': `margin-bottom: ${autoValue};`,
+      'm-l': `margin-left: ${autoValue};`
+    };
+    
+    return propertyMap[property] || '';
+  }
+  
+  const propertyMap = {
+    // Padding
+    'p': `padding: ${cssValue};`,
+    'p-t': `padding-top: ${cssValue};`,
+    'p-r': `padding-right: ${cssValue};`,
+    'p-b': `padding-bottom: ${cssValue};`,
+    'p-l': `padding-left: ${cssValue};`,
+    'p-x': `padding-left: ${cssValue}; padding-right: ${cssValue};`,
+    'p-y': `padding-top: ${cssValue}; padding-bottom: ${cssValue};`,
+    
+    // Margin
+    'm': `margin: ${cssValue};`,
+    'm-t': `margin-top: ${cssValue};`,
+    'm-r': `margin-right: ${cssValue};`,
+    'm-b': `margin-bottom: ${cssValue};`,
+    'm-l': `margin-left: ${cssValue};`,
+    'm-x': `margin-left: ${cssValue}; margin-right: ${cssValue};`,
+    'm-y': `margin-top: ${cssValue}; margin-bottom: ${cssValue};`,
+    
+    // Gap
+    'g': `gap: ${cssValue};`,
+    'g-x': `column-gap: ${cssValue};`,
+    'g-y': `row-gap: ${cssValue};`,
+    
+    // Sizing
+    'w': `width: ${cssValue};`,
+    'h': `height: ${cssValue};`,
+    'min-w': `min-width: ${cssValue};`,
+    'max-w': `max-width: ${cssValue};`,
+    'min-h': `min-height: ${cssValue};`,
+    'max-h': `max-height: ${cssValue};`
+  };
+  
+  return propertyMap[property] || '';
+}
+
+/**
+ * Generate CSS rule for a visual token
+ */
+function generateVisualRule(token, config) {
+  const { property, value, isArbitrary } = token;
+  
+  const rules = {
+    // Background
+    'bg': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `background-color: ${cssValue};`;
+    },
+    
+    // Text color
+    'text': () => {
+      // Check if it's alignment
+      if (['left', 'center', 'right'].includes(value)) {
+        return `text-align: ${value};`;
+      }
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `color: ${cssValue};`;
+    },
+    
+    // Font size
+    'text-size': () => {
+      const cssValue = isArbitrary ? value : `var(--font-${value})`;
+      return `font-size: ${cssValue};`;
+    },
+    
+    // Font weight
+    'font': () => {
+      const cssValue = `var(--fw-${value})`;
+      return `font-weight: ${cssValue};`;
+    },
+    
+    // Border color
+    'border': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-color: ${cssValue}; border-style: solid;`;
+    },
+    
+    // Border width
+    'border-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-width: ${cssValue}; border-style: solid;`;
+    },
+    
+    // Border radius
+    'rounded': () => {
+      const cssValue = `var(--r-${value})`;
+      return `border-radius: ${cssValue};`;
+    },
+    
+    // Box shadow
+    'shadow': () => {
+      const cssValue = `var(--shadow-${value})`;
+      return `box-shadow: ${cssValue};`;
+    },
+    
+    // Opacity
+    'opacity': () => {
+      const cssValue = isArbitrary ? value : value;
+      return `opacity: ${cssValue};`;
+    }
+  };
+  
+  const generator = rules[property];
+  return generator ? generator() : '';
+}
+
+/**
+ * Generate a single CSS rule from a token
+ */
+export function generateRule(token, config) {
+  const { raw, attrType, breakpoint, state } = token;
+  
+  let cssDeclaration = '';
+  
+  switch (attrType) {
+    case 'layout':
+      cssDeclaration = generateLayoutRule(token, config);
+      break;
+    case 'space':
+      cssDeclaration = generateSpaceRule(token, config);
+      break;
+    case 'visual':
+      cssDeclaration = generateVisualRule(token, config);
+      break;
+  }
+  
+  if (!cssDeclaration) return '';
+  
+  // Build selector
+  let selector = `[${attrType}~="${raw}"]`;
+  
+  // Add state pseudo-class
+  if (state) {
+    selector += `:${state}`;
+  }
+  
+  return `${selector} { ${cssDeclaration} }\n`;
+}
+
+/**
+ * Generate complete CSS from tokens
+ * @param {Array} tokens - Array of token objects
+ * @param {Object} config - Configuration object
+ * @returns {string} - Complete CSS string
+ */
+export function generateCSS(tokens, config) {
+  let css = '';
+  
+  // Add CSS variables
+  css += generateCSSVariables(config);
+  
+  // Add base reset styles
+  css += `/* SenangStart CSS - Base Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Layout utilities */
+`;
+  
+  // Group tokens by breakpoint
+  const baseTokens = [];
+  const breakpointTokens = {
+    mob: [],
+    tab: [],
+    lap: [],
+    desk: []
+  };
+  
+  for (const token of tokens) {
+    if (token.breakpoint) {
+      breakpointTokens[token.breakpoint]?.push(token);
+    } else {
+      baseTokens.push(token);
+    }
+  }
+  
+  // Generate base rules
+  for (const token of baseTokens) {
+    css += generateRule(token, config);
+  }
+  
+  // Generate responsive rules
+  const { screens } = config.theme;
+  
+  for (const [bp, bpTokens] of Object.entries(breakpointTokens)) {
+    if (bpTokens.length > 0) {
+      css += `\n@media (min-width: ${screens[bp]}) {\n`;
+      for (const token of bpTokens) {
+        css += '  ' + generateRule(token, config);
+      }
+      css += '}\n';
+    }
+  }
+  
+  return css;
+}
+
+/**
+ * Minify CSS by removing whitespace and comments
+ */
+export function minifyCSS(css) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
+    .replace(/\s+/g, ' ')             // Collapse whitespace
+    .replace(/\s*{\s*/g, '{')         // Remove space around {
+    .replace(/\s*}\s*/g, '}')         // Remove space around }
+    .replace(/\s*;\s*/g, ';')         // Remove space around ;
+    .replace(/\s*:\s*/g, ':')         // Remove space around :
+    .trim();
+}
+
+export default { generateCSS, generateCSSVariables, generateRule, minifyCSS };