react-native-css 2.1.2 → 3.0.0-nightly.26b272f

package/src/compiler/atRules.ts

@@ -0,0 +1,144 @@
+import type {
+  DeclarationBlock,
+  ParsedComponent,
+  Rule,
+  TokenOrValue,
+} from "lightningcss";
+
+import type { StyleRuleMapping } from "./compiler.types";
+import { toRNProperty } from "./selectors";
+import { splitByDelimiter } from "./split-by-delimiter";
+import type { StylesheetBuilder } from "./stylesheet";
+
+export interface PropAtRule {
+  type: "unknown";
+  value: {
+    name: "prop";
+    prelude: Extract<TokenOrValue, { type: "token" }>[];
+    block: Extract<TokenOrValue, { type: "token" }>[] | null;
+  };
+}
+
+/***********************************************
+ * @react-native                               *
+ ***********************************************/
+
+export interface ReactNativeAtRule {
+  type: "custom";
+  value: {
+    name: "react-native";
+    prelude: null | Extract<ParsedComponent, { type: "repeated" }>;
+    body: {
+      type: "declaration-list";
+      value: Pick<DeclarationBlock, "declarations">;
+    };
+  };
+}
+
+export function maybeMutateReactNativeOptions(
+  rule: Rule | ReactNativeAtRule,
+  builder: StylesheetBuilder,
+) {
+  if (rule.type !== "custom" || rule.value?.name !== "react-native") {
+    return;
+  }
+
+  const { declarations } = rule.value.body.value;
+  if (!declarations) return;
+
+  for (const declaration of declarations) {
+    if (declaration.property !== "custom") continue;
+
+    switch (declaration.value.name) {
+      case "preserve-variables": {
+        declaration.value.value.forEach((token) => {
+          if (token.type !== "dashed-ident") {
+            return;
+          }
+
+          if (token.value !== "true" && token.value !== "false") {
+            return;
+          }
+
+          builder.setOptions("preserveVariables", token.value === "true");
+        });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+}
+
+/***********************************************
+ * @prop                                       *
+ ***********************************************/
+
+function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
+  return rule.type === "unknown" && rule.value.name === "prop";
+}
+
+export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
+  const mapping: StyleRuleMapping = {};
+
+  if (!rules) return mapping;
+
+  for (const rule of rules) {
+    if (!isPropAtRule(rule)) continue;
+
+    if (rule.value.prelude.length > 0) {
+      const prelude = rule.value.prelude.filter((item) => {
+        return item.value.type !== "white-space";
+      });
+
+      propAtRuleBlock(prelude, mapping);
+    } else if (rule.value.block) {
+      // Remove all whitespace tokens
+      const blocks = rule.value.block.filter((item) => {
+        return item.value.type !== "white-space";
+      });
+
+      // Separate each rule, delimited by a semicolon
+      const blockRules = splitByDelimiter(blocks, (item) => {
+        return item.value.type === "semicolon";
+      });
+
+      for (const block of blockRules) {
+        propAtRuleBlock(block, mapping);
+      }
+    }
+  }
+
+  return mapping;
+}
+
+function propAtRuleBlock(
+  token: Extract<TokenOrValue, { type: "token" }>[],
+  mapping: StyleRuleMapping = {},
+): StyleRuleMapping {
+  const [from, to] = splitByDelimiter(token, (item) => {
+    return item.value.type === "colon";
+  });
+
+  if (!from || from.length !== 1 || !to) {
+    return mapping;
+  }
+
+  const fromToken = from[0];
+  if (!fromToken || fromToken.value.type !== "ident") {
+    return mapping;
+  }
+
+  mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
+    switch (item.value.type) {
+      case "delim":
+        return index === 0 && item.value.value === "*" ? ["*"] : [];
+      case "ident":
+        return [toRNProperty(item.value.value)];
+      default:
+        return [];
+    }
+  });
+
+  return mapping;
+}

package/src/compiler/attributes.test.ts

@@ -0,0 +1,28 @@
+import { compile } from "../compiler";
+
+test("multiple classes", () => {
+  const compiled = compile(`
+.my-class.test {
+  color: red;
+}`);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "test",
+        [
+          {
+            aq: [["a", "className", "*=", "my-class"]],
+            d: [
+              {
+                color: "#f00",
+              },
+            ],
+            s: [1, 2],
+            v: [["__rn-css-color", "#f00"]],
+          },
+        ],
+      ],
+    ],
+  });
+});

package/src/compiler/compiler.ts

@@ -0,0 +1,298 @@
+/* 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";
+
+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({
+    filename: "style.css", // This is ignored, but required
+    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    visitor,
+  });
+
+  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 "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 "supports":
+    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 = containerRule.name;
+  }
+
+  builder.addContainerQuery(query);
+
+  for (const rule of containerRule.rules) {
+    extractRule(rule, builder);
+  }
+}