react-native-css 2.1.1 → 3.0.0-nightly.4723140

package/src/compiler/functions-web.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import type { PlatformOSType } from "react-native";
+
+export function hairlineWidth() {
+  return 1;
+}
+
+export function platformSelect(
+  specifics: Partial<Record<PlatformOSType | "default", unknown>>,
+) {
+  return specifics["web"] ?? specifics["default"];
+}
+
+export function pixelScaleSelect(
+  specifics: Partial<Record<number | "default", unknown>>,
+) {
+  return specifics[1] ?? specifics["default"];
+}
+
+export function fontScaleSelect(
+  specifics: Partial<Record<number | "default", unknown>>,
+) {
+  return specifics[1] ?? specifics["default"];
+}
+
+export function pixelScale(value = 1) {
+  return value;
+}
+
+export function fontScale(value = 1) {
+  return value;
+}
+
+export function getPixelSizeForLayoutSize(value: number) {
+  return value;
+}
+
+export function roundToNearestPixel(value: number) {
+  return value;
+}
+
+export function platformColor(...colors: string[]) {
+  return colors;
+}

package/src/compiler/functions.ts

@@ -0,0 +1,64 @@
+/* eslint-disable */
+import type { PlatformOSType } from "react-native";
+
+export function hairlineWidth() {
+  return "hairlineWidth()";
+}
+
+export function platformSelect(
+  specifics: Partial<Record<PlatformOSType | "default", unknown>>,
+) {
+  let output: string[] = [];
+  for (const [key, value] of Object.entries(specifics)) {
+    output.push(`${key}/${value}`);
+  }
+  return `platformSelect(${output.join(",")})`;
+}
+
+export function pixelScaleSelect(
+  specifics: Partial<Record<number | "default", unknown>>,
+) {
+  let output: string[] = [];
+  for (const [key, value] of Object.entries(specifics)) {
+    output.push(`${key}/${value}`);
+  }
+  return `pixelScaleSelect(${output.join(",")})`;
+}
+
+export function fontScaleSelect(
+  specifics: Partial<Record<number | "default", unknown>>,
+) {
+  let output: string[] = [];
+  for (const [key, value] of Object.entries(specifics)) {
+    output.push(`${key}/${value}`);
+  }
+  return `fontScaleSelect(${output.join(",")})`;
+}
+
+export function pixelScale(value?: number) {
+  return value === undefined ? `pixelScale()` : `pixelScale(${value})`;
+}
+
+export function fontScale(value?: number) {
+  return value === undefined ? `fontScale()` : `fontScale(${value})`;
+}
+
+export function getPixelSizeForLayoutSize(value: number) {
+  return `getPixelSizeForLayoutSize(${value})`;
+}
+
+export function roundToNearestPixel(value: number) {
+  return `roundToNearestPixel(${value})`;
+}
+
+export function platformColor(...colors: string[]) {
+  return `platformColor(${colors
+    .map((color) => {
+      // Android uses these characters which we must escape when outputting to CSS
+      return color
+        .replaceAll("?", "\\?")
+        .replaceAll("/", "\\/")
+        .replaceAll(":", "\\:");
+    })
+    .join(",")})`;
+}

package/src/compiler/index.ts

@@ -0,0 +1,7 @@
+/**
+ * A CSS-to-JSON compiler for React Native focusing on minimal output.
+ * @module
+ */
+
+export * from "./compiler";
+export type * from "./compiler.types";

package/src/compiler/keyframes.ts

@@ -0,0 +1,100 @@
+/* eslint-disable */
+import type {
+  AnimationIterationCount,
+  EasingFunction as CSSEasingFunction,
+  Declaration,
+  KeyframesRule,
+} from "lightningcss";
+
+import { addAnimation_V2 } from "./add";
+import type {
+  AnimationKeyframes_V2,
+  CompilerCollection,
+  EasingFunction,
+  StyleDeclaration,
+} from "./compiler.types";
+import { parseDeclaration } from "./declarations";
+
+export function parseIterationCount(
+  value: AnimationIterationCount[],
+): number[] {
+  return value.map((value) => {
+    return value.type === "infinite" ? -1 : value.value;
+  });
+}
+
+export function parseEasingFunction(
+  value: CSSEasingFunction[],
+): EasingFunction[] {
+  return value.map((value) => {
+    switch (value.type) {
+      case "linear":
+      case "ease":
+      case "ease-in":
+      case "ease-out":
+      case "ease-in-out":
+        return value.type;
+      case "cubic-bezier":
+        return value;
+      case "steps":
+        return {
+          type: "steps",
+          c: value.count,
+          p: value.position?.type,
+        };
+    }
+  });
+}
+
+export function extractKeyFrames(
+  keyframes: KeyframesRule<Declaration>,
+  collection: CompilerCollection,
+) {
+  return extractKeyFrames_v2(keyframes, collection);
+}
+
+function extractKeyFrames_v2(
+  keyframes: KeyframesRule<Declaration>,
+  collection: CompilerCollection,
+) {
+  const animation: AnimationKeyframes_V2[] = [];
+
+  for (const frame of keyframes.keyframes) {
+    if (!frame.declarations.declarations) continue;
+
+    const selectors = frame.selectors.map((selector) => {
+      switch (selector.type) {
+        case "percentage":
+          return frame.selectors.length > 1
+            ? `${selector.value}%`
+            : selector.value;
+        case "from":
+        case "to":
+          return selector.type;
+        case "timeline-range-percentage":
+          // TODO
+          return frame.selectors.length > 1
+            ? `${selector.value.percentage}%`
+            : selector.value.percentage;
+      }
+    });
+
+    const declarations: StyleDeclaration[] = [];
+    const addFn = addAnimation_V2(declarations);
+
+    const currentFrame: AnimationKeyframes_V2 =
+      selectors.length > 1
+        ? [selectors.join(", "), []]
+        : [selectors[0]!, declarations];
+
+    for (const declaration of frame.declarations.declarations) {
+      parseDeclaration(declaration, collection, addFn, () => {});
+    }
+
+    if (declarations.length > 0) {
+      animation.push(currentFrame);
+    }
+  }
+
+  collection.keyframes.set(keyframes.name.value, animation);
+}

package/src/compiler/media-query.ts

@@ -0,0 +1,250 @@
+/* eslint-disable */
+import type {
+  CalcFor_Length,
+  MediaCondition as CSSMediaCondition,
+  MediaFeatureComparison as CSSMediaFeatureComparison,
+  MediaFeatureValue as CSSMediaFeatureValue,
+  MediaQuery as CSSMediaQuery,
+  QueryFeatureFor_MediaFeatureId,
+} from "lightningcss";
+
+import type {
+  MediaCondition,
+  MediaFeatureComparison,
+  StyleDescriptor,
+} from "./compiler.types";
+import { parseLength, type ParserOptions } from "./declarations";
+
+export function parseMediaQuery(
+  query: CSSMediaQuery,
+  options: ParserOptions,
+): MediaCondition | undefined {
+  let platformCondition: MediaCondition | undefined;
+  let condition: MediaCondition | undefined;
+
+  if (query.mediaType) {
+    // Print is for printing documents
+    if (query.mediaType === "print") {
+      return;
+    }
+
+    // These all/screen are not conditions, they always apply
+    if (query.mediaType !== "all" && query.mediaType !== "screen") {
+      platformCondition = ["=", "platform", query.mediaType];
+    }
+  }
+
+  if (query.condition) {
+    condition = parseMediaQueryCondition(query.condition, options);
+
+    // If any of these are undefined, the media query is invalid
+    if (!condition || condition.some((v) => v === undefined)) {
+      return;
+    }
+  }
+
+  let mediaQuery: MediaCondition | undefined =
+    platformCondition && condition
+      ? ["&", [platformCondition, condition]]
+      : platformCondition || condition;
+
+  if (!mediaQuery) {
+    return;
+  }
+
+  if (query.qualifier === "not") {
+    mediaQuery = ["!", mediaQuery];
+  }
+
+  return mediaQuery;
+}
+
+function parseMediaQueryCondition(
+  query: CSSMediaCondition,
+  options: ParserOptions,
+): MediaCondition | undefined {
+  switch (query.type) {
+    case "feature":
+      return parseFeature(query.value, options);
+    case "not":
+      const mediaQuery = parseMediaQueryCondition(query.value, options);
+      return mediaQuery ? ["!", mediaQuery] : undefined;
+    case "operation":
+      const mediaQueries = query.conditions
+        .map((c) => parseMediaQueryCondition(c, options))
+        .filter((v): v is MediaCondition => !!v);
+
+      if (mediaQueries.length === 0) {
+        return;
+      }
+
+      switch (query.operator) {
+        case "and":
+          return ["&", mediaQueries];
+        case "or":
+          return ["|", mediaQueries];
+        default:
+          query.operator satisfies never;
+          return;
+      }
+    default:
+      query satisfies never;
+  }
+
+  return;
+}
+
+function parseFeature(
+  feature: QueryFeatureFor_MediaFeatureId,
+  options: ParserOptions,
+): MediaCondition | undefined {
+  switch (feature.type) {
+    case "boolean":
+      return ["!!", feature.name];
+    case "plain":
+      return [
+        "=",
+        feature.name,
+        parseMediaFeatureValue(feature.value, options),
+      ];
+    case "range":
+      return [
+        parseMediaFeatureOperator(feature.operator),
+        feature.name,
+        parseMediaFeatureValue(feature.value, options),
+      ];
+    case "interval":
+      return [
+        "[]",
+        feature.name,
+        parseMediaFeatureValue(feature.start, options),
+        parseMediaFeatureOperator(feature.startOperator),
+        parseMediaFeatureValue(feature.end, options),
+        parseMediaFeatureOperator(feature.endOperator),
+      ];
+    default:
+      feature satisfies never;
+  }
+  return;
+}
+
+export function parseMediaFeatureValue(
+  value: CSSMediaFeatureValue,
+  options: ParserOptions,
+): StyleDescriptor {
+  switch (value.type) {
+    case "boolean":
+    case "ident":
+    case "integer":
+    case "number":
+      return value.value;
+    case "length":
+      switch (value.value.type) {
+        case "value":
+          return parseLength(value.value.value, options);
+        case "calc":
+          return parseCalcFn(value.value.value, options);
+        default:
+          value.value satisfies never;
+          return;
+      }
+    case "resolution":
+      switch (value.value.type) {
+        case "dpi":
+          // Mobile devices use 160 as a standard
+          return value.value.value / 160;
+        case "dpcm":
+          // There are 1in = ~2.54cm
+          return value.value.value / (160 * 2.54);
+        case "dppx":
+          return value.value.value;
+        default:
+          value.value satisfies never;
+          return undefined;
+      }
+    case "ratio":
+    case "env":
+  }
+
+  return;
+}
+
+export function parseMediaFeatureOperator(
+  operator: CSSMediaFeatureComparison,
+): MediaFeatureComparison {
+  switch (operator) {
+    case "equal":
+      return "=";
+    case "greater-than":
+      return ">";
+    case "greater-than-equal":
+      return ">=";
+    case "less-than":
+      return "<";
+    case "less-than-equal":
+      return "<=";
+    default:
+      operator satisfies never;
+      throw new Error(`Unknown MediaFeatureComparison operator ${operator}`);
+  }
+}
+
+function parseCalcFn(
+  calc: CalcFor_Length,
+  options: ParserOptions,
+): StyleDescriptor {
+  switch (calc.type) {
+    case "number":
+      return calc.value;
+    case "value":
+      return parseLength(calc.value, options);
+    case "sum":
+      return [{}, "sum", calc.value.map((c) => parseCalcFn(c, options))];
+    case "product":
+      return [
+        {},
+        "product",
+        [calc.value[0], parseCalcFn(calc.value[1], options)],
+      ];
+    case "function":
+      switch (calc.value.type) {
+        case "calc":
+          return parseCalcFn(calc.value.value, options);
+        case "min":
+        case "max":
+        case "clamp":
+        case "rem":
+        case "mod":
+        case "hypot":
+          return [
+            {},
+            calc.value.type,
+            calc.value.value.map((c) => parseCalcFn(c, options)),
+          ];
+        case "abs":
+        case "sign":
+          return [
+            {},
+            calc.value.type,
+            [parseCalcFn(calc.value.value, options)],
+          ];
+        case "round":
+          return [
+            {},
+            calc.value.type,
+            [
+              calc.value.value[0],
+              parseCalcFn(calc.value.value[1], options),
+              parseCalcFn(calc.value.value[2], options),
+            ],
+          ];
+        default:
+          calc.value satisfies never;
+          return;
+      }
+    default:
+      calc satisfies never;
+  }
+
+  return;
+}