diff --git a/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap b/__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap new file mode 100644 index 0000000..a818da2 --- /dev/null +++ b/__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`] = ` + + + A + + + B + + +`; diff --git a/__tests__/custom-tailwindcss/parent-variant.tsx b/__tests__/custom-tailwindcss/parent-variant.tsx new file mode 100644 index 0000000..9da51e6 --- /dev/null +++ b/__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( + + + A + B + + + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 97663e6..96659c8 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -10,4 +10,6 @@ export default plugin(function ({ addVariant }) { "native", nativePlatforms.map((platform) => `@media ${platform}`) ); + + addVariant("parent", "& > *"); }); diff --git a/src/tailwind/native/index.ts b/src/tailwind/native/index.ts index d6f9888..28e1766 100644 --- a/src/tailwind/native/index.ts +++ b/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( boxShadow(helpers, notSupported); pseudoClasses(helpers, notSupported); component(helpers, notSupported); + parent(helpers, notSupported); }; }, function ({ rem = 16 } = {}) { diff --git a/src/tailwind/native/parent.ts b/src/tailwind/native/parent.ts new file mode 100644 index 0000000..07f33dc --- /dev/null +++ b/src/tailwind/native/parent.ts @@ -0,0 +1,5 @@ +import { CustomPluginFunction } from "./types"; + +export const parent: CustomPluginFunction = ({ addVariant }) => { + addVariant("parent", "@selector (> *)"); +};