pulse-js-framework 1.7.22 → 1.7.24

package/cli/release.js

@@ -508,6 +508,46 @@ function buildCommitMessage(newVersion, title, changes) {
   return message;
 }
 
+/**
+ * Verify that a git tag exists locally
+ */
+function verifyTagExists(version) {
+  try {
+    const tags = execSync('git tag -l', { cwd: root, encoding: 'utf-8' });
+    return tags.split('\n').includes(`v${version}`);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Verify that a git tag exists on remote
+ */
+function verifyTagOnRemote(version) {
+  try {
+    const remoteTags = execSync('git ls-remote --tags origin', { cwd: root, encoding: 'utf-8' });
+    return remoteTags.includes(`refs/tags/v${version}`);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Execute a git command with error handling
+ */
+function execGitCommand(command, description) {
+  log.info(`  Running: ${description}...`);
+  try {
+    execSync(command, { cwd: root, stdio: 'inherit' });
+    return { success: true };
+  } catch (error) {
+    log.error(`  Failed: ${description}`);
+    log.error(`  Command: ${command}`);
+    log.error(`  Error: ${error.message}`);
+    return { success: false, error };
+  }
+}
+
 /**
  * Execute git commands
  */
@@ -521,33 +561,142 @@ function gitCommitTagPush(newVersion, title, changes, dryRun = false) {
     log.info(`  [dry-run] git tag -a v${newVersion} -m "Release v${newVersion}"`);
     log.info('  [dry-run] git push');
     log.info('  [dry-run] git push --tags');
-    return;
+    return { success: true };
   }
 
   // git add
-  log.info('  Running: git add -A...');
-  execSync('git add -A', { cwd: root, stdio: 'inherit' });
+  let result = execGitCommand('git add -A', 'git add -A');
+  if (!result.success) {
+    return { success: false, stage: 'add', error: result.error };
+  }
 
   // git commit using temp file for cross-platform compatibility
-  log.info('  Running: git commit...');
   const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
   writeFileSync(tempFile, commitMessage, 'utf-8');
   try {
-    execSync(`git commit -F "${tempFile}"`, { cwd: root, stdio: 'inherit' });
+    result = execGitCommand(`git commit -F "${tempFile}"`, 'git commit');
+    if (!result.success) {
+      return { success: false, stage: 'commit', error: result.error };
+    }
   } finally {
-    unlinkSync(tempFile);
+    try {
+      unlinkSync(tempFile);
+    } catch {
+      // Ignore cleanup errors
+    }
   }
 
   // git tag
-  log.info(`  Running: git tag v${newVersion}...`);
-  execSync(`git tag -a v${newVersion} -m "Release v${newVersion}"`, { cwd: root, stdio: 'inherit' });
+  result = execGitCommand(
+    `git tag -a v${newVersion} -m "Release v${newVersion}"`,
+    `git tag v${newVersion}`
+  );
+  if (!result.success) {
+    log.error('');
+    log.error('Tag creation failed. The commit was created but not tagged.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag', error: result.error };
+  }
+
+  // Verify tag was created
+  if (!verifyTagExists(newVersion)) {
+    log.error('');
+    log.error('Tag creation appeared to succeed but tag not found locally.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag-verify', error: new Error('Tag not found after creation') };
+  }
+  log.info(`  Verified: tag v${newVersion} exists locally`);
 
   // git push
-  log.info('  Running: git push...');
-  execSync('git push', { cwd: root, stdio: 'inherit' });
+  result = execGitCommand('git push', 'git push');
+  if (!result.success) {
+    log.error('');
+    log.error('Push failed. Commit and tag were created locally.');
+    log.error('You can manually push with:');
+    log.error('  git push && git push --tags');
+    return { success: false, stage: 'push', error: result.error };
+  }
+
+  // git push --tags
+  result = execGitCommand('git push --tags', 'git push --tags');
+  if (!result.success) {
+    log.error('');
+    log.error('Tag push failed. The tag exists locally but not on remote.');
+    log.error('You can manually push tags with:');
+    log.error('  git push --tags');
+    return { success: false, stage: 'push-tags', error: result.error };
+  }
+
+  // Verify tag was pushed to remote
+  if (!verifyTagOnRemote(newVersion)) {
+    log.warn('');
+    log.warn('Tag push appeared to succeed but tag not found on remote.');
+    log.warn('You may need to manually verify or push with:');
+    log.warn('  git push --tags');
+  } else {
+    log.info(`  Verified: tag v${newVersion} exists on remote`);
+  }
 
-  log.info('  Running: git push --tags...');
-  execSync('git push --tags', { cwd: root, stdio: 'inherit' });
+  return { success: true };
+}
+
+/**
+ * Execute git commands without pushing (--no-push mode)
+ */
+function gitCommitTagNoPush(newVersion, title, changes) {
+  const commitMessage = buildCommitMessage(newVersion, title, changes);
+
+  // git add
+  let result = execGitCommand('git add -A', 'git add -A');
+  if (!result.success) {
+    return { success: false, stage: 'add', error: result.error };
+  }
+
+  // git commit using temp file for cross-platform compatibility
+  const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
+  writeFileSync(tempFile, commitMessage, 'utf-8');
+  try {
+    result = execGitCommand(`git commit -F "${tempFile}"`, 'git commit');
+    if (!result.success) {
+      return { success: false, stage: 'commit', error: result.error };
+    }
+  } finally {
+    try {
+      unlinkSync(tempFile);
+    } catch {
+      // Ignore cleanup errors
+    }
+  }
+
+  // git tag
+  result = execGitCommand(
+    `git tag -a v${newVersion} -m "Release v${newVersion}"`,
+    `git tag v${newVersion}`
+  );
+  if (!result.success) {
+    log.error('');
+    log.error('Tag creation failed. The commit was created but not tagged.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag', error: result.error };
+  }
+
+  // Verify tag was created
+  if (!verifyTagExists(newVersion)) {
+    log.error('');
+    log.error('Tag creation appeared to succeed but tag not found locally.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag-verify', error: new Error('Tag not found after creation') };
+  }
+
+  log.info(`  Verified: tag v${newVersion} exists locally`);
+  log.info('  Created commit and tag (--no-push specified)');
+  log.info('  To push later, run: git push && git push --tags');
+
+  return { success: true };
 }
 
 /**
@@ -811,25 +960,24 @@ export async function runRelease(args) {
   log.info('');
   log.info('Git operations...');
 
+  let gitResult = { success: true };
+
   if (!dryRun) {
     if (noPush) {
       // Only commit and tag, no push
-      const commitMessage = buildCommitMessage(newVersion, title, changes);
-      execSync('git add -A', { cwd: root, stdio: 'inherit' });
-      const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
-      writeFileSync(tempFile, commitMessage, 'utf-8');
-      try {
-        execSync(`git commit -F "${tempFile}"`, { cwd: root, stdio: 'inherit' });
-      } finally {
-        unlinkSync(tempFile);
-      }
-      execSync(`git tag -a v${newVersion} -m "Release v${newVersion}"`, { cwd: root, stdio: 'inherit' });
-      log.info('  Created commit and tag (--no-push specified)');
+      gitResult = gitCommitTagNoPush(newVersion, title, changes);
     } else {
-      gitCommitTagPush(newVersion, title, changes, false);
+      gitResult = gitCommitTagPush(newVersion, title, changes, false);
     }
   } else {
-    gitCommitTagPush(newVersion, title, changes, true);
+    gitResult = gitCommitTagPush(newVersion, title, changes, true);
+  }
+
+  if (!gitResult.success) {
+    log.error('');
+    log.error(`Release failed at stage: ${gitResult.stage}`);
+    log.error('Please fix the issue and retry, or complete the release manually.');
+    process.exit(1);
   }
 
   log.info('');

package/compiler/lexer.js

@@ -99,6 +99,7 @@ export const TokenType = {
   // Identifiers and selectors
   IDENT: 'IDENT',
   SELECTOR: 'SELECTOR',  // CSS selector like .class, #id, tag.class#id
+  HEX_COLOR: 'HEX_COLOR', // CSS hex color like #fff, #667eea
 
   // Special
   INTERPOLATION_START: 'INTERPOLATION_START', // {
@@ -409,8 +410,9 @@ export class Lexer {
 
   /**
    * Read an identifier or keyword
+   * @param {boolean} forceIdent - If true, always return IDENT type (ignore keywords)
    */
-  readIdentifier() {
+  readIdentifier(forceIdent = false) {
     const startLine = this.line;
     const startColumn = this.column;
     let value = '';
@@ -419,7 +421,7 @@ export class Lexer {
       value += this.advance();
     }
 
-    const type = KEYWORDS[value] || TokenType.IDENT;
+    const type = forceIdent ? TokenType.IDENT : (KEYWORDS[value] || TokenType.IDENT);
     return new Token(type, value, startLine, startColumn);
   }
 
@@ -694,8 +696,13 @@ export class Lexer {
         continue;
       }
 
-      // Hash outside selector
+      // Hash outside selector - check for hex color in style context
       if (char === '#') {
+        // In style context, check if this is a hex color
+        if (this.isStyleContext() && /[0-9a-fA-F]/.test(this.peek())) {
+          this.tokens.push(this.readHexColor());
+          continue;
+        }
         this.advance();
         this.tokens.push(new Token(TokenType.HASH, '#', startLine, startColumn));
         continue;
@@ -704,14 +711,29 @@ export class Lexer {
       // Identifiers, keywords, and selectors
       if (/[a-zA-Z_$]/.test(char)) {
         // First check if this is a keyword - keywords take precedence
+        // BUT in style context, most keywords should be treated as identifiers
+        // (e.g., 'style' in 'transform-style', 'in' in 'ease-in-out')
         const word = this.peekWord();
-        if (KEYWORDS[word]) {
-          this.tokens.push(this.readIdentifier());
+        const inStyle = this.isStyleContext();
+
+        // Keywords that should NEVER be treated as keywords in style context
+        // These appear in CSS property names and values
+        const cssReservedWords = new Set([
+          'style', 'in', 'from', 'to', 'if', 'else', 'for', 'as', 'of',
+          'true', 'false', 'null', 'export', 'import'
+        ]);
+
+        const shouldBeKeyword = KEYWORDS[word] && (!inStyle || !cssReservedWords.has(word));
+        // Force identifier if in style context and word is a CSS reserved word
+        const forceIdent = inStyle && cssReservedWords.has(word);
+
+        if (shouldBeKeyword) {
+          this.tokens.push(this.readIdentifier(false));
         } else if (this.isViewContext() && this.couldBeSelector()) {
           // Only treat as selector if not a keyword
           this.tokens.push(this.readSelector());
         } else {
-          this.tokens.push(this.readIdentifier());
+          this.tokens.push(this.readIdentifier(forceIdent));
         }
         continue;
       }
@@ -725,6 +747,43 @@ export class Lexer {
     return this.tokens;
   }
 
+  /**
+   * Check if we're in a style context (inside style block)
+   */
+  isStyleContext() {
+    // Look back through tokens for 'style' keyword
+    for (let i = this.tokens.length - 1; i >= 0; i--) {
+      const token = this.tokens[i];
+      if (token.type === TokenType.STYLE) {
+        return true;
+      }
+      if (token.type === TokenType.STATE ||
+          token.type === TokenType.VIEW ||
+          token.type === TokenType.ACTIONS ||
+          token.type === TokenType.ROUTER ||
+          token.type === TokenType.STORE) {
+        return false;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Read a CSS hex color (#fff, #ffffff, #667eea, etc.)
+   */
+  readHexColor() {
+    const startLine = this.line;
+    const startColumn = this.column;
+    let value = this.advance(); // #
+
+    // Read hex characters (0-9, a-f, A-F)
+    while (!this.isEOF() && /[0-9a-fA-F]/.test(this.current())) {
+      value += this.advance();
+    }
+
+    return new Token(TokenType.HEX_COLOR, value, startLine, startColumn);
+  }
+
   /**
    * Check if we're in a view context where selectors are expected
    */

package/compiler/parser.js

@@ -1564,35 +1564,70 @@ export class Parser {
     const selectorParts = [];
     let lastLine = this.current()?.line;
     let lastToken = null;
+    let inAtRule = false;  // Track if we're inside an @-rule like @media
+    let inParens = 0;      // Track parenthesis depth
 
     while (!this.is(TokenType.LBRACE) && !this.is(TokenType.EOF)) {
       const token = this.advance();
       const currentLine = token.line;
       const tokenValue = String(token.value);
 
+      // Track @-rules (media queries, keyframes, etc.)
+      if (tokenValue === '@') {
+        inAtRule = true;
+      }
+
+      // Track parenthesis depth for media queries
+      if (tokenValue === '(') inParens++;
+      if (tokenValue === ')') inParens--;
+
       // 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 = ['.', '#', ':', '[', '(', '>', '+', '~', '-'];
+        const noSpaceAfter = new Set(['.', '#', '[', '(', '>', '+', '~', '-', '@', ':']);
+
         // Don't add space before these (they attach to what precedes)
-        const noSpaceBefore = [':', ']', ')', ',', '.', '#', '-'];
+        // In @media queries inside parens: "max-width:" should not have space before ":"
+        const noSpaceBefore = new Set([']', ')', ',', '.', '#', '-', ':']);
+
+        // CSS units that should attach to numbers (no space before)
+        const cssUnits = new Set(['px', 'em', 'rem', 'vh', 'vw', 'vmin', 'vmax', '%', 'fr', 's', 'ms', 'deg', 'rad', 'turn', 'grad', 'ex', 'ch', 'pt', 'pc', 'in', 'cm', 'mm', 'dvh', 'dvw', 'svh', 'svw', 'lvh', 'lvw']);
 
         // 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;
-
-        // Special case: hyphenated class names like .job-title
-        // Don't add space if current token is '-' and last token was IDENT
+                                     lastToken?.type === TokenType.IDENT &&
+                                     !inAtRule;  // Don't add space in @media selectors
+
+        // Special case: hyphenated class/id names like .job-title, .card-3d, max-width
+        // Check if we're continuing a class/id name - the last part should end with alphanumeric
+        // that was started by . or # (no space in between)
+        const lastPartJoined = selectorParts.join('');
+        // Check if we're in the middle of a class/id name (last char is alphanumeric or -)
+        // AND there's a . or # that started this name (not separated by space)
+        const lastSegmentMatch = lastPartJoined.match(/[.#]([a-zA-Z0-9_-]*)$/);
+        const inClassName = lastSegmentMatch && lastSegmentMatch[1].length > 0;
+
+        // Don't add space if current token is '-' and last token was IDENT or NUMBER
         // Or if last token was '-' (the next token should attach to it)
-        const isHyphenatedIdent = (tokenValue === '-' && lastToken?.type === TokenType.IDENT) ||
-                                  (lastToken?.type === TokenType.MINUS);
-
-        const needsSpace = !noSpaceAfter.includes(lastPart) &&
-                          !noSpaceBefore.includes(tokenValue) &&
-                          !isHyphenatedIdent ||
+        // Also handle .card-3d where we have NUMBER followed by IDENT (but only if in class name context)
+        const isHyphenatedIdent = (tokenValue === '-' && (lastToken?.type === TokenType.IDENT || lastToken?.type === TokenType.NUMBER)) ||
+                                  (lastToken?.type === TokenType.MINUS) ||
+                                  (inClassName && lastToken?.type === TokenType.NUMBER && token.type === TokenType.IDENT);
+
+        // Special case: CSS units after numbers (768px, 1.5em)
+        const isUnitAfterNumber = cssUnits.has(tokenValue) && lastToken?.type === TokenType.NUMBER;
+
+        // Special case: @-rule keywords (media, keyframes, etc.) should attach to @
+        const isAtRuleKeyword = lastPart === '@' && /^[a-zA-Z]/.test(tokenValue);
+
+        const needsSpace = !noSpaceAfter.has(lastPart) &&
+                          !noSpaceBefore.has(tokenValue) &&
+                          !isHyphenatedIdent &&
+                          !isUnitAfterNumber &&
+                          !isAtRuleKeyword ||
                           isDescendantSelector;
 
         if (needsSpace) {
@@ -1677,27 +1712,52 @@ export class Parser {
 
   /**
    * Parse style property
+   * Handles CSS property names (including custom properties like --var-name)
+   * and complex CSS values with proper spacing
    */
   parseStyleProperty() {
+    // Parse property name (including custom properties with --)
     let name = '';
+    let nameTokens = [];
     while (!this.is(TokenType.COLON) && !this.is(TokenType.EOF)) {
-      name += this.advance().value;
+      nameTokens.push(this.advance());
     }
-    name = name.trim();
+    // Join name tokens without spaces (property names don't have spaces)
+    name = nameTokens.map(t => t.value).join('').trim();
 
     this.expect(TokenType.COLON);
 
-    // 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 (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 = '';
+    // CSS functions that should not have space before (
+    const cssFunctions = new Set([
+      'rgba', 'rgb', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklch', 'oklab',
+      'var', 'calc', 'min', 'max', 'clamp', 'url', 'attr', 'env', 'counter', 'counters',
+      'linear-gradient', 'radial-gradient', 'conic-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient',
+      'translate', 'translateX', 'translateY', 'translateZ', 'translate3d',
+      'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d',
+      'scale', 'scaleX', 'scaleY', 'scaleZ', 'scale3d',
+      'skew', 'skewX', 'skewY', 'matrix', 'matrix3d', 'perspective',
+      'cubic-bezier', 'steps', 'drop-shadow', 'blur', 'brightness', 'contrast',
+      'grayscale', 'hue-rotate', 'invert', 'opacity', 'saturate', 'sepia',
+      'minmax', 'repeat', 'fit-content', 'image', 'element', 'cross-fade',
+      'color-mix', 'light-dark'
+    ]);
+
+    // CSS units that should attach to preceding number (no space before)
+    const cssUnits = new Set([
+      '%', 'px', 'em', 'rem', 'vh', 'vw', 'vmin', 'vmax', 'dvh', 'dvw', 'svh', 'svw', 'lvh', 'lvw',
+      'fr', 's', 'ms', 'deg', 'rad', 'turn', 'grad',
+      'ex', 'ch', 'cap', 'ic', 'lh', 'rlh',
+      'pt', 'pc', 'in', 'cm', 'mm', 'Q',
+      'dpi', 'dpcm', 'dppx', 'x'
+    ]);
+
+    // Tokens that should not have space before them
+    const noSpaceBefore = new Set([')', ',', '(', ';']);
+    cssUnits.forEach(u => noSpaceBefore.add(u));
+
+    // Collect value tokens
+    let valueTokens = [];
     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)) {
       const currentToken = this.current();
@@ -1707,64 +1767,165 @@ export class Parser {
         if (this.isPropertyStart() || this.isNestedRule()) {
           break;
         }
+        lastTokenLine = currentToken.line;
       }
-      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
-      let tokenValue = token.raw || String(token.value);
 
-      // Track CSS var() context - no spaces in var(--name)
-      if (lastTokenValue === 'var' && tokenValue === '(') {
+      valueTokens.push(this.advance());
+    }
+
+    // Build value string with proper spacing
+    let value = '';
+    let inHexColor = false;
+    let hexLength = 0;
+    let parenDepth = 0;
+    let inCssVar = false;
+    let inCalc = false;  // Track if we're inside calc(), min(), max(), clamp() where operators need spaces
+    let calcDepth = 0;   // Track nested calc depth
+
+    // Functions where arithmetic operators need spaces
+    const mathFunctions = new Set(['calc', 'min', 'max', 'clamp']);
+
+    // Helper to check if a string is valid hex
+    const isValidHex = (str) => /^[0-9a-fA-F]+$/.test(String(str));
+
+    for (let i = 0; i < valueTokens.length; i++) {
+      const token = valueTokens[i];
+      const tokenValue = token.raw || String(token.value);
+      const prevToken = i > 0 ? valueTokens[i - 1] : null;
+      const prevValue = prevToken ? (prevToken.raw || String(prevToken.value)) : '';
+
+      // Track parenthesis depth
+      if (tokenValue === '(') parenDepth++;
+      if (tokenValue === ')') parenDepth--;
+
+      // Track CSS var() context
+      if (prevValue === 'var' && tokenValue === '(') {
         inCssVar = true;
       } else if (inCssVar && tokenValue === ')') {
         inCssVar = false;
       }
 
-      // 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) {
-        // Check if this token is a valid hex color continuation
+      // Track calc/min/max/clamp context - operators need spaces in these
+      if (mathFunctions.has(prevValue) && tokenValue === '(') {
+        inCalc = true;
+        calcDepth = parenDepth;
+      } else if (inCalc && tokenValue === ')' && parenDepth < calcDepth) {
+        inCalc = false;
+      }
+
+      // Handle HEX_COLOR token (from lexer) - it's already a complete hex color
+      if (token.type === TokenType.HEX_COLOR) {
+        // HEX_COLOR is already complete, no tracking needed
+        inHexColor = false;
+      }
+      // Track hex colors for legacy cases - look for # followed by hex digits
+      // Handle cases like #667eea being tokenized as # 667 eea
+      // Valid hex colors are 3, 4, 6, or 8 chars long
+      else if (tokenValue === '#') {
+        inHexColor = true;
+        hexLength = 0;
+      } else if (inHexColor) {
+        // Check if this token could be part of hex color
+        // Numbers and identifiers that are valid hex chars continue the color
         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;
+        if (isValidHex(tokenStr) && hexLength + tokenStr.length <= 8) {
+          hexLength += tokenStr.length;
+
+          // Check if we should stop collecting hex color now
+          // Stop if: we have 6+ chars, OR the next token is likely a CSS value (%, px, etc.)
+          const nextToken = valueTokens[i + 1];
+          const nextValue = nextToken ? String(nextToken.raw || nextToken.value) : '';
+
+          // CSS units/symbols that indicate the hex color is complete
+          const cssValueIndicators = new Set(['%', 'px', 'em', 'rem', 'vh', 'vw', ',', ')', ' ', '']);
+
+          // End hex color if:
+          // - We've reached 6 or 8 chars (complete hex)
+          // - Next token is a CSS unit/punctuation (like %, px, comma, paren)
+          // - Next token is empty (end of value)
+          if (hexLength >= 6 || cssValueIndicators.has(nextValue) || nextToken?.type === TokenType.PERCENT || nextToken?.type === TokenType.COMMA || nextToken?.type === TokenType.RPAREN) {
+            inHexColor = false;  // Done collecting hex color
           }
         } else {
-          afterHash = false;
+          // This token is not part of hex, end hex color collection
+          inHexColor = false;
         }
       }
 
-      // Add space before this token unless:
-      // - It's the first token
-      // - Last token was in noSpaceAfter
-      // - This token is in noSpaceBefore
-      // - 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(String(lastTokenValue)) ||
-                        noSpaceBefore.has(tokenValue) ||
-                        afterHash ||
-                        inCssVar ||
-                        (lastTokenValue === '-' || lastTokenValue === '--') ||
-                        (tokenValue === '-' && /^[a-zA-Z]/.test(String(this.current()?.value || '')));
-
-      if (value.length > 0 && !skipSpace) {
+      // Determine if we need space before this token
+      let needsSpace = value.length > 0;
+
+      if (needsSpace) {
+        // No space after # (hex color start)
+        if (prevValue === '#') {
+          needsSpace = false;
+        }
+        // No space after these
+        else if (prevValue === '(' || prevValue === '.' || prevValue === '/' || prevValue === '@') {
+          needsSpace = false;
+        }
+        // No space after ! for !important
+        else if (prevValue === '!' && tokenValue === 'important') {
+          needsSpace = false;
+        }
+        // No space after CSS functions before (
+        else if (cssFunctions.has(prevValue) && tokenValue === '(') {
+          needsSpace = false;
+        }
+        // No space before these
+        else if (noSpaceBefore.has(tokenValue)) {
+          needsSpace = false;
+        }
+        // No space in hex colors (continuing after #)
+        else if (inHexColor && hexLength > 0) {
+          needsSpace = false;
+        }
+        // No space in CSS var() content
+        else if (inCssVar) {
+          needsSpace = false;
+        }
+        // No space for hyphenated identifiers (ease-in-out, sans-serif, -apple-system)
+        // BUT in calc(), min(), max(), clamp() - operators need spaces around them
+        // Note: Some CSS keywords like 'in' are also Pulse keywords, so check token value too
+        // Check if current token is '-' and should attach to previous identifier-like token
+        else if (tokenValue === '-' && !inCalc && (prevToken?.type === TokenType.IDENT || prevToken?.type === TokenType.NUMBER || /^[a-zA-Z]/.test(prevValue))) {
+          needsSpace = false;
+        }
+        // Check if current token follows a '-' (either prevValue is '-' or value ends with '-')
+        // Include keywords that might appear in CSS values (in, from, to, etc.)
+        // BUT in calc(), don't attach numbers to '-' (keep space for operators)
+        else if (!inCalc && (prevValue === '-' || value.endsWith('-')) && (token.type === TokenType.IDENT || token.type === TokenType.NUMBER || /^[a-zA-Z]/.test(tokenValue))) {
+          needsSpace = false;
+        }
+        // No space for -- (CSS custom property reference)
+        else if (prevValue === '-' && tokenValue === '-') {
+          needsSpace = false;
+        }
+        else if (prevValue === '--' || value.endsWith('--')) {
+          needsSpace = false;
+        }
+        // CSS unit after number
+        else if (cssUnits.has(tokenValue) && prevToken?.type === TokenType.NUMBER) {
+          needsSpace = false;
+        }
+        // Handle cases like preserve-3d where identifier follows number in hyphenated value
+        // Check if we're continuing a hyphenated identifier (value ends with number after hyphen)
+        else if (token.type === TokenType.IDENT && prevToken?.type === TokenType.NUMBER) {
+          // Check if the value looks like it's a hyphenated pattern: word-NUM + IDENT (e.g., preserve-3 + d, card-3 + d)
+          const hyphenNumberPattern = /-\d+$/;
+          if (hyphenNumberPattern.test(value)) {
+            needsSpace = false;
+          }
+        }
+      }
+
+      if (needsSpace) {
         value += ' ';
-        afterHash = false;  // Space ends hex collection
       }
 
       value += tokenValue;
-      lastTokenValue = tokenValue;
     }
+
     value = value.trim();
 
     if (this.is(TokenType.SEMICOLON)) {
@@ -2068,14 +2229,15 @@ export class Parser {
    */
   isPropertyStart() {
     // 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;
+    // CSS properties can be: margin, margin-bottom, -webkit-transform, --custom-prop, etc.
+    // Include MINUSMINUS for CSS custom properties (--var-name)
+    if (!this.is(TokenType.IDENT) && !this.is(TokenType.MINUS) && !this.is(TokenType.MINUSMINUS)) return false;
 
     let i = 0;
-    // Skip over property name tokens (IDENT and MINUS for hyphenated names)
+    // Skip over property name tokens (IDENT, MINUS, MINUSMINUS for hyphenated/custom props)
     while (this.peek(i)) {
       const token = this.peek(i);
-      if (token.type === TokenType.IDENT || token.type === TokenType.MINUS) {
+      if (token.type === TokenType.IDENT || token.type === TokenType.MINUS || token.type === TokenType.MINUSMINUS) {
         i++;
       } else {
         break;

package/compiler/transformer/style.js

@@ -45,51 +45,125 @@ export function transformStyle(transformer, styleBlock) {
   return lines.join('\n');
 }
 
+/**
+ * Check if a selector is an @-rule (media query, keyframes, etc.)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isAtRule(selector) {
+  return selector.trim().startsWith('@');
+}
+
+/**
+ * Check if a selector is @keyframes
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isKeyframesRule(selector) {
+  return selector.trim().startsWith('@keyframes');
+}
+
+/**
+ * Check if a selector is a keyframe step (from, to, or percentage)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isKeyframeStep(selector) {
+  const trimmed = selector.trim();
+  return trimmed === 'from' || trimmed === 'to' || /^\d+%$/.test(trimmed);
+}
+
 /**
  * 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.)
  * @param {Object} transformer - Transformer instance
  * @param {Object} rule - CSS rule from AST
  * @param {string} parentSelector - Parent selector to prepend (empty for top-level)
  * @param {Array<string>} output - Array to collect flattened CSS rules
+ * @param {string} atRuleWrapper - Optional @-rule wrapper (e.g., "@media (max-width: 768px)")
+ * @param {boolean} inKeyframes - Whether we're inside @keyframes (don't scope keyframe steps)
  */
-export function flattenStyleRule(transformer, rule, parentSelector, output) {
+export function flattenStyleRule(transformer, rule, parentSelector, output, atRuleWrapper = '', inKeyframes = false) {
+  const selector = rule.selector;
+
+  // Check if this is an @-rule
+  if (isAtRule(selector)) {
+    const isKeyframes = isKeyframesRule(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};`);
+        }
+        lines.push('    }');
+      }
+
+      lines.push('  }');
+      output.push(lines.join('\n'));
+      return;
+    }
+
+    // Other @-rules (@media, @supports) wrap their nested rules
+    for (const nested of rule.nestedRules) {
+      flattenStyleRule(transformer, nested, '', output, selector, false);
+    }
+    return;
+  }
+
   // Build the full selector by combining parent and current
-  let fullSelector = rule.selector;
+  let fullSelector = selector;
 
   if (parentSelector) {
     // Handle & (parent reference) in nested selectors
-    if (rule.selector.includes('&')) {
+    if (selector.includes('&')) {
       // Replace & with parent selector
-      fullSelector = rule.selector.replace(/&/g, parentSelector);
+      fullSelector = selector.replace(/&/g, parentSelector);
     } else {
       // Combine parent and child with space (descendant combinator)
-      fullSelector = `${parentSelector} ${rule.selector}`;
+      fullSelector = `${parentSelector} ${selector}`;
     }
   }
 
-  // Apply scope to selector if enabled
+  // Apply scope to selector if enabled (but not for keyframe steps)
   let scopedSelector = fullSelector;
-  if (transformer.scopeId) {
+  if (transformer.scopeId && !inKeyframes && !isKeyframeStep(selector)) {
     scopedSelector = scopeStyleSelector(transformer, fullSelector);
   }
 
   // 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(`    ${prop.name}: ${prop.value};`);
+    // If wrapped in an @-rule, output the wrapper
+    if (atRuleWrapper) {
+      lines.push(`  ${atRuleWrapper} {`);
+      lines.push(`    ${scopedSelector} {`);
+      for (const prop of rule.properties) {
+        lines.push(`      ${prop.name}: ${prop.value};`);
+      }
+      lines.push('    }');
+      lines.push('  }');
+    } else {
+      lines.push(`  ${scopedSelector} {`);
+      for (const prop of rule.properties) {
+        lines.push(`    ${prop.name}: ${prop.value};`);
+      }
+      lines.push('  }');
     }
 
-    lines.push('  }');
     output.push(lines.join('\n'));
   }
 
   // Recursively flatten nested rules with combined selector
   for (const nested of rule.nestedRules) {
-    flattenStyleRule(transformer, nested, fullSelector, output);
+    flattenStyleRule(transformer, nested, fullSelector, output, atRuleWrapper, inKeyframes);
   }
 }
 

package/loader/vite-plugin.js

@@ -2,32 +2,42 @@
  * Pulse Vite Plugin
  *
  * Enables .pulse file support in Vite projects
+ * Extracts CSS to virtual .css modules so Vite's CSS pipeline handles them
+ * (prevents JS minifier from corrupting CSS in template literals)
  */
 
 import { compile } from '../compiler/index.js';
 import { existsSync } from 'fs';
 import { resolve, dirname } from 'path';
 
+// Virtual module ID for extracted CSS (uses .css extension so Vite treats it as CSS)
+const VIRTUAL_CSS_SUFFIX = '.pulse.css';
+
 /**
  * Create Pulse Vite plugin
  */
 export default function pulsePlugin(options = {}) {
   const {
-    include = /\.pulse$/,
     exclude = /node_modules/,
     sourceMap = true
   } = options;
 
+  // Store extracted CSS for each .pulse module
+  const cssMap = new Map();
+
   return {
     name: 'vite-plugin-pulse',
     enforce: 'pre',
 
     /**
-     * Resolve .pulse files and .js imports that map to .pulse files
-     * The compiler transforms .pulse imports to .js, so we need to
-     * resolve them back to .pulse for Vite to process them
+     * Resolve .pulse files and virtual CSS modules
      */
     resolveId(id, importer) {
+      // Handle virtual CSS module resolution
+      if (id.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        return '\0' + id;
+      }
+
       // Direct .pulse imports - resolve to absolute path
       if (id.endsWith('.pulse') && importer) {
         const importerDir = dirname(importer);
@@ -38,7 +48,6 @@ export default function pulsePlugin(options = {}) {
       }
 
       // Check if a .js import has a corresponding .pulse file
-      // This handles the compiler's transformation of .pulse -> .js imports
       if (id.endsWith('.js') && importer) {
         const pulseId = id.replace(/\.js$/, '.pulse');
         const importerDir = dirname(importer);
@@ -52,8 +61,22 @@ export default function pulsePlugin(options = {}) {
       return null;
     },
 
+    /**
+     * Load virtual CSS modules
+     */
+    load(id) {
+      // Virtual modules start with \0
+      if (id.startsWith('\0') && id.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        const pulseId = id.slice(1, -VIRTUAL_CSS_SUFFIX.length + '.pulse'.length);
+        const css = cssMap.get(pulseId);
+        return css || '';
+      }
+      return null;
+    },
+
     /**
      * Transform .pulse files to JavaScript
+     * CSS is extracted to a virtual .css module that Vite processes separately
      */
     transform(code, id) {
       if (!id.endsWith('.pulse')) {
@@ -79,8 +102,27 @@ export default function pulsePlugin(options = {}) {
           return null;
         }
 
+        let outputCode = result.code;
+
+        // Extract CSS from compiled output and move to virtual CSS module
+        const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
+        if (stylesMatch) {
+          const css = stylesMatch[1];
+          const virtualCssId = id + '.css';
+
+          // Store CSS for the virtual module loader
+          cssMap.set(id, css);
+
+          // Replace inline style injection with CSS import
+          // Vite will process this through its CSS pipeline (not JS minifier)
+          outputCode = outputCode.replace(
+            /\/\/ Styles\nconst styles = `[\s\S]*?`;\n\/\/ Inject styles\nconst styleEl = document\.createElement\("style"\);\nstyleEl\.textContent = styles;\ndocument\.head\.appendChild\(styleEl\);/,
+            `// Styles extracted to virtual CSS module\nimport "${virtualCssId}";`
+          );
+        }
+
         return {
-          code: result.code,
+          code: outputCode,
           map: result.map || null
         };
       } catch (error) {
@@ -92,7 +134,7 @@ export default function pulsePlugin(options = {}) {
     /**
      * Handle hot module replacement
      */
-    handleHotUpdate({ file, server, modules }) {
+    handleHotUpdate({ file, server }) {
       if (file.endsWith('.pulse')) {
         console.log(`[Pulse] HMR update: ${file}`);
 
@@ -102,8 +144,14 @@ export default function pulsePlugin(options = {}) {
           server.moduleGraph.invalidateModule(module);
         }
 
+        // Also invalidate the associated virtual CSS module
+        const virtualCssId = '\0' + file + '.css';
+        const cssModule = server.moduleGraph.getModuleById(virtualCssId);
+        if (cssModule) {
+          server.moduleGraph.invalidateModule(cssModule);
+        }
+
         // Send HMR update instead of full reload
-        // The module will handle its own state preservation via hmrRuntime
         server.ws.send({
           type: 'update',
           updates: [{
@@ -123,7 +171,7 @@ export default function pulsePlugin(options = {}) {
      * Configure dev server
      */
     configureServer(server) {
-      server.middlewares.use((req, res, next) => {
+      server.middlewares.use((_req, _res, next) => {
         // Add any custom middleware here
         next();
       });
@@ -133,11 +181,8 @@ export default function pulsePlugin(options = {}) {
      * Build hooks
      */
     buildStart() {
-      console.log('[Pulse] Build started');
-    },
-
-    buildEnd() {
-      console.log('[Pulse] Build completed');
+      // Clear CSS map on new build
+      cssMap.clear();
     }
   };
 }
@@ -191,9 +236,9 @@ export const utils = {
   },
 
   /**
-   * Create a virtual module ID
+   * Get the virtual CSS module ID for a Pulse file
    */
-  createVirtualId(id) {
-    return `\0${id}`;
+  getVirtualCssId(id) {
+    return id + '.css';
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.22",
+  "version": "1.7.24",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",
@@ -109,9 +109,10 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:pulse && npm run test:dom && npm run test:dom-element && npm run test:dom-adapter && npm run test:enhanced-mock-adapter && npm run test:router && npm run test:store && npm run test:context && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:cli && npm run test:cli-ui && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:docs-nav && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:a11y-enhanced && npm run test:logger && npm run test:errors && npm run test:security && npm run test:websocket && npm run test:graphql && npm run test:doctor && npm run test:scaffold && npm run test:test-runner && npm run test:build && npm run test:integration && npm run test:context-stress && npm run test:form-edge-cases && npm run test:graphql-subscriptions && npm run test:http-edge-cases && npm run test:integration-advanced && npm run test:websocket-stress && npm run test:ssr",
+    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:css-parsing && npm run test:pulse && npm run test:dom && npm run test:dom-element && npm run test:dom-adapter && npm run test:enhanced-mock-adapter && npm run test:router && npm run test:store && npm run test:context && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:cli && npm run test:cli-ui && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:docs-nav && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:a11y-enhanced && npm run test:logger && npm run test:errors && npm run test:security && npm run test:websocket && npm run test:graphql && npm run test:doctor && npm run test:scaffold && npm run test:test-runner && npm run test:build && npm run test:integration && npm run test:context-stress && npm run test:form-edge-cases && npm run test:graphql-subscriptions && npm run test:http-edge-cases && npm run test:integration-advanced && npm run test:websocket-stress && npm run test:ssr",
     "test:compiler": "node test/compiler.test.js",
     "test:sourcemap": "node test/sourcemap.test.js",
+    "test:css-parsing": "node test/css-parsing.test.js",
     "test:pulse": "node test/pulse.test.js",
     "test:dom": "node test/dom.test.js",
     "test:dom-element": "node test/dom-element.test.js",