chaincss 2.4.0 → 2.4.1

package/dist/cli/index.js

@@ -276,11 +276,27 @@ function compileToCSS(styleObject, options = {}) {
     ...properties
   } = styleObject;
   const effectiveSelector = selectors?.join(", ") || scope;
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  const pseudoClasses = {};
+  const regularProps = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith("&:")) {
+      pseudoClasses[key.substring(1)] = value;
+    } else if (!key.startsWith("_")) {
+      regularProps[key] = value;
+    }
+  }
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile ? `/* ${options.sourceFile} */${newline}` : "";
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
     if (compiled) parts.push(compiled);
@@ -300,16 +316,6 @@ function compileDeclarations(properties, indent, options) {
   for (const [prop, value] of Object.entries(properties)) {
     if (prop.startsWith("_")) continue;
     if (typeof value === "function") continue;
-    if (prop.startsWith("&:")) {
-      const pseudo = prop.substring(1);
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
     if (typeof value === "object" && value !== null && !Array.isArray(value)) {
       continue;
     }

package/dist/compiler/index.js

@@ -1592,11 +1592,27 @@ function compileToCSS(styleObject, options = {}) {
     ...properties
   } = styleObject;
   const effectiveSelector = selectors?.join(", ") || scope;
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  const pseudoClasses = {};
+  const regularProps = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith("&:")) {
+      pseudoClasses[key.substring(1)] = value;
+    } else if (!key.startsWith("_")) {
+      regularProps[key] = value;
+    }
+  }
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile ? `/* ${options.sourceFile} */${newline}` : "";
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
     if (compiled) parts.push(compiled);
@@ -1616,16 +1632,6 @@ function compileDeclarations(properties, indent, options) {
   for (const [prop, value] of Object.entries(properties)) {
     if (prop.startsWith("_")) continue;
     if (typeof value === "function") continue;
-    if (prop.startsWith("&:")) {
-      const pseudo = prop.substring(1);
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
     if (typeof value === "object" && value !== null && !Array.isArray(value)) {
       continue;
     }

package/dist/index.js

@@ -1525,11 +1525,27 @@ function compileToCSS(styleObject, options = {}) {
     ...properties
   } = styleObject;
   const effectiveSelector = selectors?.join(", ") || scope;
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  const pseudoClasses = {};
+  const regularProps = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith("&:")) {
+      pseudoClasses[key.substring(1)] = value;
+    } else if (!key.startsWith("_")) {
+      regularProps[key] = value;
+    }
+  }
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile ? `/* ${options.sourceFile} */${newline}` : "";
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
     if (compiled) parts.push(compiled);
@@ -1549,16 +1565,6 @@ function compileDeclarations(properties, indent, options) {
   for (const [prop, value] of Object.entries(properties)) {
     if (prop.startsWith("_")) continue;
     if (typeof value === "function") continue;
-    if (prop.startsWith("&:")) {
-      const pseudo = prop.substring(1);
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
     if (typeof value === "object" && value !== null && !Array.isArray(value)) {
       continue;
     }

package/dist/plugins/vite.js

@@ -249,11 +249,27 @@ function compileToCSS(styleObject, options = {}) {
     ...properties
   } = styleObject;
   const effectiveSelector = selectors?.join(", ") || scope;
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  const pseudoClasses = {};
+  const regularProps = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith("&:")) {
+      pseudoClasses[key.substring(1)] = value;
+    } else if (!key.startsWith("_")) {
+      regularProps[key] = value;
+    }
+  }
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile ? `/* ${options.sourceFile} */${newline}` : "";
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
     if (compiled) parts.push(compiled);
@@ -273,16 +289,6 @@ function compileDeclarations(properties, indent, options) {
   for (const [prop, value] of Object.entries(properties)) {
     if (prop.startsWith("_")) continue;
     if (typeof value === "function") continue;
-    if (prop.startsWith("&:")) {
-      const pseudo = prop.substring(1);
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
     if (typeof value === "object" && value !== null && !Array.isArray(value)) {
       continue;
     }

package/dist/runtime/index.js

@@ -54,11 +54,27 @@ function compileToCSS(styleObject, options = {}) {
     ...properties
   } = styleObject;
   const effectiveSelector = selectors?.join(", ") || scope;
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  const pseudoClasses = {};
+  const regularProps = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith("&:")) {
+      pseudoClasses[key.substring(1)] = value;
+    } else if (!key.startsWith("_")) {
+      regularProps[key] = value;
+    }
+  }
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile ? `/* ${options.sourceFile} */${newline}` : "";
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
     if (compiled) parts.push(compiled);
@@ -78,16 +94,6 @@ function compileDeclarations(properties, indent, options) {
   for (const [prop, value] of Object.entries(properties)) {
     if (prop.startsWith("_")) continue;
     if (typeof value === "function") continue;
-    if (prop.startsWith("&:")) {
-      const pseudo = prop.substring(1);
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
     if (typeof value === "object" && value !== null && !Array.isArray(value)) {
       continue;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/style-compiler.ts

@@ -67,8 +67,19 @@ export function compileToCSS(
   // Use explicit selectors if provided, otherwise use scopeSelector
   const effectiveSelector = selectors?.join(', ') || scope;
   
-  // Generate main declarations
-  const mainDeclarations = compileDeclarations(properties, indent, options);
+  // Separate pseudo-classes (&:hover, &:focus) from regular properties
+  const pseudoClasses: Record<string, Record<string, any>> = {};
+  const regularProps: Record<string, any> = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (key.startsWith('&:')) {
+      pseudoClasses[key.substring(1)] = value as Record<string, any>; // :hover, :focus
+    } else if (!key.startsWith('_')) {
+      regularProps[key] = value;
+    }
+  }
+  
+  // Generate main declarations (without pseudo-classes)
+  const mainDeclarations = compileDeclarations(regularProps, indent, options);
   
   if (mainDeclarations.length > 0 && effectiveSelector) {
     const source = options.sourceMap && options.sourceFile
@@ -77,6 +88,15 @@ export function compileToCSS(
     parts.push(`${source}${effectiveSelector} {${newline}${mainDeclarations.join(newline)}${newline}}`);
   }
   
+  // Generate pseudo-class rules as separate selectors
+  for (const [pseudo, pseudoStyles] of Object.entries(pseudoClasses)) {
+    const pseudoSelector = `${effectiveSelector}${pseudo}`;
+    const pseudoDeclarations = compileDeclarations(pseudoStyles, indent, options);
+    if (pseudoDeclarations.length > 0) {
+      parts.push(`${pseudoSelector} {${newline}${pseudoDeclarations.join(newline)}${newline}}`);
+    }
+  }
+  
   // Process at-rules
   for (const rule of _atRules) {
     const compiled = compileAtRule(rule, effectiveSelector, indent, newline, options);
@@ -116,21 +136,9 @@ function compileDeclarations(
     // Skip functions (can't compile to static CSS)
     if (typeof value === 'function') continue;
     
-    // Handle pseudo-classes (&:hover, &:focus, etc.)
-    if (prop.startsWith('&:')) {
-      const pseudo = prop.substring(1); // :hover
-      const pseudoLines = compileDeclarations(value, indent + indent, options);
-      if (pseudoLines.length > 0) {
-        lines.push(`${indent}${pseudo} {`);
-        lines.push(...pseudoLines);
-        lines.push(`${indent}}`);
-      }
-      continue;
-    }
-    
     // Handle nested objects (could be nested pseudo-elements)
     if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-      // Skip — handled by nested rules
+      // Skip — handled by nested rules or pseudo-class extraction
       continue;
     }