react-native-css 3.0.0-nightly.4723140 → 3.0.0-nightly.61014be

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

@@ -1,19 +1,12 @@
-/* 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 type { StyleDescriptor } from "./compiler.types";
 import { parseDeclaration } from "./declarations";
+import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseIterationCount(
   value: AnimationIterationCount[],
@@ -25,8 +18,8 @@ export function parseIterationCount(
 
 export function parseEasingFunction(
   value: CSSEasingFunction[],
-): EasingFunction[] {
-  return value.map((value) => {
+): StyleDescriptor {
+  const easingFn = value.map((value) => {
     switch (value.type) {
       case "linear":
       case "ease":
@@ -35,29 +28,28 @@ export function parseEasingFunction(
       case "ease-in-out":
         return value.type;
       case "cubic-bezier":
-        return value;
+        return [
+          {},
+          "cubic-bezier",
+          [value.x1, value.y1, value.x2, value.y2],
+        ] as const;
       case "steps":
-        return {
-          type: "steps",
-          c: value.count,
-          p: value.position?.type,
-        };
+        return [{}, "steps", [value.count, value.position?.type]] as const;
     }
-  });
-}
+  }) as StyleDescriptor[];
 
-export function extractKeyFrames(
-  keyframes: KeyframesRule<Declaration>,
-  collection: CompilerCollection,
-) {
-  return extractKeyFrames_v2(keyframes, collection);
+  if (easingFn.length === 1) {
+    return easingFn[0];
+  }
+  return easingFn;
 }
 
-function extractKeyFrames_v2(
-  keyframes: KeyframesRule<Declaration>,
-  collection: CompilerCollection,
+export function extractKeyFrames(
+  keyframes: KeyframesRule,
+  builder: StylesheetBuilder,
 ) {
-  const animation: AnimationKeyframes_V2[] = [];
+  builder = builder.fork("keyframes");
+  builder.newAnimationFrames(keyframes.name.value);
 
   for (const frame of keyframes.keyframes) {
     if (!frame.declarations.declarations) continue;
@@ -66,7 +58,7 @@ function extractKeyFrames_v2(
       switch (selector.type) {
         case "percentage":
           return frame.selectors.length > 1
-            ? `${selector.value}%`
+            ? `${selector.value * 100}%`
             : selector.value;
         case "from":
         case "to":
@@ -79,22 +71,16 @@ function extractKeyFrames_v2(
       }
     });
 
-    const declarations: StyleDeclaration[] = [];
-    const addFn = addAnimation_V2(declarations);
+    const firstSelector = selectors[0];
+    const progress =
+      firstSelector && selectors.length === 1
+        ? firstSelector.toString()
+        : selectors.join(", ");
 
-    const currentFrame: AnimationKeyframes_V2 =
-      selectors.length > 1
-        ? [selectors.join(", "), []]
-        : [selectors[0]!, declarations];
+    builder.newAnimationFrame(progress);
 
     for (const declaration of frame.declarations.declarations) {
-      parseDeclaration(declaration, collection, addFn, () => {});
-    }
-
-    if (declarations.length > 0) {
-      animation.push(currentFrame);
+      parseDeclaration(declaration, builder);
     }
   }
-
-  collection.keyframes.set(keyframes.name.value, animation);
 }

package/src/compiler/media-query.ts

@@ -13,12 +13,13 @@ import type {
   MediaFeatureComparison,
   StyleDescriptor,
 } from "./compiler.types";
-import { parseLength, type ParserOptions } from "./declarations";
+import { parseLength } from "./declarations";
+import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseMediaQuery(
   query: CSSMediaQuery,
-  options: ParserOptions,
-): MediaCondition | undefined {
+  builder: StylesheetBuilder,
+) {
   let platformCondition: MediaCondition | undefined;
   let condition: MediaCondition | undefined;
 
@@ -35,7 +36,7 @@ export function parseMediaQuery(
   }
 
   if (query.condition) {
-    condition = parseMediaQueryCondition(query.condition, options);
+    condition = parseMediaQueryCondition(query.condition, builder);
 
     // If any of these are undefined, the media query is invalid
     if (!condition || condition.some((v) => v === undefined)) {
@@ -56,22 +57,22 @@ export function parseMediaQuery(
     mediaQuery = ["!", mediaQuery];
   }
 
-  return mediaQuery;
+  builder.addMediaQuery(mediaQuery);
 }
 
 function parseMediaQueryCondition(
   query: CSSMediaCondition,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): MediaCondition | undefined {
   switch (query.type) {
     case "feature":
-      return parseFeature(query.value, options);
+      return parseFeature(query.value, builder);
     case "not":
-      const mediaQuery = parseMediaQueryCondition(query.value, options);
+      const mediaQuery = parseMediaQueryCondition(query.value, builder);
       return mediaQuery ? ["!", mediaQuery] : undefined;
     case "operation":
       const mediaQueries = query.conditions
-        .map((c) => parseMediaQueryCondition(c, options))
+        .map((c) => parseMediaQueryCondition(c, builder))
         .filter((v): v is MediaCondition => !!v);
 
       if (mediaQueries.length === 0) {
@@ -96,7 +97,7 @@ function parseMediaQueryCondition(
 
 function parseFeature(
   feature: QueryFeatureFor_MediaFeatureId,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): MediaCondition | undefined {
   switch (feature.type) {
     case "boolean":
@@ -105,21 +106,21 @@ function parseFeature(
       return [
         "=",
         feature.name,
-        parseMediaFeatureValue(feature.value, options),
+        parseMediaFeatureValue(feature.value, builder),
       ];
     case "range":
       return [
         parseMediaFeatureOperator(feature.operator),
         feature.name,
-        parseMediaFeatureValue(feature.value, options),
+        parseMediaFeatureValue(feature.value, builder),
       ];
     case "interval":
       return [
         "[]",
         feature.name,
-        parseMediaFeatureValue(feature.start, options),
+        parseMediaFeatureValue(feature.start, builder),
         parseMediaFeatureOperator(feature.startOperator),
-        parseMediaFeatureValue(feature.end, options),
+        parseMediaFeatureValue(feature.end, builder),
         parseMediaFeatureOperator(feature.endOperator),
       ];
     default:
@@ -130,7 +131,7 @@ function parseFeature(
 
 export function parseMediaFeatureValue(
   value: CSSMediaFeatureValue,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
   switch (value.type) {
     case "boolean":
@@ -141,9 +142,9 @@ export function parseMediaFeatureValue(
     case "length":
       switch (value.value.type) {
         case "value":
-          return parseLength(value.value.value, options);
+          return parseLength(value.value.value, builder);
         case "calc":
-          return parseCalcFn(value.value.value, options);
+          return parseCalcFn(value.value.value, builder);
         default:
           value.value satisfies never;
           return;
@@ -191,25 +192,25 @@ export function parseMediaFeatureOperator(
 
 function parseCalcFn(
   calc: CalcFor_Length,
-  options: ParserOptions,
+  builder: StylesheetBuilder,
 ): StyleDescriptor {
   switch (calc.type) {
     case "number":
       return calc.value;
     case "value":
-      return parseLength(calc.value, options);
+      return parseLength(calc.value, builder);
     case "sum":
-      return [{}, "sum", calc.value.map((c) => parseCalcFn(c, options))];
+      return [{}, "sum", calc.value.map((c) => parseCalcFn(c, builder))];
     case "product":
       return [
         {},
         "product",
-        [calc.value[0], parseCalcFn(calc.value[1], options)],
+        [calc.value[0], parseCalcFn(calc.value[1], builder)],
       ];
     case "function":
       switch (calc.value.type) {
         case "calc":
-          return parseCalcFn(calc.value.value, options);
+          return parseCalcFn(calc.value.value, builder);
         case "min":
         case "max":
         case "clamp":
@@ -219,14 +220,14 @@ function parseCalcFn(
           return [
             {},
             calc.value.type,
-            calc.value.value.map((c) => parseCalcFn(c, options)),
+            calc.value.value.map((c) => parseCalcFn(c, builder)),
           ];
         case "abs":
         case "sign":
           return [
             {},
             calc.value.type,
-            [parseCalcFn(calc.value.value, options)],
+            [parseCalcFn(calc.value.value, builder)],
           ];
         case "round":
           return [
@@ -234,8 +235,8 @@ function parseCalcFn(
             calc.value.type,
             [
               calc.value.value[0],
-              parseCalcFn(calc.value.value[1], options),
-              parseCalcFn(calc.value.value[2], options),
+              parseCalcFn(calc.value.value[1], builder),
+              parseCalcFn(calc.value.value[2], builder),
             ],
           ];
         default: