From 52dd6e793fc76d0820d025e2cfc54019ac2c3bb3 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Thu, 23 Jun 2022 23:57:57 +1000 Subject: [PATCH] test: refactor to use dangerouslyCompileStyles --- __tests__/custom-tailwindcss/parent.tsx | 2 +- __tests__/styled/props.tsx | 14 +++++++------- __tests__/tailwindcss/divide-color.tsx | 2 +- __tests__/tailwindcss/divide-style.tsx | 2 +- __tests__/tailwindcss/divide-width.tsx | 8 ++++---- __tests__/tailwindcss/fill.tsx | 2 +- __tests__/tailwindcss/gap.tsx | 2 +- __tests__/tailwindcss/rtl.tsx | 4 ++-- __tests__/tailwindcss/runner/index.tsx | 20 +++++++++++--------- __tests__/tailwindcss/space-between.tsx | 4 ++-- __tests__/tailwindcss/stroke-width.tsx | 2 +- __tests__/tailwindcss/stroke.tsx | 4 ++-- src/provider.tsx | 2 ++ src/style-sheet-store/index.ts | 11 +++++++++++ website/docs/frameworks/expo.md | 8 ++++++++ 15 files changed, 55 insertions(+), 32 deletions(-) create mode 100644 website/docs/frameworks/expo.md diff --git a/__tests__/custom-tailwindcss/parent.tsx b/__tests__/custom-tailwindcss/parent.tsx index 95baf6d..75d6f1b 100644 --- a/__tests__/custom-tailwindcss/parent.tsx +++ b/__tests__/custom-tailwindcss/parent.tsx @@ -42,7 +42,7 @@ tailwindRunner("Custom - Parent State Variants", [ describe("Custom - Parent Variant Snapshots", () => { test("parent:text-white", () => { const tree = render( - + A B diff --git a/__tests__/styled/props.tsx b/__tests__/styled/props.tsx index dbeb073..6719441 100644 --- a/__tests__/styled/props.tsx +++ b/__tests__/styled/props.tsx @@ -34,7 +34,7 @@ const TestClassPropsComponent = styled( describe("Styled", () => { test("can render components", () => { const tree = render( - + @@ -45,7 +45,7 @@ describe("Styled", () => { test("can style custom props", () => { const tree = render( - + ).toJSON(); @@ -55,7 +55,7 @@ describe("Styled", () => { test("can set base classNames", () => { const tree = render( - + ).toJSON(); @@ -65,7 +65,7 @@ describe("Styled", () => { test("can add new classNames", () => { const tree = render( - + ).toJSON(); @@ -75,7 +75,7 @@ describe("Styled", () => { test("can render with default props", () => { const tree = render( - + ).toJSON(); @@ -85,7 +85,7 @@ describe("Styled", () => { test("classProps on native", () => { const tree = render( - + ).toJSON(); @@ -95,7 +95,7 @@ describe("Styled", () => { test("classProps on css", () => { const tree = render( - + ).toJSON(); diff --git a/__tests__/tailwindcss/divide-color.tsx b/__tests__/tailwindcss/divide-color.tsx index 7a78752..24992a6 100644 --- a/__tests__/tailwindcss/divide-color.tsx +++ b/__tests__/tailwindcss/divide-color.tsx @@ -34,7 +34,7 @@ const cases: Array<[string, ViewStyle["borderColor"]]> = [ describe("Border - Divide Color", () => { test.each(cases)("divide-%s", (unit) => { const tree = render( - + A B diff --git a/__tests__/tailwindcss/divide-style.tsx b/__tests__/tailwindcss/divide-style.tsx index ed9c3e5..1b5b927 100644 --- a/__tests__/tailwindcss/divide-style.tsx +++ b/__tests__/tailwindcss/divide-style.tsx @@ -13,7 +13,7 @@ const cases: Array = [ describe("Border - Divide Style", () => { test.each(cases)("divide-%s", (unit) => { const tree = render( - + A B diff --git a/__tests__/tailwindcss/divide-width.tsx b/__tests__/tailwindcss/divide-width.tsx index 40d9233..de3f2a8 100644 --- a/__tests__/tailwindcss/divide-width.tsx +++ b/__tests__/tailwindcss/divide-width.tsx @@ -8,7 +8,7 @@ const cases: Array = [[0], [2], [4], [8]]; describe("Border - Divide Width", () => { test("divide-x", () => { const tree = render( - + A B @@ -21,7 +21,7 @@ describe("Border - Divide Width", () => { test("divide-y", () => { const tree = render( - + A B @@ -34,7 +34,7 @@ describe("Border - Divide Width", () => { test.each(cases)("divide-x-%s", (unit) => { const tree = render( - + A B @@ -47,7 +47,7 @@ describe("Border - Divide Width", () => { test.each(cases)("divide-y-%s", (unit) => { const tree = render( - + A B diff --git a/__tests__/tailwindcss/fill.tsx b/__tests__/tailwindcss/fill.tsx index 095cb88..828d4b2 100644 --- a/__tests__/tailwindcss/fill.tsx +++ b/__tests__/tailwindcss/fill.tsx @@ -36,7 +36,7 @@ const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] }); describe("Svg - Fill", () => { test.each(cases)("fill-%s", (unit) => { const tree = render( - + diff --git a/__tests__/tailwindcss/gap.tsx b/__tests__/tailwindcss/gap.tsx index 5e958d2..8f241cf 100644 --- a/__tests__/tailwindcss/gap.tsx +++ b/__tests__/tailwindcss/gap.tsx @@ -9,7 +9,7 @@ import { StyledComponent } from "../../src"; describe("Flexbox & Grid - Gap", () => { test.each([["0"]])("gap-%s", (unit) => { const tree = render( - + A B diff --git a/__tests__/tailwindcss/rtl.tsx b/__tests__/tailwindcss/rtl.tsx index 18d9782..2e6fc0d 100644 --- a/__tests__/tailwindcss/rtl.tsx +++ b/__tests__/tailwindcss/rtl.tsx @@ -6,7 +6,7 @@ import { StyledComponent } from "../../src"; describe("RTL", () => { test("left", () => { const tree = render( - + @@ -17,7 +17,7 @@ describe("RTL", () => { test.only("right", () => { const tree = render( - + diff --git a/__tests__/tailwindcss/runner/index.tsx b/__tests__/tailwindcss/runner/index.tsx index 75a020a..c33417d 100644 --- a/__tests__/tailwindcss/runner/index.tsx +++ b/__tests__/tailwindcss/runner/index.tsx @@ -11,6 +11,7 @@ import cssPlugin from "../../../src/tailwind/css"; import { nativePlugin } from "../../../src/tailwind/native"; import { TailwindProvider, TailwindProviderProps } from "../../../src"; import { PropsWithChildren } from "react"; +import { StyleSheetStore } from "../../../src/style-sheet-store"; export type Test = [string, TestValues] | [string, StyleRecord, true]; @@ -79,10 +80,7 @@ export function assertStyles( } } -export function TestProvider({ - css, - ...props -}: PropsWithChildren) { +function dangerouslyCompileStyles(css: string, store: StyleSheetStore) { const { styles, atRules, topics, masks, childClasses } = extractStyles({ theme: {}, plugins: [cssPlugin, nativePlugin({})], @@ -91,14 +89,18 @@ export function TestProvider({ serializer: testStyleSerializer, }); + Object.assign(store.styles, styles); + Object.assign(store.atRules, atRules); + Object.assign(store.topics, topics); + Object.assign(store.masks, masks); + Object.assign(store.childClasses, childClasses); +} + +export function TestProvider(props: PropsWithChildren) { return ( ); } diff --git a/__tests__/tailwindcss/space-between.tsx b/__tests__/tailwindcss/space-between.tsx index 62de999..c644dac 100644 --- a/__tests__/tailwindcss/space-between.tsx +++ b/__tests__/tailwindcss/space-between.tsx @@ -12,7 +12,7 @@ tailwindRunner( describe("Border - Divide Width", () => { test.each(spacingCases)("space-x-%s", (unit) => { const tree = render( - + A B @@ -25,7 +25,7 @@ describe("Border - Divide Width", () => { test.each(spacingCases)("space-y-%s", (unit) => { const tree = render( - + A B diff --git a/__tests__/tailwindcss/stroke-width.tsx b/__tests__/tailwindcss/stroke-width.tsx index 7fcfdc8..5dafb39 100644 --- a/__tests__/tailwindcss/stroke-width.tsx +++ b/__tests__/tailwindcss/stroke-width.tsx @@ -14,7 +14,7 @@ const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] }); describe("Svg - Stroke Width", () => { test.each(cases)("stroke-%s", (unit) => { const tree = render( - + diff --git a/__tests__/tailwindcss/stroke.tsx b/__tests__/tailwindcss/stroke.tsx index 541c0d7..ed1b20c 100644 --- a/__tests__/tailwindcss/stroke.tsx +++ b/__tests__/tailwindcss/stroke.tsx @@ -36,7 +36,7 @@ const StyledCircle = styled(Circle, { classProps: ["fill", "stroke"] }); describe("Svg - Stroke", () => { test.each(cases)("stroke-%s", (unit) => { const tree = render( - + @@ -48,7 +48,7 @@ describe("Svg - Stroke", () => { test("works with stroke width", () => { const tree = render( - + diff --git a/src/provider.tsx b/src/provider.tsx index fa5ee6f..d0e009c 100644 --- a/src/provider.tsx +++ b/src/provider.tsx @@ -32,6 +32,7 @@ export function TailwindProvider({ webOutput = typeof StyleSheet.create({ test: {} }).test === "number" ? "native" : "css", + dangerouslyCompileStyles, }: PropsWithChildren) { const output = Platform.select({ web: webOutput, @@ -51,6 +52,7 @@ export function TailwindProvider({ childClasses, preprocessed: output === "css", colorScheme: initialColorScheme, + dangerouslyCompileStyles, }); }, [ platform, diff --git a/src/style-sheet-store/index.ts b/src/style-sheet-store/index.ts index de7d3b9..12d4e19 100644 --- a/src/style-sheet-store/index.ts +++ b/src/style-sheet-store/index.ts @@ -83,6 +83,12 @@ export interface StyleSheetStoreConstructor { topics?: Record>; masks?: Record; childClasses?: Record; + + // This is used for tests & snack demos + dangerouslyCompileStyles?: ( + className: string, + store: StyleSheetStore + ) => void; } /** @@ -114,6 +120,7 @@ export class StyleSheetStore extends ColorSchemeStore { dimensionListener: EmitterSubscription; appearanceListener: NativeEventSubscription; + dangerouslyCompileStyles: StyleSheetStoreConstructor["dangerouslyCompileStyles"]; styles: Record; atRules: MediaRecord; @@ -137,6 +144,7 @@ export class StyleSheetStore extends ColorSchemeStore { platform = Platform.OS, preprocessed = false, colorScheme, + dangerouslyCompileStyles, }: StyleSheetStoreConstructor = {}) { super(colorScheme); @@ -148,6 +156,7 @@ export class StyleSheetStore extends ColorSchemeStore { this.topics = topics; this.preprocessed = preprocessed; this.window = dimensions.get("window"); + this.dangerouslyCompileStyles = dangerouslyCompileStyles; const screen = dimensions.get("screen"); this.orientation = screen.height >= screen.width ? "portrait" : "landscape"; @@ -234,6 +243,8 @@ export class StyleSheetStore extends ColorSchemeStore { const snapshotKey = `(${composedClassName}).${stateBit}`; if (this.snapshot[snapshotKey]) return snapshotKey; + this.dangerouslyCompileStyles?.(composedClassName, this); + const classNames = composedClassName.split(/\s+/); const topics = new Set(); diff --git a/website/docs/frameworks/expo.md b/website/docs/frameworks/expo.md new file mode 100644 index 0000000..08e72c4 --- /dev/null +++ b/website/docs/frameworks/expo.md @@ -0,0 +1,8 @@ +# Expo + +If you are using Expo with a framework (Next.js, Gatsby, Storybook, etc), please follow their respective guides. + +Otherwise you can setup Expo by using Babel or the Tailwind CLI + +- [Babel](../native/babel.mdx) +- [Babel (Compile Only)](../native/babel-compile-only.md)