From 95b59a57d9e3b440605b17dd564d2074aaac3789 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 21 Mar 2022 16:40:51 +0100
Subject: [PATCH 1/2] enable TypeScript only when using `init --types` for now

---
 src/cli.js                  | 13 ++++++++++++-
 stubs/defaultConfig.stub.js |  5 +----
 stubs/simpleConfig.stub.js  |  5 +----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/cli.js b/src/cli.js
index 8aee860a870f..5770546e89a8 100644
--- a/src/cli.js
+++ b/src/cli.js
@@ -151,6 +151,10 @@ let commands = {
     args: {
       '--full': { type: Boolean, description: 'Initialize a full `tailwind.config.js` file' },
       '--postcss': { type: Boolean, description: 'Initialize a `postcss.config.js` file' },
+      '--types': {
+        type: Boolean,
+        description: 'Add TypeScript types for the `tailwind.config.js` file',
+      },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -209,7 +213,7 @@ if (
   help({
     usage: [
       'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
-      'tailwindcss init [--full] [--postcss] [options...]',
+      'tailwindcss init [--full] [--postcss] [--types] [options...]',
     ],
     commands: Object.keys(commands)
       .filter((command) => command !== 'build')
@@ -336,6 +340,13 @@ function init() {
       'utf8'
     )
 
+    if (args['--types']) {
+      let typesHeading = "/** @type {import('tailwindcss/types').Config} */"
+      stubFile =
+        stubFile.replace(`module.exports = `, `${typesHeading}\nconst config = `) +
+        '\nmodule.exports = config'
+    }
+
     // Change colors import
     stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
 
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 0d8ad5d4b6f5..cff789cb843f 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -1,5 +1,4 @@
-/** @type {import('tailwindcss/types').Config} */
-const config = {
+module.exports = {
   content: [],
   presets: [],
   darkMode: 'media', // or 'class'
@@ -952,5 +951,3 @@ const config = {
   ],
   plugins: [],
 }
-
-module.exports = config
diff --git a/stubs/simpleConfig.stub.js b/stubs/simpleConfig.stub.js
index 7d987c73b26e..9843c05570a6 100644
--- a/stubs/simpleConfig.stub.js
+++ b/stubs/simpleConfig.stub.js
@@ -1,10 +1,7 @@
-/** @type {import('tailwindcss/types').Config} */
-const config = {
+module.exports = {
   content: [],
   theme: {
     extend: {},
   },
   plugins: [],
 }
-
-module.exports = config

From 187ce122fda00b5860089cb0fda3e9436a9a76c5 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 21 Mar 2022 16:41:09 +0100
Subject: [PATCH 2/2] update tests to verify that `--types` works

---
 .../tailwindcss-cli/tests/cli.test.js         | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js
index 644ebf2267cd..8289e65d027d 100644
--- a/integrations/tailwindcss-cli/tests/cli.test.js
+++ b/integrations/tailwindcss-cli/tests/cli.test.js
@@ -319,6 +319,46 @@ describe('Init command', () => {
     // multiple keys in `theme` exists. However it loads `tailwindcss/colors`
     // which doesn't exists in this context.
     expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50)
+
+    expect(await readOutputFile('../full.config.js')).not.toContain(
+      `/** @type {import('tailwindcss/types').Config} */`
+    )
+  })
+
+  test('--types', async () => {
+    cleanupFile('simple.config.js')
+
+    let { combined } = await $(`${EXECUTABLE} init simple.config.js --types`)
+
+    expect(combined).toMatchInlineSnapshot(`
+      "
+      Created Tailwind CSS config file: simple.config.js
+      "
+    `)
+
+    expect(await readOutputFile('../simple.config.js')).toContain(
+      `/** @type {import('tailwindcss/types').Config} */`
+    )
+  })
+
+  test('--full --types', async () => {
+    cleanupFile('full.config.js')
+
+    let { combined } = await $(`${EXECUTABLE} init full.config.js --full --types`)
+
+    expect(combined).toMatchInlineSnapshot(`
+      "
+      Created Tailwind CSS config file: full.config.js
+      "
+    `)
+
+    // Not a clean way to test this. We could require the file and verify that
+    // multiple keys in `theme` exists. However it loads `tailwindcss/colors`
+    // which doesn't exists in this context.
+    expect((await readOutputFile('../full.config.js')).split('\n').length).toBeGreaterThan(50)
+    expect(await readOutputFile('../full.config.js')).toContain(
+      `/** @type {import('tailwindcss/types').Config} */`
+    )
   })
 
   test('--postcss', async () => {
@@ -351,6 +391,7 @@ describe('Init command', () => {
         Options:
            -f, --full               Initialize a full \`tailwind.config.js\` file
            -p, --postcss            Initialize a \`postcss.config.js\` file
+               --types              Add TypeScript types for the \`tailwind.config.js\` file
            -h, --help               Display usage information
       `)
     )