From 6c7385cd75108183e96ecb5f1c25473b20285a0d Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Mon, 18 Aug 2025 23:06:48 +1000
Subject: [PATCH] feat: android ripple

---
 .config/cspell.json                          |  1 +
 src/compiler/__tests__/declarations.test.tsx |  2 ++
 src/compiler/atRules.ts                      |  3 +++
 src/compiler/declarations.ts                 | 20 +++++++++++++-------
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/.config/cspell.json b/.config/cspell.json
index 6f512f1..ef3508b 100644
--- a/.config/cspell.json
+++ b/.config/cspell.json
@@ -10,6 +10,7 @@
     "xcworkspace"
   ],
   "words": [
+    "borderless",
     "colorjs",
     "oklab",
     "prebuild"
diff --git a/src/compiler/__tests__/declarations.test.tsx b/src/compiler/__tests__/declarations.test.tsx
index e827451..8e23833 100644
--- a/src/compiler/__tests__/declarations.test.tsx
+++ b/src/compiler/__tests__/declarations.test.tsx
@@ -2,6 +2,8 @@ import { compileWithAutoDebug } from "react-native-css/jest";
 
 // prettier-ignore
 const tests = [
+  ["-rn-ripple-color: black;", [{ d: [["black", ["android_ripple", "color"]]], s: [1, 1] }]],
+  ["-rn-ripple-style: borderless;", [{ d: [[true, ["android_ripple", "borderless"]]], s: [1, 1] }]],
   ["caret-color: black", [{ d: [["#000", ["cursorColor"]]], s: [1, 1] }]],
   ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]],
   ["rotate: 3deg;", [{ d: [[[{}, "rotateZ", "3deg"], "rotateZ"]], s: [1, 1] }]],
diff --git a/src/compiler/atRules.ts b/src/compiler/atRules.ts
index ba3ffe8..f4eec92 100644
--- a/src/compiler/atRules.ts
+++ b/src/compiler/atRules.ts
@@ -82,6 +82,9 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   // Include any default mapping here
   const mapping: StyleRuleMapping = {
     "caret-color": ["cursorColor"],
+    "-webkit-line-clamp": ["numberOfLines"],
+    "-rn-ripple-color": ["android_ripple", "color"],
+    "-rn-ripple-style": ["android_ripple", "borderless"],
   };
 
   if (!rules) return mapping;
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 9562270..35e055b 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -943,17 +943,23 @@ export function parseCustomDeclaration(
   builder: StylesheetBuilder,
 ) {
   const property = declaration.value.name;
-  if (
-    validProperties.has(property) ||
-    property.startsWith("--") ||
-    property.startsWith("-rn-")
-  ) {
+
+  if (property === "-webkit-line-clamp") {
     builder.addDescriptor(
       property,
       parseUnparsed(declaration.value.value, builder, property),
     );
-  } else if (property === "-webkit-line-clamp") {
-    builder.addMapping({ [property]: ["numberOfLines"] });
+  } else if (property === "-rn-ripple-style") {
+    builder.addDescriptor(
+      property,
+      parseUnparsed(declaration.value.value, builder, property) ===
+        "borderless",
+    );
+  } else if (
+    validProperties.has(property) ||
+    property.startsWith("--") ||
+    property.startsWith("-rn-")
+  ) {
     builder.addDescriptor(
       property,
       parseUnparsed(declaration.value.value, builder, property),