From 5978281becfd46120ec7c3f7111df0d6aac15670 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 10 Mar 2025 19:12:06 -0700
Subject: [PATCH 1/2] feat: support color-mix

---
 package.json             | 1 +
 src/removeUnsupported.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 834a0cc..3a2914e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@hookun/parse-animation-shorthand": "^0.1.4",
+    "@csstools/postcss-color-mix-function": "^3.0.8",
     "@csstools/postcss-is-pseudo-class": "~5.0.1",
     "@tailwindcss/postcss": "^4.0.0",
     "postcss-preset-env": "^10.1.3"
diff --git a/src/removeUnsupported.js b/src/removeUnsupported.js
index 79a223d..646616f 100644
--- a/src/removeUnsupported.js
+++ b/src/removeUnsupported.js
@@ -108,7 +108,7 @@ module.exports = (options = { debug: false }) => {
 
       // invalid with core 8.8+ at moment
       // Note: could be supported at somepoint
-      if (decl.prop === "placeholder-color" && decl.value?.includes("color-mix")) {
+      if (decl.prop === "placeholder-color") {
         return decl.remove();
       }
 
@@ -215,6 +215,7 @@ const supportedProperties = {
   "box-shadow": true,
   "clip-path": true,
   color: true,
+  "color-mix": true,
   flex: true,
   "flex-grow": true,
   "flex-direction": true,

From 9658f2543167bd37862d09659182773e8c2bfcfd Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 10 Mar 2025 19:13:51 -0700
Subject: [PATCH 2/2] chore: add "@csstools/postcss-color-mix-function"

---
 nativescript.webpack.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/nativescript.webpack.js b/nativescript.webpack.js
index 7d367c6..10fde2f 100644
--- a/nativescript.webpack.js
+++ b/nativescript.webpack.js
@@ -11,7 +11,16 @@ module.exports = (webpack) => {
   const addPostCSSPlugins = (options = {}) => {
     return webpack.merge(options, {
       postcssOptions: {
-        plugins: ["postcss-preset-env", "@tailwindcss/postcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"],
+        plugins: [
+          "postcss-preset-env", 
+          "@tailwindcss/postcss", 
+          "@nativescript/tailwind", 
+          "@csstools/postcss-is-pseudo-class", 
+          [
+            "@csstools/postcss-color-mix-function",
+            { preserve: false },
+          ]
+        ],
       },
     });
   };