@tokens-studio/tokenscript-schemas 0.0.13 → 0.1.0

package/src/cli/commands/presets.ts

@@ -0,0 +1,81 @@
+/**
+ * Presets command - list available bundle presets
+ */
+
+/// <reference types="../../../types/ulog" />
+
+import anylogger from "ulog";
+import { BUNDLE_PRESETS } from "@/bundler/presets/index";
+
+const log = anylogger("presets");
+
+/**
+ * Format preset information for display
+ */
+function formatPresetInfo(): string {
+  const lines: string[] = [];
+
+  lines.push("=".repeat(60));
+  lines.push("Available Bundle Presets");
+  lines.push("=".repeat(60));
+
+  for (const [key, preset] of Object.entries(BUNDLE_PRESETS)) {
+    lines.push("");
+    lines.push(`preset:${key}`);
+    lines.push(`  ${preset.description}`);
+
+    // Types section
+    const typesCount =
+      preset.types.length === 1 && preset.types[0] === "*" ? "all" : preset.types.length;
+    lines.push("");
+    lines.push(`  Types (${typesCount}):`);
+    if (preset.types.length > 0 && preset.types[0] !== "*") {
+      for (const type of preset.types) {
+        lines.push(`    - ${type}`);
+      }
+    } else {
+      lines.push(`    - all`);
+    }
+
+    // Functions section
+    const functionsCount =
+      preset.functions.length === 1 && preset.functions[0] === "*"
+        ? "all"
+        : preset.functions.length;
+    lines.push("");
+    lines.push(`  Functions (${functionsCount}):`);
+    if (preset.functions.length > 0 && preset.functions[0] !== "*") {
+      for (const func of preset.functions) {
+        lines.push(`    - ${func}`);
+      }
+    } else {
+      lines.push(`    - all`);
+    }
+  }
+
+  lines.push("");
+  lines.push("=".repeat(60));
+  lines.push("Usage Examples:");
+  lines.push("=".repeat(60));
+  lines.push("npx tokenscript-schemas bundle preset:css");
+  lines.push("npx tokenscript-schemas bundle preset:css type:oklab-color");
+  lines.push("npx tokenscript-schemas bundle type:hex-color function:lighten");
+  lines.push("");
+  lines.push("Note: You can combine multiple presets and specific schemas!");
+
+  return lines.join("\n");
+}
+
+export async function handlePresetsCommand(): Promise<void> {
+  try {
+    log.info("Listing available presets");
+
+    const output = formatPresetInfo();
+    console.log(output);
+
+    log.info(`Listed ${Object.keys(BUNDLE_PRESETS).length} presets`);
+  } catch (error) {
+    log.error("Failed to list presets:", error);
+    throw error;
+  }
+}

package/src/cli/index.ts

@@ -10,6 +10,7 @@ import cac from "cac";
 import anylogger from "ulog";
 import { type BundleOptions, handleBundleCommand } from "./commands/bundle.js";
 import { handleListCommand, type ListOptions } from "./commands/list.js";
+import { handlePresetsCommand } from "./commands/presets.js";
 
 const log = anylogger("cli");
 
@@ -44,7 +45,17 @@ cli
     }
   });
 
+// Presets command
+cli.command("presets", "List available bundle presets").action(async () => {
+  try {
+    await handlePresetsCommand();
+  } catch (error) {
+    log.error("Error:", error);
+    process.exit(1);
+  }
+});
+
 cli.help();
-cli.version("0.0.13");
+cli.version("0.0.14");
 
 cli.parse();

package/src/cli/output-generator.ts

@@ -3,10 +3,12 @@
  */
 
 import type { BundledSchemaEntry } from "@/bundler/selective-bundler.js";
+import { getVersionInfo } from "./version-info.js";
 
 export interface OutputGeneratorOptions {
   schemas: BundledSchemaEntry[];
   includeHelper?: boolean; // Include makeConfig() helper
+  generatedBy?: string; // CLI command used to generate
 }
 
 /**
@@ -16,14 +18,18 @@ export function generateOutput(options: OutputGeneratorOptions): string {
   const { schemas, includeHelper = true } = options;
 
   const timestamp = new Date().toISOString();
-  const schemaList = schemas.map((s) => s.uri).join(", ");
+  const versionInfo = getVersionInfo();
 
   const lines: string[] = [];
 
   // Header comment
   lines.push("// Auto-generated by @tokens-studio/tokenscript-schemas");
+  lines.push(`// Version: ${versionInfo.version}`);
+  lines.push(`// GitHub: ${versionInfo.githubUrl}`);
+  if (options.generatedBy) {
+    lines.push(`// Command: ${options.generatedBy}`);
+  }
   lines.push(`// Generated: ${timestamp}`);
-  lines.push(`// Schemas: ${schemaList}`);
   lines.push("");
 
   // Import statement

package/src/cli/version-info.ts

@@ -0,0 +1,93 @@
+/**
+ * Get version information for the bundled output
+ */
+
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export interface VersionInfo {
+  version: string; // Package version or git SHA
+  githubUrl: string;
+  isLocal: boolean; // true if running from local repo (not published package)
+}
+
+/**
+ * Get the current git SHA
+ */
+function getGitSha(): string | null {
+  try {
+    return execSync("git rev-parse --short HEAD", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "ignore"],
+    }).trim();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if we're running from a local git repo
+ */
+function isGitRepo(): boolean {
+  try {
+    execSync("git rev-parse --git-dir", {
+      stdio: ["pipe", "pipe", "ignore"],
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get version from package.json
+ */
+function getPackageVersion(): string {
+  try {
+    // Try multiple paths for package.json
+    const paths = [
+      join(__dirname, "../../package.json"), // From src/cli
+      join(__dirname, "../../../package.json"), // From dist/cli
+    ];
+
+    for (const path of paths) {
+      try {
+        const pkg = JSON.parse(readFileSync(path, "utf-8"));
+        return pkg.version || "unknown";
+      } catch {
+        // Try next path
+      }
+    }
+
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+/**
+ * Get version information for the bundle
+ */
+export function getVersionInfo(): VersionInfo {
+  const githubUrl = "https://github.com/tokens-studio/tokenscript-schemas";
+  const isLocal = isGitRepo();
+
+  let version: string;
+  if (isLocal) {
+    const sha = getGitSha();
+    version = sha ? `local-${sha}` : "local";
+  } else {
+    version = getPackageVersion();
+  }
+
+  return {
+    version,
+    githubUrl,
+    isLocal,
+  };
+}

package/src/schemas/types/css-color/from-hsl-color.tokenscript

@@ -1,16 +1,29 @@
 // HSL to CSS Conversion
 // Converts HSL to CSS hsl() syntax
-// CSS Color Level 4: hsl(h s l) where s and l are percentages
+// CSS Color Level 4: hsl(h s l) or hsl(h s l / alpha) where s and l are percentages
 //
-// Input: Color.HSL with h (0-360), s (0-1), l (0-1)
-// Output: Color.CSS with value like "hsl(120 50% 75%)"
+// Input: Color.HSL with h (0-360), s (0-1), l (0-1), optional alpha (0-1)
+// Output: Color.CSS with value like "hsl(120 50% 75%)" or "hsl(120 50% 75% / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100;
 variable h: Number = round({input}.h * precision) / precision;
 variable s: Number = round({input}.s * 100 * precision) / precision;
 variable l: Number = round({input}.l * 100 * precision) / precision;
 
+variable css_value: String = "hsl(".concat(h.to_string()).concat(" ").concat(s.to_string()).concat("% ").concat(l.to_string()).concat("%");
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "hsl(".concat(h.to_string()).concat(" ").concat(s.to_string()).concat("% ").concat(l.to_string()).concat("%)");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-hwb-color.tokenscript

@@ -1,16 +1,29 @@
 // HWB to CSS Conversion
 // Converts HWB to CSS hwb() syntax
-// CSS Color Level 4: hwb(h w b) where w and b are percentages
+// CSS Color Level 4: hwb(h w b) or hwb(h w b / alpha) where w and b are percentages
 //
-// Input: Color.HWB with h (0-360), w (0-1), b (0-1)
-// Output: Color.CSS with value like "hwb(120 10% 20%)"
+// Input: Color.HWB with h (0-360), w (0-1), b (0-1), optional alpha (0-1)
+// Output: Color.CSS with value like "hwb(120 10% 20%)" or "hwb(120 10% 20% / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100;
 variable h: Number = round({input}.h * precision) / precision;
 variable w: Number = round({input}.w * 100 * precision) / precision;
 variable b_val: Number = round({input}.b * 100 * precision) / precision;
 
+variable css_value: String = "hwb(".concat(h.to_string()).concat(" ").concat(w.to_string()).concat("% ").concat(b_val.to_string()).concat("%");
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "hwb(".concat(h.to_string()).concat(" ").concat(w.to_string()).concat("% ").concat(b_val.to_string()).concat("%)");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-lab-color.tokenscript

@@ -1,16 +1,29 @@
 // CIE Lab to CSS Conversion
 // Converts CIE Lab to CSS lab() syntax
-// CSS Color Level 4: lab(L a b) where L is a percentage
+// CSS Color Level 4: lab(L a b) or lab(L a b / alpha) where L is a percentage
 //
-// Input: Color.Lab with l (0-100), a, b
-// Output: Color.CSS with value like "lab(75% 20 -30)"
+// Input: Color.Lab with l (0-100), a, b, optional alpha (0-1)
+// Output: Color.CSS with value like "lab(75% 20 -30)" or "lab(75% 20 -30 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 10000;
 variable l: Number = round({input}.l * precision) / precision;
 variable a: Number = round({input}.a * precision) / precision;
 variable b_val: Number = round({input}.b * precision) / precision;
 
+variable css_value: String = "lab(".concat(l.to_string()).concat("% ").concat(a.to_string()).concat(" ").concat(b_val.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "lab(".concat(l.to_string()).concat("% ").concat(a.to_string()).concat(" ").concat(b_val.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-lch-color.tokenscript

@@ -1,16 +1,29 @@
 // CIE LCH to CSS Conversion
 // Converts CIE LCH to CSS lch() syntax
-// CSS Color Level 4: lch(L C H) where L is a percentage
+// CSS Color Level 4: lch(L C H) or lch(L C H / alpha) where L is a percentage
 //
-// Input: Color.LCH with l (0-100), c, h (0-360)
-// Output: Color.CSS with value like "lch(75% 50 180)"
+// Input: Color.LCH with l (0-100), c, h (0-360), optional alpha (0-1)
+// Output: Color.CSS with value like "lch(75% 50 180)" or "lch(75% 50 180 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 10000;
 variable l: Number = round({input}.l * precision) / precision;
 variable c: Number = round({input}.c * precision) / precision;
 variable h: Number = round({input}.h * precision) / precision;
 
+variable css_value: String = "lch(".concat(l.to_string()).concat("% ").concat(c.to_string()).concat(" ").concat(h.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "lch(".concat(l.to_string()).concat("% ").concat(c.to_string()).concat(" ").concat(h.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-oklab-color.tokenscript

@@ -1,16 +1,29 @@
 // OKLab to CSS Conversion
 // Converts OKLab to CSS oklab() syntax
-// CSS Color Level 4: oklab(L a b) where L is 0-1 decimal
+// CSS Color Level 4: oklab(L a b) or oklab(L a b / alpha) where L is 0-1 decimal
 //
-// Input: Color.OKLab with l (0-1), a, b
-// Output: Color.CSS with value like "oklab(0.7 0.1 -0.05)"
+// Input: Color.OKLab with l (0-1), a, b, optional alpha (0-1)
+// Output: Color.CSS with value like "oklab(0.7 0.1 -0.05)" or "oklab(0.7 0.1 -0.05 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable l: Number = round({input}.l * precision) / precision;
 variable a: Number = round({input}.a * precision) / precision;
 variable b_val: Number = round({input}.b * precision) / precision;
 
+variable css_value: String = "oklab(".concat(l.to_string()).concat(" ").concat(a.to_string()).concat(" ").concat(b_val.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "oklab(".concat(l.to_string()).concat(" ").concat(a.to_string()).concat(" ").concat(b_val.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-oklch-color.tokenscript

@@ -1,16 +1,29 @@
 // OKLCH to CSS Conversion
 // Converts OKLCH to CSS oklch() syntax
-// CSS Color Level 4: oklch(L C H) where L is 0-1 decimal
+// CSS Color Level 4: oklch(L C H) or oklch(L C H / alpha) where L is 0-1 decimal
 //
-// Input: Color.OKLCH with l (0-1), c, h (0-360)
-// Output: Color.CSS with value like "oklch(0.7 0.15 180)"
+// Input: Color.OKLCH with l (0-1), c, h (0-360), optional alpha (0-1)
+// Output: Color.CSS with value like "oklch(0.7 0.15 180)" or "oklch(0.7 0.15 180 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable l: Number = round({input}.l * precision) / precision;
 variable c: Number = round({input}.c * precision) / precision;
 variable h: Number = round({input}.h * precision) / precision;
 
+variable css_value: String = "oklch(".concat(l.to_string()).concat(" ").concat(c.to_string()).concat(" ").concat(h.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "oklch(".concat(l.to_string()).concat(" ").concat(c.to_string()).concat(" ").concat(h.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-p3-color.tokenscript

@@ -1,16 +1,29 @@
 // Display-P3 to CSS Conversion
 // Converts Display-P3 to CSS color(display-p3) syntax
-// CSS Color Level 4: color(display-p3 r g b)
+// CSS Color Level 4: color(display-p3 r g b) or color(display-p3 r g b / alpha)
 //
-// Input: Color.P3 with r, g, b in 0-1 range
-// Output: Color.CSS with value like "color(display-p3 1 0.5 0.25)"
+// Input: Color.P3 with r, g, b in 0-1 range, optional alpha (0-1)
+// Output: Color.CSS with value like "color(display-p3 1 0.5 0.25)" or "color(display-p3 1 0.5 0.25 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable r: Number = round({input}.r * precision) / precision;
 variable g: Number = round({input}.g * precision) / precision;
 variable b: Number = round({input}.b * precision) / precision;
 
+variable css_value: String = "color(display-p3 ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "color(display-p3 ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-rgb-color.tokenscript

@@ -1,15 +1,28 @@
 // RGB to CSS Conversion
 // Converts RGB (0-255) to CSS rgb() syntax
-// CSS Color Level 4 modern syntax: rgb(r g b)
+// CSS Color Level 4 modern syntax: rgb(r g b) or rgb(r g b / alpha)
 //
-// Input: Color.Rgb with r, g, b in 0-255 range
-// Output: Color.CSS with value like "rgb(255 128 64)"
+// Input: Color.Rgb with r, g, b in 0-255 range, optional alpha (0-1)
+// Output: Color.CSS with value like "rgb(255 128 64)" or "rgb(255 128 64 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable r: Number = round({input}.r);
 variable g: Number = round({input}.g);
 variable b: Number = round({input}.b);
 
+variable css_value: String = "rgb(".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "rgb(".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-srgb-color.tokenscript

@@ -1,16 +1,29 @@
 // sRGB to CSS Conversion
 // Converts sRGB (0-1) to CSS color(srgb) syntax
-// CSS Color Level 4: color(srgb r g b)
+// CSS Color Level 4: color(srgb r g b) or color(srgb r g b / alpha)
 //
-// Input: Color.SRGB with r, g, b in 0-1 range
-// Output: Color.CSS with value like "color(srgb 1 0.5 0.25)"
+// Input: Color.SRGB with r, g, b in 0-1 range, optional alpha (0-1)
+// Output: Color.CSS with value like "color(srgb 1 0.5 0.25)" or "color(srgb 1 0.5 0.25 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable r: Number = round({input}.r * precision) / precision;
 variable g: Number = round({input}.g * precision) / precision;
 variable b: Number = round({input}.b * precision) / precision;
 
+variable css_value: String = "color(srgb ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "color(srgb ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-xyz-d50-color.tokenscript

@@ -1,16 +1,29 @@
 // XYZ-D50 to CSS Conversion
 // Converts XYZ-D50 to CSS color(xyz-d50) syntax
-// CSS Color Level 4: color(xyz-d50 x y z)
+// CSS Color Level 4: color(xyz-d50 x y z) or color(xyz-d50 x y z / alpha)
 //
-// Input: Color.XYZD50 with x, y, z tristimulus values
-// Output: Color.CSS with value like "color(xyz-d50 0.4360 0.2225 0.0139)"
+// Input: Color.XYZD50 with x, y, z tristimulus values, optional alpha (0-1)
+// Output: Color.CSS with value like "color(xyz-d50 0.4360 0.2225 0.0139)" or "color(xyz-d50 0.4360 0.2225 0.0139 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable x: Number = round({input}.x * precision) / precision;
 variable y: Number = round({input}.y * precision) / precision;
 variable z: Number = round({input}.z * precision) / precision;
 
+variable css_value: String = "color(xyz-d50 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "color(xyz-d50 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string()).concat(")");
+output.value = css_value;
 return output;
 

package/src/schemas/types/css-color/from-xyz-d65-color.tokenscript

@@ -1,16 +1,29 @@
 // XYZ-D65 to CSS Conversion
 // Converts XYZ-D65 to CSS color(xyz-d65) syntax
-// CSS Color Level 4: color(xyz-d65 x y z) or color(xyz x y z)
+// CSS Color Level 4: color(xyz-d65 x y z) or color(xyz-d65 x y z / alpha)
 //
-// Input: Color.XYZD65 with x, y, z tristimulus values
-// Output: Color.CSS with value like "color(xyz-d65 0.4124 0.2126 0.0193)"
+// Input: Color.XYZD65 with x, y, z tristimulus values, optional alpha (0-1)
+// Output: Color.CSS with value like "color(xyz-d65 0.4124 0.2126 0.0193)" or "color(xyz-d65 0.4124 0.2126 0.0193 / 0.5)"
+// Note: Alpha is omitted if null or 1.0 (fully opaque)
 
 variable precision: Number = 100000;
 variable x: Number = round({input}.x * precision) / precision;
 variable y: Number = round({input}.y * precision) / precision;
 variable z: Number = round({input}.z * precision) / precision;
 
+variable css_value: String = "color(xyz-d65 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string());
+
+// Add alpha if present, not null, and not 1.0 (per CSS convention)
+variable alpha: Number = {input}.alpha;
+if (alpha != null) [
+  if (alpha != 1) [
+    css_value = css_value.concat(" / ").concat(alpha.to_string());
+  ];
+];
+
+css_value = css_value.concat(")");
+
 variable output: Color.CSS;
-output.value = "color(xyz-d65 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string()).concat(")");
+output.value = css_value;
 return output;