test: refactor to use dangerouslyCompileStyles

__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(
-      <TestProvider css="parent:text-white">
+      <TestProvider>
         <StyledComponent component={View} className="parent:text-white">
           <Text>A</Text>
           <Text>B</Text>

__tests__/styled/props.tsx

@@ -34,7 +34,7 @@ const TestClassPropsComponent = styled(
 describe("Styled", () => {
   test("can render components", () => {
     const tree = render(
-      <TestProvider css="m-1 p-2">
+      <TestProvider>
         <StyledView className="m-1" />
         <StyledView className="p-2" />
       </TestProvider>
@@ -45,7 +45,7 @@ describe("Styled", () => {
 
   test("can style custom props", () => {
     const tree = render(
-      <TestProvider css="m-1 p-2">
+      <TestProvider>
         <TestPropsComponent className="m-1" style2="p-2" />
       </TestProvider>
     ).toJSON();
@@ -55,7 +55,7 @@ describe("Styled", () => {
 
   test("can set base classNames", () => {
     const tree = render(
-      <TestProvider css="flex-row">
+      <TestProvider>
         <Row />
       </TestProvider>
     ).toJSON();
@@ -65,7 +65,7 @@ describe("Styled", () => {
 
   test("can add new classNames", () => {
     const tree = render(
-      <TestProvider css="flex-row p-4">
+      <TestProvider>
         <Row className="p-4" />
       </TestProvider>
     ).toJSON();
@@ -75,7 +75,7 @@ describe("Styled", () => {
 
   test("can render with default props", () => {
     const tree = render(
-      <TestProvider css="p-4">
+      <TestProvider>
         <StyledText className="p-4" />
       </TestProvider>
     ).toJSON();
@@ -85,7 +85,7 @@ describe("Styled", () => {
 
   test("classProps on native", () => {
     const tree = render(
-      <TestProvider css="m-1 p-4">
+      <TestProvider>
         <TestClassPropsComponent className="p-4" style2="m-1" />
       </TestProvider>
     ).toJSON();
@@ -95,7 +95,7 @@ describe("Styled", () => {
 
   test("classProps on css", () => {
     const tree = render(
-      <TestProvider nativeOutput="css" css="m-1 p-4">
+      <TestProvider nativeOutput="css">
         <TestClassPropsComponent className="p-4" style2="m-1" />
       </TestProvider>
     ).toJSON();

__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(
-      <TestProvider css={`divide-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`divide-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>

__tests__/tailwindcss/divide-style.tsx

@@ -13,7 +13,7 @@ const cases: Array<ViewStyle["borderStyle"][]> = [
 describe("Border - Divide Style", () => {
   test.each(cases)("divide-%s", (unit) => {
     const tree = render(
-      <TestProvider css={`divide-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`divide-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>

__tests__/tailwindcss/divide-width.tsx

@@ -8,7 +8,7 @@ const cases: Array<ViewStyle["borderWidth"][]> = [[0], [2], [4], [8]];
 describe("Border - Divide Width", () => {
   test("divide-x", () => {
     const tree = render(
-      <TestProvider css={`divide-x`}>
+      <TestProvider>
         <StyledComponent component={View} className="divide-x">
           <Text>A</Text>
           <Text>B</Text>
@@ -21,7 +21,7 @@ describe("Border - Divide Width", () => {
 
   test("divide-y", () => {
     const tree = render(
-      <TestProvider css={`divide-y`}>
+      <TestProvider>
         <StyledComponent component={View} className="divide-y">
           <Text>A</Text>
           <Text>B</Text>
@@ -34,7 +34,7 @@ describe("Border - Divide Width", () => {
 
   test.each(cases)("divide-x-%s", (unit) => {
     const tree = render(
-      <TestProvider css={`divide-x-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`divide-x-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>
@@ -47,7 +47,7 @@ describe("Border - Divide Width", () => {
 
   test.each(cases)("divide-y-%s", (unit) => {
     const tree = render(
-      <TestProvider css={`divide-y-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`divide-y-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>

__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(
-      <TestProvider css={`fill-${unit}`}>
+      <TestProvider>
         <Svg>
           <StyledCircle fill={`fill-${unit}`} />
         </Svg>

__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(
-      <TestProvider css={`gap-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`gap-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>

__tests__/tailwindcss/rtl.tsx

@@ -6,7 +6,7 @@ import { StyledComponent } from "../../src";
 describe("RTL", () => {
   test("left", () => {
     const tree = render(
-      <TestProvider css="ltr:p-4 rtl:p-4">
+      <TestProvider>
         <StyledComponent component={View} className="ltr:p-4" />
         <StyledComponent component={View} className="rtl:p-4" />
       </TestProvider>
@@ -17,7 +17,7 @@ describe("RTL", () => {
 
   test.only("right", () => {
     const tree = render(
-      <TestProvider css="ltr:p-4 rtl:p-4">
+      <TestProvider>
         <StyledComponent component={View} className="ltr:p-4" />
         <StyledComponent component={View} className="rtl:p-4" />
       </TestProvider>

__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<TailwindProviderProps & { css: string }>) {
+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<TailwindProviderProps>) {
   return (
     <TailwindProvider
-      styles={styles}
-      atRules={atRules}
-      topics={topics}
-      masks={masks}
-      childClasses={childClasses}
       {...props}
+      dangerouslyCompileStyles={dangerouslyCompileStyles}
     />
   );
 }

__tests__/tailwindcss/space-between.tsx

@@ -12,7 +12,7 @@ tailwindRunner(
 describe("Border - Divide Width", () => {
   test.each(spacingCases)("space-x-%s", (unit) => {
     const tree = render(
-      <TestProvider css={`space-x-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`space-x-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>
@@ -25,7 +25,7 @@ describe("Border - Divide Width", () => {
 
   test.each(spacingCases)("space-y-%s", (unit) => {
     const tree = render(
-      <TestProvider css={`space-y-${unit}`}>
+      <TestProvider>
         <StyledComponent component={View} className={`space-y-${unit}`}>
           <Text>A</Text>
           <Text>B</Text>

__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(
-      <TestProvider css={`stroke-${unit}`}>
+      <TestProvider>
         <Svg>
           <StyledCircle stroke={`stroke-${unit}`} />
         </Svg>

__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(
-      <TestProvider css={`stroke-${unit}`}>
+      <TestProvider>
         <Svg>
           <StyledCircle stroke={`stroke-${unit}`} />
         </Svg>
@@ -48,7 +48,7 @@ describe("Svg - Stroke", () => {
 
   test("works with stroke width", () => {
     const tree = render(
-      <TestProvider css="stroke-white stroke-1">
+      <TestProvider>
         <Svg>
           <StyledCircle stroke="stroke-white stroke-1" />
         </Svg>

src/provider.tsx

@@ -32,6 +32,7 @@ export function TailwindProvider({
   webOutput = typeof StyleSheet.create({ test: {} }).test === "number"
     ? "native"
     : "css",
+  dangerouslyCompileStyles,
 }: PropsWithChildren<TailwindProviderProps>) {
   const output = Platform.select({
     web: webOutput,
@@ -51,6 +52,7 @@ export function TailwindProvider({
       childClasses,
       preprocessed: output === "css",
       colorScheme: initialColorScheme,
+      dangerouslyCompileStyles,
     });
   }, [
     platform,

src/style-sheet-store/index.ts

@@ -83,6 +83,12 @@ export interface StyleSheetStoreConstructor {
   topics?: Record<string, Array<string>>;
   masks?: Record<string, number>;
   childClasses?: Record<string, string[]>;
+
+  // 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<string, Style>;
   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<string>();
 

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)