react-native-css 2.1.1 → 3.0.0-nightly.27bd5e2

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/inheritance.test.ts

@@ -0,0 +1,121 @@
+import { compile } from "../compiler";
+
+test("nested classes", () => {
+  const compiled = compile(`
+.my-class .test {
+  color: red;
+}`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          {
+            c: ["my-class"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [{ n: "my-class" }],
+            d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
+            s: [1, 2],
+          },
+        ],
+      ],
+    ],
+  });
+});
+
+test("multiple tiers classes", () => {
+  const compiled = compile(`
+.one .two .test {
+  color: red;
+}`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "one",
+        [
+          {
+            c: ["one"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "two",
+        [
+          {
+            c: ["two"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [{ n: "one" }, { n: "two" }],
+            d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
+            s: [1, 3],
+          },
+        ],
+      ],
+    ],
+  });
+});
+
+test("tiers with multiple classes", () => {
+  const compiled = compile(`
+.one .two.three .test {
+  color: red;
+}`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "one",
+        [
+          {
+            c: ["one"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "three",
+        [
+          {
+            c: ["three"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [
+              { n: "one" },
+              {
+                a: [["a", "className", "*=", "two"]],
+                n: "three",
+              },
+            ],
+            d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
+            s: [1, 4],
+          },
+        ],
+      ],
+    ],
+  });
+});

package/src/compiler/keyframes.ts

@@ -0,0 +1,86 @@
+import type {
+  AnimationIterationCount,
+  EasingFunction as CSSEasingFunction,
+  KeyframesRule,
+} from "lightningcss";
+
+import type { StyleDescriptor } from "./compiler.types";
+import { parseDeclaration } from "./declarations";
+import type { StylesheetBuilder } from "./stylesheet";
+
+export function parseIterationCount(
+  value: AnimationIterationCount[],
+): number[] {
+  return value.map((value) => {
+    return value.type === "infinite" ? -1 : value.value;
+  });
+}
+
+export function parseEasingFunction(
+  value: CSSEasingFunction[],
+): StyleDescriptor {
+  const easingFn = 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 [
+          {},
+          "cubic-bezier",
+          [value.x1, value.y1, value.x2, value.y2],
+        ] as const;
+      case "steps":
+        return [{}, "steps", [value.count, value.position?.type]] as const;
+    }
+  }) as StyleDescriptor[];
+
+  if (easingFn.length === 1) {
+    return easingFn[0];
+  }
+  return easingFn;
+}
+
+export function extractKeyFrames(
+  keyframes: KeyframesRule,
+  builder: StylesheetBuilder,
+) {
+  builder = builder.fork("keyframes");
+  builder.newAnimationFrames(keyframes.name.value);
+
+  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 * 100}%`
+            : 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 firstSelector = selectors[0];
+    const progress =
+      firstSelector && selectors.length === 1
+        ? firstSelector.toString()
+        : selectors.join(", ");
+
+    builder.newAnimationFrame(progress);
+
+    for (const declaration of frame.declarations.declarations) {
+      parseDeclaration(declaration, builder);
+    }
+  }
+}

package/src/compiler/media-query.ts

@@ -0,0 +1,251 @@
+/* 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 } from "./declarations";
+import type { StylesheetBuilder } from "./stylesheet";
+
+export function parseMediaQuery(
+  query: CSSMediaQuery,
+  builder: StylesheetBuilder,
+) {
+  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, builder);
+
+    // 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];
+  }
+
+  builder.addMediaQuery(mediaQuery);
+}
+
+function parseMediaQueryCondition(
+  query: CSSMediaCondition,
+  builder: StylesheetBuilder,
+): MediaCondition | undefined {
+  switch (query.type) {
+    case "feature":
+      return parseFeature(query.value, builder);
+    case "not":
+      const mediaQuery = parseMediaQueryCondition(query.value, builder);
+      return mediaQuery ? ["!", mediaQuery] : undefined;
+    case "operation":
+      const mediaQueries = query.conditions
+        .map((c) => parseMediaQueryCondition(c, builder))
+        .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,
+  builder: StylesheetBuilder,
+): MediaCondition | undefined {
+  switch (feature.type) {
+    case "boolean":
+      return ["!!", feature.name];
+    case "plain":
+      return [
+        "=",
+        feature.name,
+        parseMediaFeatureValue(feature.value, builder),
+      ];
+    case "range":
+      return [
+        parseMediaFeatureOperator(feature.operator),
+        feature.name,
+        parseMediaFeatureValue(feature.value, builder),
+      ];
+    case "interval":
+      return [
+        "[]",
+        feature.name,
+        parseMediaFeatureValue(feature.start, builder),
+        parseMediaFeatureOperator(feature.startOperator),
+        parseMediaFeatureValue(feature.end, builder),
+        parseMediaFeatureOperator(feature.endOperator),
+      ];
+    default:
+      feature satisfies never;
+  }
+  return;
+}
+
+export function parseMediaFeatureValue(
+  value: CSSMediaFeatureValue,
+  builder: StylesheetBuilder,
+): 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, builder);
+        case "calc":
+          return parseCalcFn(value.value.value, builder);
+        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,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (calc.type) {
+    case "number":
+      return calc.value;
+    case "value":
+      return parseLength(calc.value, builder);
+    case "sum":
+      return [{}, "sum", calc.value.map((c) => parseCalcFn(c, builder))];
+    case "product":
+      return [
+        {},
+        "product",
+        [calc.value[0], parseCalcFn(calc.value[1], builder)],
+      ];
+    case "function":
+      switch (calc.value.type) {
+        case "calc":
+          return parseCalcFn(calc.value.value, builder);
+        case "min":
+        case "max":
+        case "clamp":
+        case "rem":
+        case "mod":
+        case "hypot":
+          return [
+            {},
+            calc.value.type,
+            calc.value.value.map((c) => parseCalcFn(c, builder)),
+          ];
+        case "abs":
+        case "sign":
+          return [
+            {},
+            calc.value.type,
+            [parseCalcFn(calc.value.value, builder)],
+          ];
+        case "round":
+          return [
+            {},
+            calc.value.type,
+            [
+              calc.value.value[0],
+              parseCalcFn(calc.value.value[1], builder),
+              parseCalcFn(calc.value.value[2], builder),
+            ],
+          ];
+        default:
+          calc.value satisfies never;
+          return;
+      }
+    default:
+      calc satisfies never;
+  }
+
+  return;
+}