@cssxio/react-native 0.3.0 → 0.3.3

package/dist/babel.cjs

@@ -230,11 +230,40 @@ function nativeValue(value, candidate) {
   if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
     return important;
   }
+  const oklch = oklchToSrgbHex(important);
+  if (oklch) {
+    return oklch;
+  }
   if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
     throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
   }
   return important;
 }
+function oklchToSrgbHex(value) {
+  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
+  if (!match) {
+    return null;
+  }
+  const lightness = Number(match[1]) / 100;
+  const chroma = Number(match[2]);
+  const hue = Number(match[3]) * Math.PI / 180;
+  const a = chroma * Math.cos(hue);
+  const b = chroma * Math.sin(hue);
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const channels = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  const hex = channels.map((channel) => {
+    const bounded = Math.max(0, Math.min(1, channel));
+    const srgb = bounded <= 31308e-7 ? 12.92 * bounded : 1.055 * bounded ** (1 / 2.4) - 0.055;
+    return Math.round(srgb * 255).toString(16).padStart(2, "0");
+  }).join("");
+  return `#${hex}`;
+}
 
 // src/babel.ts
 function cssxReactNativeBabelPlugin(api, options = {}) {

package/dist/babel.js

@@ -1,6 +1,6 @@
 import {
   create
-} from "./chunk-P3KGLFG3.js";
+} from "./chunk-7REDTOKV.js";
 
 // src/babel.ts
 function cssxReactNativeBabelPlugin(api, options = {}) {

package/dist/{chunk-P3KGLFG3.js → chunk-7REDTOKV.js}

@@ -251,11 +251,40 @@ function nativeValue(value, candidate) {
   if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
     return important;
   }
+  const oklch = oklchToSrgbHex(important);
+  if (oklch) {
+    return oklch;
+  }
   if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
     throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
   }
   return important;
 }
+function oklchToSrgbHex(value) {
+  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
+  if (!match) {
+    return null;
+  }
+  const lightness = Number(match[1]) / 100;
+  const chroma = Number(match[2]);
+  const hue = Number(match[3]) * Math.PI / 180;
+  const a = chroma * Math.cos(hue);
+  const b = chroma * Math.sin(hue);
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const channels = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  const hex = channels.map((channel) => {
+    const bounded = Math.max(0, Math.min(1, channel));
+    const srgb = bounded <= 31308e-7 ? 12.92 * bounded : 1.055 * bounded ** (1 / 2.4) - 0.055;
+    return Math.round(srgb * 255).toString(16).padStart(2, "0");
+  }).join("");
+  return `#${hex}`;
+}
 
 export {
   create,

package/dist/index.cjs

@@ -277,11 +277,40 @@ function nativeValue(value, candidate) {
   if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
     return important;
   }
+  const oklch = oklchToSrgbHex(important);
+  if (oklch) {
+    return oklch;
+  }
   if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
     throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
   }
   return important;
 }
+function oklchToSrgbHex(value) {
+  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
+  if (!match) {
+    return null;
+  }
+  const lightness = Number(match[1]) / 100;
+  const chroma = Number(match[2]);
+  const hue = Number(match[3]) * Math.PI / 180;
+  const a = chroma * Math.cos(hue);
+  const b = chroma * Math.sin(hue);
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const channels = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  const hex = channels.map((channel) => {
+    const bounded = Math.max(0, Math.min(1, channel));
+    const srgb = bounded <= 31308e-7 ? 12.92 * bounded : 1.055 * bounded ** (1 / 2.4) - 0.055;
+    return Math.round(srgb * 255).toString(16).padStart(2, "0");
+  }).join("");
+  return `#${hex}`;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   create,

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   create,
   props,
   sx
-} from "./chunk-P3KGLFG3.js";
+} from "./chunk-7REDTOKV.js";
 export {
   create,
   props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxio/react-native",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "CSSX utility styling runtime and compiler transform for React Native and Expo.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@cssxio/compiler": "^0.2.0"
+    "@cssxio/compiler": "^0.5.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.0"