From 8d9f8e9b242afc6ed40d501dd3ff272ebb6268d4 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Tue, 28 Apr 2026 11:34:43 -0700
Subject: [PATCH] fix: vite plugin order

---
 nativescript.vite.mjs | 56 +++++++++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/nativescript.vite.mjs b/nativescript.vite.mjs
index 1a3299d..054ee56 100644
--- a/nativescript.vite.mjs
+++ b/nativescript.vite.mjs
@@ -1,23 +1,55 @@
 import { createRequire } from "module";
+
 const require = createRequire(import.meta.url);
 
+// PostCSS plugin order matters:
+// 1. postcss-preset-env
+//    Run this first so it only sees user-authored CSS, not Tailwind output.
+//    If it runs last, its is/not-pseudo-class and cascade-layers polyfills can
+//    chew on Tailwind v4's `:not(#\#)` specificity chains and silently
+//    mangle utilities like `w-[400]`.
+//
+// 2. @tailwindcss/postcss
+//    Tailwind v4 expansion. Pass `optimize: false` because this plugin enables
+//    its built-in lightningcss optimizer whenever
+//    `process.env.NODE_ENV === "production"`, which `vite build` sets even for
+//    `mode: development` debug bundles.
+//    lightningcss "normalizes" unitless values by appending `px`
+//    (`width: 400` -> `width: 400px`).
+//
+// 3. @nativescript/tailwind
+//    Apply NativeScript-specific selector/property rewrites:
+//    `:root` -> `.ns-root, .ns-modal`, `rem` -> `px`, and removal of
+//    unsupported declarations.
+//
+// 4. @csstools/postcss-is-pseudo-class
+//    Flatten `:is()` and `:not()` because NativeScript's selector matcher does
+//    not support `:is()` natively.
 let postcssConfig = "./postcss.config.js";
 
 try {
-  const twV4 = require("@tailwindcss/postcss");
+  const tailwindcssPostcss = require("@tailwindcss/postcss");
   const nsTailwind = require("@nativescript/tailwind");
-  const postCssOklabFunction = require('@csstools/postcss-oklab-function');
-  postcssConfig = { plugins: [twV4, nsTailwind, postCssOklabFunction({ preserve: false })] };
-} catch (e2) {
+  const postcssPresetEnv = require("postcss-preset-env");
+  const postcssIsPseudoClass = require("@csstools/postcss-is-pseudo-class");
+
+  postcssConfig = {
+    plugins: [
+      postcssPresetEnv(),
+      tailwindcssPostcss({ optimize: false }),
+      nsTailwind,
+      postcssIsPseudoClass(),
+    ],
+  };
+} catch (e) {
   console.warn(
-    "Inline PostCSS unavailable, falling back to ./postcss.config.js"
+    "[ns-tailwind] Inline PostCSS chain unavailable, falling back to ./postcss.config.js. Cause:",
+    e?.message ?? e,
   );
 }
 
-export default () => {
-  return {
-    css: {
-      postcss: postcssConfig,
-    },
-  };
-};
+export default () => ({
+  css: {
+    postcss: postcssConfig,
+  },
+});