ns-tailwind-vite 1.0.0

package/README.md

@@ -0,0 +1,182 @@
+# @nativescript/tailwind
+
+Makes using [Tailwind CSS v4](https://tailwindcss.com/) in NativeScript a whole lot easier!
+
+```html
+<label
+  text="Tailwind CSS is awesome!"
+  class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full"
+/>
+```
+
+![Tailwind CSS is awesome!](https://user-images.githubusercontent.com/879060/81098285-73e3ad80-8f09-11ea-8cfa-7e2ec2eebcde.png)
+
+## Features
+
+- ✅ **TailwindCSS v4** - Full support for the latest Tailwind
+- ✅ **HMR Support** - Hot Module Replacement works out of the box
+- ✅ **Vite Native** - Uses `@tailwindcss/vite` directly, no PostCSS required
+- ✅ **Auto Transform** - Automatically converts CSS for NativeScript compatibility
+
+## Installation
+
+```bash
+npm install @nativescript/tailwind tailwindcss @tailwindcss/vite
+```
+
+## Setup
+
+### Automatic Setup (Recommended)
+
+The plugin auto-configures via `nativescript.vite.mjs`. Just install and import TailwindCSS in your project.
+
+Add to your `app.css`:
+
+```css
+@import "tailwindcss";
+```
+
+That's it! Start using Tailwind classes in your app.
+
+### Manual Setup
+
+If you need more control, configure in `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import nativescriptTailwind from "@nativescript/tailwind/vite";
+
+export default defineConfig({
+  plugins: [
+    nativescriptTailwind({
+      debug: false, // Enable debug logging
+      includeTailwind: true, // Include @tailwindcss/vite (set false if adding separately)
+    }),
+  ],
+});
+```
+
+### Without TailwindCSS Vite Plugin
+
+If you're adding `@tailwindcss/vite` separately:
+
+```ts
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import nativescriptTailwind from "@nativescript/tailwind/vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), nativescriptTailwind({ includeTailwind: false })],
+});
+```
+
+## CSS Transformations
+
+The plugin automatically handles:
+
+| Transformation           | Description                               |
+| ------------------------ | ----------------------------------------- |
+| `rem/em` → `px`          | Converts to pixels (16px base)            |
+| `@media` rules           | Removed (unsupported in NativeScript)     |
+| `@supports` rules        | Removed (unsupported in NativeScript)     |
+| `@property` rules        | Removed (unsupported in NativeScript)     |
+| `@layer` blocks          | Flattened (lifted to parent)              |
+| `:root/:host`            | Converted to `.ns-root, .ns-modal`        |
+| `::placeholder`          | Converted to `placeholder-color` property |
+| `animation` shorthand    | Expanded to individual properties         |
+| `visibility: hidden`     | Converted to `visibility: collapse`       |
+| `vertical-align: middle` | Converted to `vertical-align: center`     |
+
+## NativeScript Root Class
+
+Add the `ns-root` class to your root layout for CSS variables to work:
+
+```vue
+<template>
+  <Frame class="ns-root">
+    <Page>
+      <!-- Your content -->
+    </Page>
+  </Frame>
+</template>
+```
+
+## Platform Variants
+
+Use Tailwind v4's variant syntax with NativeScript platform classes:
+
+```css
+/* In your app.css */
+@import "tailwindcss";
+
+@custom-variant android (&:where(.ns-android, .ns-android *));
+@custom-variant ios (&:where(.ns-ios, .ns-ios *));
+```
+
+Then use in your templates:
+
+```html
+<label
+  class="android:text-red-500 ios:text-blue-500"
+  text="Platform specific!"
+/>
+```
+
+## Dark Mode
+
+NativeScript applies `.ns-dark` class automatically. Configure in your CSS:
+
+```css
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.ns-dark, .ns-dark *));
+```
+
+## Debug Mode
+
+Enable debug logging:
+
+```bash
+VITE_DEBUG_LOGS=1 ns run ios
+```
+
+Or in plugin options:
+
+```ts
+nativescriptTailwind({ debug: true });
+```
+
+## Compatibility
+
+- NativeScript 8.x+
+- TailwindCSS 4.x
+- Vite 5.x or 6.x
+- @nativescript/vite (latest)
+
+## Upgrading from v4 (Tailwind CSS v3)
+
+1. Update dependencies:
+
+   ```bash
+   npm install @nativescript/tailwind@latest tailwindcss@latest @tailwindcss/vite
+   ```
+
+2. Replace your `app.css` imports:
+
+   ```css
+   /* Old v3 way */
+   @tailwind base;
+   @tailwind components;
+   @tailwind utilities;
+
+   /* New v4 way */
+   @import "tailwindcss";
+   ```
+
+3. Remove `tailwind.config.js` (optional in v4) or migrate to CSS-based config.
+
+4. Remove `postcss.config.js` if you have one (no longer needed).
+
+## License
+
+MIT

package/nativescript.vite.mjs

@@ -0,0 +1,14 @@
+/**
+ * NativeScript Vite Configuration for TailwindCSS v4
+ *
+ * This configuration file is automatically merged with the project's vite.config
+ * by NativeScript's Vite plugin.
+ */
+
+import nativescriptTailwind from "@nativescript/tailwind";
+
+export default () => {
+  return {
+    plugins: [nativescriptTailwind()],
+  };
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "ns-tailwind-vite",
+  "version": "1.0.0",
+  "description": "TailwindCSS v4 for NativeScript with Vite support",
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/vite-plugin.js"
+  },
+  "files": [
+    "src",
+    "nativescript.vite.mjs"
+  ],
+  "repository": "https://github.com/iammarjamal/ns-tailwind-vite",
+  "keywords": [
+    "nativescript",
+    "nativescript-vue",
+    "nativescript-theme",
+    "theme",
+    "tailwind",
+    "tailwindcss",
+    "styling",
+    "css",
+    "vite"
+  ],
+  "author": "Ammar Jamal",
+  "contributors": [
+    {
+      "name": "Rqeim Team",
+      "email": "hi@rqeim.com"
+    }
+  ],
+  "nativescript": {
+    "platforms": {
+      "android": "*",
+      "ios": "*"
+    },
+    "plugin": {
+      "nan": "true",
+      "pan": "true",
+      "core3": "true",
+      "vue": "true",
+      "category": "Developer"
+    }
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "@hookun/parse-animation-shorthand": "^0.1.4",
+    "@tailwindcss/vite": "^4.0.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vite": "^5.0.0 || ^6.0.0"
+  }
+}

package/src/css-transformer.js

@@ -0,0 +1,479 @@
+/**
+ * CSS Transformer for NativeScript
+ *
+ * Transforms TailwindCSS v4 output to be compatible with NativeScript's CSS engine.
+ * This is a pure JavaScript implementation without PostCSS dependency.
+ */
+
+import { parseSingle, serialize } from "@hookun/parse-animation-shorthand";
+
+const remRE = /(\d*\.?\d+)\s*r?em/g;
+
+// Supported CSS properties in NativeScript
+const supportedProperties = {
+  "align-content": true,
+  "align-items": true,
+  "align-self": true,
+  "android-selected-tab-highlight-color": true,
+  "android-elevation": true,
+  "android-dynamic-elevation-offset": true,
+  animation: true,
+  "animation-delay": true,
+  "animation-direction": true,
+  "animation-duration": true,
+  "animation-fill-mode": true,
+  "animation-iteration-count": true,
+  "animation-name": true,
+  "animation-timing-function": true,
+  background: true,
+  "background-color": true,
+  "background-image": true,
+  "background-position": true,
+  "background-repeat": ["repeat", "repeat-x", "repeat-y", "no-repeat"],
+  "background-size": true,
+  "border-bottom-color": true,
+  "border-bottom-left-radius": true,
+  "border-bottom-right-radius": true,
+  "border-bottom-width": true,
+  "border-color": true,
+  "border-left-color": true,
+  "border-left-width": true,
+  "border-radius": true,
+  "border-right-color": true,
+  "border-right-width": true,
+  "border-top-color": true,
+  "border-top-left-radius": true,
+  "border-top-right-radius": true,
+  "border-top-width": true,
+  "border-width": true,
+  "box-shadow": true,
+  "clip-path": true,
+  color: true,
+  flex: true,
+  "flex-grow": true,
+  "flex-direction": true,
+  "flex-shrink": true,
+  "flex-wrap": true,
+  font: true,
+  "font-family": true,
+  "font-size": true,
+  "font-style": ["italic", "normal"],
+  "font-weight": true,
+  "font-variation-settings": true,
+  height: true,
+  "highlight-color": true,
+  "horizontal-align": ["left", "center", "right", "stretch"],
+  "justify-content": true,
+  "justify-items": true,
+  "justify-self": true,
+  "letter-spacing": true,
+  "line-height": true,
+  margin: true,
+  "margin-bottom": true,
+  "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,
+  "max-height": true,
+  "max-width": true,
+  "off-background-color": true,
+  opacity: true,
+  order: true,
+  padding: true,
+  "padding-block": true,
+  "padding-bottom": true,
+  "padding-inline": true,
+  "padding-left": true,
+  "padding-right": true,
+  "padding-top": true,
+  "place-content": true,
+  "placeholder-color": true,
+  "place-items": true,
+  "place-self": true,
+  "selected-tab-text-color": true,
+  "tab-background-color": true,
+  "tab-text-color": true,
+  "tab-text-font-size": true,
+  "text-transform": ["none", "capitalize", "uppercase", "lowercase"],
+  "text-align": ["left", "center", "right"],
+  "text-decoration": ["none", "line-through", "underline"],
+  "text-shadow": true,
+  transform: true,
+  rotate: true,
+  "vertical-align": ["top", "center", "bottom", "stretch"],
+  visibility: ["visible", "collapse"],
+  width: true,
+  "z-index": true,
+};
+
+const unsupportedPseudoSelectors = [":focus-within", ":hover"];
+const unsupportedValues = ["max-content", "min-content", "vh", "vw"];
+const unsupportedAtRules = ["@media", "@supports", "@property", "@keyframes"];
+
+/**
+ * Check if a CSS property is supported in NativeScript
+ */
+function isSupportedProperty(prop, val = null) {
+  const rules = supportedProperties[prop];
+  if (!rules) return false;
+
+  if (val) {
+    if (unsupportedValues.some((unit) => val.endsWith(unit))) {
+      return false;
+    }
+
+    if (Array.isArray(rules)) {
+      return rules.includes(val);
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Check if a selector is supported in NativeScript
+ */
+function isSupportedSelector(selector) {
+  return !unsupportedPseudoSelectors.some((pseudo) =>
+    selector.includes(pseudo)
+  );
+}
+
+/**
+ * Convert camelCase to kebab-case
+ */
+function camelToKebab(input) {
+  return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Expand animation shorthand to individual properties
+ */
+function expandAnimation(value) {
+  try {
+    const styles = parseSingle(value);
+    if (styles.duration && Number.isInteger(styles.duration)) {
+      styles.duration = `${styles.duration / 1000}s`;
+    }
+
+    Object.entries(styles)
+      .filter(([, v]) => typeof v === "object")
+      .forEach(([key, v]) => {
+        styles[key] = serialize({ [key]: v }).split(" ")[0];
+      });
+
+    return Object.entries(styles)
+      .filter(([, v]) => v !== "unset")
+      .map(([key, v]) => `animation-${camelToKebab(key)}: ${v}`)
+      .join(";\n  ");
+  } catch {
+    return `animation: ${value}`;
+  }
+}
+
+/**
+ * Transform a CSS value (convert rem/em to px equivalent)
+ */
+function transformValue(value, debug = false) {
+  if (!value) return value;
+
+  // Convert em/rem to device pixels (16px base)
+  if (value.includes("rem") || value.includes("em")) {
+    value = value.replace(remRE, (match, num) => {
+      const converted = String(parseFloat(num) * 16);
+      if (debug) {
+        console.log(
+          `[nativescript-tailwind] Converting ${match} to ${converted}`
+        );
+      }
+      return converted;
+    });
+  }
+
+  return value;
+}
+
+/**
+ * Transform a single CSS declaration
+ */
+function transformDeclaration(prop, value, debug = false) {
+  // Skip CSS variables that define unsupported features
+  if (
+    [
+      "tw-ring",
+      "tw-shadow",
+      "tw-ordinal",
+      "tw-slashed-zero",
+      "tw-numeric",
+    ].some((varName) => prop.startsWith(`--${varName}`))
+  ) {
+    return null;
+  }
+
+  // Skip divide/space reverse variables in specific contexts
+  if (prop.match(/--tw-(divide|space)-[xy]-reverse/)) {
+    return null;
+  }
+
+  // Skip color-mix values (not supported yet)
+  if (value?.includes("color-mix")) {
+    return null;
+  }
+
+  // Skip currentColor values
+  if (value?.includes("currentColor")) {
+    return null;
+  }
+
+  // Transform visibility: hidden -> collapse
+  if (prop === "visibility" && value === "hidden") {
+    return { prop, value: "collapse" };
+  }
+
+  // Transform vertical-align: middle -> center
+  if (prop === "vertical-align" && value === "middle") {
+    return { prop, value: "center" };
+  }
+
+  // Expand animation shorthand
+  if (prop === "animation") {
+    return { prop: "__expanded__", value: expandAnimation(value) };
+  }
+
+  // Transform value (rem/em conversion)
+  const transformedValue = transformValue(value, debug);
+
+  // Check if property is supported
+  if (!prop.startsWith("--") && !isSupportedProperty(prop, transformedValue)) {
+    return null;
+  }
+
+  return { prop, value: transformedValue };
+}
+
+/**
+ * Transform a CSS selector
+ */
+function transformSelector(selector) {
+  // Replace :root and :host with NativeScript equivalents
+  const rootClasses = ".ns-root, .ns-modal";
+  selector = selector
+    .replace(/:root/g, rootClasses)
+    .replace(/:host/g, rootClasses);
+
+  // Remove :where() wrapper
+  selector = selector.replace(/:where\(([^)]+)\)/g, "$1");
+
+  // Transform space/divide selectors
+  selector = selector.replace(/:not\(:last-child\)/g, "* + *");
+  selector = selector.replace(
+    /:not\(\[hidden\]\) ~ :not\(\[hidden\]\)/g,
+    "* + *"
+  );
+
+  // Handle ::placeholder (convert to base selector for placeholder-color)
+  if (selector.includes("::placeholder")) {
+    selector = selector.replace(/::placeholder/g, "");
+  }
+
+  return selector.trim();
+}
+
+/**
+ * Parse CSS into rules and at-rules (simple parser)
+ */
+function parseCSS(css) {
+  const result = [];
+  let i = 0;
+
+  while (i < css.length) {
+    // Skip whitespace
+    while (i < css.length && /\s/.test(css[i])) i++;
+    if (i >= css.length) break;
+
+    // Check for at-rule
+    if (css[i] === "@") {
+      const atRuleMatch = css.slice(i).match(/^@(\w+)([^{;]*)(;|\{)/);
+      if (atRuleMatch) {
+        const atRuleName = atRuleMatch[1];
+        const atRuleParams = atRuleMatch[2].trim();
+        const atRuleEnd = atRuleMatch[3];
+
+        i += atRuleMatch[0].length;
+
+        if (atRuleEnd === "{") {
+          // Find matching closing brace
+          let braceCount = 1;
+          let bodyStart = i;
+          while (i < css.length && braceCount > 0) {
+            if (css[i] === "{") braceCount++;
+            if (css[i] === "}") braceCount--;
+            i++;
+          }
+          const body = css.slice(bodyStart, i - 1);
+          result.push({
+            type: "at-rule",
+            name: atRuleName,
+            params: atRuleParams,
+            body: body,
+          });
+        } else {
+          result.push({
+            type: "at-rule",
+            name: atRuleName,
+            params: atRuleParams,
+            body: null,
+          });
+        }
+        continue;
+      }
+    }
+
+    // Parse rule (selector + declarations)
+    const selectorEnd = css.indexOf("{", i);
+    if (selectorEnd === -1) break;
+
+    const selector = css.slice(i, selectorEnd).trim();
+    i = selectorEnd + 1;
+
+    // Find closing brace
+    let braceCount = 1;
+    let bodyStart = i;
+    while (i < css.length && braceCount > 0) {
+      if (css[i] === "{") braceCount++;
+      if (css[i] === "}") braceCount--;
+      i++;
+    }
+
+    const body = css.slice(bodyStart, i - 1).trim();
+
+    if (selector && body) {
+      result.push({
+        type: "rule",
+        selector,
+        body,
+      });
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Parse declarations from a rule body
+ */
+function parseDeclarations(body) {
+  const declarations = [];
+  const parts = body.split(";");
+
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex === -1) continue;
+
+    const prop = trimmed.slice(0, colonIndex).trim();
+    const value = trimmed.slice(colonIndex + 1).trim();
+
+    if (prop && value) {
+      declarations.push({ prop, value });
+    }
+  }
+
+  return declarations;
+}
+
+/**
+ * Main CSS transformation function
+ */
+export function transformNativeScriptCSS(css, options = {}) {
+  const { debug = false } = options;
+  const rules = parseCSS(css);
+  const output = [];
+
+  for (const rule of rules) {
+    if (rule.type === "at-rule") {
+      // Handle @layer - flatten by processing its contents
+      if (rule.name === "layer") {
+        if (rule.body) {
+          const nested = transformNativeScriptCSS(rule.body, options);
+          output.push(nested);
+        }
+        continue;
+      }
+
+      // Handle @keyframes - keep as-is (supported in NativeScript)
+      if (rule.name === "keyframes") {
+        output.push(`@keyframes ${rule.params} {\n${rule.body}\n}`);
+        continue;
+      }
+
+      // Skip unsupported at-rules (@media, @supports, @property)
+      if (["media", "supports", "property"].includes(rule.name)) {
+        if (debug) {
+          console.log(`[nativescript-tailwind] Skipping @${rule.name}`);
+        }
+        continue;
+      }
+
+      continue;
+    }
+
+    if (rule.type === "rule") {
+      // Skip rules with CSS nesting (& selector)
+      if (rule.selector.includes("&")) {
+        continue;
+      }
+
+      // Check if selector is supported
+      if (!isSupportedSelector(rule.selector)) {
+        continue;
+      }
+
+      // Transform selector
+      let selector = transformSelector(rule.selector);
+      if (!selector) continue;
+
+      // Handle ::placeholder conversion
+      const isPlaceholder = rule.selector.includes("::placeholder");
+
+      // Parse and transform declarations
+      const declarations = parseDeclarations(rule.body);
+      const transformedDecls = [];
+
+      for (const { prop, value } of declarations) {
+        // For placeholder rules, convert color to placeholder-color
+        let actualProp = prop;
+        if (isPlaceholder && prop === "color") {
+          actualProp = "placeholder-color";
+        }
+
+        const transformed = transformDeclaration(actualProp, value, debug);
+        if (transformed) {
+          if (transformed.prop === "__expanded__") {
+            // Expanded animation properties
+            transformedDecls.push(transformed.value);
+          } else {
+            transformedDecls.push(`${transformed.prop}: ${transformed.value}`);
+          }
+        }
+      }
+
+      if (transformedDecls.length > 0) {
+        output.push(`${selector} {\n  ${transformedDecls.join(";\n  ")};\n}`);
+      }
+    }
+  }
+
+  return output.join("\n\n");
+}
+
+export default transformNativeScriptCSS;

package/src/index.js

@@ -0,0 +1,8 @@
+/**
+ * @nativescript/tailwind - TailwindCSS v4 plugin for NativeScript with Vite
+ *
+ * Main entry point that exports the Vite plugin for NativeScript CSS transformation
+ */
+
+export { default as nativescriptTailwind } from "./vite-plugin.js";
+export { default } from "./vite-plugin.js";

package/src/vite-plugin.js

@@ -0,0 +1,115 @@
+/**
+ * @nativescript/tailwind - Vite Plugin for TailwindCSS v4 + NativeScript
+ *
+ * This plugin wraps @tailwindcss/vite and transforms the CSS output
+ * to be compatible with NativeScript's CSS engine.
+ *
+ * Features:
+ * - Full HMR support via @tailwindcss/vite
+ * - Automatic CSS transformation for NativeScript compatibility
+ * - rem/em to px conversion
+ * - Removal of unsupported CSS features (@media, @supports, etc.)
+ * - Animation shorthand expansion
+ *
+ * Usage:
+ * ```js
+ * // vite.config.js
+ * import nativescriptTailwind from '@nativescript/tailwind/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [nativescriptTailwind()]
+ * });
+ * ```
+ *
+ * Or auto-configured via nativescript.vite.mjs (recommended)
+ */
+
+import tailwindcss from "@tailwindcss/vite";
+import { transformNativeScriptCSS } from "./css-transformer.js";
+
+/**
+ * Creates the NativeScript Tailwind Vite plugin
+ * @param {Object} options - Plugin options
+ * @param {boolean} options.debug - Enable debug logging
+ * @param {boolean} options.includeTailwind - Include @tailwindcss/vite plugin (default: true)
+ * @returns {import('vite').Plugin[]} Array of Vite plugins
+ */
+export default function nativescriptTailwind(options = {}) {
+  const {
+    debug = process.env.VITE_DEBUG_LOGS === "1",
+    includeTailwind = true,
+  } = options;
+
+  const plugins = [];
+
+  // Include the official TailwindCSS v4 Vite plugin (optional)
+  if (includeTailwind) {
+    plugins.push(...tailwindcss());
+  }
+
+  // NativeScript CSS transformation plugin
+  plugins.push({
+    name: "nativescript-tailwind",
+    enforce: "post",
+
+    // Transform CSS files for NativeScript compatibility
+    transform(code, id) {
+      // Only process CSS files and Vue style blocks
+      const isCSSFile = id.endsWith(".css");
+      const isVueStyle =
+        id.includes("?vue&type=style") || id.includes("&lang.css");
+      const isSCSS = id.includes("scss") || id.includes("sass");
+
+      if (!isCSSFile && !isVueStyle) {
+        return null;
+      }
+
+      // Skip SCSS/SASS files (they need preprocessing first)
+      if (isSCSS) {
+        return null;
+      }
+
+      // Skip if no CSS content
+      if (!code || typeof code !== "string") {
+        return null;
+      }
+
+      // Skip node_modules except for tailwind
+      if (id.includes("node_modules") && !id.includes("tailwindcss")) {
+        return null;
+      }
+
+      try {
+        const transformed = transformNativeScriptCSS(code, { debug });
+
+        if (debug) {
+          console.log(`[nativescript-tailwind] Transformed: ${id}`);
+        }
+
+        return {
+          code: transformed,
+          map: null, // Source maps not needed for CSS in NativeScript
+        };
+      } catch (error) {
+        console.error(
+          `[nativescript-tailwind] Error transforming ${id}:`,
+          error
+        );
+        return null;
+      }
+    },
+
+    // Handle HMR for CSS updates
+    handleHotUpdate({ file, server, modules }) {
+      if (file.endsWith(".css")) {
+        if (debug) {
+          console.log(`[nativescript-tailwind] HMR update: ${file}`);
+        }
+      }
+      // Let Vite handle the HMR normally
+      return modules;
+    },
+  });
+
+  return plugins;
+}