feat: support tailwindcss v4 (#194)

Author: NathanWalker

nativescript.webpack.js

@@ -11,7 +11,7 @@ module.exports = (webpack) => {
   const addPostCSSPlugins = (options = {}) => {
     return webpack.merge(options, {
       postcssOptions: {
-        plugins: ["tailwindcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"],
+        plugins: ["postcss-preset-env", "@tailwindcss/postcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"],
       },
     });
   };

package.json

@@ -35,12 +35,14 @@
   "license": "MIT",
   "devDependencies": {
     "@nativescript/webpack": "^5.0.8",
-    "postcss": "8.4.16",
-    "tailwindcss": "^3.4.0"
+    "postcss": "^8.4.16",
+    "tailwindcss": "^4.0.0"
   },
   "dependencies": {
     "@hookun/parse-animation-shorthand": "^0.1.4",
-    "@csstools/postcss-is-pseudo-class": "4.0.4"
+    "@csstools/postcss-is-pseudo-class": "~5.0.1",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss-preset-env": "^10.1.3"
   },
   "peerDependencies": {
     "postcss": "^8.0.0"

src/removeUnsupported.js

@@ -50,6 +50,13 @@ module.exports = (options = { debug: false }) => {
         return rule.remove();
       }
 
+      // replace :root and :host pseudo selector, introduced in Tailwind 4+ with .ns-root for var handling.
+      if (rule.selector.includes(":root") || rule.selector.includes(":host")) {
+        rule.selectors = rule.selectors.map((selector) =>
+          selector.replace(/:root/, ".ns-root").replace(/:host/, ".ns-root")
+        );
+      }
+      
       // remove rules with unsupported selectors
       if (!isSupportedSelector(rule.selector)) {
         return rule.remove();
@@ -99,6 +106,18 @@ 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")) {
+        return decl.remove();
+      }
+
+      // invalid with core 8.8+ at moment
+      // Note: could be supported at somepoint
+      if (decl.value?.includes("currentColor")) {
+        return decl.remove();
+      }
+
       // replace vertical-align: middle
       // with    vertical-align: center
       if (decl.prop === "vertical-align") {
@@ -219,6 +238,12 @@ const supportedProperties = {
   "margin-left": true,
   "margin-right": true,
   "margin-top": true,
+  "margin-block": true,
+  "margin-block-start": true,
+  "margin-block-end": true,
+  "margin-inline": true,
+  "margin-inline-start": true,
+  "margin-inline-end": true,
   "min-height": true,
   "min-width": true,
   "off-background-color": true,