feat: backgroundImage

Author: marklawlor

CONTRIBUTING.md

@@ -44,14 +44,6 @@ To run the example app on iOS:
 yarn example ios
 ```
 
-To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
-
-```sh
-Running "CssExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
-```
-
-Note the `"fabric":true` and `"concurrentRoot":true` properties.
-
 To run the example app on Web:
 
 ```sh
@@ -71,12 +63,34 @@ To fix formatting errors, run the following:
 yarn lint --fix
 ```
 
+### Testing
+
 Remember to add tests for your change if possible. Run the unit tests by:
 
 ```sh
 yarn test
 ```
 
+### Debugging
+
+Run the example via the command line with the `debug` script to enable debugging:
+
+```sh
+yarn example debug
+```
+
+This will print parsed CSS and style objects to the console, which can help you understand how the library processes CSS files.
+
+### Commands
+
+The `yarn example` command is a shortcut for running commands in the example app. You can run any command that is available in the example app's `package.json` by prefixing it with `yarn example`.
+
+You can also run Expo commands directly from the root directory by using the `yarn example expo` command. For example, to run the Expo prebuild, you can use:
+
+```sh
+yarn example expo prebuild
+```
+
 ### Commit message convention
 
 We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:

example/package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "expo start --clear",
+    "start": "expo start",
+    "debug": "DEBUG='react-native-css:*' expo start --clear",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web"

example/src/App.tsx

@@ -4,8 +4,18 @@ import "../global.css";
 
 export default function App() {
   return (
-    <View className="justify-center items-center flex-1">
-      <Text className="text-red-500">Test Component</Text>
-    </View>
+    <>
+      <View className="justify-center items-center flex-1 bg-linear-to-r from-cyan-500 to-blue-500">
+        <Text className="">Test Component</Text>
+      </View>
+      <View
+        className="justify-center items-center flex-1"
+        style={{
+          experimental_backgroundImage: "linear-gradient(to right, #f00, #0f0)",
+        }}
+      >
+        <Text className="">Test Component2</Text>
+      </View>
+    </>
   );
 }

src/compiler/compiler.ts

@@ -24,6 +24,8 @@ import { parseMediaQuery } from "./media-query";
 import { getSelectors } from "./selectors";
 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
  *
@@ -35,7 +37,7 @@ export function compile(
   code: Buffer | string,
   options: CompilerOptions = {},
 ): ReactNativeCssStyleSheet {
-  const { logger = debug("react-native-css") } = options;
+  const { logger = defaultLogger } = options;
   const features = Object.assign({}, options.features);
 
   if (options.selectorPrefix && options.selectorPrefix.startsWith(".")) {
@@ -44,22 +46,16 @@ export function compile(
 
   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 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));
-      }
-    }
-  };
-
   const customAtRules: CustomAtRules = {
     "react-native": {
       body: "declaration-list",
@@ -84,19 +80,21 @@ export function compile(
   };
 
   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) => {
-          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));
-            }
-          }
-        });
+        decl.value.value.forEach((token) => onVarUsage(token));
       }
       return decl;
     };

src/compiler/declarations.ts

@@ -15,9 +15,12 @@ import type {
   FontStyle,
   FontVariantCaps,
   FontWeight,
+  Gradient,
+  GradientItemFor_DimensionPercentageFor_LengthValue,
   Length,
   LengthPercentageOrAuto,
   LengthValue,
+  LineDirection,
   LineHeight,
   LineStyle,
   MaxSize,
@@ -51,7 +54,9 @@ type Parser<T extends Declaration["property"]> = (
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 ) => StyleDescriptor | void;
 
-const propertyRename: Record<string, string> = {};
+const propertyRename: Record<string, string> = {
+  "background-image": "experimental_backgroundImage",
+};
 
 const needsRuntimeParsing = new Set([
   "animation",
@@ -78,6 +83,7 @@ const parsers: {
   "animation-timing-function": addAnimationValue,
   "aspect-ratio": parseAspectRatio,
   "background-color": parseColorDeclaration,
+  "background-image": parseBackgroundImage,
   "block-size": parseSizeDeclaration,
   "border": parseBorder,
   "border-block": parseBorderBlock,
@@ -966,6 +972,7 @@ export function parseUnparsed(
         case "rgba":
         case "hsl":
         case "hsla":
+        case "linear-gradient":
           return unparsedFunction(tokenOrValue, builder);
         case "hairlineWidth":
           return [{}, tokenOrValue.value.name, []];
@@ -2598,6 +2605,86 @@ export function kebabCase(str: string) {
   );
 }
 
+function parseBackgroundImage(
+  declaration: DeclarationType<"background-image">,
+  builder: StylesheetBuilder,
+) {
+  builder.addDescriptor(
+    "experimental_backgroundImage",
+    declaration.value.flatMap((image): StyleDescriptor[] => {
+      switch (image.type) {
+        case "gradient": {
+          const gradient = parseGradient(image.value, builder);
+          return gradient ? [gradient] : [];
+        }
+        case "none":
+          return ["none"];
+      }
+
+      return [];
+    }),
+  );
+  return;
+}
+
+function parseGradient(
+  gradient: Gradient,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (gradient.type) {
+    case "linear": {
+      return [
+        {},
+        "@linear-gradient",
+        [
+          parseLineDirection(gradient.direction, builder),
+          ...gradient.items.map((item) => parseGradientItem(item, builder)),
+        ],
+      ];
+    }
+  }
+
+  return;
+}
+
+function parseLineDirection(
+  lineDirection: LineDirection,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (lineDirection.type) {
+    case "corner":
+      return `to ${lineDirection.horizontal} ${lineDirection.vertical}`;
+    case "horizontal":
+    case "vertical":
+      return `to ${lineDirection.value}`;
+    case "angle":
+      return parseAngle(lineDirection.value, builder);
+    default: {
+      lineDirection satisfies never;
+    }
+  }
+
+  return;
+}
+
+function parseGradientItem(
+  item: GradientItemFor_DimensionPercentageFor_LengthValue,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (item.type) {
+    case "color-stop": {
+      const args: StyleDescriptor[] = [parseColor(item.color, builder)];
+      if (item.position) {
+        args.push(parseLength(item.position, builder));
+      }
+
+      return [{}, "@colorStop", args, 1];
+    }
+    case "hint":
+      return parseLength(item.value, builder);
+  }
+}
+
 const namedColors = new Set([
   "aliceblue",
   "antiquewhite",

src/metro/index.ts

@@ -1,14 +1,15 @@
 /* eslint-disable */
-import { versions } from "node:process";
 import { dirname, relative, sep } from "node:path";
+import { versions } from "node:process";
 
 import connect from "connect";
+import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
 import { compile } from "../compiler/compiler";
-import { setupTypeScript } from "./typescript";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
+import { setupTypeScript } from "./typescript";
 
 export interface WithReactNativeCSSOptions {
   /* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */
@@ -19,6 +20,8 @@ export interface WithReactNativeCSSOptions {
   globalClassNamePolyfill?: boolean;
 }
 
+const defaultLogger = debug("react-native-css:metro");
+
 export function withReactNativeCSS<
   T extends MetroConfig | (() => Promise<MetroConfig>),
 >(config: T, options?: WithReactNativeCSSOptions): T {
@@ -200,6 +203,11 @@ export function withReactNativeCSS<
                   ),
                   Array.from(nativeCSSFiles.values()).map(([, value]) => value),
                 );
+
+                if (defaultLogger.enabled && fileBuffer) {
+                  defaultLogger(`Transformed ${filePath}`);
+                  defaultLogger(fileBuffer?.toString());
+                }
               }
 
               return transformFile(filePath, transformOptions, fileBuffer);

src/runtime/native/__tests__/background-image.test.tsx

@@ -27,8 +27,6 @@ StyleCollection.keyframes = family<string, Observable<Animation_V2[1]>>(() => {
 StyleCollection.inject = function (options: ReactNativeCssStyleSheet) {
   observableBatch.current = new Set();
 
-  // console.log(JSON.stringify(options, null, 2));
-
   if (options.s) {
     for (const style of options.s) {
       StyleCollection.styles(style[0]).set(style[1]);

src/runtime/native/injection.ts

@@ -129,11 +129,26 @@ export function resolveValue(
         // @translate, @rotate, @scale, etc.
         return { [name.slice(1)]: simpleResolve(value[2], castToArray)[0] };
       } else {
-        const args = simpleResolve(value[2], castToArray);
+        if (name === "linear-gradient") {
+          debugger;
+        }
+        let args = simpleResolve(value[2], castToArray);
+
         if (args === undefined) {
           return;
         } else if (Array.isArray(args)) {
-          value = `${name}(${args.join(", ")})`;
+          if (args.length === 1) {
+            args = args[0];
+          }
+
+          const joinedArgs = args.map((arg: unknown) => {
+            if (Array.isArray(arg)) {
+              return arg.flat().join(" ");
+            }
+            return arg;
+          });
+
+          value = `${name}(${joinedArgs.join(", ")})`;
         } else {
           value = `${name}(${args})`;
         }