@zubyjs/tailwind 1.0.56

package/README.md

@@ -0,0 +1,63 @@
+# @zubyjs/tailwind
+
+The plugin for Zuby.js that offers seamless integration with [Tailwind CSS](https://tailwindcss.com/)
+for your application.
+
+## Installation
+
+First, install the `@zubyjs/tailwind` package using your favorite package manager.
+If you aren't sure, you can use npm:
+
+```sh
+npm install @zubyjs/tailwind
+```
+
+Then add the `@zubyjs/tailwind` plugin to your `zuby.config.mjs` file under the `plugins` option:
+
+```diff lang="js" title="zuby.config.mjs"
+  import { defineConfig } from 'zuby';
+  import preact from '@zubyjs/preact';
++ import tailwind from '@zubyjs/tailwind';
+
+  export default defineConfig({
+    outDir: '.zuby',
+    jsx: preact(),
++   plugins: [
++       tailwind()
++   ]
+    ^^^^^^^^
+  });
+```
+
+The plugin will add the Tailwind CSS to your application and create the `tailwind.config.mjs` file during the build if it doesn't exist yet.
+You just need to add below basic Tailwind CSS to your main CSS file:
+
+```css title="src/index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+And that's it! You are ready to use Tailwind CSS in your application.
+
+NOTE: Always make sure that all zuby packages are in sync in your `package.json` file:
+
+```diff lang="json"
+  {
+    "name": "my-zuby-app",
+    "version": "1.0.0",
+    "dependencies": {
+      "zuby": "latest",
+      "@zubyjs/tailwind": "latest"
+    }
+  }
+```
+
+## Contributing
+
+This package is part of Zuby.js workspace and maintained by the team behind the [Zuby package](https://www.npmjs.com/package/zuby).
+Please refer to it for more details how to contribute.
+
+## License
+
+MIT

package/examples/js/tailwind.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./**/*.{jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/examples/ts/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./**/*.{jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

package/index.d.ts

@@ -0,0 +1,25 @@
+import { ZubyPlugin } from 'zuby/types.js';
+export declare const TAILWIND_CONFIG_FILE = "tailwind.config.js";
+export interface TailwindPluginOptions {
+    /**
+     * Relative path to config file for Tailwind CSS.
+     * @default 'tailwind.config.mjs' or 'tailwind.config.ts'
+     */
+    configFile?: string;
+    /**
+     * Set to true to enable support
+     * for nested declarations using tailwindcss/nesting plugin.
+     * @default false
+     */
+    nesting?: boolean;
+}
+/**
+ * Zuby.js plugin that integrates Tailwind CSS
+ * with your application.
+ * @param options
+ * @returns ZubyPlugin
+ */
+declare const _default: ({ configFile, nesting }?: TailwindPluginOptions) => ZubyPlugin;
+export default _default;
+export declare function createTailwindConfig(srcDir: string): string;
+export declare function findTailwindConfig(srcDir: string): string | undefined;

package/index.js

@@ -0,0 +1,53 @@
+import { dirname, resolve } from 'path';
+import { existsSync, copyFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import tailwindcssPlugin from 'tailwindcss';
+import autoprefixerPlugin from 'autoprefixer';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+export const TAILWIND_CONFIG_FILE = 'tailwind.config.js';
+/**
+ * Zuby.js plugin that integrates Tailwind CSS
+ * with your application.
+ * @param options
+ * @returns ZubyPlugin
+ */
+export default ({ configFile, nesting = false } = {}) => ({
+    name: 'zuby-tailwind-plugin',
+    description: 'Adds Tailwind CSS to your Zuby.js application',
+    hooks: {
+        'zuby:config:setup': async ({ config, injectToEntry }) => {
+            const { srcDir = './' } = config;
+            configFile = configFile || findTailwindConfig(srcDir) || createTailwindConfig(srcDir);
+            config.vite = config.vite || {};
+            config.vite.css = config.vite?.css || {};
+            config.vite.css.postcss = config.vite.css.postcss || {};
+            if (typeof config.vite.css.postcss === 'string') {
+                console.error(`[zuby-tailwind-plugin] Invalid configuration for 'vite.css.postcss'. Expected an object, but got a string.`);
+                return;
+            }
+            config.vite.css.postcss.plugins = config.vite.css.postcss.plugins || [];
+            config.vite.css.postcss.plugins.push(tailwindcssPlugin(configFile), autoprefixerPlugin());
+            if (nesting) {
+                const tailwindcssNestingPlugin = (await import('tailwindcss/nesting/index.js')).default;
+                config.vite.css.postcss.plugins.push(tailwindcssNestingPlugin());
+            }
+        },
+    },
+});
+export function createTailwindConfig(srcDir) {
+    const isTs = existsSync(resolve(srcDir, 'tsconfig.json'));
+    const configFile = isTs
+        ? TAILWIND_CONFIG_FILE.replace('.js', '.ts')
+        : TAILWIND_CONFIG_FILE.replace('.js', '.mjs');
+    copyFileSync(resolve(__dirname, 'examples', isTs ? 'ts' : 'js', configFile), resolve(srcDir, configFile));
+    return configFile;
+}
+export function findTailwindConfig(srcDir) {
+    return [
+        resolve(srcDir, TAILWIND_CONFIG_FILE),
+        resolve(srcDir, TAILWIND_CONFIG_FILE.replace('.js', '.mjs')),
+        resolve(srcDir, TAILWIND_CONFIG_FILE.replace('.js', '.cjs')),
+        resolve(srcDir, TAILWIND_CONFIG_FILE.replace('.js', '.ts')),
+    ].find(file => existsSync(file));
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@zubyjs/tailwind",
+  "version": "1.0.56",
+  "description": "Zuby.js tailwind plugin",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "release": "cd ./dist && npm publish --access public && cd ..",
+    "bump-version": "npm version patch",
+    "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md src/examples stage/tailwind/src/* dist/ && rm -rf stage/",
+    "push-build": "npm run build && cd dist && yalc push --force && cd ..",
+    "test": "exit 0"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.17",
+    "tailwindcss": "^3.4.1"
+  },
+  "peerDependencies": {
+    "zuby": "^1.0.0"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/futrou/zuby.js/-/issues",
+    "email": "zuby@futrou.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/futrou/zuby.js.git"
+  },
+  "homepage": "https://zubyjs.com",
+  "keywords": [
+    "zuby-plugin",
+    "zuby",
+    "tailwind",
+    "css"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}