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,7 @@ import { parseContainerCondition } from "./container-query";
 import { parseDeclaration } from "./declarations";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
-import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
+import { getSelectors } from "./selectors";
 import { StylesheetBuilder } from "./stylesheet";
 
 /**
@@ -37,6 +38,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);
@@ -131,24 +136,31 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     case "style": {
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
       builder = builder.fork("style");
-      builder.newRule(parsePropAtRule(rule.value.rules));
 
       const declarationBlock = rule.value.declarations;
+      const mapping = parsePropAtRule(rule.value.rules);
+      const selectors = getSelectors(
+        rule.value.selectors,
+        false,
+        builder.getOptions(),
+      );
 
       if (declarationBlock) {
         if (declarationBlock.declarations) {
+          builder.newRule(mapping);
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
           }
+          builder.applyRuleToSelectors(selectors);
         }
 
         if (declarationBlock.importantDeclarations) {
+          builder.newRule(mapping, { important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
           }
+          builder.applyRuleToSelectors(selectors);
         }
-
-        builder.applyRuleToSelectors(rule.value.selectors);
       }
       break;
     }

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" });
   }
@@ -1887,7 +1887,9 @@ export function parseFontSizeDeclaration(
   declaration: DeclarationType<"font-size">,
   builder: StylesheetBuilder,
 ) {
-  return parseFontSize(declaration.value, builder);
+  const fontSize = parseFontSize(declaration.value, builder);
+  builder.addDescriptor("fontSize", fontSize);
+  builder.addDescriptor("--__rn-css-em", fontSize);
 }
 
 export function parseFontSize(value: FontSize, builder: StylesheetBuilder) {

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],
           },
         ],
@@ -83,7 +92,6 @@ test("tiers with multiple classes", () => {
         "three",
         [
           {
-            aq: [["a", "className", "*=", "two"]],
             c: ["three"],
             s: [0],
           },
@@ -100,7 +108,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

@@ -137,8 +137,13 @@ function classNameSelector(
   let currentContainerQuery: ContainerQuery | undefined;
 
   let isInClassBlock = false;
+  let newBlock = false;
 
   function getAttributeQuery() {
+    if (newBlock) {
+      currentContainerQuery ??= {};
+    }
+
     if (currentContainerQuery) {
       if (!currentContainerQuery.a) {
         currentContainerQuery.a = [];
@@ -151,6 +156,10 @@ function classNameSelector(
   }
 
   function getPseudoClassesQuery() {
+    if (newBlock) {
+      currentContainerQuery ??= {};
+    }
+
     if (currentContainerQuery) {
       if (!currentContainerQuery.p) {
         currentContainerQuery.p = {};
@@ -180,23 +189,24 @@ function classNameSelector(
         } else if (isInClassBlock) {
           getAttributeQuery().unshift(["a", "className", "*=", component.name]);
         } else if (component.name !== options.selectorPrefix) {
-          if (currentContainerQuery) {
+          if (currentContainerQuery?.n) {
             getAttributeQuery().unshift([
               "a",
               "className",
               "*=",
               component.name,
             ]);
           } else {
-            currentContainerQuery = {
-              n: component.name,
-            };
+            currentContainerQuery ??= {};
+            currentContainerQuery.n = component.name;
+
             containerQuery ??= [];
             containerQuery.unshift(currentContainerQuery);
           }
         }
 
         isInClassBlock = true;
+        newBlock = false;
 
         specificity[Specificity.ClassName] =
           (specificity[Specificity.ClassName] ?? 0) + 1;
@@ -238,9 +248,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
@@ -322,6 +335,7 @@ function classNameSelector(
         // We only support the descendant combinator
         if (component.value === "descendant") {
           isInClassBlock = false;
+          newBlock = true;
           currentContainerQuery = undefined;
           break;
         }