Bundle core @tailwindcss/forms and @tailwindcss/typography with the standalone build

Author: philipp-spiess

integrations/cli/standalone.test.ts

@@ -0,0 +1,56 @@
+import os from 'node:os'
+import path from 'node:path'
+import { candidate, css, html, json, test } from '../utils'
+
+const STANDALONE_BINARY = (() => {
+  switch (os.platform()) {
+    case 'win32':
+      return 'tailwindcss-windows-x64.exe'
+    case 'darwin':
+      return os.arch() === 'x64' ? 'tailwindcss-macos-x64' : 'tailwindcss-macos-arm64'
+    case 'linux':
+      return os.arch() === 'x64' ? 'tailwindcss-linux-x64' : 'tailwindcss-linux-arm64'
+    default:
+      throw new Error(`Unsupported platform: ${os.platform()} ${os.arch()}`)
+  }
+})()
+
+test(
+  'includes first-party plugins',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.html': html`
+        <div className="prose">
+          <h1>Headline</h1>
+          <p>
+            Until now, trying to style an article, document, or blog post with Tailwind has been a
+            tedious task that required a keen eye for typography and a lot of complex custom CSS.
+          </p>
+        </div>
+        <input type="text" class="form-input" />
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/theme' theme(reference);
+        @import 'tailwindcss/utilities';
+
+        @plugin '@tailwindcss/forms';
+        @plugin '@tailwindcss/typography';
+      `,
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec(
+      `${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
+    )
+
+    await fs.expectFileToContain('dist/out.css', [candidate`form-input`, candidate`prose`])
+  },
+)

packages/@tailwindcss-node/src/compile.ts

@@ -2,6 +2,7 @@ import EnhancedResolve from 'enhanced-resolve'
 import { createJiti, type Jiti } from 'jiti'
 import fs from 'node:fs'
 import fsPromises from 'node:fs/promises'
+import type Module from 'node:module'
 import path, { dirname } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import {
@@ -87,6 +88,13 @@ export async function loadModule(id: string, base: string, onDependency: (path:
       throw new Error(`Could not resolve '${id}' from '${base}'`)
     }
 
+    if (typeof resolvedPath !== 'string') {
+      return {
+        base,
+        module: resolvedPath,
+      }
+    }
+
     let module = await importModule(pathToFileURL(resolvedPath).href)
     return {
       base: dirname(resolvedPath),
@@ -98,6 +106,14 @@ export async function loadModule(id: string, base: string, onDependency: (path:
   if (!resolvedPath) {
     throw new Error(`Could not resolve '${id}' from '${base}'`)
   }
+
+  if (typeof resolvedPath !== 'string') {
+    return {
+      base,
+      module: resolvedPath,
+    }
+  }
+
   let [module, moduleDependencies] = await Promise.all([
     importModule(pathToFileURL(resolvedPath).href + '?id=' + Date.now()),
     getModuleDependencies(resolvedPath),
@@ -173,7 +189,13 @@ const jsResolver = EnhancedResolve.ResolverFactory.createResolver({
   conditionNames: import.meta.url ? ['node', 'import'] : ['node', 'require'],
 })
 
-function resolveJsId(id: string, base: string): Promise<string | false | undefined> {
+function resolveJsId(id: string, base: string): Promise<string | false | undefined | Module> {
+  if (typeof globalThis.__tw_resolve === 'function') {
+    let resolved = globalThis.__tw_resolve(id, base)
+    if (resolved) {
+      return Promise.resolve(resolved)
+    }
+  }
   return runResolver(jsResolver, id, base)
 }
 

packages/@tailwindcss-standalone/package.json

@@ -26,6 +26,8 @@
   ],
   "dependencies": {
     "@tailwindcss/cli": "workspace:^",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "detect-libc": "1.0.3",
     "enhanced-resolve": "^5.17.1",
     "tailwindcss": "workspace:^"

packages/@tailwindcss-standalone/src/index.ts

@@ -7,12 +7,18 @@ import preflightCss from 'tailwindcss/preflight.css' with { type: 'file' }
 import themeCss from 'tailwindcss/theme.css' with { type: 'file' }
 import utilitiesCss from 'tailwindcss/utilities.css' with { type: 'file' }
 
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
+
 const localResolve = createRequire(import.meta.url).resolve
 
 globalThis.__tw_resolve = (id, baseDir) => {
   let isEmbeddedFileBase = baseDir === '/$bunfs/root' || baseDir?.includes(':/~BUN/root')
   const likelyEmbeddedFile =
-    id === 'tailwindcss' || id.startsWith('tailwindcss/') || isEmbeddedFileBase
+    id === 'tailwindcss' ||
+    id.startsWith('tailwindcss/') ||
+    id.startsWith('@tailwindcss/') ||
+    isEmbeddedFileBase
 
   if (!likelyEmbeddedFile) {
     return false
@@ -38,6 +44,10 @@ globalThis.__tw_resolve = (id, baseDir) => {
     case 'utilities':
     case 'utilities.css':
       return localResolve(utilitiesCss)
+    case '@tailwindcss/forms':
+      return forms
+    case '@tailwindcss/typography':
+      return typography
     default:
       return false
   }

packages/@tailwindcss-standalone/src/types.d.ts

@@ -4,7 +4,7 @@ declare module '*.css' {
 }
 
 declare var __tw_version: string | undefined
-declare var __tw_resolve: undefined | ((id: string, base?: string) => string | false)
+declare var __tw_resolve: undefined | ((id: string, base?: string) => string | false | object)
 declare var __tw_readFile:
   | undefined
   | ((path: string, encoding: BufferEncoding) => Promise<string | undefined>)