effect-start 0.9.0

package/src/bun/BunTailwindPlugin.test.ts

@@ -0,0 +1,335 @@
+import * as t from "bun:test"
+
+import { extractClassNames } from "./BunTailwindPlugin.ts"
+
+// Keep the old broad implementation for comparison tests
+function extractClassNamesBroad(source: string): Set<string> {
+  // Old broad implementation
+  const CLASS_NAME_REGEX = /^[^"'`\s]+$/
+  const classTokenRegex =
+    /\b[a-zA-Z][a-zA-Z0-9_:-]*(?:\[[^\]]*\])?(?:\/[0-9]+)?/g
+
+  return new Set(
+    Array
+      .from(source.matchAll(classTokenRegex))
+      .map(match => match[0])
+      .filter(token => CLASS_NAME_REGEX.test(token)),
+  )
+}
+
+t.describe("extractClassNames", () => {
+  t.test("Basic HTML class attributes", () => {
+    const source = `<div class="bg-red-500 text-white">Hello</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["bg-red-500", "text-white"])
+  })
+
+  t.test("Basic JSX className attributes", () => {
+    const source =
+      `<div className="flex items-center justify-between">Content</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["flex", "items-center", "justify-between"])
+  })
+
+  t.test("Single quotes", () => {
+    const source = `<div class='bg-blue-500 hover:bg-blue-600'>Button</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["bg-blue-500", "hover:bg-blue-600"])
+  })
+
+  t.test("Template literals in JSX", () => {
+    const source = `<div className={\`bg-\${color} text-lg\`}>Dynamic</div>`
+    const result = extractClassNames(source)
+
+    // Should extract valid static class names from template literals
+    t
+      .expect([...result].sort())
+      .toEqual(["text-lg"])
+  })
+
+  t.test("JSX with quoted strings", () => {
+    const source = `<div className={"p-4 m-2"}>Static in braces</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["m-2", "p-4"])
+  })
+
+  t.test("Multi-line attributes", () => {
+    const source = `<div 
+      className="
+        grid 
+        grid-cols-3 
+        gap-4
+      "
+    >Grid</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["gap-4", "grid", "grid-cols-3"])
+  })
+
+  t.test("Whitespace variations around equals", () => {
+    const cases = [
+      `<div class="text-sm">Normal</div>`,
+      `<div class ="text-md">Space before</div>`,
+      `<div class= "text-lg">Space after</div>`,
+      `<div class = "text-xl">Spaces both</div>`,
+    ]
+
+    for (const source of cases) {
+      const result = extractClassNames(source)
+
+      t
+        .expect(result.size)
+        .toBe(1)
+    }
+  })
+
+  t.test("Arbitrary value classes", () => {
+    const source =
+      `<div className="w-[32px] bg-[#ff0000] text-[1.5rem]">Arbitrary</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["bg-[#ff0000]", "text-[1.5rem]", "w-[32px]"])
+  })
+
+  t.test("Fraction classes", () => {
+    const source = `<div className="w-1/2 h-3/4">Fractions</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["h-3/4", "w-1/2"])
+  })
+
+  t.test("Complex Tailwind classes", () => {
+    const source =
+      `<div className="sm:w-1/2 md:w-1/3 lg:w-1/4 hover:bg-gray-100 focus:ring-2">Responsive</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual([
+        "focus:ring-2",
+        "hover:bg-gray-100",
+        "lg:w-1/4",
+        "md:w-1/3",
+        "sm:w-1/2",
+      ])
+  })
+
+  t.test("Should ignore similar attribute names", () => {
+    const source =
+      `<div data-class="should-ignore" myclass="also-ignore" class="keep-this">Test</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result])
+      .toEqual(["keep-this"])
+  })
+
+  t.test("Should handle case sensitivity", () => {
+    const source =
+      `<div Class="uppercase-class" class="lowercase-class">Mixed case</div>`
+    const result = extractClassNames(source)
+
+    // Our current implementation only matches lowercase 'class'
+    t
+      .expect([...result])
+      .toEqual(["lowercase-class"])
+  })
+
+  t.test("Empty class attributes", () => {
+    const source = `<div class="" className=''>Empty</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect(result.size)
+      .toBe(0)
+  })
+
+  t.test("Classes with special characters", () => {
+    const source =
+      `<div className="group-hover:text-blue-500 peer-focus:ring-2">Special chars</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["group-hover:text-blue-500", "peer-focus:ring-2"])
+  })
+
+  t.test("Should not match classes in comments", () => {
+    const source = `
+      <!-- <div class="commented-out">Should not match</div> -->
+      <div class="real-class">Should match</div>
+    `
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result])
+      .toEqual(["real-class"])
+  })
+
+  t.test("Should not match classes in strings", () => {
+    const source = `
+      const message = "This class='fake-class' should not match";
+      <div class="real-class">Real element</div>
+    `
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result])
+      .toEqual(["real-class"])
+  })
+
+  t.test("Complex JSX expressions should be ignored", () => {
+    const source = `
+      <div className={condition ? "conditional-class" : "other-class"}>Conditional</div>
+      <div className={\`template-\${variable}\`}>Template</div>
+      <div className={getClasses()}>Function call</div>
+      <div className="static-class">Static</div>
+    `
+    const result = extractClassNames(source)
+
+    // Only the static class should match with our strict implementation
+    t
+      .expect([...result])
+      .toEqual(["static-class"])
+  })
+
+  t.test("Vue.js class bindings should be ignored", () => {
+    const source = `
+      <div :class="{ 'active': isActive }">Vue object</div>
+      <div :class="['base', condition && 'active']">Vue array</div>
+      <div class="static-vue-class">Static Vue</div>
+    `
+    const result = extractClassNames(source)
+
+    // Only static class should match
+    t
+      .expect([...result])
+      .toEqual(["static-vue-class"])
+  })
+
+  t.test("Svelte class directives should be ignored", () => {
+    const source = `
+      <div class:active={condition}>Svelte directive</div>
+      <div class="static-svelte-class">Static Svelte</div>
+    `
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result])
+      .toEqual(["static-svelte-class"])
+  })
+
+  t.test("Escaped quotes should be handled", () => {
+    const source =
+      `<div class="text-sm before:content-['Hello']">Escaped quotes</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["before:content-['Hello']", "text-sm"])
+  })
+
+  t.test("Current broad implementation comparison", () => {
+    const source = `
+      <div class="bg-red-500 text-white">Element</div>
+      <p>Some random-text-with-hyphens in content</p>
+      const variable = "some-string";
+    `
+
+    const broadResult = extractClassNamesBroad(source)
+    const strictResult = extractClassNames(source)
+
+    // Broad should pick up more tokens
+    t
+      .expect(broadResult.size)
+      .toBeGreaterThan(strictResult.size)
+
+    // Strict should only have the actual class names
+    t
+      .expect([...strictResult].sort())
+      .toEqual(["bg-red-500", "text-white"])
+  })
+
+  t.test("Component names with dots", () => {
+    const source =
+      `<Toast.Toast class="toast toast-top toast-center fixed top-8 z-10">Content</Toast.Toast>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["fixed", "toast", "toast-center", "toast-top", "top-8", "z-10"])
+  })
+
+  t.test("Complex component names and attributes", () => {
+    const source = `
+      <My.Component.Name className="flex items-center">Content</My.Component.Name>
+      <Component-with-dashes class="bg-red-500">Content</Component-with-dashes>
+      <Component123 className="text-lg">Content</Component123>
+      <namespace:element class="border-2">XML style</namespace:element>
+    `
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual([
+        "bg-red-500",
+        "border-2",
+        "flex",
+        "items-center",
+        "text-lg",
+      ])
+  })
+
+  t.test("Conditional JSX with Toast component", () => {
+    const source = `{toastParam !== undefined && (
+          <Toast.Toast class="toast toast-top toast-center fixed top-8 z-10">
+            <div class="alert alert-success">
+              <span>
+                {toastParam}
+              </span>
+            </div>
+          </Toast.Toast>
+        )}`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual([
+        "alert",
+        "alert-success",
+        "fixed",
+        "toast",
+        "toast-center",
+        "toast-top",
+        "top-8",
+        "z-10",
+      ])
+  })
+
+  t.test("Template literals with expressions", () => {
+    const source = `<div class={\`toast \${props.class ?? ""}\`}>Content</div>`
+    const result = extractClassNames(source)
+
+    t
+      .expect([...result].sort())
+      .toEqual(["toast"])
+  })
+})

package/src/bun/BunTailwindPlugin.ts

@@ -0,0 +1,322 @@
+import type * as Tailwind from "@tailwindcss/node"
+import type { BunPlugin } from "bun"
+import * as NodePath from "node:path"
+
+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>
+
+  /**
+   * Pattern to match component and HTML files for class name extraction.
+   */
+  filesPattern?: RegExp
+
+  /**
+   * Pattern to match CSS files that import Tailwind.
+   */
+  cssPattern?: RegExp
+
+  /**
+   * Scan a path for candidates.
+   * By default, only class names found in files that are part of the import graph
+   * that imports tailwind are considered.
+   *
+   * This option scans the provided path and ensures that class names found under this path
+   * are includedd, even if they are not part of the import graph.
+   */
+  scanPath?: string
+} = {}): 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
+
+  return {
+    name: "Bun Tailwind.css plugin",
+    target: "browser",
+    async setup(builder) {
+      const Tailwind = await importer()
+
+      const scannedCandidates = new Set<string>()
+      // (file) -> (class names)
+      const classNameCandidates = new Map<string, Set<string>>()
+      // (importer path) -> (imported paths)
+      const importAncestors = new Map<string, Set<string>>()
+      // (imported path) -> (importer paths)
+      const importDescendants = new Map<string, Set<string>>()
+
+      if (opts.scanPath) {
+        const candidates = await scanFiles(opts.scanPath)
+
+        candidates.forEach(candidate => scannedCandidates.add(candidate))
+      }
+
+      /**
+       * Track import relationships.
+       * We do this to scope all class name candidates to tailwind entrypoints
+       */
+      builder.onResolve({
+        filter: /.*/,
+      }, (args) => {
+        const fullPath = Bun.resolveSync(args.path, args.resolveDir)
+
+        if (fullPath.includes("/node_modules/")) {
+          return undefined
+        }
+
+        /**
+         * Register every visited module.
+         */
+        {
+          if (!importAncestors.has(fullPath)) {
+            importAncestors.set(fullPath, new Set())
+          }
+
+          if (!importDescendants.has(fullPath)) {
+            importDescendants.set(fullPath, new Set())
+          }
+
+          if (!importAncestors.has(args.importer)) {
+            importAncestors.set(args.importer, new Set())
+          }
+
+          if (!importDescendants.has(args.importer)) {
+            importDescendants.set(args.importer, new Set())
+          }
+        }
+
+        importAncestors.get(fullPath)!.add(args.importer)
+        importDescendants.get(args.importer)!.add(fullPath)
+
+        return undefined
+      })
+
+      /**
+       * Scan for class name candidates in component files.
+       */
+      builder.onLoad({
+        filter: filesPattern,
+      }, async (args) => {
+        const contents = await Bun.file(args.path).text()
+        const classNames = extractClassNames(contents)
+
+        if (classNames.size > 0) {
+          classNameCandidates.set(args.path, classNames)
+        }
+
+        return undefined
+      })
+
+      /**
+       * Compile tailwind entrypoints.
+       */
+      builder.onLoad({
+        filter: cssPattern,
+      }, async (args) => {
+        const source = await Bun.file(args.path).text()
+
+        if (!hasCssImport(source, "tailwindcss")) {
+          return undefined
+        }
+
+        const compiler = await Tailwind.compile(source, {
+          base: NodePath.dirname(args.path),
+          shouldRewriteUrls: true,
+          onDependency: (path) => {},
+        })
+
+        // wait for other files to be loaded so we can collect class name candidates
+        // NOTE: at currently processed css won't be in import graph because
+        // we haven't returned its contents yet.
+        await args.defer()
+
+        const candidates = new Set<string>()
+
+        scannedCandidates.forEach(candidate => candidates.add(candidate))
+
+        {
+          const pendingModules = [
+            // get class name candidates from all modules that import this one
+            ...(importAncestors.get(args.path) ?? []),
+          ]
+          const visitedModules = new Set<string>()
+
+          while (pendingModules.length > 0) {
+            const currentPath = pendingModules.shift()!
+
+            if (visitedModules.has(currentPath)) {
+              continue
+            }
+
+            const moduleImports = importDescendants.get(currentPath)
+
+            moduleImports?.forEach(moduleImport => {
+              const moduleCandidates = classNameCandidates.get(moduleImport)
+
+              moduleCandidates?.forEach(candidate => candidates.add(candidate))
+
+              pendingModules.push(moduleImport)
+            })
+
+            visitedModules.add(currentPath)
+          }
+        }
+
+        const contents = compiler.build([
+          ...candidates,
+        ])
+
+        return {
+          contents,
+          loader: "css",
+        }
+      })
+    },
+  }
+}
+
+const CSS_IMPORT_REGEX = /@import\s+(?:url\()?["']?([^"')]+)["']?\)?\s*[^;]*;/
+
+function hasCssImport(css: string, specifier?: string): boolean {
+  const [, importPath] = css.match(CSS_IMPORT_REGEX) ?? []
+
+  if (!importPath) return false
+
+  return specifier === undefined
+    || importPath.includes(specifier)
+}
+
+export function extractClassNames(source: string): Set<string> {
+  const candidates = new Set<string>()
+
+  // Remove HTML comments to avoid false matches
+  const sourceWithoutComments = source.replace(/<!--[\s\S]*?-->/g, "")
+
+  // Array of pattern strings for different class/className attribute formats
+  const patterns = [
+    // HTML class attributes with double quotes: <div class="bg-blue-500 text-white">
+    "<[^>]*?\\sclass\\s*=\\s*\"([^\"]+)\"",
+
+    // HTML class attributes with single quotes: <div class='bg-blue-500 text-white'>
+    "<[^>]*?\\sclass\\s*=\\s*'([^']+)'",
+
+    // JSX className attributes with double quotes: <div className="bg-blue-500 text-white">
+    "<[^>]*?\\sclassName\\s*=\\s*\"([^\"]+)\"",
+
+    // JSX className attributes with single quotes: <div className='bg-blue-500 text-white'>
+    "<[^>]*?\\sclassName\\s*=\\s*'([^']+)'",
+
+    // JSX className with braces and double quotes: <div className={"bg-blue-500 text-white"}>
+    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
+
+    // JSX className with braces and single quotes: <div className={'bg-blue-500 text-white'}>
+    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
+
+    // JSX className with template literals: <div className={`bg-blue-500 ${variable}`}>
+    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+
+    // HTML class with template literals: <div class={`bg-blue-500 ${variable}`}>
+    "<[^>]*?\\sclass\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+
+    // HTML class at start of tag with double quotes: <div class="bg-blue-500">
+    "<\\w+\\s+class\\s*=\\s*\"([^\"]+)\"",
+
+    // HTML class at start of tag with single quotes: <div class='bg-blue-500'>
+    "<\\w+\\s+class\\s*=\\s*'([^']+)'",
+
+    // JSX className at start of tag with double quotes: <div className="bg-blue-500">
+    "<\\w+\\s+className\\s*=\\s*\"([^\"]+)\"",
+
+    // JSX className at start of tag with single quotes: <div className='bg-blue-500'>
+    "<\\w+\\s+className\\s*=\\s*'([^']+)'",
+
+    // JSX className at start with braces and double quotes: <div className={"bg-blue-500"}>
+    "<\\w+\\s+className\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
+
+    // JSX className at start with braces and single quotes: <div className={'bg-blue-500'}>
+    "<\\w+\\s+className\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
+
+    // JSX className at start with template literals: <div className={`bg-blue-500 ${variable}`}>
+    "<\\w+\\s+className\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+
+    // HTML class at start with template literals: <div class={`bg-blue-500 ${variable}`}>
+    "<\\w+\\s+class\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+  ]
+
+  // Combine all patterns into one regex using alternation
+  const combinedPattern = patterns
+    .map(pattern => `(?:${pattern})`)
+    .join("|")
+
+  const combinedRegex = new RegExp(combinedPattern, "g")
+
+  for (const match of sourceWithoutComments.matchAll(combinedRegex)) {
+    // Find the first non-undefined capture group (skip match[0] which is full match)
+    let classString = ""
+    for (let i = 1; i < match.length; i++) {
+      if (match[i] !== undefined) {
+        classString = match[i]
+        break
+      }
+    }
+
+    if (!classString) {
+      continue
+    }
+
+    // Only apply complex processing if the string contains characters that require it
+    if (classString.includes("${")) {
+      // Split by ${...} expressions and process each static part
+      const staticParts = classString.split(/\$\{[^}]*\}/g)
+
+      for (const part of staticParts) {
+        const names = part.trim().split(/\s+/).filter(name => {
+          if (name.length === 0) return false
+          // Don't extract incomplete classes like "bg-" or "-500"
+          if (name.endsWith("-") || name.startsWith("-")) return false
+          // Basic Tailwind class pattern validation
+          return /^[a-zA-Z0-9_:-]+(\[[^\]]*\])?$/.test(name)
+        })
+        names.forEach(name => candidates.add(name))
+      }
+    } else {
+      // Simple case: regular class string without expressions
+      const names = classString.split(/\s+/).filter(name => name.length > 0)
+      names.forEach(name => candidates.add(name))
+    }
+  }
+
+  return candidates
+}
+
+async function scanFiles(dir: string): Promise<Set<string>> {
+  const candidates = new Set<string>()
+  const glob = new Bun.Glob("**/*.{js,jsx,ts,tsx,html,vue,svelte,astro}")
+
+  for await (
+    const filePath of glob.scan({
+      cwd: dir,
+      absolute: true,
+    })
+  ) {
+    const contents = await Bun.file(filePath).text()
+    const classNames = extractClassNames(contents)
+
+    classNames.forEach((className) => candidates.add(className))
+  }
+
+  return candidates
+}