react-native-css 0.0.0-nightly.03a4e35

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.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          {
+            c: ["g:my-class"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [{ n: "g: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.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "one",
+        [
+          {
+            c: ["g:one"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "two",
+        [
+          {
+            c: ["g:two"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [{ n: "g:one" }, { n: "g: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.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "one",
+        [
+          {
+            c: ["g:one"],
+            s: [0],
+          },
+        ],
+      ],
+      [
+        "three",
+        [
+          {
+            c: ["g:three.two"],
+            s: [0],
+            aq: [["a", "className", "*=", "two"]],
+          },
+        ],
+      ],
+      [
+        "test",
+        [
+          {
+            cq: [
+              { n: "g:one" },
+              {
+                n: "g:three.two",
+              },
+            ],
+            d: [{ color: "#f00" }],
+            v: [["__rn-css-color", "#f00"]],
+            s: [1, 4],
+          },
+        ],
+      ],
+    ],
+  });
+});

package/src/compiler/inline-variables.ts

@@ -0,0 +1,209 @@
+import type {
+  Declaration,
+  DeclarationBlock,
+  StyleSheet,
+  TokenOrValue,
+} from "lightningcss";
+
+import type { UniqueVarInfo } from "./compiler.types";
+
+export function inlineVariables(
+  stylesheet: StyleSheet,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  for (const [name, info] of [...vars]) {
+    if (info.count !== 1) {
+      vars.delete(name);
+    } else {
+      flattenVar(name, vars);
+    }
+  }
+
+  stylesheet.rules = stylesheet.rules.map(function checkRule(rule) {
+    switch (rule.type) {
+      case "custom":
+      case "font-face":
+      case "font-palette-values":
+      case "font-feature-values":
+      case "namespace":
+      case "layer-statement":
+      case "property":
+      case "view-transition":
+      case "ignored":
+      case "unknown":
+      case "import":
+      case "page":
+      case "counter-style":
+      case "moz-document":
+      case "nesting":
+      case "viewport":
+      case "custom-media":
+      case "scope":
+      case "starting-style":
+        return rule;
+
+      case "media":
+        rule.value.rules = rule.value.rules.map((rule) => checkRule(rule));
+        return rule;
+      case "keyframes":
+        rule.value.keyframes = rule.value.keyframes.map((keyframe) => {
+          keyframe.declarations =
+            replaceDeclarationBlock(keyframe.declarations, vars) ??
+            keyframe.declarations;
+
+          return keyframe;
+        });
+        return rule;
+      case "style":
+        rule.value.declarations = replaceDeclarationBlock(
+          rule.value.declarations,
+          vars,
+        );
+
+        rule.value.rules = rule.value.rules?.flatMap((rule) => checkRule(rule));
+
+        return rule;
+      case "nested-declarations":
+        rule.value.declarations =
+          replaceDeclarationBlock(rule.value.declarations, vars) ?? {};
+        return rule;
+      case "supports":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "layer-block":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "container":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+    }
+  });
+
+  return stylesheet;
+}
+
+function replaceDeclarationBlock(
+  block: DeclarationBlock | undefined,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (!block) return;
+
+  block.declarations = block.declarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  block.importantDeclarations = block.importantDeclarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  return block;
+}
+
+function replaceDeclaration(
+  declaration: Declaration,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (
+    declaration.property !== "unparsed" &&
+    declaration.property !== "custom"
+  ) {
+    return declaration;
+  }
+
+  if (declaration.property === "custom" && vars.has(declaration.value.name)) {
+    return;
+  }
+
+  declaration.value.value = declaration.value.value.flatMap((part) => {
+    return flattenPart(part, vars);
+  });
+
+  return declaration;
+}
+
+function flattenPart(
+  part: TokenOrValue,
+  vars: Map<string, UniqueVarInfo>,
+): TokenOrValue | TokenOrValue[] {
+  if (part.type === "var") {
+    const varInfo = vars.get(part.value.name.ident);
+
+    if (!varInfo) {
+      part.value.fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return part;
+    } else if (varInfo.value === undefined) {
+      const fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return fallback ?? [];
+    }
+
+    return varInfo.value;
+  } else if (part.type === "function") {
+    part.value.arguments = part.value.arguments.flatMap((arg) => {
+      return flattenPart(arg, vars);
+    });
+  }
+
+  return part;
+}
+
+function flattenVar(
+  name: string,
+  vars: Map<string, UniqueVarInfo>,
+  seen = new Set<string>(),
+) {
+  if (seen.has(name)) {
+    vars.delete(name);
+  }
+
+  seen.add(name);
+
+  let varInfo = vars.get(name);
+
+  if (!varInfo || varInfo.flat) {
+    return;
+  }
+
+  let varInfoValue = varInfo.value?.flatMap((part) => {
+    if (part.type === "var") {
+      const name = part.value.name.ident;
+
+      flattenVar(name, vars, seen);
+
+      const nestedVarInfo = vars.get(part.value.name.ident);
+      if (nestedVarInfo?.value) {
+        return nestedVarInfo.value;
+      }
+    }
+    return flattenPart(part, vars);
+  });
+
+  // If the variable is shorthand for "initial", substitute it for undefined
+  if (
+    varInfoValue?.length === 2 &&
+    varInfoValue[0]?.type === "token" &&
+    varInfoValue[0].value.type === "ident" &&
+    varInfoValue[0].value.value === "initial" &&
+    varInfoValue[1]?.type === "token" &&
+    varInfoValue[1].value.type === "white-space"
+  ) {
+    varInfoValue = undefined;
+  }
+
+  varInfo = {
+    count: 1,
+    flat: true,
+    value: varInfoValue,
+  };
+
+  vars.set(name, varInfo);
+}

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 [
+          {},
+          "cubicBezier",
+          [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/lightningcss-loader.ts

@@ -0,0 +1,40 @@
+export function lightningcssLoader() {
+  let lightningcssPath: string | undefined;
+
+  // Try to resolve the path to lightningcss from the @expo/metro-config package
+  // lightningcss is a direct dependency of @expo/metro-config
+  try {
+    lightningcssPath = require.resolve("lightningcss", {
+      paths: [
+        require
+          .resolve("@expo/metro-config/package.json")
+          .replace("/package.json", ""),
+      ],
+    });
+  } catch {
+    // Intentionally left empty
+  }
+
+  // If @expo/metro-config is not being used (non-metro bundler?), try and resolve it directly
+  try {
+    lightningcssPath ??= require.resolve("lightningcss");
+  } catch {
+    // Intentionally left empty
+  }
+
+  if (!lightningcssPath) {
+    throw new Error(
+      "react-native-css was unable to determine the path to lightningcss",
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { transform: lightningcss, Features } = require(
+    lightningcssPath,
+  ) as typeof import("lightningcss");
+
+  return {
+    lightningcss,
+    Features,
+  };
+}