@cssxio/react-native 0.3.4 → 0.5.0

package/dist/babel.cjs

@@ -24,8 +24,114 @@ __export(babel_exports, {
 });
 module.exports = __toCommonJS(babel_exports);
 
-// src/index.ts
+// src/create.ts
+var import_compiler2 = require("@cssxio/compiler");
+
+// src/compile-candidates.ts
 var import_compiler = require("@cssxio/compiler");
+
+// src/oklch-to-srgb-hex.ts
+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.2158037574 * 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
+  ];
+  return `#${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("")}`;
+}
+
+// src/native-values.ts
+function nativeValue(value, candidate) {
+  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
+  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
+  if (calculation) {
+    return Number(calculation[1]) * 16 * Number(calculation[2]);
+  }
+  const rem = /^(-?[\d.]+)rem$/.exec(important);
+  if (rem) {
+    return Number(rem[1]) * 16;
+  }
+  const pixels = /^(-?[\d.]+)px$/.exec(important);
+  if (pixels) {
+    return Number(pixels[1]);
+  }
+  if (/^-?[\d.]+$/.test(important)) {
+    return Number(important);
+  }
+  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;
+}
+
+// src/append-custom-transform.ts
+function appendCustomTransform(style, property, value, candidate) {
+  const transformProperty = {
+    "--cssx-rotate": "rotate",
+    "--cssx-scale-x": "scaleX",
+    "--cssx-scale-y": "scaleY",
+    "--cssx-translate-x": "translateX",
+    "--cssx-translate-y": "translateY"
+  };
+  const nativeProperty = transformProperty[property];
+  if (!nativeProperty) {
+    return false;
+  }
+  style.transform = [
+    ...style.transform ?? [],
+    { [nativeProperty]: nativeValue(value, candidate) }
+  ];
+  return true;
+}
+
+// src/append-transform.ts
+function appendTransform(style, property, value) {
+  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
+    return true;
+  }
+  let transforms;
+  if (property === "translate") {
+    const x = value.split(" ", 1).join("");
+    const [y = "0"] = value.split(" ").slice(1);
+    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
+  } else if (property === "rotate") {
+    transforms = [{ rotate: value }];
+  } else if (property === "scale") {
+    const x = value.split(" ", 1).join("");
+    const [y = x] = value.split(" ").slice(1);
+    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+  }
+  if (!transforms) {
+    return false;
+  }
+  style.transform = [...style.transform ?? [], ...transforms];
+  return true;
+}
+
+// src/native-properties.ts
 var propertyNames = {
   "align-content": "alignContent",
   "align-items": "alignItems",
@@ -98,42 +204,8 @@ var logicalProperties = {
   "padding-block": ["paddingTop", "paddingBottom"],
   "padding-inline": ["paddingLeft", "paddingRight"]
 };
-function create(styles, options = {}) {
-  const records = (0, import_compiler.compileStyleRecords)(styles, { theme: options.theme });
-  const theme = (0, import_compiler.parseTheme)(options.theme);
-  return Object.fromEntries(
-    Object.entries(records.candidates).map(([name, candidates]) => [
-      name,
-      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
-    ])
-  );
-}
-function compileCandidates(candidates, theme, platform) {
-  const style = {};
-  for (const source of candidates) {
-    const candidate = platformCandidate(source, platform);
-    if (candidate === null) {
-      continue;
-    }
-    const recipe = (0, import_compiler.describeUtilityRecipe)(candidate, theme);
-    for (const atom of recipe.atoms) {
-      for (const declaration of atom) {
-        appendDeclaration(style, candidate, declaration);
-      }
-    }
-  }
-  return style;
-}
-function platformCandidate(source, platform) {
-  const match = /^(ios|android):(.*)$/.exec(source);
-  if (match) {
-    return match[1] === platform ? match[2] : null;
-  }
-  if (!source.startsWith("[") && source.includes(":")) {
-    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
-  }
-  return source;
-}
+
+// src/append-declaration.ts
 function appendDeclaration(style, candidate, declaration) {
   if (declaration.selectorSuffix || declaration.atRule) {
     throw new Error(`CSSX React Native cannot represent browser-only utility "${candidate}".`);
@@ -165,128 +237,51 @@ function appendDeclaration(style, candidate, declaration) {
   if (property === "overflow" && value !== "visible" && value !== "hidden") {
     throw new Error(`CSSX React Native cannot represent overflow value "${String(value)}" from "${candidate}".`);
   }
-  if (property === "flex" && typeof value === "string") {
-    style[property] = Number.parseFloat(value);
-    return;
-  }
-  style[property] = value;
-}
-function appendTransform(style, property, value) {
-  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
-    return true;
-  }
-  let transforms;
-  if (property === "translate") {
-    const [x = "0", y = "0"] = value.split(" ");
-    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
-  } else if (property === "rotate") {
-    transforms = [{ rotate: value }];
-  } else if (property === "scale") {
-    const [x = "1", y = x] = value.split(" ");
-    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
-  }
-  if (!transforms) {
-    return false;
-  }
-  style.transform = [...style.transform ?? [], ...transforms];
-  return true;
+  style[property] = property === "flex" && typeof value === "string" ? Number.parseFloat(value) : value;
 }
-function appendCustomTransform(style, property, value, candidate) {
-  const transformProperty = {
-    "--cssx-rotate": "rotate",
-    "--cssx-scale-x": "scaleX",
-    "--cssx-scale-y": "scaleY",
-    "--cssx-translate-x": "translateX",
-    "--cssx-translate-y": "translateY"
-  };
-  const nativeProperty = transformProperty[property];
-  if (!nativeProperty) {
-    return false;
-  }
-  const native = nativeValue(value, candidate);
-  style.transform = [
-    ...style.transform ?? [],
-    { [nativeProperty]: native }
-  ];
-  return true;
-}
-function nativeValue(value, candidate) {
-  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
-  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
-  if (calculation) {
-    return Number(calculation[1]) * 16 * Number(calculation[2]);
-  }
-  const rem = /^(-?[\d.]+)rem$/.exec(important);
-  if (rem) {
-    return Number(rem[1]) * 16;
-  }
-  const pixels = /^(-?[\d.]+)px$/.exec(important);
-  if (pixels) {
-    return Number(pixels[1]);
-  }
-  if (/^-?[\d.]+$/.test(important)) {
-    return Number(important);
-  }
-  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.`);
+
+// src/platform-candidate.ts
+function platformCandidate(source, platform) {
+  const match = /^(ios|android):(.*)$/.exec(source);
+  if (match) {
+    return match[1] === platform ? match[2] : null;
   }
-  return important;
-}
-function oklchToSrgbHex(value) {
-  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
-  if (!match) {
-    return null;
+  if (!source.startsWith("[") && source.includes(":")) {
+    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
   }
-  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}`;
+  return source;
 }
 
-// src/babel.ts
-function cssxReactNativeBabelPlugin(api, options = {}) {
-  api.assertVersion(7);
-  const types = api.types;
-  const importSource = options.importSource ?? "@cssxio/react-native";
-  return {
-    name: "@cssxio/react-native/babel",
-    visitor: {
-      CallExpression(path) {
-        if (!isCreateCall(path, importSource, types)) {
-          return;
-        }
-        const argument = path.node.arguments[0];
-        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
-          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
-        }
-        const input = readStyleMap(argument, types, path);
-        path.replaceWith(types.valueToNode(create(input, options)));
+// src/compile-candidates.ts
+function compileCandidates(candidates, theme, platform) {
+  const style = {};
+  for (const source of candidates) {
+    const candidate = platformCandidate(source, platform);
+    if (candidate === null) {
+      continue;
+    }
+    for (const atom of (0, import_compiler.describeUtilityRecipe)(candidate, theme).atoms) {
+      for (const declaration of atom) {
+        appendDeclaration(style, candidate, declaration);
       }
     }
-  };
+  }
+  return style;
+}
+
+// src/create.ts
+function create(styles, options = {}) {
+  const records = (0, import_compiler2.compileStyleRecords)(styles, { theme: options.theme });
+  const theme = (0, import_compiler2.parseTheme)(options.theme);
+  return Object.fromEntries(
+    Object.entries(records.candidates).map(([name, candidates]) => [
+      name,
+      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
+    ])
+  );
 }
+
+// src/is-create-call.ts
 function isCreateCall(path, importSource, types) {
   if (!types.isIdentifier(path.node.callee)) {
     return false;
@@ -297,6 +292,8 @@ function isCreateCall(path, importSource, types) {
     binding?.path.isImportSpecifier() && types.isIdentifier(binding.path.node.imported, { name: "create" }) && types.isImportDeclaration(declaration) && declaration.source.value === importSource
   );
 }
+
+// src/read-style-map.ts
 function readStyleMap(object, types, path) {
   const input = {};
   for (const property of object.properties) {
@@ -314,3 +311,26 @@ function readStyleMap(object, types, path) {
   }
   return input;
 }
+
+// src/babel.ts
+function cssxReactNativeBabelPlugin(api, options = {}) {
+  api.assertVersion(7);
+  const types = api.types;
+  const importSource = options.importSource ?? "@cssxio/react-native";
+  return {
+    name: "@cssxio/react-native/babel",
+    visitor: {
+      CallExpression(path) {
+        if (!isCreateCall(path, importSource, types)) {
+          return;
+        }
+        const argument = path.node.arguments[0];
+        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
+          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
+        }
+        const input = readStyleMap(argument, types, path);
+        path.replaceWith(types.valueToNode(create(input, options)));
+      }
+    }
+  };
+}

package/dist/babel.d.cts

@@ -1,6 +1,6 @@
 import { PluginObj, PluginPass } from '@babel/core';
 import * as BabelTypes from '@babel/types';
-import { NativeCompilerOptions } from './index.cjs';
+import { N as NativeCompilerOptions } from './native-types-Cv9_KYf7.cjs';
 
 interface NativeBabelOptions extends NativeCompilerOptions {
     readonly importSource?: string;

package/dist/babel.d.ts

@@ -1,6 +1,6 @@
 import { PluginObj, PluginPass } from '@babel/core';
 import * as BabelTypes from '@babel/types';
-import { NativeCompilerOptions } from './index.js';
+import { N as NativeCompilerOptions } from './native-types-Cv9_KYf7.js';
 
 interface NativeBabelOptions extends NativeCompilerOptions {
     readonly importSource?: string;

package/dist/babel.js

@@ -1,29 +1,8 @@
 import {
   create
-} from "./chunk-7REDTOKV.js";
+} from "./chunk-5ETB3X4A.js";
 
-// src/babel.ts
-function cssxReactNativeBabelPlugin(api, options = {}) {
-  api.assertVersion(7);
-  const types = api.types;
-  const importSource = options.importSource ?? "@cssxio/react-native";
-  return {
-    name: "@cssxio/react-native/babel",
-    visitor: {
-      CallExpression(path) {
-        if (!isCreateCall(path, importSource, types)) {
-          return;
-        }
-        const argument = path.node.arguments[0];
-        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
-          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
-        }
-        const input = readStyleMap(argument, types, path);
-        path.replaceWith(types.valueToNode(create(input, options)));
-      }
-    }
-  };
-}
+// src/is-create-call.ts
 function isCreateCall(path, importSource, types) {
   if (!types.isIdentifier(path.node.callee)) {
     return false;
@@ -34,6 +13,8 @@ function isCreateCall(path, importSource, types) {
     binding?.path.isImportSpecifier() && types.isIdentifier(binding.path.node.imported, { name: "create" }) && types.isImportDeclaration(declaration) && declaration.source.value === importSource
   );
 }
+
+// src/read-style-map.ts
 function readStyleMap(object, types, path) {
   const input = {};
   for (const property of object.properties) {
@@ -51,6 +32,29 @@ function readStyleMap(object, types, path) {
   }
   return input;
 }
+
+// src/babel.ts
+function cssxReactNativeBabelPlugin(api, options = {}) {
+  api.assertVersion(7);
+  const types = api.types;
+  const importSource = options.importSource ?? "@cssxio/react-native";
+  return {
+    name: "@cssxio/react-native/babel",
+    visitor: {
+      CallExpression(path) {
+        if (!isCreateCall(path, importSource, types)) {
+          return;
+        }
+        const argument = path.node.arguments[0];
+        if (path.node.arguments.length !== 1 || !types.isObjectExpression(argument)) {
+          throw path.buildCodeFrameError("cssx.create() expects one object literal argument.");
+        }
+        const input = readStyleMap(argument, types, path);
+        path.replaceWith(types.valueToNode(create(input, options)));
+      }
+    }
+  };
+}
 export {
   cssxReactNativeBabelPlugin as default
 };