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

package/src/compiler/compiler.ts

@@ -0,0 +1,306 @@
+/* eslint-disable */
+import { inspect } from "node:util";
+
+import { debug } from "debug";
+import {
+  transform as lightningcss,
+  type ContainerRule,
+  type MediaQuery as CSSMediaQuery,
+  type CustomAtRules,
+  type MediaRule,
+  type Rule,
+  type TokenOrValue,
+  type Visitor,
+} from "lightningcss";
+
+import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
+import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import { parseContainerCondition } from "./container-query";
+import { parseDeclaration } from "./declarations";
+import { extractKeyFrames } from "./keyframes";
+import { parseMediaQuery } from "./media-query";
+import { StylesheetBuilder } from "./stylesheet";
+import { supportsConditionValid } from "./supports";
+
+const defaultLogger = debug("react-native-css:compiler");
+
+/**
+ * Converts a CSS file to a collection of style declarations that can be used with the StyleSheet API
+ *
+ * @param code - The CSS file contents
+ * @param options - Compiler options
+ * @returns A `ReactNativeCssStyleSheet` that can be passed to `StyleSheet.register` or used with a custom runtime
+ */
+export function compile(code: Buffer | string, options: CompilerOptions = {}) {
+  const { logger = defaultLogger } = options;
+  const isLoggerEnabled =
+    "enabled" in logger ? logger.enabled : Boolean(logger);
+
+  const features = Object.assign({}, options.features);
+
+  if (options.selectorPrefix && options.selectorPrefix.startsWith(".")) {
+    options.selectorPrefix = options.selectorPrefix.slice(1);
+  }
+
+  logger(`Features ${JSON.stringify(features)}`);
+
+  if (process.env.NODE_ENV !== "production") {
+    if (defaultLogger.enabled) {
+      defaultLogger(code.toString());
+    }
+  }
+
+  const builder = new StylesheetBuilder(options);
+
+  logger(`Start lightningcss`);
+
+  const customAtRules: CustomAtRules = {
+    "react-native": {
+      body: "declaration-list",
+    },
+  };
+
+  const visitor: Visitor<typeof customAtRules> = {
+    Rule(rule) {
+      maybeMutateReactNativeOptions(rule, builder);
+    },
+    StyleSheetExit(sheet) {
+      if (isLoggerEnabled) {
+        logger(`Found ${sheet.rules.length} rules to process`);
+        logger(
+          inspect(sheet.rules, { depth: null, colors: true, compact: false }),
+        );
+      }
+
+      for (const rule of sheet.rules) {
+        // Extract the style declarations and animations from the current rule
+        extractRule(rule, builder);
+        // We have processed this rule, so now delete it from the AST
+      }
+
+      logger(`Exiting lightningcss`);
+    },
+  };
+
+  if (options.stripUnusedVariables) {
+    const onVarUsage = (token: TokenOrValue) => {
+      if (token.type === "function") {
+        token.value.arguments.forEach((token) => onVarUsage(token));
+      } else if (token.type === "var") {
+        builder.varUsage.add(token.value.name.ident);
+        if (token.value.fallback) {
+          const fallbackValues = token.value.fallback;
+          fallbackValues.forEach((varObj) => onVarUsage(varObj));
+        }
+      }
+    };
+
+    visitor.Declaration = (decl) => {
+      if (decl.property === "unparsed" || decl.property === "custom") {
+        decl.value.value.forEach((token) => onVarUsage(token));
+      }
+      return decl;
+    };
+  }
+
+  // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
+  lightningcss({
+    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    visitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
+  });
+
+  return {
+    stylesheet: () => builder.getNativeStyleSheet(),
+    warnings: () => builder.getWarnings(),
+  };
+}
+
+/**
+ * Extracts style declarations and animations from a given CSS rule, based on its type.
+ */
+function extractRule(rule: Rule, builder: StylesheetBuilder) {
+  // Check the rule's type to determine which extraction function to call
+  switch (rule.type) {
+    case "keyframes": {
+      // If the rule is a keyframe animation, extract it with the `extractKeyFrames` function
+      extractKeyFrames(rule.value, builder);
+      break;
+    }
+    case "container": {
+      // If the rule is a container, extract it with the `extractedContainer` function
+      extractContainer(rule.value, builder);
+      break;
+    }
+    case "media": {
+      // If the rule is a media query, extract it with the `extractMedia` function
+      extractMedia(rule.value, builder);
+      break;
+    }
+    case "nested-declarations": {
+      const value = rule.value;
+
+      const declarationBlock = value.declarations;
+      if (declarationBlock) {
+        if (declarationBlock.declarations?.length) {
+          builder.newNestedRule();
+          for (const declaration of declarationBlock.declarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+
+        if (declarationBlock.importantDeclarations?.length) {
+          builder.newNestedRule({ important: true });
+          for (const declaration of declarationBlock.importantDeclarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+      }
+      break;
+    }
+    case "style": {
+      const value = rule.value;
+
+      const declarationBlock = value.declarations;
+      const mapping = parsePropAtRule(value.rules);
+
+      // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
+      builder = builder.fork("style", value.selectors);
+
+      if (declarationBlock) {
+        if (declarationBlock.declarations) {
+          builder.newRule(mapping);
+          for (const declaration of declarationBlock.declarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+
+        if (declarationBlock.importantDeclarations) {
+          builder.newRule(mapping, { important: true });
+          for (const declaration of declarationBlock.importantDeclarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+      }
+
+      if (value.rules) {
+        for (const nestedRule of value.rules) {
+          extractRule(nestedRule, builder);
+        }
+      }
+
+      break;
+    }
+    case "layer-block":
+      for (const layerRule of rule.value.rules) {
+        extractRule(layerRule, builder);
+      }
+      break;
+    case "supports":
+      if (supportsConditionValid(rule.value.condition)) {
+        for (const layerRule of rule.value.rules) {
+          extractRule(layerRule, builder);
+        }
+      }
+      break;
+    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":
+      break;
+  }
+}
+
+/**
+ * This function takes in a MediaRule object, an CompilerCollection object and a CssToReactNativeRuntimeOptions object,
+ * and returns an array of MediaQuery objects representing styles extracted from screen media queries.
+ *
+ * @param mediaRule - The MediaRule object containing the media query and its rules.
+ * @param collection - The CompilerCollection object to use when extracting styles.
+ * @param parseOptions - The CssToReactNativeRuntimeOptions object to use when parsing styles.
+ *
+ * @returns undefined if no screen media queries are found in the mediaRule, else it returns the extracted styles.
+ */
+function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
+  builder = builder.fork("media");
+
+  // Initialize an empty array to store screen media queries
+  const media: CSSMediaQuery[] = [];
+
+  // Iterate over all media queries in the mediaRule
+  for (const mediaQuery of mediaRule.query.mediaQueries) {
+    if (
+      // If this is only a media query
+      (mediaQuery.mediaType === "print" && mediaQuery.qualifier !== "not") ||
+      // If this is a @media not print {}
+      // We can only do this if there are no conditions, as @media not print and (min-width: 100px) could be valid
+      (mediaQuery.mediaType !== "print" &&
+        mediaQuery.qualifier === "not" &&
+        mediaQuery.condition === null)
+    ) {
+      continue;
+    }
+
+    media.push(mediaQuery);
+  }
+
+  if (media.length === 0) {
+    return;
+  }
+
+  for (const m of media) {
+    parseMediaQuery(m, builder);
+  }
+
+  // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
+  for (const rule of mediaRule.rules) {
+    extractRule(rule, builder);
+  }
+}
+
+/**
+ * @param containerRule - The ContainerRule object containing the container query and its rules.
+ * @param collection - The CompilerCollection object to use when extracting styles.
+ * @param parseOptions - The CssToReactNativeRuntimeOptions object to use when parsing styles.
+ */
+function extractContainer(
+  containerRule: ContainerRule,
+  builder: StylesheetBuilder,
+) {
+  builder = builder.fork("container");
+
+  // Iterate over all rules inside the containerRule and extract their styles using the updated CompilerCollection
+  const query: ContainerQuery = {
+    m: parseContainerCondition(containerRule.condition, builder),
+  };
+
+  if (containerRule.name) {
+    query.n = `c:${containerRule.name}`;
+  }
+
+  builder.addContainerQuery(query);
+
+  for (const rule of containerRule.rules) {
+    extractRule(rule, builder);
+  }
+}

package/src/compiler/compiler.types.ts

@@ -0,0 +1,266 @@
+/* eslint-disable */
+import type { Debugger } from "debug";
+import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
+
+import { VAR_SYMBOL } from "../runtime/native/reactivity";
+
+export interface CompilerOptions {
+  filename?: string;
+  projectRoot?: string;
+  inlineRem?: number | false;
+  selectorPrefix?: string;
+  stylesheetOrder?: number;
+  features?: FeatureFlagRecord;
+  logger?: (message: string) => void | Debugger;
+  /** Strip unused variables declarations. Defaults: false */
+  stripUnusedVariables?: boolean;
+  /** @internal */
+  ignorePropertyWarningRegex?: (string | RegExp)[];
+  preserveVariables?: boolean;
+  hexColors?: boolean;
+  colorPrecision?: number;
+}
+
+/**
+ * A `react-native-css` StyleSheet
+ */
+export interface ReactNativeCssStyleSheet {
+  /** Feature flags */
+  f?: FeatureFlagRecord;
+  /** rem */
+  r?: number;
+  /** StyleRuleSets */
+  s?: (readonly [string, StyleRuleSet])[];
+  /** KeyFrames */
+  k?: Animation[];
+  /** Root Variables */
+  vr?: RootVariables;
+  /** Universal Variables */
+  vu?: RootVariables;
+}
+
+/********************************    Styles    ********************************/
+
+/**
+ * The JS representation of a style object
+ *
+ * This CSS rule is a single StyleRuleSet, made up of multiple StyleRules
+ *
+ * ```css
+ * .my-class {
+ *   color: red;
+ * }
+ * ```
+ * Properties are split into normal and important properties, and then split
+ * into different StyleRules depending on their specificity, conditions, etc
+ */
+export type StyleRuleSet = StyleRule[];
+
+export interface StyleRule {
+  /** Specificity */
+  s: SpecificityArray;
+  /** Declarations */
+  d?: StyleDeclaration[];
+  /** Variables */
+  v?: VariableDescriptor[];
+  /** Named Containers */
+  c?: string[];
+
+  /** Declarations use variables */
+  dv?: number;
+
+  // Target override
+  target?: string | string[] | false;
+
+  /**
+   * Conditionals
+   */
+
+  /** MediaQuery */
+  m?: MediaCondition[];
+  /** PseudoClassesQuery */
+  p?: PseudoClassesQuery;
+  /** Container Query */
+  cq?: ContainerQuery[];
+  /** Attribute Conditions */
+  aq?: AttributeQuery[];
+
+  /**
+   * Animations and Transitions
+   */
+
+  /** Animations */
+  a?: boolean;
+}
+
+export type StyleDeclaration =
+  /** This is a static style object */
+  | Record<string, StyleDescriptor>
+  /** A style that needs to be set  */
+  | [StyleDescriptor, string | string[]]
+  /** A value that can only be computed at runtime, and only after styles have been calculated */
+  | [StyleDescriptor, string | string[], 1];
+
+export type StyleDescriptor =
+  | string
+  | number
+  | boolean
+  | undefined
+  | StyleFunction
+  | StyleDescriptor[];
+
+export type StyleFunction =
+  | [
+      Record<never, never>,
+      string, // string
+    ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+    ]
+  | [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+    ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+    ]
+  | [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+      1, // Should process after styles have been calculated
+    ]
+  | readonly [
+      Record<never, never>,
+      string, // string
+      StyleDescriptor, // arguments
+      1, // Should process after styles have been calculated
+    ];
+
+/******************************    Variables    *******************************/
+
+export type VariableDescriptor = [string, StyleDescriptor];
+export type VariableRecord = Record<string, VariableValue[]>;
+export type VariableValue =
+  | [StyleDescriptor]
+  | [StyleDescriptor, MediaCondition[]];
+
+export type RootVariables = [string, VariableValue[]][];
+
+export type InlineVariable = {
+  [VAR_SYMBOL]: "inline";
+  [key: string]: unknown | undefined;
+};
+
+/******************************   Animations  ******************************/
+
+export type Animation = [string, AnimationKeyframes[]];
+export type AnimationRecord = Record<string, AnimationKeyframes[]>;
+export type AnimationKeyframes = [string | number, StyleDeclaration[]];
+
+/******************************    Conditions    ******************************/
+
+export type MediaCondition =
+  // Boolean
+  | ["!!", MediaFeatureNameFor_MediaFeatureId]
+  // Not
+  | ["!", MediaCondition]
+  // And
+  | ["&", MediaCondition[]]
+  // Or
+  | ["|", MediaCondition[]]
+  // Comparison
+  | [
+      MediaFeatureComparison,
+      MediaFeatureNameFor_MediaFeatureId | "dir",
+      StyleDescriptor,
+    ]
+  // [Start, End]
+  | [
+      "[]",
+      MediaFeatureNameFor_MediaFeatureId,
+      StyleDescriptor, // Start
+      MediaFeatureComparison, // Start comparison
+      StyleDescriptor, // End
+      MediaFeatureComparison, // End comparison
+    ];
+
+export type MediaFeatureComparison = "=" | ">" | ">=" | "<" | "<=";
+
+export interface PseudoClassesQuery {
+  /** Hover */
+  h?: 1;
+  /** Active */
+  a?: 1;
+  /** Focus */
+  f?: 1;
+}
+
+type AttributeQueryType =
+  | "a" // Attribute
+  | "d"; // Data-Attribute
+
+export type AttributeQuery =
+  | [AttributeQueryType, string] // Exists
+  | [AttributeQueryType, string, "!"] // Falsy
+  | [AttributeQueryType, string, AttrSelectorOperator, string] // Use operator
+  | [AttributeQueryType, string, AttrSelectorOperator, string, "i" | "s"]; // Case sensitivity
+
+export type AttrSelectorOperator = "=" | "~=" | "|=" | "^=" | "$=" | "*=";
+
+/******************************    Containers    *****************************/
+
+export interface ContainerQuery {
+  /** Name */
+  n?: string | null;
+  m?: MediaCondition;
+  p?: PseudoClassesQuery;
+  a?: AttributeQuery[];
+}
+
+/******************************    Specificity    *****************************/
+
+/**
+ * https://drafts.csswg.org/selectors/#specificity-rules
+ *
+ * This array is sorted by most common values when parsing a StyleSheet
+ */
+export type SpecificityArray = SpecificityValue[];
+export type SpecificityValue = number | undefined;
+
+/******************************    Compiler    ********************************/
+
+type FeatureFlags = never;
+export type FeatureFlagRecord = Partial<Record<FeatureFlags, boolean>>;
+
+/** @internal */
+export type PathTokens = string | string[];
+/** @internal */
+export type StyleRuleMapping = Record<string, PathTokens>;
+
+/**
+ * @internal
+ */
+export type LoggerOptions = {
+  logger: (message: string) => void;
+};
+
+/**
+ * @internal
+ */
+export interface CompilerCollection extends CompilerOptions {
+  features: FeatureFlagRecord;
+  rules: Map<string, StyleRule[]>;
+  keyframes: Map<string, AnimationKeyframes[]>;
+  darkMode?: string | null;
+  rootVariables: VariableRecord;
+  universalVariables: VariableRecord;
+  selectorPrefix?: string;
+  appearanceOrder: number;
+  rem?: number | boolean;
+  varUsageCount: Map<string, number>;
+}

package/src/compiler/container-query.ts

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import type {
+  ContainerCondition as CSSContainerCondition,
+  QueryFeatureFor_ContainerSizeFeatureId,
+} from "lightningcss";
+
+import type { MediaCondition } from "./compiler.types";
+import {
+  parseMediaFeatureOperator,
+  parseMediaFeatureValue,
+} from "./media-query";
+import type { StylesheetBuilder } from "./stylesheet";
+
+export function parseContainerCondition(
+  condition: CSSContainerCondition,
+  builder: StylesheetBuilder,
+) {
+  let containerQuery = parseContainerQueryCondition(condition, builder);
+
+  // If any of these are undefined, the media query is invalid
+  if (!containerQuery || containerQuery.some((v) => v === undefined)) {
+    return;
+  }
+
+  return containerQuery;
+}
+
+function parseContainerQueryCondition(
+  condition: CSSContainerCondition,
+  builder: StylesheetBuilder,
+): MediaCondition | undefined {
+  switch (condition.type) {
+    case "feature":
+      return parseFeature(condition.value, builder);
+    case "not":
+      const query = parseContainerCondition(condition.value, builder);
+      return query ? ["!", query] : undefined;
+    case "operation":
+      const conditions = condition.conditions
+        .map((c) => parseContainerQueryCondition(c, builder))
+        .filter((v): v is MediaCondition => !!v);
+
+      if (conditions.length === 0) {
+        return;
+      }
+
+      switch (condition.operator) {
+        case "and":
+          return ["&", conditions];
+        case "or":
+          return ["|", conditions];
+        default:
+          condition.operator satisfies never;
+          return;
+      }
+    case "style":
+      // We don't support these yet
+      return;
+    default:
+      condition satisfies never;
+      return;
+  }
+}
+
+function parseFeature(
+  feature: QueryFeatureFor_ContainerSizeFeatureId,
+  builder: StylesheetBuilder,
+): MediaCondition | undefined {
+  switch (feature.type) {
+    case "boolean":
+      return ["!!", feature.name];
+    case "plain":
+      return [
+        "=",
+        feature.name,
+        parseMediaFeatureValue(feature.value, builder),
+      ];
+    case "range":
+      return [
+        parseMediaFeatureOperator(feature.operator),
+        feature.name,
+        parseMediaFeatureValue(feature.value, builder),
+      ];
+    case "interval":
+      return [
+        "[]",
+        feature.name,
+        parseMediaFeatureValue(feature.start, builder),
+        parseMediaFeatureOperator(feature.startOperator),
+        parseMediaFeatureValue(feature.end, builder),
+        parseMediaFeatureOperator(feature.endOperator),
+      ];
+    default:
+      feature satisfies never;
+      return;
+  }
+}