refactor: fix tests

Author: marklawlor

src/__tests__/babel/prettier.config.mjs

@@ -0,0 +1,7 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {};
+
+export default config;

src/__tests__/babel/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "./*"
+  ]
+}

src/compiler/__tests__/@prop.test.tsx

@@ -18,8 +18,8 @@ test("@prop single", () => {
             d: [
               {
                 color: "#f00",
+                myBackgroundColor: "#00f",
               },
-              ["#00f", ["myBackgroundColor"]],
             ],
             s: [1, 1],
           },
@@ -29,7 +29,7 @@ test("@prop single", () => {
   });
 });
 
-test.only("@prop single, nested value", () => {
+test("@prop single, nested value", () => {
   const compiled = compile(`
     .test { 
       color: red; 
@@ -164,8 +164,10 @@ test("@prop multiple", () => {
         [
           {
             d: [
-              ["#f00", ["myColor"]],
-              ["#00f", ["myBackgroundColor"]],
+              {
+                myBackgroundColor: "#00f",
+                myColor: "#f00",
+              },
             ],
             s: [1, 1],
           },

src/compiler/__tests__/compiler.test.tsx

@@ -14,7 +14,7 @@ test("hello world", () => {
           {
             d: [
               {
-                color: "rgb(100% 0% 0%)",
+                color: "#f00",
               },
             ],
             s: [1, 1],
@@ -105,6 +105,47 @@ test.skip("preserves unused CSS variables with preserve-variables", () => {
   });
 });
 
+test("multiple rules with same selector", () => {
+  const compiled = compile(`
+.redOrGreen:hover { 
+  color: green; 
+} 
+  
+.redOrGreen { 
+  color: red; 
+}
+`);
+
+  expect(compiled).toStrictEqual({
+    s: [
+      [
+        "redOrGreen",
+        [
+          {
+            d: [
+              {
+                color: "#f00",
+              },
+            ],
+            s: [2, 1],
+          },
+          {
+            d: [
+              {
+                color: "#008000",
+              },
+            ],
+            p: {
+              h: 1,
+            },
+            s: [1, 2],
+          },
+        ],
+      ],
+    ],
+  });
+});
+
 test.skip("transitions", () => {
   const compiled = compile(`
     .test { 

src/compiler/attributes.test.ts

@@ -15,7 +15,7 @@ test("multiple classes", () => {
             aq: [["a", "className", "*=", "my-class"]],
             d: [
               {
-                color: "rgb(100% 0% 0%)",
+                color: "#f00",
               },
             ],
             s: [1, 2],

src/compiler/compiler.ts

@@ -11,6 +11,7 @@ import {
   type Visitor,
 } from "lightningcss";
 
+import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
 import type {
   CompilerOptions,
   ContainerQuery,
@@ -20,7 +21,6 @@ import { parseContainerCondition } from "./container-query";
 import { parseDeclaration } from "./declarations";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
-import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
 import { StylesheetBuilder } from "./stylesheet";
 
 /**
@@ -37,6 +37,10 @@ export function compile(
   const { logger = debug("react-native-css") } = options;
   const features = Object.assign({}, options.features);
 
+  if (options.selectorPrefix && options.selectorPrefix.startsWith(".")) {
+    options.selectorPrefix = options.selectorPrefix.slice(1);
+  }
+
   logger(`Features ${JSON.stringify(features)}`);
 
   const builder = new StylesheetBuilder(options);

src/compiler/declarations.ts

@@ -1291,7 +1291,7 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
 
   let color: Color | undefined;
 
-  const { hexColors = true, colorPrecision = 3 } = builder.getOptions();
+  const { hexColors = true, colorPrecision } = builder.getOptions();
 
   switch (cssColor.type) {
     case "currentcolor":
@@ -1411,8 +1411,8 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
     }
   }
 
-  if (hexColors || colorPrecision) {
-    return color?.toString({ precision: colorPrecision });
+  if (!hexColors || colorPrecision) {
+    return color?.toString({ precision: colorPrecision ?? 3 });
   } else {
     return color?.toString({ format: "hex" });
   }

src/compiler/inheritance.test.ts

@@ -8,12 +8,21 @@ test("nested classes", () => {
 
   expect(compiled).toStrictEqual({
     s: [
+      [
+        "my-class",
+        [
+          {
+            c: ["my-class"],
+            s: [0],
+          },
+        ],
+      ],
       [
         "test",
         [
           {
             cq: [{ n: "my-class" }],
-            d: [{ color: "rgb(100% 0% 0%)" }],
+            d: [{ color: "#f00" }],
             s: [1, 2],
           },
         ],
@@ -53,7 +62,7 @@ test("multiple tiers classes", () => {
         [
           {
             cq: [{ n: "one" }, { n: "two" }],
-            d: [{ color: "rgb(100% 0% 0%)" }],
+            d: [{ color: "#f00" }],
             s: [1, 3],
           },
         ],
@@ -100,7 +109,7 @@ test("tiers with multiple classes", () => {
                 n: "three",
               },
             ],
-            d: [{ color: "rgb(100% 0% 0%)" }],
+            d: [{ color: "#f00" }],
             s: [1, 4],
           },
         ],

src/compiler/media-query.ts

@@ -13,13 +13,13 @@ import type {
   MediaFeatureComparison,
   StyleDescriptor,
 } from "./compiler.types";
-import type { StylesheetBuilder } from "./stylesheet";
 import { parseLength } from "./declarations";
+import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseMediaQuery(
   query: CSSMediaQuery,
   builder: StylesheetBuilder,
-): MediaCondition | undefined {
+) {
   let platformCondition: MediaCondition | undefined;
   let condition: MediaCondition | undefined;
 
@@ -57,7 +57,7 @@ export function parseMediaQuery(
     mediaQuery = ["!", mediaQuery];
   }
 
-  return mediaQuery;
+  builder.addMediaQuery(mediaQuery);
 }
 
 function parseMediaQueryCondition(

src/compiler/selectors.ts

@@ -238,9 +238,12 @@ function classNameSelector(
             getAttributeQuery().push(["a", "children", "!"]);
             break;
           }
+          default: {
+            // We don't support other pseudo-classes
+            return null;
+          }
         }
-
-        return null;
+        break;
       }
       case "attribute": {
         // We don't support attribute selectors as standalone selectors