react-native-css 2.1.2 → 3.0.0-nightly.27bd5e2

package/src/babel/react-native-web.ts

@@ -0,0 +1,226 @@
+import { resolve } from "path";
+
+import { type NodePath } from "@babel/traverse";
+import tBabelTypes, {
+  type ImportDeclaration,
+  type ObjectPattern,
+  type Statement,
+  type VariableDeclaration,
+} from "@babel/types";
+
+import { allowedModules } from "./allowedModules";
+
+type BabelTypes = typeof tBabelTypes;
+
+function parseReactNativeWebSource(source: string, filename: string) {
+  if (source.startsWith(".")) {
+    source = resolve(filename, source);
+
+    const internalPath = source.split("react-native-web/dist")[1];
+    if (!internalPath) {
+      return;
+    }
+
+    // Strip the absolute system filepath
+    source = `react-native-web/${internalPath}`;
+  }
+
+  if (source === "react-native-web") {
+    return { source: "react-native-css/components" };
+  } else if (source.startsWith("react-native-web/")) {
+    const name = source.split("/").at(-1);
+    if (!name || !allowedModules.has(name)) {
+      return;
+    }
+
+    return {
+      source: `react-native-css/components/${name}`,
+      name,
+    };
+  }
+
+  return;
+}
+
+export function handleReactNativeWebImport(
+  declaration: ImportDeclaration,
+  t: BabelTypes,
+  filename: string,
+): Statement[] | undefined {
+  const { specifiers, source } = declaration;
+
+  const rnwSource = parseReactNativeWebSource(source.value, filename);
+  if (!rnwSource) {
+    return;
+  }
+
+  if (specifiers.length === 0) {
+    return [
+      t.importDeclaration([], t.stringLiteral("react-native-css/components")),
+    ];
+  }
+
+  const statements: Statement[] = [];
+
+  for (const specifier of specifiers) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+      const { source: newSource, name } = rnwSource;
+
+      if (!name) {
+        statements.push(
+          t.importDeclaration(
+            [t.importDefaultSpecifier(specifier.local)],
+            t.stringLiteral(newSource),
+          ),
+        );
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.local)],
+            t.stringLiteral(`react-native-css/components/${name}`),
+          ),
+        );
+      }
+    } else if (t.isImportNamespaceSpecifier(specifier)) {
+      statements.push(
+        t.importDeclaration(
+          [specifier],
+          t.stringLiteral("react-native-css/components"),
+        ),
+      );
+    } else {
+      const localName = t.isStringLiteral(specifier.imported)
+        ? specifier.imported.value
+        : specifier.imported.name;
+
+      if (!allowedModules.has(localName)) {
+        statements.push(t.importDeclaration([specifier], source));
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.imported)],
+            t.stringLiteral(`react-native-css/components/${localName}`),
+          ),
+        );
+      }
+    }
+  }
+
+  return statements;
+}
+
+export function handleReactNativeWebIdentifierRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+
+  if (!parsedSource) {
+    return;
+  }
+
+  const { source: newSource, name } = parsedSource;
+
+  if (name) {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.objectPattern([
+            name === id
+              ? t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(id),
+                  false,
+                  true,
+                )
+              : t.objectProperty(t.identifier(name), t.identifier(id)),
+          ]),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  } else {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.identifier(id),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  }
+}
+
+export function handleReactNativeWebObjectPatternRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: ObjectPattern,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeWebSource(source, filename);
+
+  // Don't handle `const { Text } = require('react-native-web/dist/cjs/Text');` - we only handle package exports
+  if (!parsedSource || parsedSource.name) {
+    return;
+  }
+
+  const statements: Statement[] = [];
+
+  for (const identifier of id.properties) {
+    if (t.isRestElement(identifier)) {
+      // Bail out on `const { ...rest } = require('react-native-web');`
+      // We need to exit as we do not handle `const { Text, ...rest } = require('react-native-web');`
+      return;
+    } else if (
+      !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
+    ) {
+      // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native-web');`
+      return;
+    } else {
+      const name = identifier.key.name;
+
+      if (!allowedModules.has(name)) {
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([identifier]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(source),
+              ]),
+            ),
+          ]),
+        );
+      } else {
+        const newSourceWithName = `react-native-css/components/${name}`;
+
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([
+                t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(identifier.value.name),
+                  false,
+                  true,
+                ),
+              ]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(newSourceWithName),
+              ]),
+            ),
+          ]),
+        );
+      }
+    }
+  }
+
+  return statements;
+}

package/src/babel/react-native.ts

@@ -0,0 +1,226 @@
+import { dirname, resolve } from "path";
+
+import { type NodePath } from "@babel/traverse";
+import tBabelTypes, {
+  type ImportDeclaration,
+  type ObjectPattern,
+  type Statement,
+  type VariableDeclaration,
+} from "@babel/types";
+
+import { allowedModules } from "./allowedModules";
+
+type BabelTypes = typeof tBabelTypes;
+
+function parseReactNativeSource(source: string, filename: string) {
+  if (source.startsWith(".")) {
+    source = resolve(dirname(filename), source);
+
+    const internalPath = source.split("react-native/Libraries/Components/")[1];
+    if (!internalPath) {
+      return;
+    }
+
+    // Strip the absolute system filepath
+    source = `react-native/Libraries/Components/${internalPath}`;
+  }
+
+  if (source === "react-native") {
+    return { source: "react-native-css/components" };
+  } else if (source.startsWith("react-native/")) {
+    const name = source.split("/").at(-1);
+    if (!name || !allowedModules.has(name)) {
+      return;
+    }
+
+    return {
+      source: `react-native-css/components/${name}`,
+      name,
+    };
+  }
+
+  return;
+}
+
+export function handleReactNativeImport(
+  declaration: ImportDeclaration,
+  t: BabelTypes,
+  filename: string,
+): Statement[] | undefined {
+  const { specifiers, source } = declaration;
+
+  const rnwSource = parseReactNativeSource(source.value, filename);
+  if (!rnwSource) {
+    return;
+  }
+
+  if (specifiers.length === 0) {
+    return [
+      t.importDeclaration([], t.stringLiteral("react-native-css/components")),
+    ];
+  }
+
+  const statements: Statement[] = [];
+
+  for (const specifier of specifiers) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+      const { source: newSource, name } = rnwSource;
+
+      if (!name) {
+        statements.push(
+          t.importDeclaration(
+            [t.importDefaultSpecifier(specifier.local)],
+            t.stringLiteral(newSource),
+          ),
+        );
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.local)],
+            t.stringLiteral(`react-native-css/components/${name}`),
+          ),
+        );
+      }
+    } else if (t.isImportNamespaceSpecifier(specifier)) {
+      statements.push(
+        t.importDeclaration(
+          [specifier],
+          t.stringLiteral("react-native-css/components"),
+        ),
+      );
+    } else {
+      const localName = t.isStringLiteral(specifier.imported)
+        ? specifier.imported.value
+        : specifier.imported.name;
+
+      if (!allowedModules.has(localName)) {
+        statements.push(t.importDeclaration([specifier], source));
+      } else {
+        statements.push(
+          t.importDeclaration(
+            [t.importSpecifier(specifier.local, specifier.imported)],
+            t.stringLiteral(`react-native-css/components/${localName}`),
+          ),
+        );
+      }
+    }
+  }
+
+  return statements;
+}
+
+export function handleReactNativeIdentifierRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeSource(source, filename);
+
+  if (!parsedSource) {
+    return;
+  }
+
+  const { source: newSource, name } = parsedSource;
+
+  if (name) {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.objectPattern([
+            name === id
+              ? t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(id),
+                  false,
+                  true,
+                )
+              : t.objectProperty(t.identifier(name), t.identifier(id)),
+          ]),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  } else {
+    return [
+      t.variableDeclaration(path.node.kind, [
+        t.variableDeclarator(
+          t.identifier(id),
+          t.callExpression(t.identifier("require"), [
+            t.stringLiteral(newSource),
+          ]),
+        ),
+      ]),
+    ];
+  }
+}
+
+export function handleReactNativeObjectPatternRequire(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: ObjectPattern,
+  source: string,
+  filename: string,
+) {
+  const parsedSource = parseReactNativeSource(source, filename);
+
+  // Don't handle `const { Text } = require('react-native/Libraries/Text/Text');` - we only handle package exports
+  if (!parsedSource || parsedSource.name) {
+    return;
+  }
+
+  const statements: Statement[] = [];
+
+  for (const identifier of id.properties) {
+    if (t.isRestElement(identifier)) {
+      // Bail out on `const { ...rest } = require('react-native');`
+      // We need to exit as we do not handle `const { Text, ...rest } = require('react-native');`
+      return;
+    } else if (
+      !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
+    ) {
+      // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native');`
+      return;
+    } else {
+      const name = identifier.key.name;
+
+      if (!allowedModules.has(name)) {
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([identifier]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(source),
+              ]),
+            ),
+          ]),
+        );
+      } else {
+        const newSourceWithName = `react-native-css/components/${name}`;
+
+        statements.push(
+          t.variableDeclaration(path.node.kind, [
+            t.variableDeclarator(
+              t.objectPattern([
+                t.objectProperty(
+                  t.identifier(name),
+                  t.identifier(identifier.value.name),
+                  false,
+                  true,
+                ),
+              ]),
+              t.callExpression(t.identifier("require"), [
+                t.stringLiteral(newSourceWithName),
+              ]),
+            ),
+          ]),
+        );
+      }
+    }
+  }
+
+  return statements;
+}

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).toStrictEqual({
+    s: [
+      [
+        "test",
+        [
+          {
+            aq: [["a", "className", "*=", "my-class"]],
+            d: [
+              {
+                color: "#f00",
+              },
+            ],
+            s: [1, 2],
+            v: [["__rn-css-color", "#f00"]],
+          },
+        ],
+      ],
+    ],
+  });
+});