pulse-js-framework 1.7.26 → 1.7.29

package/compiler/lexer.js

@@ -85,13 +85,24 @@ export const TokenType = {
   PLUSPLUS: 'PLUSPLUS', // ++
   MINUSMINUS: 'MINUSMINUS', // --
   QUESTION: 'QUESTION', // ?
+  NULLISH: 'NULLISH', // ??
+  OPTIONAL_CHAIN: 'OPTIONAL_CHAIN', // ?.
   ARROW: 'ARROW',     // =>
   SPREAD: 'SPREAD',   // ...
+  // Logical/Nullish Assignment Operators (ES2021)
+  OR_ASSIGN: 'OR_ASSIGN',       // ||=
+  AND_ASSIGN: 'AND_ASSIGN',     // &&=
+  NULLISH_ASSIGN: 'NULLISH_ASSIGN', // ??=
+  PLUS_ASSIGN: 'PLUS_ASSIGN',   // +=
+  MINUS_ASSIGN: 'MINUS_ASSIGN', // -=
+  STAR_ASSIGN: 'STAR_ASSIGN',   // *=
+  SLASH_ASSIGN: 'SLASH_ASSIGN', // /=
 
   // Literals
   STRING: 'STRING',
   TEMPLATE: 'TEMPLATE', // Template literal `...`
   NUMBER: 'NUMBER',
+  BIGINT: 'BIGINT',     // BigInt literal 123n
   TRUE: 'TRUE',
   FALSE: 'FALSE',
   NULL: 'NULL',
@@ -365,22 +376,96 @@ export class Lexer {
 
   /**
    * Read a number literal
+   * Supports:
+   * - Integers: 42
+   * - Decimals: 3.14
+   * - Scientific notation: 1e10, 1.5e-3
+   * - Numeric separators (ES2021): 1_000_000, 0xFF_FF_FF
+   * - BigInt literals (ES2020): 123n
+   * - Hex: 0xFF, Binary: 0b101, Octal: 0o777
    */
   readNumber() {
     const startLine = this.line;
     const startColumn = this.column;
     let value = '';
+    let rawValue = '';
+    let isBigInt = false;
+
+    // Check for hex, binary, or octal prefixes
+    if (this.current() === '0') {
+      rawValue += this.advance();
+      value += '0';
+
+      if (this.current() === 'x' || this.current() === 'X') {
+        // Hexadecimal
+        rawValue += this.advance();
+        value += 'x';
+        while (!this.isEOF() && /[0-9a-fA-F_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char; // Skip separators in actual value
+        }
+        // Check for BigInt suffix
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value, 16), startLine, startColumn, rawValue);
+      } else if (this.current() === 'b' || this.current() === 'B') {
+        // Binary
+        rawValue += this.advance();
+        value += 'b';
+        while (!this.isEOF() && /[01_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
+        }
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value.slice(2), 2), startLine, startColumn, rawValue);
+      } else if (this.current() === 'o' || this.current() === 'O') {
+        // Octal
+        rawValue += this.advance();
+        value += 'o';
+        while (!this.isEOF() && /[0-7_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
+        }
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value.slice(2), 8), startLine, startColumn, rawValue);
+      }
+    }
 
-    // Integer part
-    while (!this.isEOF() && /[0-9]/.test(this.current())) {
-      value += this.advance();
+    // Regular decimal number (or continuation of '0')
+    while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+      const char = this.advance();
+      rawValue += char;
+      if (char !== '_') value += char;
     }
 
     // Decimal part
     if (this.current() === '.' && /[0-9]/.test(this.peek())) {
-      value += this.advance(); // .
-      while (!this.isEOF() && /[0-9]/.test(this.current())) {
-        value += this.advance();
+      rawValue += this.advance();
+      value += '.';
+      while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+        const char = this.advance();
+        rawValue += char;
+        if (char !== '_') value += char;
       }
     }
 
@@ -394,18 +479,32 @@ export class Lexer {
                           ((nextChar === '+' || nextChar === '-') && /[0-9]/.test(nextNextChar));
 
       if (isScientific) {
-        value += this.advance(); // consume 'e' or 'E'
+        rawValue += this.advance();
+        value += 'e';
         if (this.current() === '+' || this.current() === '-') {
-          value += this.advance();
+          const sign = this.advance();
+          rawValue += sign;
+          value += sign;
         }
-        while (!this.isEOF() && /[0-9]/.test(this.current())) {
-          value += this.advance();
+        while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
         }
       }
       // If not scientific notation, leave 'e' for the next token (e.g., 'em' unit)
     }
 
-    return new Token(TokenType.NUMBER, parseFloat(value), startLine, startColumn, value);
+    // Check for BigInt suffix 'n'
+    if (this.current() === 'n') {
+      rawValue += this.advance();
+      isBigInt = true;
+    }
+
+    if (isBigInt) {
+      return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+    }
+    return new Token(TokenType.NUMBER, parseFloat(value), startLine, startColumn, rawValue);
   }
 
   /**
@@ -586,6 +685,9 @@ export class Lexer {
           if (this.current() === '+') {
             this.advance();
             this.tokens.push(new Token(TokenType.PLUSPLUS, '++', startLine, startColumn));
+          } else if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.PLUS_ASSIGN, '+=', startLine, startColumn));
           } else {
             this.tokens.push(new Token(TokenType.PLUS, '+', startLine, startColumn));
           }
@@ -595,17 +697,30 @@ export class Lexer {
           if (this.current() === '-') {
             this.advance();
             this.tokens.push(new Token(TokenType.MINUSMINUS, '--', startLine, startColumn));
+          } else if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.MINUS_ASSIGN, '-=', startLine, startColumn));
           } else {
             this.tokens.push(new Token(TokenType.MINUS, '-', startLine, startColumn));
           }
           continue;
         case '*':
           this.advance();
-          this.tokens.push(new Token(TokenType.STAR, '*', startLine, startColumn));
+          if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.STAR_ASSIGN, '*=', startLine, startColumn));
+          } else {
+            this.tokens.push(new Token(TokenType.STAR, '*', startLine, startColumn));
+          }
           continue;
         case '/':
           this.advance();
-          this.tokens.push(new Token(TokenType.SLASH, '/', startLine, startColumn));
+          if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.SLASH_ASSIGN, '/=', startLine, startColumn));
+          } else {
+            this.tokens.push(new Token(TokenType.SLASH, '/', startLine, startColumn));
+          }
           continue;
         case '=':
           this.advance();
@@ -626,7 +741,25 @@ export class Lexer {
           continue;
         case '?':
           this.advance();
-          this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+          if (this.current() === '?') {
+            this.advance();
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.NULLISH_ASSIGN, '??=', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.NULLISH, '??', startLine, startColumn));
+            }
+          } else if (this.current() === '.') {
+            // Optional chaining ?. but only if not followed by a digit (to avoid ?.5)
+            if (!/[0-9]/.test(this.peek())) {
+              this.advance();
+              this.tokens.push(new Token(TokenType.OPTIONAL_CHAIN, '?.', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+            }
+          } else {
+            this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+          }
           continue;
         case '%':
           this.advance();
@@ -668,7 +801,12 @@ export class Lexer {
           this.advance();
           if (this.current() === '&') {
             this.advance();
-            this.tokens.push(new Token(TokenType.AND, '&&', startLine, startColumn));
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.AND_ASSIGN, '&&=', startLine, startColumn));
+            } else {
+              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));
@@ -678,7 +816,12 @@ export class Lexer {
           this.advance();
           if (this.current() === '|') {
             this.advance();
-            this.tokens.push(new Token(TokenType.OR, '||', startLine, startColumn));
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.OR_ASSIGN, '||=', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.OR, '||', startLine, startColumn));
+            }
           }
           continue;
       }

package/compiler/transformer/expressions.js

@@ -169,8 +169,13 @@ export function transformExpressionString(transformer, exprStr) {
       `${stateVar}.get()`
     );
   }
-  // Add optional chaining after function calls followed by property access
-  result = result.replace(/(\w+\([^)]*\))\.(\w)/g, '$1?.$2');
+
+  // NOTE: Removed aggressive optional chaining regex that was adding ?.
+  // after ALL function calls. This caused false positives like:
+  // "User.name" -> "User?.name" in string literals.
+  // Optional chaining should be explicitly written by developers, not auto-added.
+  // The lexer now properly tokenizes ?. as OPTIONAL_CHAIN for explicit usage.
+
   return result;
 }
 

package/compiler/transformer/style.js

@@ -63,6 +63,49 @@ function isKeyframesRule(selector) {
   return selector.trim().startsWith('@keyframes');
 }
 
+/**
+ * Check if selector is @layer (CSS Cascade Layers)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isLayerRule(selector) {
+  return selector.trim().startsWith('@layer');
+}
+
+/**
+ * Check if selector is @supports (CSS Feature Queries)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isSupportsRule(selector) {
+  return selector.trim().startsWith('@supports');
+}
+
+/**
+ * Check if selector is @container (CSS Container Queries)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isContainerRule(selector) {
+  return selector.trim().startsWith('@container');
+}
+
+/**
+ * Check if selector is a conditional group at-rule that can contain nested rules
+ * These include @media, @supports, @container, @layer
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isConditionalGroupAtRule(selector) {
+  const trimmed = selector.trim();
+  return trimmed.startsWith('@media') ||
+         trimmed.startsWith('@supports') ||
+         trimmed.startsWith('@container') ||
+         trimmed.startsWith('@layer') ||
+         trimmed.startsWith('@scope') ||
+         trimmed.startsWith('@document');
+}
+
 /**
  * Check if a selector is a keyframe step (from, to, or percentage)
  * @param {string} selector - CSS selector
@@ -76,7 +119,7 @@ function isKeyframeStep(selector) {
 /**
  * Flatten nested CSS rules by combining selectors
  * Handles CSS nesting by prepending parent selector to nested rules
- * Special handling for @-rules (media queries, keyframes, etc.)
+ * Special handling for @-rules (media queries, keyframes, supports, container, layer, etc.)
  * @param {Object} transformer - Transformer instance
  * @param {Object} rule - CSS rule from AST
  * @param {string} parentSelector - Parent selector to prepend (empty for top-level)
@@ -90,27 +133,96 @@ export function flattenStyleRule(transformer, rule, parentSelector, output, atRu
   // Check if this is an @-rule
   if (isAtRule(selector)) {
     const isKeyframes = isKeyframesRule(selector);
+    const isLayer = isLayerRule(selector);
+    const isConditionalGroup = isConditionalGroupAtRule(selector);
 
     // @keyframes should be output as a complete block, not flattened
     if (isKeyframes) {
       const lines = [];
-      lines.push(`  ${selector} {`);
-
-      // Output all keyframe steps
-      for (const nested of rule.nestedRules) {
-        lines.push(`    ${nested.selector} {`);
-        for (const prop of nested.properties) {
-          lines.push(`      ${prop.name}: ${prop.value};`);
+      // Wrap in existing @-rule if present
+      if (atRuleWrapper) {
+        lines.push(`  ${atRuleWrapper} {`);
+        lines.push(`    ${selector} {`);
+        for (const nested of rule.nestedRules) {
+          lines.push(`      ${nested.selector} {`);
+          for (const prop of nested.properties) {
+            lines.push(`        ${prop.name}: ${prop.value};`);
+          }
+          lines.push('      }');
         }
         lines.push('    }');
+        lines.push('  }');
+      } else {
+        lines.push(`  ${selector} {`);
+        for (const nested of rule.nestedRules) {
+          lines.push(`    ${nested.selector} {`);
+          for (const prop of nested.properties) {
+            lines.push(`      ${prop.name}: ${prop.value};`);
+          }
+          lines.push('    }');
+        }
+        lines.push('  }');
+      }
+      output.push(lines.join('\n'));
+      return;
+    }
+
+    // @layer - output with its content, support both named layers and anonymous layer blocks
+    if (isLayer) {
+      // Check if it's just a layer statement (@layer name;) or a layer block (@layer name { ... })
+      if (rule.nestedRules.length === 0 && rule.properties.length === 0) {
+        // Layer order statement: @layer base, components, utilities;
+        output.push(`  ${selector};`);
+        return;
       }
 
-      lines.push('  }');
+      // Layer block with content
+      const lines = [];
+
+      if (atRuleWrapper) {
+        lines.push(`  ${atRuleWrapper} {`);
+        lines.push(`    ${selector} {`);
+      } else {
+        lines.push(`  ${selector} {`);
+      }
+
+      // Process nested rules within the layer
+      const nestedOutput = [];
+      for (const nested of rule.nestedRules) {
+        flattenStyleRule(transformer, nested, '', nestedOutput, '', false);
+      }
+
+      // Add nested output with proper indentation
+      const baseIndent = atRuleWrapper ? '    ' : '  ';
+      for (const nestedRule of nestedOutput) {
+        // Adjust indentation for nested rules
+        const reindented = nestedRule.split('\n').map(line => baseIndent + line.trim()).join('\n');
+        lines.push(reindented);
+      }
+
+      if (atRuleWrapper) {
+        lines.push('    }');
+        lines.push('  }');
+      } else {
+        lines.push('  }');
+      }
       output.push(lines.join('\n'));
       return;
     }
 
-    // Other @-rules (@media, @supports) wrap their nested rules
+    // Conditional group @-rules (@media, @supports, @container) wrap their nested rules
+    // They can be nested inside each other
+    if (isConditionalGroup) {
+      // Combine with existing wrapper if present
+      const combinedWrapper = atRuleWrapper ? `${atRuleWrapper} { ${selector}` : selector;
+
+      for (const nested of rule.nestedRules) {
+        flattenStyleRule(transformer, nested, parentSelector, output, combinedWrapper, false);
+      }
+      return;
+    }
+
+    // Other @-rules (unknown) - output as-is with nested content
     for (const nested of rule.nestedRules) {
       flattenStyleRule(transformer, nested, '', output, selector, false);
     }
@@ -172,6 +284,9 @@ export function flattenStyleRule(transformer, rule, parentSelector, output, atRu
  * .container -> .container.p123abc
  * div -> div.p123abc
  * .a .b -> .a.p123abc .b.p123abc
+ * .a > .b -> .a.p123abc > .b.p123abc (preserves combinators)
+ * .a + .b -> .a.p123abc + .b.p123abc
+ * .a ~ .b -> .a.p123abc ~ .b.p123abc
  * @media (max-width: 900px) -> @media (max-width: 900px) (unchanged)
  * :root, body, *, html -> unchanged (global selectors)
  * @param {Object} transformer - Transformer instance
@@ -196,31 +311,81 @@ export function scopeStyleSelector(transformer, selector) {
     return selector;
   }
 
+  // CSS combinators that should be preserved
+  const combinators = new Set(['>', '+', '~']);
+
   // Split by comma for multiple selectors
   return selector.split(',').map(part => {
     part = part.trim();
 
-    // Split by space for descendant selectors
-    return part.split(/\s+/).map(segment => {
+    // Split by whitespace but preserve combinators
+    // This regex splits on whitespace but keeps combinators as separate tokens
+    const tokens = part.split(/(\s*[>+~]\s*|\s+)/).filter(t => t.trim());
+    const result = [];
+
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i].trim();
+
+      // Check if this is a combinator
+      if (combinators.has(token)) {
+        result.push(` ${token} `);
+        continue;
+      }
+
+      // Skip empty tokens
+      if (!token) continue;
+
       // Check if this segment is a global selector
-      const segmentBase = segment.split(/[.#\[]/)[0];
-      if (globalSelectors.has(segmentBase) || globalSelectors.has(segment)) {
-        return segment;
+      const segmentBase = token.split(/[.#\[]/)[0];
+      if (globalSelectors.has(segmentBase) || globalSelectors.has(token)) {
+        result.push(token);
+        continue;
+      }
+
+      // Handle :has(), :is(), :where(), :not() - scope selectors inside
+      if (token.includes(':has(') || token.includes(':is(') ||
+          token.includes(':where(') || token.includes(':not(')) {
+        result.push(scopePseudoClassSelector(transformer, token));
+        continue;
       }
 
       // Skip pseudo-elements and pseudo-classes at the end
-      const pseudoMatch = segment.match(/^([^:]+)(:.+)?$/);
+      const pseudoMatch = token.match(/^([^:]+)(:.+)?$/);
       if (pseudoMatch) {
         const base = pseudoMatch[1];
         const pseudo = pseudoMatch[2] || '';
 
         // Skip if it's just a pseudo selector (like :root)
-        if (!base || globalSelectors.has(`:${pseudo.slice(1)}`)) return segment;
+        if (!base || globalSelectors.has(`:${pseudo.slice(1)}`)) {
+          result.push(token);
+          continue;
+        }
 
         // Add scope class
-        return `${base}.${transformer.scopeId}${pseudo}`;
+        result.push(`${base}.${transformer.scopeId}${pseudo}`);
+        continue;
       }
-      return `${segment}.${transformer.scopeId}`;
-    }).join(' ');
+      result.push(`${token}.${transformer.scopeId}`);
+    }
+
+    return result.join('');
   }).join(', ');
 }
+
+/**
+ * Scope selectors inside functional pseudo-classes like :has(), :is(), :where(), :not()
+ * @param {Object} transformer - Transformer instance
+ * @param {string} selector - Selector containing functional pseudo-class
+ * @returns {string} Scoped selector
+ */
+function scopePseudoClassSelector(transformer, selector) {
+  // Match functional pseudo-classes: :has(), :is(), :where(), :not()
+  return selector.replace(
+    /:(has|is|where|not)\(([^)]+)\)/g,
+    (_match, pseudoClass, inner) => {
+      // Recursively scope the inner selector
+      const scopedInner = scopeStyleSelector(transformer, inner);
+      return `:${pseudoClass}(${scopedInner})`;
+    }
+  );
+}

package/package.json

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