@juristr/nx-tailwind-sync 0.0.1

package/README.md

@@ -0,0 +1,74 @@
+# tailwind-sync-plugin
+
+Nx sync generator that auto-manages `@source` directives in CSS files for Tailwind v4 monorepos.
+
+## Problem
+
+Tailwind v4 [requires to define `@source` directives](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) for dependencies that might be outside its own project configuration. Something that is common in monorepos. Manually maintaining these in a monorepo is error-prone.
+
+## Solution
+
+This plugin traverses the Nx project graph and generates `@source` directives for all transitive dependencies.
+
+## Detection
+
+A project is detected as using Tailwind v4 if:
+
+1. Has a CSS file with `@import 'tailwindcss'`
+2. Has a Vite config using `tailwindcss()` from `@tailwindcss/vite`
+
+## CSS File Search Paths
+
+Default locations checked:
+
+- `src/styles.css`
+- `.storybook/styles.css`
+
+Additional paths can be configured via the `additionalStylePaths` option.
+
+## Output
+
+The generator inserts/updates a managed block in CSS files:
+
+```css
+@import 'tailwindcss';
+
+/* nx-tailwind-sources:start */
+@source "../../../packages/shared/daypulse-ui";
+@source "../../../packages/daypulse/styles";
+/* nx-tailwind-sources:end */
+```
+
+## Usage
+
+Register the sync generator on tasks that need it (e.g., `build`, `dev`):
+
+```json
+{
+  "nx": {
+    "targets": {
+      "build": {
+        "syncGenerators": ["@aishop/tailwind-sync-plugin:update-tailwind-globs"]
+      }
+    }
+  }
+}
+```
+
+Run manually:
+
+```bash
+pnpm nx sync
+```
+
+## Options
+
+| Option                 | Type       | Description                                   |
+| ---------------------- | ---------- | --------------------------------------------- |
+| `additionalStylePaths` | `string[]` | Extra relative paths to search for styles.css |
+
+## Building
+
+```bash
+nx build tailwind-sync-plugin
+```

package/dist/generators/schema.d.ts

@@ -0,0 +1,3 @@
+export interface UpdateTailwindGlobsGeneratorSchema {
+  additionalStylePaths?: string[];
+}

package/dist/generators/schema.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "UpdateTailwindGlobs",
+  "type": "object",
+  "properties": {
+    "additionalStylePaths": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Additional relative paths (from project root) to search for styles.css files with @import 'tailwindcss'"
+    }
+  },
+  "required": []
+}

package/dist/generators/update-tailwind-globs.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+import { SyncGeneratorResult } from 'nx/src/utils/sync-generators';
+import { UpdateTailwindGlobsGeneratorSchema } from './schema';
+export declare function updateTailwindGlobsGenerator(tree: Tree, options?: UpdateTailwindGlobsGeneratorSchema): Promise<SyncGeneratorResult>;
+export default updateTailwindGlobsGenerator;
+//# sourceMappingURL=update-tailwind-globs.d.ts.map

package/dist/generators/update-tailwind-globs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-tailwind-globs.d.ts","sourceRoot":"","sources":["../../src/generators/update-tailwind-globs.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAIL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,kCAAkC,EAAE,MAAM,UAAU,CAAC;AA+O9D,wBAAsB,4BAA4B,CAChD,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,kCAAuC,GAC/C,OAAO,CAAC,mBAAmB,CAAC,CAmC9B;AAED,eAAe,4BAA4B,CAAC"}

package/dist/generators/update-tailwind-globs.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTailwindGlobsGenerator = updateTailwindGlobsGenerator;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const START_MARKER = '/* nx-tailwind-sources:start */';
+const END_MARKER = '/* nx-tailwind-sources:end */';
+const DEFAULT_STYLE_PATHS = ['src/styles.css', '.storybook/styles.css'];
+const VITE_CONFIG_PATTERNS = [
+    'vite.config.ts',
+    'vite.config.mts',
+    'vite.config.js',
+    'vite.config.mjs',
+    'vitest.config.ts',
+    'vitest.config.mts',
+    'vitest.config.storybook.ts',
+];
+/**
+ * Find CSS file with @import 'tailwindcss' in project
+ */
+function findTailwindCssFile(tree, projectRoot, additionalPaths = []) {
+    const searchPaths = [...DEFAULT_STYLE_PATHS, ...additionalPaths];
+    for (const relPath of searchPaths) {
+        const fullPath = (0, path_1.join)(projectRoot, relPath);
+        const content = tree.read(fullPath)?.toString();
+        if (content?.match(/@import\s+['"]tailwindcss['"]/)) {
+            return fullPath;
+        }
+    }
+    return undefined;
+}
+/**
+ * Find any styles.css file in project (for Vite plugin projects)
+ */
+function findAnyStylesFile(tree, projectRoot, additionalPaths = []) {
+    const searchPaths = [...DEFAULT_STYLE_PATHS, ...additionalPaths];
+    for (const relPath of searchPaths) {
+        const fullPath = (0, path_1.join)(projectRoot, relPath);
+        if (tree.exists(fullPath)) {
+            return fullPath;
+        }
+    }
+    return undefined;
+}
+/**
+ * Check if project uses @tailwindcss/vite plugin
+ */
+function projectUsesVitePlugin(tree, projectRoot) {
+    for (const configFile of VITE_CONFIG_PATTERNS) {
+        const configPath = (0, path_1.join)(projectRoot, configFile);
+        const content = tree.read(configPath)?.toString();
+        if (content) {
+            // Check for tailwindcss import from @tailwindcss/vite and usage
+            if (content.includes('@tailwindcss/vite') &&
+                content.match(/tailwindcss\s*\(\s*\)/)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Find all projects using Tailwind v4
+ */
+function findTailwindProjects(projectGraph, tree, additionalStylePaths = []) {
+    const results = [];
+    for (const project of Object.values(projectGraph.nodes)) {
+        if (!project.data.root)
+            continue;
+        // First check for CSS file with @import 'tailwindcss'
+        let cssFile = findTailwindCssFile(tree, project.data.root, additionalStylePaths);
+        const usesVitePlugin = projectUsesVitePlugin(tree, project.data.root);
+        // For Vite plugin projects without @import 'tailwindcss', look for any styles.css
+        if (!cssFile && usesVitePlugin) {
+            cssFile = findAnyStylesFile(tree, project.data.root, additionalStylePaths);
+        }
+        if (cssFile || usesVitePlugin) {
+            results.push({ project, cssFile, usesVitePlugin });
+        }
+    }
+    return results;
+}
+/**
+ * Collect all transitive dependencies for a project
+ */
+function collectDependencies(projectName, projectGraph) {
+    const dependencies = new Set();
+    const queue = [projectName];
+    const visited = new Set();
+    while (queue.length > 0) {
+        const current = queue.shift();
+        if (!current)
+            continue;
+        if (visited.has(current))
+            continue;
+        visited.add(current);
+        const deps = projectGraph.dependencies[current] || [];
+        deps.forEach((dep) => {
+            dependencies.add(dep.target);
+            queue.push(dep.target);
+        });
+    }
+    return dependencies;
+}
+/**
+ * Update @source directives in a CSS file
+ */
+function updateSourceDirectives(tree, projectName, cssFilePath, projectGraph) {
+    const dependencies = collectDependencies(projectName, projectGraph);
+    // Generate @source directives for each dependency
+    const sourceDirectives = [];
+    const cssDir = (0, path_1.dirname)(cssFilePath);
+    dependencies.forEach((dep) => {
+        const project = projectGraph.nodes[dep];
+        if (project && project.data.root) {
+            // Calculate relative path from CSS file directory to dependency root
+            const relativePath = (0, path_1.relative)(cssDir, project.data.root);
+            sourceDirectives.push(`@source "${relativePath}";`);
+        }
+    });
+    // Sort for consistency
+    sourceDirectives.sort();
+    // Read current CSS content
+    const currentContent = tree.read(cssFilePath)?.toString() || '';
+    // Build the managed block
+    const managedBlock = [START_MARKER, ...sourceDirectives, END_MARKER].join('\n');
+    // Check if markers already exist
+    const hasMarkers = currentContent.includes(START_MARKER) &&
+        currentContent.includes(END_MARKER);
+    if (hasMarkers) {
+        // Extract existing managed section content for comparison
+        const markerRegex = new RegExp(`${escapeRegex(START_MARKER)}[\\s\\S]*?${escapeRegex(END_MARKER)}`);
+        const existingBlock = currentContent.match(markerRegex)?.[0] || '';
+        if (existingBlock === managedBlock) {
+            return false; // No changes needed
+        }
+        // Replace content between markers
+        const newContent = currentContent.replace(markerRegex, managedBlock);
+        tree.write(cssFilePath, newContent);
+        return true;
+    }
+    // No markers yet - need to insert them
+    // Remove any existing bare @source directives (migration from old format)
+    const cleanedContent = currentContent.replace(/\n@source\s+["'][^"']*packages\/[^"']+["'];/g, '');
+    // Try to find @import 'tailwindcss' first
+    const tailwindImportRegex = /@import\s+['"]tailwindcss['"];/;
+    const tailwindImportMatch = cleanedContent.match(tailwindImportRegex);
+    // If not found, look for any @import statement
+    const anyImportRegex = /@import\s+['"][^'"]+['"];/;
+    const anyImportMatch = cleanedContent.match(anyImportRegex);
+    const importMatch = tailwindImportMatch || anyImportMatch;
+    let newContent;
+    if (importMatch && importMatch.index !== undefined) {
+        // Insert after the import line
+        const importEndIndex = cleanedContent.indexOf('\n', importMatch.index) + 1;
+        const beforeImport = cleanedContent.substring(0, importEndIndex);
+        const afterImport = cleanedContent.substring(importEndIndex);
+        newContent = beforeImport + '\n' + managedBlock + '\n' + afterImport;
+    }
+    else {
+        // No imports found, prepend to file
+        newContent = managedBlock + '\n\n' + cleanedContent;
+    }
+    tree.write(cssFilePath, newContent);
+    return true;
+}
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+async function updateTailwindGlobsGenerator(tree, options = {}) {
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    const updatedProjects = [];
+    // Find all Tailwind v4 projects
+    const tailwindProjects = findTailwindProjects(projectGraph, tree, options.additionalStylePaths);
+    // Update @source directives for each project with a CSS file
+    for (const { project, cssFile } of tailwindProjects) {
+        if (cssFile) {
+            const updated = updateSourceDirectives(tree, project.name, cssFile, projectGraph);
+            if (updated) {
+                updatedProjects.push(project.name);
+            }
+        }
+    }
+    if (updatedProjects.length === 0) {
+        return {};
+    }
+    return {
+        outOfSyncMessage: `Tailwind @source directives updated for: ${updatedProjects.join(', ')}`,
+    };
+}
+exports.default = updateTailwindGlobsGenerator;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/generators.json

@@ -0,0 +1,9 @@
+{
+  "generators": {
+    "update-tailwind-globs": {
+      "factory": "./dist/generators/update-tailwind-globs",
+      "schema": "./dist/generators/schema.json",
+      "description": "Nx Sync generator to update @source directives in CSS files for Tailwind v4 monorepos"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@juristr/nx-tailwind-sync",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "executor": "@nx/js:tsc",
+        "outputs": [
+          "{options.outputPath}"
+        ],
+        "options": {
+          "outputPath": "packages/tailwind-sync-plugin/dist",
+          "main": "packages/tailwind-sync-plugin/src/index.ts",
+          "tsConfig": "packages/tailwind-sync-plugin/tsconfig.lib.json",
+          "rootDir": "packages/tailwind-sync-plugin/src",
+          "generatePackageJson": false,
+          "assets": [
+            {
+              "input": "./packages/tailwind-sync-plugin/src",
+              "glob": "**/!(*.ts)",
+              "output": "."
+            },
+            {
+              "input": "./packages/tailwind-sync-plugin/src",
+              "glob": "**/*.d.ts",
+              "output": "."
+            }
+          ]
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@nx/devkit": "21.1.2",
+    "tslib": "^2.3.0"
+  },
+  "generators": "./generators.json",
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo",
+    "generators.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}