pulse-js-framework 1.7.21 → 1.7.23

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,28 +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;
-
-        const needsSpace = !noSpaceAfter.includes(lastPart) &&
-                          !noSpaceBefore.includes(tokenValue) ||
+                                     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)
+        // 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) {
@@ -1670,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();
@@ -1700,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;
+        }
+      }
+
+      // 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;
+          }
         }
       }
 
-      // 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) {
+      if (needsSpace) {
         value += ' ';
-        afterHash = false;  // Space ends hex collection
       }
 
       value += tokenValue;
-      lastTokenValue = tokenValue;
     }
+
     value = value.trim();
 
     if (this.is(TokenType.SEMICOLON)) {
@@ -2061,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.21",
+  "version": "1.7.23",
   "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",