Enable ESM and TS based config files

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `justify-normal` and `justify-stretch` utilities ([#10560](https://github.com/tailwindlabs/tailwindcss/pull/10560))
 - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645))
 - Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768))
+- Enable ESM and TS based config files ([#10785](https://github.com/tailwindlabs/tailwindcss/pull/10785))
 
 ### Fixed
 

integrations/execute.js

@@ -26,7 +26,7 @@ module.exports = function $(command, options = {}) {
   let args = options.shell
     ? [command]
     : (() => {
-        let args = command.split(' ')
+        let args = command.trim().split(/\s+/)
         command = args.shift()
         command =
           command === 'node'

integrations/io.js

@@ -97,10 +97,12 @@ module.exports = function ({
     },
     async removeFile(file) {
       let filePath = path.resolve(toolRoot, file)
+
       if (!fileCache[filePath]) {
-        fileCache[filePath] = await fs.readFile(filePath, 'utf8')
+        fileCache[filePath] = await fs.readFile(filePath, 'utf8').catch(() => null)
       }
-      await fs.unlink(filePath)
+
+      await fs.unlink(filePath).catch(() => null)
     },
     async readOutputFile(file) {
       file = await resolveFile(file, absoluteOutputFolder)

integrations/tailwindcss-cli/tests/cli.test.js

@@ -532,6 +532,46 @@ describe('Build command', () => {
 })
 
 describe('Init command', () => {
+  it.each([
+    { flags: [], name: 'tailwind.config.js' },
+    { flags: ['--ts'], name: 'tailwind.config.ts' },
+    { flags: ['--esm'], name: 'tailwind.config.js' },
+    { flags: ['--full'], name: 'tailwind.config.js' },
+    { flags: ['--ts', '--full'], name: 'tailwind.config.ts' },
+    { flags: ['--esm', '--full'], name: 'tailwind.config.js' },
+  ])('works with all these flags: %j', async ({ flags, name }) => {
+    cleanupFile(name)
+    await removeFile(name)
+
+    let { combined } = await $(`${EXECUTABLE} init ${flags.join(' ')}`)
+
+    expect(combined).toMatchInlineSnapshot(`
+      "
+      Created Tailwind CSS config file: ${name}
+      "
+    `)
+
+    expect(await fileExists(name)).toBe(true)
+
+    let content = await readOutputFile(`../${name}`)
+
+    if (flags.includes('--ts') || flags.includes('--esm')) {
+      expect(content).toContain('export default')
+      expect(content).not.toContain('module.exports =')
+    } else {
+      expect(content).toContain('module.exports =')
+      expect(content).not.toContain('export default')
+    }
+
+    if (flags.includes('--ts')) {
+      expect(content).toContain('satisfies Config')
+    }
+
+    if (flags.includes('--full')) {
+      expect(content.split('\n').length).toBeGreaterThan(50)
+    }
+  })
+
   test('--full', async () => {
     cleanupFile('full.config.js')
 
@@ -577,14 +617,19 @@ describe('Init command', () => {
            tailwindcss init [options]
 
         Options:
-           -f, --full               Initialize a full \`tailwind.config.js\` file
+               --esm                Initialize configuration file as ESM
+               --ts                 Initialize configuration file as TypeScript
            -p, --postcss            Initialize a \`postcss.config.js\` file
+           -f, --full               Include the default values for all options in the generated configuration file
            -h, --help               Display usage information
       `)
     )
   })
 
-  test('--help in ESM package', async () => {
+  test('ESM config is created by default in an ESM project', async () => {
+    cleanupFile('tailwind.config.js')
+    await removeFile('tailwind.config.js')
+
     let pkg = await readOutputFile('../package.json')
 
     await writeInputFile(
@@ -595,50 +640,47 @@ describe('Init command', () => {
       })
     )
 
-    let { combined } = await $(`${EXECUTABLE} init --help`)
+    let { combined } = await $(`${EXECUTABLE} init`)
 
-    expect(dedent(combined)).toEqual(
-      dedent(`
-        tailwindcss v${version}
+    expect(combined).toMatchInlineSnapshot(`
+      "
+      Created Tailwind CSS config file: tailwind.config.js
+      "
+    `)
 
-        Usage:
-           tailwindcss init [options]
+    expect(await fileExists('./tailwind.config.js')).toBe(true)
 
-        Options:
-           -f, --full               Initialize a full \`tailwind.config.cjs\` file
-           -p, --postcss            Initialize a \`postcss.config.cjs\` file
-           -h, --help               Display usage information
-      `)
-    )
+    // Not a clean way to test this.
+    expect(await readOutputFile('../tailwind.config.js')).toContain('export default')
 
     await writeInputFile('../package.json', pkg)
   })
 
-  test('cjs config created when in ESM package', async () => {
-    cleanupFile('tailwind.config.cjs')
+  test('CJS config is created by default in a non-ESM project', async () => {
+    cleanupFile('tailwind.config.js')
+    await removeFile('tailwind.config.js')
 
     let pkg = await readOutputFile('../package.json')
 
     await writeInputFile(
       '../package.json',
       JSON.stringify({
         ...JSON.parse(pkg),
-        type: 'module',
       })
     )
 
     let { combined } = await $(`${EXECUTABLE} init`)
 
     expect(combined).toMatchInlineSnapshot(`
       "
-      Created Tailwind CSS config file: tailwind.config.cjs
+      Created Tailwind CSS config file: tailwind.config.js
       "
     `)
 
-    expect(await fileExists('./tailwind.config.cjs')).toBe(true)
+    expect(await fileExists('./tailwind.config.js')).toBe(true)
 
     // Not a clean way to test this.
-    expect(await readOutputFile('../tailwind.config.cjs')).toContain('module.exports =')
+    expect(await readOutputFile('../tailwind.config.js')).toContain('module.exports')
 
     await writeInputFile('../package.json', pkg)
   })

loadConfig.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from './types/config'
+
+declare function loadConfig(path: string): Config
+export = loadConfig

loadConfig.js

@@ -0,0 +1,2 @@
+let loadConfig = require('./lib/public/load-config')
+module.exports = (loadConfig.__esModule ? loadConfig : { default: loadConfig }).default

oxide/crates/node/Cargo.toml

@@ -9,7 +9,7 @@ crate-type = ["cdylib"]
 [dependencies]
 # Default enable napi4 feature, see https://nodejs.org/api/n-api.html#node-api-version-matrix
 napi = { version = "2.10.0", default-features = false, features = ["napi4"] }
-napi-derive = "2.9.1"
+napi-derive = "2.11.1"
 tailwindcss-core = { path = "../core" }
 rayon = "1.5.3"