diff --git a/src/__tests__/compiler/declarations.test.tsx b/src/__tests__/compiler/declarations.test.tsx index 2ded1c53..c2e18378 100644 --- a/src/__tests__/compiler/declarations.test.tsx +++ b/src/__tests__/compiler/declarations.test.tsx @@ -4,6 +4,8 @@ import { compileWithAutoDebug } from "react-native-css/jest"; 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] }]], + ["-rn-ripple-radius: 10;", [{ d: [[10, ["android_ripple", "radius"]]], s: [1, 1] }]], + ["-rn-ripple-layer: foreground;", [{ d: [[true, ["android_ripple", "foreground"]]], s: [1, 1] }]], ["caret-color: black", [{ d: [["#000", ["cursorColor"]]], s: [1, 1] }]], ["fill: black;", [{ d: [["#000", ["fill"]]], 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 9c20ecac..deac60d4 100644 --- a/src/compiler/atRules.ts +++ b/src/compiler/atRules.ts @@ -88,6 +88,8 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) { "-webkit-line-clamp": ["numberOfLines"], "-rn-ripple-color": ["android_ripple", "color"], "-rn-ripple-style": ["android_ripple", "borderless"], + "-rn-ripple-radius": ["android_ripple", "radius"], + "-rn-ripple-layer": ["android_ripple", "foreground"], }; if (!rules) return mapping; diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index a5b9423f..2ed3b745 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -983,11 +983,17 @@ export function parseCustomDeclaration( parseUnparsed(declaration.value.value, builder, property), ); } else if (property === "-rn-ripple-style") { - builder.addDescriptor( - property, - parseUnparsed(declaration.value.value, builder, property) === - "borderless", - ); + if ( + parseUnparsed(declaration.value.value, builder, property) === "borderless" + ) { + builder.addDescriptor(property, true); + } + } else if (property === "-rn-ripple-layer") { + if ( + parseUnparsed(declaration.value.value, builder, property) === "foreground" + ) { + builder.addDescriptor(property, true); + } } else if (property === "object-fit") { // https://github.com/parcel-bundler/lightningcss/issues/1046 parseObjectFit(declaration.value, builder);