react-native-css 2.1.1 → 3.0.0-nightly.0

package/src/compiler/selectors.ts

@@ -0,0 +1,505 @@
+/* eslint-disable */
+import type { Selector, SelectorList } from "lightningcss";
+
+import { Specificity } from "../runtime/utils/specificity";
+import type {
+  AttributeQuery,
+  AttrSelectorOperator,
+  CompilerOptions,
+  ContainerQuery,
+  MediaCondition,
+  PseudoClassesQuery,
+  SpecificityArray,
+} from "./compiler.types";
+import { StylesheetBuilder } from "./stylesheet";
+
+export type NormalizeSelector =
+  | ClassNameSelector
+  | {
+      type: "rootVariables" | "universalVariables";
+      subtype: "light" | "dark";
+    };
+
+type ClassNameSelector = {
+  type: "className";
+  specificity: SpecificityArray;
+  className: string;
+  mediaQuery?: MediaCondition[];
+  containerQuery?: ContainerQuery[];
+  pseudoClassesQuery?: PseudoClassesQuery;
+  attributeQuery?: AttributeQuery[];
+};
+
+/**
+ * Turns a CSS selector into a `react-native-css` selector.
+ */
+export function getSelectors(
+  selectorList: SelectorList,
+  isDarkMode: boolean,
+  builder: StylesheetBuilder,
+  selectors: NormalizeSelector[] = [],
+) {
+  for (let cssSelector of selectorList) {
+    // Ignore `:is()` & `:where()`, and just process its selectors
+    if (isIsPseudoClass(cssSelector) || isWherePseudoClass(cssSelector)) {
+      getSelectors(cssSelector[0].selectors, isDarkMode, builder, selectors);
+    } else if (
+      // Matches: :root {}
+      isRootVariableSelector(cssSelector)
+    ) {
+      // Matches: @media(prefers-dark-mode) { :root {} }
+      if (isDarkMode) {
+        selectors.push({
+          type: "rootVariables",
+          subtype: "dark",
+        });
+      } else {
+        selectors.push({
+          type: "rootVariables",
+          subtype: "light",
+        });
+      }
+    } else if (
+      // Matches: .dark:root {} || :root[class~="dark"]
+      isRootDarkVariableSelector(cssSelector)
+    ) {
+      selectors.push({
+        type: "rootVariables",
+        subtype: "dark",
+      });
+    } else if (
+      // Matches @media(prefers-dark-mode) { * {} }
+      isDarkMode &&
+      isDefaultVariableSelector(cssSelector)
+    ) {
+      selectors.push({
+        type: "universalVariables",
+        subtype: "dark",
+      });
+    } else if (
+      // Matches: * {}
+      isDefaultVariableSelector(cssSelector)
+    ) {
+      selectors.push({
+        type: "universalVariables",
+        subtype: "light",
+      });
+      // } else if (
+      //   // Matches:  .dark * {}
+      //   isDarkUniversalSelector(cssSelector)
+      // ) {
+      //   selectors.push({
+      //     type: "universalVariables",
+      //     subtype: "dark",
+      //   });
+      // } else if (
+      //   // Matches:  .dark <selector> {}
+      //   isDarkClassLegacySelector(cssSelector, collection)
+      // ) {
+      //   const [_, __, third, ...rest] = cssSelector;
+
+      //   getSelectors(extractedStyle, [[third!, ...rest]], collection, selectors, [
+      //     ["=", "prefers-color-scheme", "dark"],
+      //   ]);
+      // } else if (
+      //   // Matches:  <selector>:is(.dark *) {}
+      //   isDarkClassSelector(cssSelector, collection)
+      // ) {
+      //   const [first] = cssSelector;
+
+      //   getSelectors(extractedStyle, [[first!]], collection, selectors, [
+      //     ["=", "prefers-color-scheme", "dark"],
+      //   ]);
+    } else {
+      const selector = classNameSelector(cssSelector, builder.getOptions());
+
+      if (selector === null) {
+        continue;
+      }
+
+      selectors.push(selector);
+    }
+  }
+
+  return selectors;
+}
+
+function classNameSelector(
+  selector: Selector,
+  options: CompilerOptions,
+): ClassNameSelector | null {
+  let primaryClassName: string | undefined;
+  const specificity: SpecificityArray = [];
+  let mediaQuery: MediaCondition[] | undefined;
+  let containerQuery: ContainerQuery[] | undefined;
+  let attributeQuery: AttributeQuery[] | undefined;
+  let pseudoClassesQuery: PseudoClassesQuery | undefined;
+
+  let currentContainerQuery: ContainerQuery | undefined;
+
+  let isInClassBlock = false;
+  let newBlock = false;
+
+  function getAttributeQuery() {
+    if (newBlock) {
+      currentContainerQuery ??= {};
+    }
+
+    if (currentContainerQuery) {
+      if (!currentContainerQuery.a) {
+        currentContainerQuery.a = [];
+      }
+      return currentContainerQuery.a;
+    } else {
+      attributeQuery ??= [];
+      return attributeQuery;
+    }
+  }
+
+  function getPseudoClassesQuery() {
+    if (newBlock) {
+      currentContainerQuery ??= {};
+    }
+
+    if (currentContainerQuery) {
+      if (!currentContainerQuery.p) {
+        currentContainerQuery.p = {};
+      }
+      return currentContainerQuery.p;
+    } else {
+      pseudoClassesQuery ??= {};
+      return pseudoClassesQuery;
+    }
+  }
+
+  /*
+   * Loop over each token in reverse order.
+   */
+  for (const component of selector.reverse()) {
+    switch (component.type) {
+      case "universal":
+      case "namespace":
+      case "id":
+      case "pseudo-element":
+        // We don't support these selectors at all
+        return null;
+      case "nesting":
+        continue;
+      case "class": {
+        if (!primaryClassName) {
+          primaryClassName = component.name;
+        } else if (isInClassBlock) {
+          getAttributeQuery().unshift(["a", "className", "*=", component.name]);
+        } else if (component.name !== options.selectorPrefix) {
+          if (currentContainerQuery?.n) {
+            getAttributeQuery().unshift([
+              "a",
+              "className",
+              "*=",
+              component.name,
+            ]);
+          } else {
+            currentContainerQuery ??= {};
+            currentContainerQuery.n = component.name;
+
+            containerQuery ??= [];
+            containerQuery.unshift(currentContainerQuery);
+          }
+        }
+
+        isInClassBlock = true;
+        newBlock = false;
+
+        specificity[Specificity.ClassName] =
+          (specificity[Specificity.ClassName] ?? 0) + 1;
+
+        break;
+      }
+      case "pseudo-class": {
+        specificity[Specificity.ClassName] =
+          (specificity[Specificity.ClassName] ?? 0) + 1;
+
+        // if (component.kind === "is") {
+        //   if (isDarkUniversalSelector(component.selectors[0]!, collection)) {
+        //     const lastGroup = acc.classNames[acc.classNames.length - 1]!;
+        //     lastGroup[1] ??= {};
+        //     lastGroup[1].m ??= [];
+        //     lastGroup[1].m.push(["=", "prefers-color-scheme", "dark"]);
+        //     break;
+        //   }
+        // }
+
+        switch (component.kind) {
+          case "hover": {
+            getPseudoClassesQuery().h = 1;
+            break;
+          }
+          case "active": {
+            getPseudoClassesQuery().a = 1;
+            break;
+          }
+          case "focus": {
+            getPseudoClassesQuery().f = 1;
+            break;
+          }
+          case "disabled": {
+            getAttributeQuery().push(["a", "disabled"]);
+            break;
+          }
+          case "empty": {
+            getAttributeQuery().push(["a", "children", "!"]);
+            break;
+          }
+          default: {
+            // We don't support other pseudo-classes
+            return null;
+          }
+        }
+        break;
+      }
+      case "attribute": {
+        // We don't support attribute selectors as standalone selectors
+        // Except for a top level [dir] selector
+        // if (classNames.length === 0) {
+        //   if (
+        //     component.name === "dir" &&
+        //     component.operation?.operator === "equal"
+        //   ) {
+        //     mediaQuery ??= [];
+        //     mediaQuery.push(["!!", component.operation.value]);
+        //     break;
+        //   }
+
+        //   // Ignore any other attributes that are not part of a class selector
+        //   return null;
+        // }
+
+        // Turn attribute selectors into AttributeConditions
+        specificity[Specificity.ClassName] =
+          (specificity[Specificity.ClassName] ?? 0) + 1;
+
+        // [data-*] are turned into `dataSet` queries
+        // Everything else is turned into `attribute` queries
+        const attributeQuery: AttributeQuery = component.name.startsWith(
+          "data-",
+        )
+          ? ["d", toRNProperty(component.name.replace("data-", ""))]
+          : ["a", toRNProperty(component.name)];
+
+        if (component.operation) {
+          let operator: AttrSelectorOperator | undefined;
+
+          switch (component.operation.operator) {
+            case "equal":
+              operator = "=";
+              break;
+            case "includes":
+              operator = "~=";
+              break;
+            case "dash-match":
+              operator = "|=";
+              break;
+            case "prefix":
+              operator = "^=";
+              break;
+            case "substring":
+              operator = "*=";
+              break;
+            case "suffix":
+              operator = "$=";
+              break;
+            default:
+              component.operation.operator satisfies never;
+              break;
+          }
+
+          if (operator) {
+            attributeQuery.push(operator, component.operation.value);
+          }
+        }
+
+        getAttributeQuery().push(attributeQuery);
+        break;
+      }
+      case "type": {
+        /*
+         * We only support type selectors as part of the selector prefix
+         * For example: `html .my-class`
+         *
+         * NOTE: We ignore specificity for this
+         */
+        if (component.name === options.selectorPrefix) {
+          break;
+        }
+        return null;
+      }
+      case "combinator": {
+        // We only support the descendant combinator
+        if (component.value === "descendant") {
+          isInClassBlock = false;
+          newBlock = true;
+          currentContainerQuery = undefined;
+          break;
+        }
+
+        return null;
+      }
+    }
+  }
+
+  if (!primaryClassName) {
+    // No class name found, return null
+    return null;
+  }
+
+  return {
+    type: "className",
+    specificity: specificity,
+    className: primaryClassName,
+    mediaQuery,
+    containerQuery,
+    pseudoClassesQuery,
+    attributeQuery,
+  };
+}
+
+function isIsPseudoClass(
+  selector: Selector,
+): selector is [{ type: "pseudo-class"; kind: "is"; selectors: Selector[] }] {
+  return (
+    selector.length === 1 &&
+    selector[0]?.type === "pseudo-class" &&
+    selector[0].kind === "is"
+  );
+}
+
+function isWherePseudoClass(
+  selector: Selector,
+): selector is [
+  { type: "pseudo-class"; kind: "where"; selectors: Selector[] },
+] {
+  return (
+    selector.length === 1 &&
+    selector[0]?.type === "pseudo-class" &&
+    selector[0].kind === "where"
+  );
+}
+
+// function isDarkModeMediaQuery(query?: MediaCondition): boolean {
+//   if (!query) return false;
+
+//   return (
+//     query[0] === "=" &&
+//     query[1] === "prefers-color-scheme" &&
+//     query[2] === "dark"
+//   );
+// }
+
+// Matches:  <selector>:is(.dark *)
+// function isDarkClassSelector(
+//   [first, second, third]: Selector,
+//   collection: CompilerCollection,
+// ) {
+//   if (!collection.darkMode) {
+//     return false;
+//   }
+
+//   return (
+//     first &&
+//     second &&
+//     !third &&
+//     first.type === "class" &&
+//     second.type === "pseudo-class" &&
+//     second.kind === "is" &&
+//     second.selectors.length === 1 &&
+//     second.selectors[0]?.length === 3 &&
+//     second.selectors[0][0]?.type === "class" &&
+//     second.selectors[0][0].name === collection.darkMode &&
+//     second.selectors[0][1]?.type === "combinator" &&
+//     second.selectors[0][1].value === "descendant" &&
+//     second.selectors[0][2]?.type === "universal"
+//   );
+// }
+
+// Matches:  .dark <selector> {}
+// function isDarkClassLegacySelector(
+//   [first, second, third]: Selector,
+//   collection: CompilerCollection,
+// ) {
+//   if (!collection.darkMode) {
+//     return false;
+//   }
+
+//   return (
+//     first &&
+//     second &&
+//     third &&
+//     first.type === "class" &&
+//     first.name === collection.darkMode &&
+//     second.type === "combinator" &&
+//     second.value === "descendant" &&
+//     third.type === "class"
+//   );
+// }
+
+// Matches:  :root {}
+function isRootVariableSelector([first, second]: Selector) {
+  return (
+    first && !second && first.type === "pseudo-class" && first.kind === "root"
+  );
+}
+
+// Matches:  * {}
+function isDefaultVariableSelector([first, second]: Selector) {
+  return first && !second && first.type === "universal";
+}
+
+// Matches:  .dark:root  {}
+function isRootDarkVariableSelector([first, second]: Selector) {
+  return (
+    first &&
+    second &&
+    // .dark:root {}
+    ((first.type === "class" &&
+      second.type === "pseudo-class" &&
+      second.kind === "root") ||
+      // :root[class~=dark] {}
+      (first.type === "pseudo-class" &&
+        first.kind === "root" &&
+        second.type === "attribute" &&
+        second.name === "class" &&
+        second.operation &&
+        ["includes", "equal"].includes(second.operation.operator)))
+  );
+}
+
+// Matches:  .dark * {}
+// function isDarkUniversalSelector(
+//   [first, second, third]: Selector,
+//   collection: CompilerCollection,
+// ) {
+//   if (!collection.darkMode) {
+//     return false;
+//   }
+//   return (
+//     first &&
+//     second &&
+//     third &&
+//     first.type === "class" &&
+//     first.name === collection.darkMode &&
+//     second.type === "combinator" &&
+//     second.value === "descendant" &&
+//     third.type === "universal"
+//   );
+// }
+
+export function toRNProperty<T extends string>(str: T) {
+  return str
+    .replace(/^-rn-/, "")
+    .replace(/-./g, (x) => x[1]!.toUpperCase()) as CamelCase<T>;
+}
+
+type CamelCase<S extends string> =
+  S extends `${infer P1}-${infer P2}${infer P3}`
+    ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCase<P3>}`
+    : Lowercase<S>;

package/src/compiler/split-by-delimiter.ts

@@ -0,0 +1,19 @@
+export function splitByDelimiter<T>(
+  arr: T[],
+  callback: (item: T) => boolean,
+): T[][] {
+  const result = [];
+  let current = [];
+
+  for (const item of arr) {
+    if (callback(item)) {
+      if (current.length > 0) result.push(current);
+      current = [];
+    } else {
+      current.push(item);
+    }
+  }
+
+  if (current.length > 0) result.push(current);
+  return result;
+}