fix: expose postcss plugin

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
       },
     },
     {
-      files: ["*rc.js", "*.config.js", "plugin.js", "babel.js"],
+      files: ["*rc.js", "*.config.js", "plugin.js", "babel.js", "postcss.js"],
       rules: {
         "unicorn/prefer-module": "off",
         "@typescript-eslint/no-var-requires": "off",

cli/cli.css

@@ -1,2 +0,0 @@
-@tailwind components;
-@tailwind utilities;

cli/index.js

@@ -1,102 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable unicorn/import-style */
-/* eslint-disable unicorn/prefer-module */
-/* eslint-disable @typescript-eslint/no-var-requires */
-const yargs = require("yargs/yargs");
-const { hideBin } = require("yargs/helpers");
-const { spawn } = require("node:child_process");
-const { writeFile, readFile } = require("node:fs/promises");
-const { existsSync, writeFileSync } = require("node:fs");
-const { file } = require("tempy");
-const { join } = require("path");
-const { extractStyles } = require("../dist/babel/native-style-extraction");
-const {
-  getTailwindConfig,
-} = require("../dist/babel/utils/get-tailwind-config");
-
-const argv = yargs(hideBin(process.argv))
-  .option("platform", {
-    alias: "p",
-    description: "tailwindcss-react-native platform",
-    required: true,
-  })
-  .option("config", {
-    alias: "c",
-    description: "Path to tailwindcss config file",
-    default: "tailwind.config.js",
-  })
-  .option("output", {
-    alias: "o",
-    description: "Output file",
-    default: "tailwindcss-react-native-output.js",
-  })
-  .option("watch", {
-    alias: "w",
-    description: "Watch for changes and rebuild as needed",
-  }).argv;
-
-const { platform, output, watch, config } = argv;
-
-/**
- * Web does not need to compile any styles, as it will simply do a pass through
- */
-if (platform === "web") {
-  writeFileSync(
-    output,
-    `module.exports = {
-  platform: '${platform}',
-}`
-  );
-
-  process.exit(0);
-}
-
-const tailwindOutput = file();
-const tailwindConfig = getTailwindConfig(process.cwd(), {
-  tailwindConfigPath: config,
-});
-
-const spawnArguments = [
-  "tailwindcss",
-  "-c",
-  config,
-  "-i",
-  join(__dirname, "./cli.css"),
-  "-o",
-  tailwindOutput,
-];
-
-if (watch) spawnArguments.push("--watch");
-
-const child = spawn("npx", spawnArguments);
-
-let chain = Promise.resolve();
-
-// Everytime tailwindcss writes new styles, we write new styles
-child.stderr.on("data", (data) => {
-  process.stderr.write(data);
-
-  // Queue the wrtes, so we don't try and write to the file
-  // at the same time
-  chain = chain.then(async () => {
-    if (!existsSync(tailwindOutput)) return;
-
-    const css = await readFile(tailwindOutput, "utf8");
-    const { styles, media } = extractStyles(tailwindConfig, css, false);
-
-    return writeFile(
-      output,
-      `module.exports = {
-  platform: '${platform}',
-  styles: ${JSON.stringify(styles)},
-  media: ${JSON.stringify(media)}
-}`
-    );
-  });
-});
-
-(async function () {
-  await new Promise((resolve) => {
-    child.on("close", resolve);
-  });
-})();

package.json

@@ -5,9 +5,6 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "bin": {
-    "tailwindcss-react-native": "cli/index.js"
-  },
   "homepage": "https://github.com/marklawlor/tailwindcss-react-native#readme",
   "keywords": [
     "react-native",
@@ -40,7 +37,7 @@
   },
   "files": [
     "dist/",
-    "cli/",
+    "postcss.js",
     "babel.js",
     "plugin.js",
     "types.d.ts"

postcss.js

@@ -0,0 +1 @@
+module.exports = require("./dist/postcss").plugin;

src/babel/native-style-extraction/index.ts

@@ -5,7 +5,7 @@ import postcssCssvariables from "postcss-css-variables";
 import postcssColorFunctionalNotation from "postcss-color-functional-notation";
 import calc from "postcss-calc";
 
-import { plugin } from "./postcss-plugin";
+import { plugin } from "../../postcss";
 import { MediaRecord, StyleError, StyleRecord } from "../../types/common";
 
 /**

src/postcss/index.ts

@@ -1,13 +1,8 @@
 import { Plugin, PluginCreator } from "postcss";
 import { TailwindConfig } from "tailwindcss/tailwind-config";
-import { normaliseSelector } from "../../shared/selector";
+import { normaliseSelector } from "../shared/selector";
 import { toReactNative } from "./to-react-native";
-import {
-  MediaRecord,
-  StyleRecord,
-  Style,
-  StyleError,
-} from "../../types/common";
+import { MediaRecord, StyleRecord, Style, StyleError } from "../types/common";
 
 const mediaStringSymbol = Symbol("media_string");
 

src/postcss/to-react-native/index.ts

@@ -7,7 +7,7 @@ import {
 
 import { properties } from "./properties";
 import { isInvalidProperty } from "./is-invalid-property";
-import { StyleError } from "../../../types/common";
+import { StyleError } from "../../types/common";
 
 export interface ToReactNativeOptions {
   onError: (options: StyleError) => void;

website/docs/compilation/cli.md

@@ -15,7 +15,7 @@ Follow the [general setup instructions](//installation) to setup tailwindcss-rea
 module.exports = {
   plugins: [
     [
-      require("tailwindcss-react-native/postcss/native"),
+      require("tailwindcss-react-native/postcss"),
       {
         /* options */
       },

website/docs/compilation/postcss-native.md

@@ -19,7 +19,7 @@ module.exports = {
   plugins: [
     require("tailwindcss"),
     [
-      require("tailwindcss-react-native/postcss/native"),
+      require("tailwindcss-react-native/postcss"),
       {
         /* options */
       },