CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-tailwindcss--node

Node.js-specific utilities and runtime functionality for Tailwind CSS v4, providing compilation tools, module dependency analysis, source map handling, path normalization, and optimization utilities.

43%

Overall

Evaluation43%

1.16x

Agent success when using this tile

Overview
Eval results
Files

module-analysis.mddocs/

Module Dependency Analysis

Recursive module dependency analysis with support for TypeScript, ESM, and CommonJS import patterns. Provides comprehensive dependency tracking for hot module reloading and build optimization.

Capabilities

Get Module Dependencies Function

Recursively analyzes module dependencies and returns all file paths.

/**
 * Recursively traces all dependencies of a module
 * Returns an unordered set of absolute file paths
 * @param absoluteFilePath - Absolute path to the entry module file
 * @returns Promise resolving to array of absolute dependency file paths
 */
function getModuleDependencies(absoluteFilePath: string): Promise<string[]>;

Usage Examples:

import { getModuleDependencies } from "@tailwindcss/node";
import path from "path";

// Analyze a TypeScript module
const entryFile = path.resolve(process.cwd(), "src/index.ts");
const dependencies = await getModuleDependencies(entryFile);

console.log("Dependencies:", dependencies);
// Output: [
//   "/path/to/project/src/index.ts",
//   "/path/to/project/src/utils/helpers.ts", 
//   "/path/to/project/src/components/Button.tsx",
//   "/path/to/project/src/types/index.ts"
// ]

// Analyze a JavaScript module
const jsFile = path.resolve(process.cwd(), "config/webpack.config.js");
const jsDependencies = await getModuleDependencies(jsFile);

console.log("JS Dependencies:", jsDependencies);

Hot Module Reloading Integration

Use dependency analysis for hot module reloading setup:

import { getModuleDependencies } from "@tailwindcss/node";
import { watch } from "chokidar";

async function setupHMR(entryFile: string) {
  // Get all dependencies
  const dependencies = await getModuleDependencies(entryFile);
  
  // Watch all dependency files
  const watcher = watch(dependencies, {
    ignoreInitial: true
  });
  
  watcher.on('change', async (changedFile) => {
    console.log(`File changed: ${changedFile}`);
    
    // Re-analyze dependencies in case new ones were added
    const newDependencies = await getModuleDependencies(entryFile);
    
    // Update watcher with new dependencies
    const newFiles = newDependencies.filter(file => !dependencies.includes(file));
    if (newFiles.length > 0) {
      watcher.add(newFiles);
      dependencies.push(...newFiles);
    }
    
    // Trigger rebuild
    await rebuild();
  });
  
  return watcher;
}

// Usage
const watcher = await setupHMR("./src/index.ts");

Build Tool Integration

Integration with build tools for dependency tracking:

import { getModuleDependencies } from "@tailwindcss/node";

// Webpack plugin example
class DependencyTrackingPlugin {
  apply(compiler: any) {
    compiler.hooks.compilation.tap('DependencyTrackingPlugin', (compilation: any) => {
      compilation.hooks.buildModule.tapAsync('DependencyTrackingPlugin', 
        async (module: any, callback: Function) => {
          if (module.resource) {
            try {
              const dependencies = await getModuleDependencies(module.resource);
              
              // Add dependencies to webpack's dependency graph
              dependencies.forEach(dep => {
                if (dep !== module.resource) {
                  module.addDependency(createDependency(dep));
                }
              });
            } catch (error) {
              console.warn(`Failed to analyze dependencies for ${module.resource}:`, error);
            }
          }
          callback();
        }
      );
    });
  }
}

Bundle Analysis

Use for bundle analysis and optimization:

import { getModuleDependencies } from "@tailwindcss/node";
import fs from "fs/promises";

async function analyzeBundleSize(entryPoints: string[]) {
  const bundleAnalysis = new Map<string, {
    size: number;
    dependencies: string[];
  }>();
  
  for (const entry of entryPoints) {
    const dependencies = await getModuleDependencies(entry);
    
    let totalSize = 0;
    for (const dep of dependencies) {
      try {
        const stats = await fs.stat(dep);
        totalSize += stats.size;
      } catch (error) {
        console.warn(`Could not stat file: ${dep}`);
      }
    }
    
    bundleAnalysis.set(entry, {
      size: totalSize,
      dependencies
    });
  }
  
  return bundleAnalysis;
}

// Usage
const analysis = await analyzeBundleSize([
  "./src/app.ts",
  "./src/worker.ts" 
]);

analysis.forEach((info, entry) => {
  console.log(`${entry}: ${info.size} bytes, ${info.dependencies.length} files`);
});

Supported Import Patterns

The dependency analysis recognizes various import and require patterns:

ESM Imports

// Named imports
import { foo, bar } from './utils';
import { default as utils } from './utils';

// Default imports  
import utils from './utils';
import * as utils from './utils';

// Side-effect imports
import './polyfills';

// Dynamic imports (string literals only)
const module = await import('./dynamic');

CommonJS Requires

// Basic require
const utils = require('./utils');
const { foo, bar } = require('./utils');

// Conditional requires (string literals)
if (condition) {
  const optional = require('./optional');
}

Export Statements

// Re-exports
export { foo } from './foo';
export * from './bar';
export { default } from './baz';

// Named exports with re-export
export { foo as publicFoo } from './internal';

Resolution Strategy

The module resolution follows Node.js conventions with TypeScript support:

Extension Priority

For JavaScript files (.js, .cjs, .mjs):

  1. No extension
  2. .js
  3. .cjs
  4. .mjs
  5. .ts
  6. .cts
  7. .mts
  8. .jsx
  9. .tsx

For TypeScript files (.ts, .cts, .mts, .tsx):

  1. No extension
  2. .ts
  3. .cts
  4. .mts
  5. .tsx
  6. .js
  7. .cjs
  8. .mjs
  9. .jsx

Directory Resolution

// For import './components'
// Tries in order:
// 1. ./components.ts (or appropriate extension)
// 2. ./components/index.ts
// 3. ./components/index.js
// etc.

Performance Considerations

Circular Dependency Handling

// The function handles circular dependencies gracefully
// Example: A.ts imports B.ts, B.ts imports A.ts

const dependencies = await getModuleDependencies("A.ts");
// Returns: ["A.ts", "B.ts"] (both files, no infinite loop)

Caching Strategy

import { getModuleDependencies } from "@tailwindcss/node";

// For performance, implement your own caching layer
const dependencyCache = new Map<string, string[]>();

async function getCachedDependencies(filePath: string): Promise<string[]> {
  if (dependencyCache.has(filePath)) {
    return dependencyCache.get(filePath)!;
  }
  
  const dependencies = await getModuleDependencies(filePath);
  dependencyCache.set(filePath, dependencies);
  
  return dependencies;
}

// Invalidate cache when files change
function invalidateCache(filePath: string) {
  dependencyCache.delete(filePath);
}

Parallel Analysis

import { getModuleDependencies } from "@tailwindcss/node";

// Analyze multiple entry points in parallel
async function analyzeMultipleEntries(entryPoints: string[]) {
  const results = await Promise.all(
    entryPoints.map(async (entry) => ({
      entry,
      dependencies: await getModuleDependencies(entry)
    }))
  );
  
  return results;
}

const analysis = await analyzeMultipleEntries([
  "./src/client.ts",
  "./src/server.ts",
  "./src/worker.ts"
]);

Error Handling

The function handles various error conditions gracefully:

import { getModuleDependencies } from "@tailwindcss/node";

try {
  const dependencies = await getModuleDependencies("./nonexistent.ts");
} catch (error) {
  console.error("Analysis failed:", error.message); 
  // File may not exist or may have unresolvable dependencies
}

// Missing dependencies are silently skipped
const dependencies = await getModuleDependencies("./file-with-missing-deps.ts");
// Returns dependencies that could be resolved, skips missing ones

Limitations

  • Only analyzes relative imports (starting with ./ or ../)
  • Does not resolve node_modules dependencies
  • Dynamic imports with variables are not analyzed
  • Conditional requires with dynamic paths are skipped
  • Webpack-style imports (require.context) are not supported
tessl i tessl/npm-tailwindcss--node@4.1.0

docs

cache-management.md

compilation.md

index.md

instrumentation.md

module-analysis.md

optimization.md

path-utils.md

source-maps.md

url-processing.md

tile.json