chaincss 2.4.0 → 2.4.2

package/dist/browser.js

@@ -254,16 +254,18 @@ var macros = {
   relative: (v, c) => handlePosition("relative", v, c),
   // --- Shapes & Content ---
   circle: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.borderRadius = "50%";
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";
   },
   square: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";

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,21 +316,15 @@ 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;
     }
     const cssProp = camelToKebab(prop);
-    lines.push(`${indent}${cssProp}: ${value};`);
+    let finalValue = value;
+    if (typeof value === "number" && ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProp)) {
+      finalValue = value + "px";
+    }
+    lines.push(`${indent}${cssProp}: ${finalValue};`);
   }
   return lines;
 }

package/dist/compiler/index.js

@@ -278,16 +278,18 @@ var macros = {
   relative: (v, c) => handlePosition("relative", v, c),
   // --- Shapes & Content ---
   circle: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.borderRadius = "50%";
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";
   },
   square: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";
@@ -1592,11 +1594,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,21 +1634,15 @@ 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;
     }
     const cssProp = camelToKebab(prop);
-    lines.push(`${indent}${cssProp}: ${value};`);
+    let finalValue = value;
+    if (typeof value === "number" && ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProp)) {
+      finalValue = value + "px";
+    }
+    lines.push(`${indent}${cssProp}: ${finalValue};`);
   }
   return lines;
 }

package/dist/index.js

@@ -237,16 +237,18 @@ var macros = {
   relative: (v, c) => handlePosition("relative", v, c),
   // --- Shapes & Content ---
   circle: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.borderRadius = "50%";
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";
   },
   square: (v, c) => {
-    c.width = v;
-    c.height = v;
+    const val = typeof v === "number" ? `${v}px` : v;
+    c.width = val;
+    c.height = val;
     c.display = "flex";
     c.alignItems = "center";
     c.justifyContent = "center";
@@ -1525,11 +1527,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,21 +1567,15 @@ 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;
     }
     const cssProp = camelToKebab(prop);
-    lines.push(`${indent}${cssProp}: ${value};`);
+    let finalValue = value;
+    if (typeof value === "number" && ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProp)) {
+      finalValue = value + "px";
+    }
+    lines.push(`${indent}${cssProp}: ${finalValue};`);
   }
   return lines;
 }

package/dist/plugins/vite-chain.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function chainCSSPlugin(): Plugin;

package/dist/plugins/vite.d.ts

@@ -1,13 +1,5 @@
 import { Plugin } from 'vite';
 export interface ChainCSSPluginOptions {
-    atomic?: boolean;
-    minify?: boolean;
     verbose?: boolean;
-    hmr?: boolean;
-    injectGlobal?: boolean;
-    cssOutput?: string;
-    manifestOutput?: string;
-    include?: string[];
-    exclude?: string[];
 }
 export default function chaincssPlugin(options?: ChainCSSPluginOptions): Plugin;