feat: add parent variant

__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
+<View
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onHoverIn={[Function]}
+  onHoverOut={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={Array []}
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#fff",
+        },
+      ]
+    }
+  >
+    A
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#fff",
+        },
+      ]
+    }
+  >
+    B
+  </Text>
+</View>
+`;

__tests__/custom-tailwindcss/parent-variant.tsx

@@ -0,0 +1,34 @@
+import { Text, View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { TestProvider } from "../tailwindcss/runner";
+import { StyledComponent } from "../../src";
+import { tailwindRunner } from "../tailwindcss/runner";
+
+tailwindRunner("Custom - Parent Variant", [
+  [
+    "parent:text-white",
+    {
+      "parent_text-white": [
+        {
+          atRules: [["selector", "(> *)"]],
+          color: "#fff",
+        },
+      ],
+    },
+  ],
+]);
+
+describe("Custom - Parent Variant Snapshots", () => {
+  test("parent:text-white", () => {
+    const tree = render(
+      <TestProvider css="parent:text-white">
+        <StyledComponent component={View} className="parent:text-white">
+          <Text>A</Text>
+          <Text>B</Text>
+        </StyledComponent>
+      </TestProvider>
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/tailwind/index.ts

@@ -10,4 +10,6 @@ export default plugin(function ({ addVariant }) {
     "native",
     nativePlatforms.map((platform) => `@media ${platform}`)
   );
+
+  addVariant("parent", "& > *");
 });

src/tailwind/native/index.ts

@@ -17,6 +17,7 @@ import { scale } from "./scale";
 import { skew } from "./skew";
 import { space } from "./space";
 import { translate } from "./translate";
+import { parent } from "./parent";
 
 export interface NativePluginOptions {
   rem?: number;
@@ -50,6 +51,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
       boxShadow(helpers, notSupported);
       pseudoClasses(helpers, notSupported);
       component(helpers, notSupported);
+      parent(helpers, notSupported);
     };
   },
   function ({ rem = 16 } = {}) {

src/tailwind/native/parent.ts

@@ -0,0 +1,5 @@
+import { CustomPluginFunction } from "./types";
+
+export const parent: CustomPluginFunction = ({ addVariant }) => {
+  addVariant("parent", "@selector (> *)");
+};