pulse-js-framework 1.7.19 → 1.7.21

package/cli/help.js

@@ -379,7 +379,7 @@ Creates a new release with:
       { flag: '--no-push', description: 'Create commit and tag but do not push' },
       { flag: '--title <text>', description: 'Release title for changelog' },
       { flag: '--skip-prompt', description: 'Use empty changelog (for automation)' },
-      { flag: '--from-commits', description: 'Auto-extract changelog from git commits' }
+      { flag: '--from-commits, --fc', description: 'Auto-extract changelog from git commits' }
     ],
     examples: [
       { cmd: 'pulse release patch', desc: 'Create patch release (1.0.0 -> 1.0.1)' },

package/cli/release.js

@@ -568,7 +568,7 @@ Options:
   --title <text>    Release title (e.g., "Performance Improvements")
   --skip-prompt     Use empty changelog (for automated releases)
   --skip-docs-test  Skip documentation validation before release
-  --from-commits    Auto-extract changelog from git commits since last tag
+  --from-commits, --fc  Auto-extract changelog from git commits since last tag
   --yes, -y         Auto-confirm all prompts
   --changes <json> Pass changelog as JSON (e.g., '{"added":["Feature 1"],"fixed":["Bug 1"]}')
   --added <items>  Comma-separated list of added features
@@ -602,7 +602,7 @@ export async function runRelease(args) {
   const dryRun = args.includes('--dry-run');
   const noPush = args.includes('--no-push');
   const skipPrompt = args.includes('--skip-prompt');
-  const fromCommits = args.includes('--from-commits');
+  const fromCommits = args.includes('--from-commits') || args.includes('--fc');
   const autoConfirm = args.includes('--yes') || args.includes('-y');
   const skipDocsTest = args.includes('--skip-docs-test');
 

package/compiler/lexer.js

@@ -61,6 +61,7 @@ export const TokenType = {
   COMMA: 'COMMA',     // ,
   DOT: 'DOT',         // .
   HASH: 'HASH',       // #
+  AMPERSAND: 'AMPERSAND', // & (CSS parent selector)
   SEMICOLON: 'SEMICOLON', // ;
 
   // Operators
@@ -382,15 +383,25 @@ export class Lexer {
       }
     }
 
-    // Exponent part
+    // Exponent part - only consume 'e' if followed by digits (or +/- then digits)
     if (this.current() === 'e' || this.current() === 'E') {
-      value += this.advance();
-      if (this.current() === '+' || this.current() === '-') {
-        value += this.advance();
-      }
-      while (!this.isEOF() && /[0-9]/.test(this.current())) {
-        value += this.advance();
+      const nextChar = this.peek();
+      const nextNextChar = this.peek(2);
+      // Check if this is actually scientific notation:
+      // e followed by digit, or e followed by +/- then digit
+      const isScientific = /[0-9]/.test(nextChar) ||
+                          ((nextChar === '+' || nextChar === '-') && /[0-9]/.test(nextNextChar));
+
+      if (isScientific) {
+        value += this.advance(); // consume 'e' or 'E'
+        if (this.current() === '+' || this.current() === '-') {
+          value += this.advance();
+        }
+        while (!this.isEOF() && /[0-9]/.test(this.current())) {
+          value += this.advance();
+        }
       }
+      // If not scientific notation, leave 'e' for the next token (e.g., 'em' unit)
     }
 
     return new Token(TokenType.NUMBER, parseFloat(value), startLine, startColumn, value);
@@ -656,6 +667,9 @@ export class Lexer {
           if (this.current() === '&') {
             this.advance();
             this.tokens.push(new Token(TokenType.AND, '&&', startLine, startColumn));
+          } else {
+            // Single & is the CSS parent selector
+            this.tokens.push(new Token(TokenType.AMPERSAND, '&', startLine, startColumn));
           }
           continue;
         case '|':

package/compiler/parser.js

@@ -1560,12 +1560,43 @@ export class Parser {
    * Parse style rule
    */
   parseStyleRule() {
-    // Parse selector
-    let selector = '';
+    // Parse selector - preserve spaces between tokens
+    const selectorParts = [];
+    let lastLine = this.current()?.line;
+    let lastToken = null;
+
     while (!this.is(TokenType.LBRACE) && !this.is(TokenType.EOF)) {
-      selector += this.advance().value;
+      const token = this.advance();
+      const currentLine = token.line;
+      const tokenValue = String(token.value);
+
+      // Determine if we need a space before this token
+      if (selectorParts.length > 0 && currentLine === lastLine) {
+        const lastPart = selectorParts[selectorParts.length - 1];
+
+        // Don't add space after these (they attach to what follows)
+        const noSpaceAfter = ['.', '#', ':', '[', '(', '>', '+', '~'];
+        // Don't add space before these (they attach to what precedes)
+        const noSpaceBefore = [':', ']', ')', ',', '.', '#'];
+
+        // Special case: . or # after an identifier needs space (descendant selector)
+        // e.g., ".school .date" - need space between "school" and "."
+        const isDescendantSelector = (tokenValue === '.' || tokenValue === '#') &&
+                                     lastToken?.type === TokenType.IDENT;
+
+        const needsSpace = !noSpaceAfter.includes(lastPart) &&
+                          !noSpaceBefore.includes(tokenValue) ||
+                          isDescendantSelector;
+
+        if (needsSpace) {
+          selectorParts.push(' ');
+        }
+      }
+      selectorParts.push(tokenValue);
+      lastLine = currentLine;
+      lastToken = token;
     }
-    selector = selector.trim();
+    const selector = selectorParts.join('').trim();
 
     this.expect(TokenType.LBRACE);
 
@@ -1587,15 +1618,51 @@ export class Parser {
 
   /**
    * Check if current position is a nested rule
+   * A nested rule starts with a selector followed by { on the same logical line
    */
   isNestedRule() {
-    // Look ahead to see if there's a { before a : or newline
+    const currentToken = this.peek(0);
+    if (!currentToken) return false;
+
+    // & is always a CSS parent selector, never a property name
+    // So &:hover, &.class, etc. are always nested rules
+    if (currentToken.type === TokenType.AMPERSAND) {
+      return true;
+    }
+
+    const startLine = currentToken.line;
     let i = 0;
+
     while (this.peek(i) && this.peek(i).type !== TokenType.EOF) {
       const token = this.peek(i);
+
+      // Found { before : - this is a nested rule
       if (token.type === TokenType.LBRACE) return true;
+
+      // Found : - this is a property, not a nested rule
       if (token.type === TokenType.COLON) return false;
+
+      // Found } - end of current rule
       if (token.type === TokenType.RBRACE) return false;
+
+      // If we've moved to a different line and the selector isn't continuing,
+      // check if this new line starts with a selector pattern
+      if (token.line > startLine && i > 0) {
+        // We're on a new line - only continue if we haven't found anything significant
+        // A selector on a new line followed by { is a nested rule
+        // Check next few tokens on this new line
+        const nextLine = token.line;
+        let j = i;
+        while (this.peek(j) && this.peek(j).line === nextLine) {
+          const t = this.peek(j);
+          if (t.type === TokenType.LBRACE) return true;
+          if (t.type === TokenType.COLON) return false;
+          if (t.type === TokenType.RBRACE) return false;
+          j++;
+        }
+        return false;
+      }
+
       i++;
     }
     return false;
@@ -1615,16 +1682,25 @@ export class Parser {
 
     // Tokens that should not have space after them in CSS values
     const noSpaceAfter = new Set(['#', '(', '.', '/', 'rgba', 'rgb', 'hsl', 'hsla', 'var', 'calc', 'url', 'linear-gradient', 'radial-gradient']);
-    // Tokens that should not have space before them
-    const noSpaceBefore = new Set([')', ',', '%', 'px', 'em', 'rem', 'vh', 'vw', 'fr', 's', 'ms', '(']);
+    // Tokens that should not have space before them (units and punctuation)
+    const noSpaceBefore = new Set([')', ',', '%', 'px', 'em', 'rem', 'vh', 'vw', 'vmin', 'vmax', 'fr', 's', 'ms', '(', 'deg', 'rad', 'turn', 'grad', 'ex', 'ch', 'pt', 'pc', 'in', 'cm', 'mm']);
 
     let value = '';
     let lastTokenValue = '';
+    let lastTokenLine = this.current()?.line || 0;
     let afterHash = false;  // Track if we're collecting a hex color
+    let hexColorLength = 0; // Track hex color length (max 8 for RRGGBBAA)
     let inCssVar = false;   // Track if we're inside var(--...)
 
-    while (!this.is(TokenType.SEMICOLON) && !this.is(TokenType.RBRACE) &&
-           !this.is(TokenType.EOF) && !this.isPropertyStart()) {
+    while (!this.is(TokenType.SEMICOLON) && !this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
+      const currentToken = this.current();
+
+      // Check if we're on a new line - if so, check for property start or nested rule
+      if (currentToken && currentToken.line > lastTokenLine) {
+        if (this.isPropertyStart() || this.isNestedRule()) {
+          break;
+        }
+      }
       const token = this.advance();
       // Use raw value if available to preserve original representation
       // This is important for numbers that might be parsed as scientific notation
@@ -1638,12 +1714,24 @@ export class Parser {
       }
 
       // For hex colors (#abc123), collect tokens without spacing after #
+      // Hex colors are 3, 4, 6, or 8 characters long
       if (tokenValue === '#') {
         afterHash = true;
+        hexColorLength = 0;
       } else if (afterHash) {
-        // Still collecting hex color - no space
-        // Stop collecting when we hit a space-requiring character
-        if (tokenValue === ' ' || tokenValue === ';' || tokenValue === ')') {
+        // Check if this token is a valid hex color continuation
+        const tokenStr = String(tokenValue);
+        const isHexChar = /^[0-9a-fA-F]+$/.test(tokenStr);
+        if (isHexChar) {
+          const newLength = hexColorLength + tokenStr.length;
+          // Valid hex color lengths are 3, 4, 6, or 8
+          // If adding this token would exceed a valid length, stop
+          if (hexColorLength >= 6 || newLength > 8) {
+            afterHash = false;
+          } else {
+            hexColorLength = newLength;
+          }
+        } else {
           afterHash = false;
         }
       }
@@ -1652,16 +1740,15 @@ export class Parser {
       // - It's the first token
       // - Last token was in noSpaceAfter
       // - This token is in noSpaceBefore
-      // - We're collecting a hex color (afterHash and last was #)
+      // - We're collecting a hex color (afterHash is true)
       // - We're inside var(--...) and this is part of the variable name
       // - Last was '-' and current is an identifier (hyphenated name)
-      const skipSpace = noSpaceAfter.has(lastTokenValue) ||
+      const skipSpace = noSpaceAfter.has(String(lastTokenValue)) ||
                         noSpaceBefore.has(tokenValue) ||
-                        (afterHash && lastTokenValue === '#') ||
-                        (afterHash && /^[0-9a-fA-F]+$/.test(tokenValue)) ||
+                        afterHash ||
                         inCssVar ||
                         (lastTokenValue === '-' || lastTokenValue === '--') ||
-                        (tokenValue === '-' && /^[a-zA-Z]/.test(this.current()?.value || ''));
+                        (tokenValue === '-' && /^[a-zA-Z]/.test(String(this.current()?.value || '')));
 
       if (value.length > 0 && !skipSpace) {
         value += ' ';
@@ -1973,12 +2060,21 @@ export class Parser {
    * Check if current position starts a new property
    */
   isPropertyStart() {
-    // Check if it looks like: identifier followed by :
-    if (!this.is(TokenType.IDENT)) return false;
-    let i = 1;
-    while (this.peek(i) && this.peek(i).type === TokenType.IDENT) {
-      i++;
+    // Check if it looks like: identifier (with possible hyphens) followed by :
+    // CSS properties can be: margin, margin-bottom, -webkit-transform, etc.
+    if (!this.is(TokenType.IDENT) && !this.is(TokenType.MINUS)) return false;
+
+    let i = 0;
+    // Skip over property name tokens (IDENT and MINUS for hyphenated names)
+    while (this.peek(i)) {
+      const token = this.peek(i);
+      if (token.type === TokenType.IDENT || token.type === TokenType.MINUS) {
+        i++;
+      } else {
+        break;
+      }
     }
+
     return this.peek(i)?.type === TokenType.COLON;
   }
 }

package/compiler/transformer/index.js

@@ -27,7 +27,7 @@ import { transformRouter } from './router.js';
 import { transformStore } from './store.js';
 import { transformExpression, transformExpressionString, transformFunctionBody } from './expressions.js';
 import { transformView, transformViewNode, VIEW_NODE_HANDLERS, addScopeToSelector } from './view.js';
-import { transformStyle, transformStyleRule, scopeStyleSelector } from './style.js';
+import { transformStyle, flattenStyleRule, scopeStyleSelector } from './style.js';
 import { generateExport } from './export.js';
 
 /**
@@ -331,8 +331,8 @@ export class Transformer {
     return transformStyle(this, styleBlock);
   }
 
-  transformStyleRule(rule, indent) {
-    return transformStyleRule(this, rule, indent);
+  flattenStyleRule(rule, parentSelector, output) {
+    return flattenStyleRule(this, rule, parentSelector, output);
   }
 
   scopeStyleSelector(selector) {

package/compiler/transformer/style.js

@@ -19,8 +19,15 @@ export function transformStyle(transformer, styleBlock) {
 
   lines.push('const styles = `');
 
+  // Collect all flattened rules (handles nesting)
+  const flattenedRules = [];
   for (const rule of styleBlock.rules) {
-    lines.push(transformStyleRule(transformer, rule, 0));
+    flattenStyleRule(transformer, rule, '', flattenedRules);
+  }
+
+  // Output all flattened rules
+  for (const cssRule of flattenedRules) {
+    lines.push(cssRule);
   }
 
   lines.push('`;');
@@ -39,36 +46,51 @@ export function transformStyle(transformer, styleBlock) {
 }
 
 /**
- * Transform style rule with optional scoping
+ * Flatten nested CSS rules by combining selectors
+ * Handles CSS nesting by prepending parent selector to nested rules
  * @param {Object} transformer - Transformer instance
  * @param {Object} rule - CSS rule from AST
- * @param {number} indent - Indentation level
- * @returns {string} CSS code
+ * @param {string} parentSelector - Parent selector to prepend (empty for top-level)
+ * @param {Array<string>} output - Array to collect flattened CSS rules
  */
-export function transformStyleRule(transformer, rule, indent) {
-  const pad = '  '.repeat(indent);
-  const lines = [];
+export function flattenStyleRule(transformer, rule, parentSelector, output) {
+  // Build the full selector by combining parent and current
+  let fullSelector = rule.selector;
+
+  if (parentSelector) {
+    // Handle & (parent reference) in nested selectors
+    if (rule.selector.includes('&')) {
+      // Replace & with parent selector
+      fullSelector = rule.selector.replace(/&/g, parentSelector);
+    } else {
+      // Combine parent and child with space (descendant combinator)
+      fullSelector = `${parentSelector} ${rule.selector}`;
+    }
+  }
 
   // Apply scope to selector if enabled
-  let selector = rule.selector;
+  let scopedSelector = fullSelector;
   if (transformer.scopeId) {
-    selector = scopeStyleSelector(transformer, selector);
+    scopedSelector = scopeStyleSelector(transformer, fullSelector);
   }
 
-  lines.push(`${pad}${selector} {`);
+  // Only output rule if it has properties
+  if (rule.properties.length > 0) {
+    const lines = [];
+    lines.push(`  ${scopedSelector} {`);
 
-  for (const prop of rule.properties) {
-    lines.push(`${pad}  ${prop.name}: ${prop.value};`);
+    for (const prop of rule.properties) {
+      lines.push(`    ${prop.name}: ${prop.value};`);
+    }
+
+    lines.push('  }');
+    output.push(lines.join('\n'));
   }
 
+  // Recursively flatten nested rules with combined selector
   for (const nested of rule.nestedRules) {
-    // For nested rules, combine selectors (simplified nesting)
-    const nestedLines = transformStyleRule(transformer, nested, indent + 1);
-    lines.push(nestedLines);
+    flattenStyleRule(transformer, nested, fullSelector, output);
   }
-
-  lines.push(`${pad}}`);
-  return lines.join('\n');
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.19",
+  "version": "1.7.21",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",