From d1fcc1fc709de20cbaceeaec78bc9d48ea263b9b Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Wed, 10 Aug 2022 11:26:07 -0300
Subject: [PATCH] docs: improve babel transform only docs

---
 .../docs/guides/babel-transform-only.md       |  4 +-
 .../website/docs/native/babel-compile-only.md | 28 -------
 apps/website/docs/native/babel.mdx            | 81 -------------------
 3 files changed, 2 insertions(+), 111 deletions(-)
 delete mode 100644 apps/website/docs/native/babel-compile-only.md
 delete mode 100644 apps/website/docs/native/babel.mdx

diff --git a/apps/website/docs/guides/babel-transform-only.md b/apps/website/docs/guides/babel-transform-only.md
index 1f332c8..fbaaee8 100644
--- a/apps/website/docs/guides/babel-transform-only.md
+++ b/apps/website/docs/guides/babel-transform-only.md
@@ -1,10 +1,10 @@
-import StartCoding from "../\_start-coding-components.md"
+import StartCoding from "../\_start-coding.md"
 import Dependencies from "../\_dependencies.mdx"
 import Tailwind from "../\_tailwind.mdx"
 
 # Babel (transform only)
 
-Some frameworks provide an optimised pipeline for their CSS files. Babel to transform your components
+Some frameworks (eg Next.js) provide an optimised pipeline for their CSS output and/or have first-class Tailwind support. In this case, you can use to framework to compile the styles and have Babel simply transform your components.
 
 ## Setup
 
diff --git a/apps/website/docs/native/babel-compile-only.md b/apps/website/docs/native/babel-compile-only.md
deleted file mode 100644
index 82ce92d..0000000
--- a/apps/website/docs/native/babel-compile-only.md
+++ /dev/null
@@ -1,28 +0,0 @@
-import StartCoding from "../\_start-coding-components.md"
-import Dependencies from "../\_dependencies.mdx"
-import Tailwind from "../\_tailwind.mdx"
-
-# Babel (compile only)
-
-Babel helps reduce the projects boilerplate, but is not required for actual use. This version just compiles and injects the Tailwind CSS styles.
-
-## Setup
-
-### 1. Install the dependencies
-
-<Dependencies />
-
-### 2. Setup Tailwindcss
-
-<Tailwind />
-
-### 3. Configure your babel.config.js
-
-```js
-// babel.config.js
-module.exports = {
-  plugins: [["nativewind/babel", { mode: "compileOnly" }]],
-};
-```
-
-<StartCoding />
diff --git a/apps/website/docs/native/babel.mdx b/apps/website/docs/native/babel.mdx
deleted file mode 100644
index ee6868d..0000000
--- a/apps/website/docs/native/babel.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import StartCoding from "../_start-coding.md";
-import Dependencies from "../_dependencies.mdx";
-import Tailwind from "../_tailwind.mdx";
-
-# Babel
-
-The default babel configuration will both compile/inject the Tailwind CSS styles and transform any component with the `className` attributed into a `styled` version.
-
-This is the recommended configuration as it provides the fastest setup and best DX experience, with support for Tailwind intellisense within your IDE.
-
-```tsx
-/* Example how your code will look */
-import { Text } from "react-native";
-
-export function MyFancyButton(props) {
-  return (
-    <Pressable className="component bg-violet-500 hover:bg-violet-600 active:bg-violet-700">
-      <Text className="font-bold component-active:font-extrabold" {...props} />;
-    </Pressable>
-  );
-}
-```
-
-## Setup
-
-### 1. Install the dependencies
-
-<Dependencies />
-
-### 2. Setup Tailwindcss
-
-<Tailwind />
-
-### 3. Configure your babel.config.js
-
-```js
-// babel.config.js
-module.exports = {
-  plugins: ["nativewind/babel"],
-};
-```
-
-<StartCoding />
-
-## Configuring what is transformed
-
-When targeting `Web` you may be using components that should not be transformed.
-
-By default native components (e.g. `div`) are not transformed.
-
-However if you are using a `web` only library such as `react-select`, you can disabled the transform on components imported from this library.
-
-Either by explicitly stating which modules can be transformed.
-
-```diff
-// babel.config.js
-module.exports = {
-- plugins: ["nativewind/babel"],
-+ plugins: [
-+   [
-+    "nativewind/babel"
-+    { allowModuleTransform: ["moti"] }
-+   ]
-+ ],
-};
-```
-
-Or blocking modules you don't want transformed.
-
-```diff
-// babel.config.js
-module.exports = {
-- plugins: ["nativewind/babel"],
-+ plugins: [
-+   [
-+    "nativewind/babel"
-+    { blockModuleTransform: ["react-select"] }
-+   ]
-+ ],
-};
-```