feat: android ripple (#95)

Author: marklawlor

.config/cspell.json

@@ -10,6 +10,7 @@
     "xcworkspace"
   ],
   "words": [
+    "borderless",
     "colorjs",
     "oklab",
     "prebuild"

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] }]],

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;

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),