effect-start 0.13.0 → 0.13.1

package/README.md

@@ -52,13 +52,13 @@ src/routes
 
 ### Tailwind CSS Support
 
-Effect Start comes with native Tailwind support that is lightweight and
-works with minimal setup.
+Effect Start comes with Tailwind plugin that is lightweight and
+works with minimal configuration.
 
-First, install Tailwind package:
+First, install official Tailwind package:
 
 ```sh
-bun add tailwindcss
+bun add -D tailwindcss
 ```
 
 Then, register a plugin in `bunfig.toml`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "effect-start",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -32,23 +32,18 @@
   "peerDependencies": {
     "typescript": "^5.9.3"
   },
-  "peerDependenciesMeta": {
-    "@tailwindcss/node": {
-      "optional": true
-    }
-  },
   "devDependencies": {
+    "dprint-cli": "^0.4.1",
+    "dprint-markup": "nounder/dprint-markup",
     "@dprint/json": "^0.21.0",
     "@dprint/markdown": "^0.20.0",
     "@dprint/typescript": "^0.95.13",
     "@effect/language-service": "^0.61.0",
-    "@tailwindcss/node": "^4.1.17",
     "@types/bun": "^1.3.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "dprint-cli": "^0.4.1",
-    "dprint-markup": "nounder/dprint-markup",
     "effect-memfs": "^0.8.0",
+    "tailwindcss": "^4.1.18",
     "ts-namespace-import": "nounder/ts-namespace-import#140c405"
   },
   "files": [

package/src/bun/_BunEnhancedResolve.ts

@@ -0,0 +1,201 @@
+/**
+ * Bun adapter for enhanced-resolve
+ *
+ * This module provides a drop-in replacement for `enhanced-resolve` that uses
+ * Bun's built-in resolver. It implements the subset of the enhanced-resolve API
+ * used for Tailwind CSS.
+ */
+import fs from "node:fs"
+import path from "node:path"
+
+type ErrorWithDetail =
+  & Error
+  & {
+    details?: string
+  }
+
+interface ResolveRequest {
+  path: string | false
+  context?: object
+  descriptionFilePath?: string
+  descriptionFileRoot?: string
+  descriptionFileData?: Record<string, unknown>
+  relativePath?: string
+  ignoreSymlinks?: boolean
+  fullySpecified?: boolean
+}
+
+interface ResolveContext {
+  contextDependencies?: { add: (item: string) => void }
+  fileDependencies?: { add: (item: string) => void }
+  missingDependencies?: { add: (item: string) => void }
+  stack?: Set<string>
+  log?: (str: string) => void
+  yield?: (request: ResolveRequest) => void
+}
+
+interface ResolveOptions {
+  extensions?: string[]
+  mainFields?: (string | string[])[]
+  conditionNames?: string[]
+  fileSystem?: unknown
+  useSyncFileSystemCalls?: boolean
+  modules?: string | string[]
+}
+
+export interface Resolver {
+  resolve(
+    context: object,
+    path: string,
+    request: string,
+    resolveContext: ResolveContext,
+    callback: (
+      err: null | ErrorWithDetail,
+      res?: string | false,
+      req?: ResolveRequest,
+    ) => void,
+  ): void
+}
+
+export class CachedInputFileSystem {
+  constructor(
+    _fileSystem: unknown,
+    _duration: number,
+  ) {}
+}
+
+export const ResolverFactory = {
+  createResolver(options: ResolveOptions): Resolver {
+    const extensions = options.extensions ?? []
+    const mainFields = (options.mainFields ?? []).flatMap((f) =>
+      Array.isArray(f) ? f : [f]
+    )
+    const conditionNames = options.conditionNames ?? []
+
+    return {
+      resolve(
+        _context: object,
+        basePath: string,
+        id: string,
+        _resolveContext: ResolveContext,
+        callback: (
+          err: null | ErrorWithDetail,
+          res?: string | false,
+          req?: ResolveRequest,
+        ) => void,
+      ): void {
+        try {
+          const result = resolveSync(id, basePath, {
+            extensions,
+            mainFields,
+            conditionNames,
+          })
+          callback(null, result)
+        } catch (err) {
+          callback(err instanceof Error ? err : new Error(String(err)))
+        }
+      },
+    }
+  },
+}
+
+interface ResolveInternalOptions {
+  extensions: string[]
+  mainFields: string[]
+  conditionNames: string[]
+}
+
+function resolveSync(
+  id: string,
+  base: string,
+  options: ResolveInternalOptions,
+): string | undefined {
+  if (id.startsWith(".") || id.startsWith("/")) {
+    for (const ext of ["", ...options.extensions]) {
+      const fullPath = path.resolve(base, id + ext)
+      if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
+        return fullPath
+      }
+    }
+    return undefined
+  }
+
+  const packagePath = resolvePackagePath(id, base)
+  if (!packagePath) return undefined
+
+  const packageJsonPath = path.join(packagePath, "package.json")
+  if (!fs.existsSync(packageJsonPath)) return undefined
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"))
+
+  for (const field of options.mainFields) {
+    if (typeof packageJson[field] === "string") {
+      const resolved = path.resolve(packagePath, packageJson[field])
+      if (fs.existsSync(resolved)) return resolved
+    }
+  }
+
+  if (packageJson.exports) {
+    const resolved = resolveExports(
+      packageJson.exports,
+      packagePath,
+      options.conditionNames,
+    )
+    if (resolved && fs.existsSync(resolved)) return resolved
+  }
+
+  try {
+    return Bun.resolveSync(id, base)
+  } catch {
+    return undefined
+  }
+}
+
+function resolvePackagePath(id: string, base: string): string | undefined {
+  const parts = id.split("/")
+  const packageName = id.startsWith("@")
+    ? parts.slice(0, 2).join("/")
+    : parts[0]
+
+  let dir = base
+  while (dir !== path.dirname(dir)) {
+    const candidate = path.join(dir, "node_modules", packageName)
+    if (fs.existsSync(candidate)) return candidate
+    dir = path.dirname(dir)
+  }
+  return undefined
+}
+
+function resolveExports(
+  exports: unknown,
+  packagePath: string,
+  conditionNames: string[],
+): string | undefined {
+  if (typeof exports === "string") {
+    return path.resolve(packagePath, exports)
+  }
+
+  if (exports && typeof exports === "object" && !Array.isArray(exports)) {
+    const exportsObj = exports as Record<string, unknown>
+
+    if ("." in exportsObj) {
+      return resolveExports(exportsObj["."], packagePath, conditionNames)
+    }
+
+    for (const condition of conditionNames) {
+      if (condition in exportsObj) {
+        return resolveExports(
+          exportsObj[condition],
+          packagePath,
+          conditionNames,
+        )
+      }
+    }
+
+    if ("default" in exportsObj) {
+      return resolveExports(exportsObj["default"], packagePath, conditionNames)
+    }
+  }
+
+  return undefined
+}

package/src/bun/index.ts

@@ -2,4 +2,3 @@ export * as BunBundle from "./BunBundle.ts"
 export * as BunHttpServer from "./BunHttpServer.ts"
 export * as BunImportTrackerPlugin from "./BunImportTrackerPlugin.ts"
 export * as BunRoute from "./BunRoute.ts"
-export * as BunTailwindPlugin from "./BunTailwindPlugin.ts"

package/src/{bun/BunTailwindPlugin.test.ts → x/tailwind/TailwindPlugin.test.ts}

@@ -1,6 +1,6 @@
 import * as t from "bun:test"
 
-import { extractClassNames } from "./BunTailwindPlugin.ts"
+import { extractClassNames } from "./TailwindPlugin.ts"
 
 // Keep the old broad implementation for comparison tests
 function extractClassNamesBroad(source: string): Set<string> {

package/src/{bun/BunTailwindPlugin.ts → x/tailwind/TailwindPlugin.ts}

@@ -1,18 +1,8 @@
-import type * as Tailwind from "@tailwindcss/node"
 import type { BunPlugin } from "bun"
 import * as NPath from "node:path"
+import * as Tailwind from "./compile.ts"
 
-type Compiler = Awaited<ReturnType<typeof Tailwind.compile>>
-
-export const make = (opts: {
-  /**
-   * Custom importer function to load Tailwind.
-   * By default, it imports from '@tailwindcss/node'.
-   * If you want to use a different version or a custom implementation,
-   * provide your own importer.
-   */
-  importer?: () => Promise<typeof Tailwind>
-
+export const make = (opts?: {
   /**
    * Pattern to match component and HTML files for class name extraction.
    */
@@ -33,24 +23,19 @@ export const make = (opts: {
    * Useful when we want to scan clientside code which is not imported directly on serverside.
    */
   scanPath?: string
-} = {}): BunPlugin => {
+
+  target?: "browser" | "bun" | "node"
+}): BunPlugin => {
   const {
     filesPattern = /\.(jsx?|tsx?|html|svelte|vue|astro)$/,
     cssPattern = /\.css$/,
-    importer = () =>
-      import("@tailwindcss/node").catch(err => {
-        throw new Error(
-          "Tailwind not found: install @tailwindcss/node or provide custom importer option",
-        )
-      }),
-  } = opts
+    target = "browser",
+  } = opts ?? {}
 
   return {
-    name: "Bun Tailwind.css plugin",
-    target: "browser",
+    name: "Tailwind.css plugin",
+    target,
     async setup(builder) {
-      const Tailwind = await importer()
-
       const scannedCandidates = new Set<string>()
       // (file) -> (class names)
       const classNameCandidates = new Map<string, Set<string>>()
@@ -59,7 +44,7 @@ export const make = (opts: {
       // (imported path) -> (importer paths)
       const importDescendants = new Map<string, Set<string>>()
 
-      if (opts.scanPath) {
+      if (opts?.scanPath) {
         const candidates = await scanFiles(opts.scanPath)
 
         candidates.forEach(candidate => scannedCandidates.add(candidate))
@@ -73,7 +58,7 @@ export const make = (opts: {
        * Better to pass scanPath explicitly.
        * @see https://github.com/oven-sh/bun/issues/20877
        */
-      if (!opts.scanPath) {
+      if (!opts?.scanPath) {
         builder.onResolve({
           filter: /.*/,
         }, (args) => {
@@ -142,7 +127,6 @@ export const make = (opts: {
 
         const compiler = await Tailwind.compile(source, {
           base: NPath.dirname(args.path),
-          shouldRewriteUrls: true,
           onDependency: (path) => {},
         })
 

package/src/x/tailwind/compile.ts

@@ -0,0 +1,243 @@
+import fsPromises from "node:fs/promises"
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+import {
+  compile as _compile,
+  compileAst as _compileAst,
+  Features,
+  Polyfills,
+} from "tailwindcss"
+import * as BunEnhancedResolve from "../../bun/_BunEnhancedResolve"
+
+type AstNode = Parameters<typeof _compileAst>[0][number]
+
+export {
+  Features,
+  Polyfills,
+}
+
+export type Resolver = (
+  id: string,
+  base: string,
+) => Promise<string | false | undefined>
+
+export interface CompileOptions {
+  base: string
+  from?: string
+  onDependency: (path: string) => void
+  polyfills?: Polyfills
+
+  customCssResolver?: Resolver
+  customJsResolver?: Resolver
+}
+
+function createCompileOptions({
+  base,
+  from,
+  polyfills,
+  onDependency,
+
+  customCssResolver,
+  customJsResolver,
+}: CompileOptions) {
+  return {
+    base,
+    polyfills,
+    from,
+    async loadModule(id: string, base: string) {
+      return loadModule(id, base, onDependency, customJsResolver)
+    },
+    async loadStylesheet(id: string, sheetBase: string) {
+      let sheet = await loadStylesheet(
+        id,
+        sheetBase,
+        onDependency,
+        customCssResolver,
+      )
+
+      return sheet
+    },
+  }
+}
+
+async function ensureSourceDetectionRootExists(compiler: {
+  root: Awaited<ReturnType<typeof compile>>["root"]
+}) {
+  // Verify if the `source(…)` path exists (until the glob pattern starts)
+  if (compiler.root && compiler.root !== "none") {
+    let globSymbols = /[*{]/
+    let basePath: string[] = []
+    for (let segment of compiler.root.pattern.split("/")) {
+      if (globSymbols.test(segment)) {
+        break
+      }
+
+      basePath.push(segment)
+    }
+
+    let exists = await fsPromises
+      .stat(path.resolve(compiler.root.base, basePath.join("/")))
+      .then((stat) => stat.isDirectory())
+      .catch(() => false)
+
+    if (!exists) {
+      throw new Error(
+        `The \`source(${compiler.root.pattern})\` does not exist or is not a directory.`,
+      )
+    }
+  }
+}
+
+export async function compileAst(ast: AstNode[], options: CompileOptions) {
+  let compiler = await _compileAst(ast, createCompileOptions(options))
+  await ensureSourceDetectionRootExists(compiler)
+  return compiler
+}
+
+export async function compile(css: string, options: CompileOptions) {
+  let compiler = await _compile(css, createCompileOptions(options))
+  await ensureSourceDetectionRootExists(compiler)
+  return compiler
+}
+
+export async function loadModule(
+  id: string,
+  base: string,
+  _onDependency: (path: string) => void,
+  customJsResolver?: Resolver,
+) {
+  if (id[0] !== ".") {
+    let resolvedPath = await resolveJsId(id, base, customJsResolver)
+    if (!resolvedPath) {
+      throw new Error(`Could not resolve '${id}' from '${base}'`)
+    }
+
+    let module = await importModule(pathToFileURL(resolvedPath).href)
+    return {
+      path: resolvedPath,
+      base: path.dirname(resolvedPath),
+      module: module.default ?? module,
+    }
+  }
+
+  let resolvedPath = await resolveJsId(id, base, customJsResolver)
+  if (!resolvedPath) {
+    throw new Error(`Could not resolve '${id}' from '${base}'`)
+  }
+
+  let [module] = await Promise.all([
+    importModule(pathToFileURL(resolvedPath).href + "?id=" + Date.now()),
+  ])
+
+  return {
+    path: resolvedPath,
+    base: path.dirname(resolvedPath),
+    module: module.default ?? module,
+  }
+}
+
+async function loadStylesheet(
+  id: string,
+  base: string,
+  onDependency: (path: string) => void,
+  cssResolver?: Resolver,
+) {
+  let resolvedPath = await resolveCssId(id, base, cssResolver)
+  if (!resolvedPath) throw new Error(`Could not resolve '${id}' from '${base}'`)
+
+  onDependency(resolvedPath)
+
+  let file = await fsPromises.readFile(resolvedPath, "utf-8")
+  return {
+    path: resolvedPath,
+    base: path.dirname(resolvedPath),
+    content: file,
+  }
+}
+
+async function importModule(path: string): Promise<any> {
+  if (typeof globalThis.__tw_load === "function") {
+    let module = await globalThis.__tw_load(path)
+    if (module) {
+      return module
+    }
+  }
+
+  return await import(path)
+}
+
+const cssResolver = BunEnhancedResolve.ResolverFactory.createResolver({
+  extensions: [".css"],
+  mainFields: ["style"],
+  conditionNames: ["style"],
+})
+async function resolveCssId(
+  id: string,
+  base: string,
+  customCssResolver?: Resolver,
+): Promise<string | false | undefined> {
+  if (typeof globalThis.__tw_resolve === "function") {
+    let resolved = globalThis.__tw_resolve(id, base)
+    if (resolved) {
+      return Promise.resolve(resolved)
+    }
+  }
+
+  if (customCssResolver) {
+    let customResolution = await customCssResolver(id, base)
+    if (customResolution) {
+      return customResolution
+    }
+  }
+
+  return runResolver(cssResolver, id, base)
+}
+
+const esmResolver = BunEnhancedResolve.ResolverFactory.createResolver({
+  extensions: [".js", ".json", ".node", ".ts"],
+  conditionNames: ["node", "import"],
+  mainFields: ["module", "main"],
+})
+
+const cjsResolver = BunEnhancedResolve.ResolverFactory.createResolver({
+  extensions: [".js", ".json", ".node", ".ts"],
+  conditionNames: ["node", "require"],
+  mainFields: ["main"],
+})
+
+async function resolveJsId(
+  id: string,
+  base: string,
+  customJsResolver?: Resolver,
+): Promise<string | false | undefined> {
+  if (typeof globalThis.__tw_resolve === "function") {
+    let resolved = globalThis.__tw_resolve(id, base)
+    if (resolved) {
+      return Promise.resolve(resolved)
+    }
+  }
+
+  if (customJsResolver) {
+    let customResolution = await customJsResolver(id, base)
+    if (customResolution) {
+      return customResolution
+    }
+  }
+
+  return runResolver(esmResolver, id, base).catch(() =>
+    runResolver(cjsResolver, id, base)
+  )
+}
+
+function runResolver(
+  resolver: BunEnhancedResolve.Resolver,
+  id: string,
+  base: string,
+): Promise<string | false | undefined> {
+  return new Promise((resolve, reject) =>
+    resolver.resolve({}, base, id, {}, (err, result) => {
+      if (err) return reject(err)
+      resolve(result)
+    })
+  )
+}

package/src/x/tailwind/plugin.ts

@@ -1,6 +1,6 @@
 import * as NPath from "node:path"
-import * as BunTailwindPlugin from "../../bun/BunTailwindPlugin.ts"
 import * as NodeUtils from "../../NodeUtils.ts"
+import * as TailwindPlugin from "./TailwindPlugin.ts"
 
 // Append `?dir=` to module identifier to pass custom directory to scan
 const dirParam = URL.parse(import.meta.url)?.searchParams.get("dir")
@@ -12,6 +12,6 @@ const scanPath = dirParam
   : process.cwd()
 
 // Export as default to be used in bunfig.toml
-export default BunTailwindPlugin.make({
+export default TailwindPlugin.make({
   scanPath,
 })