feat: automatically init and resolve tailwind.config.cjs files

Author: natemoo-re

__tests__/cli.test.js

@@ -8,6 +8,7 @@ import runInTempDirectory from '../jest/runInTempDirectory'
 describe('cli', () => {
   const inputCssPath = path.resolve(__dirname, 'fixtures/tailwind-input.css')
   const customConfigPath = path.resolve(__dirname, 'fixtures/custom-config.js')
+  const esmPackageJsonPath = path.resolve(__dirname, 'fixtures/esm-package.json')
   const defaultConfigFixture = utils.readFile(constants.defaultConfigStubFile)
   const simpleConfigFixture = utils.readFile(constants.simpleConfigStubFile)
   const defaultPostCssConfigFixture = utils.readFile(constants.defaultPostCssConfigStubFile)
@@ -47,6 +48,27 @@ describe('cli', () => {
       })
     })
 
+    it('creates a .cjs Tailwind config file inside of an ESM project', () => {
+      return runInTempDirectory(() => {
+        utils.writeFile('package.json', utils.readFile(esmPackageJsonPath))
+        return cli(['init']).then(() => {
+          expect(utils.readFile(constants.cjsConfigFile)).toEqual(simpleConfigFixture)
+        })
+      })
+    })
+
+    it('creates a .cjs Tailwind config file and a postcss.config.cjs file inside of an ESM project', () => {
+      return runInTempDirectory(() => {
+        utils.writeFile('package.json', utils.readFile(esmPackageJsonPath))
+        return cli(['init', '-p']).then(() => {
+          expect(utils.readFile(constants.cjsConfigFile)).toEqual(simpleConfigFixture)
+          expect(utils.readFile(constants.cjsPostCssConfigFile)).toEqual(
+            defaultPostCssConfigFixture
+          )
+        })
+      })
+    })
+
     it('creates a Tailwind config file in a custom location', () => {
       return runInTempDirectory(() => {
         return cli(['init', 'custom.js']).then(() => {

__tests__/fixtures/esm-package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

src/cli/commands/init.js

@@ -15,7 +15,7 @@ export const options = [
   },
   {
     usage: '-p',
-    description: 'Generate postcss.config.js file.',
+    description: 'Generate PostCSS config file.',
   },
 ]
 
@@ -35,8 +35,9 @@ export function run(cliParams, cliOptions) {
   return new Promise((resolve) => {
     utils.header()
 
+    const isModule = utils.isModule()
     const full = cliOptions.full
-    const file = cliParams[0] || constants.defaultConfigFile
+    const file = cliParams[0] || (isModule ? constants.cjsConfigFile : constants.defaultConfigFile)
     const simplePath = utils.getSimplePath(file)
 
     utils.exists(file) && utils.die(colors.file(simplePath), 'already exists.')
@@ -52,10 +53,13 @@ export function run(cliParams, cliOptions) {
     utils.log(emoji.yes, 'Created Tailwind config file:', colors.file(simplePath))
 
     if (cliOptions.postcss) {
-      const path = utils.getSimplePath(constants.defaultPostCssConfigFile)
+      const postCssConfigFile = isModule
+        ? constants.cjsPostCssConfigFile
+        : constants.defaultPostCssConfigFile
+      const path = utils.getSimplePath(postCssConfigFile)
       utils.exists(constants.defaultPostCssConfigFile) &&
         utils.die(colors.file(path), 'already exists.')
-      utils.copyFile(constants.defaultPostCssConfigStubFile, constants.defaultPostCssConfigFile)
+      utils.copyFile(constants.defaultPostCssConfigStubFile, postCssConfigFile)
       utils.log(emoji.yes, 'Created PostCSS config file:', colors.file(path))
     }
 

src/cli/utils.js

@@ -1,5 +1,6 @@
 import { copyFileSync, ensureFileSync, existsSync, outputFileSync, readFileSync } from 'fs-extra'
 import { findKey, mapValues, startsWith, trimStart } from 'lodash'
+import path from 'path'
 
 import * as colors from './colors'
 import * as emoji from './emoji'
@@ -119,6 +120,21 @@ export function readFile(path) {
   return readFileSync(path, 'utf-8')
 }
 
+/**
+ * Checks if current package.json uses type "module"
+ *
+ * @param {string} path
+ * @return {string}
+ */
+export function isModule() {
+  const pkgPath = path.resolve('./package.json')
+  if (exists(pkgPath)) {
+    const pkg = JSON.parse(readFile(pkgPath))
+    return pkg.type && pkg.type === 'module'
+  }
+  return false
+}
+
 /**
  * Writes content to file.
  *

src/constants.js

@@ -3,6 +3,11 @@ import path from 'path'
 export const cli = 'tailwind'
 export const defaultConfigFile = './tailwind.config.js'
 export const defaultPostCssConfigFile = './postcss.config.js'
+export const cjsConfigFile = './tailwind.config.js'
+export const cjsPostCssConfigFile = './postcss.config.cjs'
+
+export const supportedConfigFiles = [cjsConfigFile, defaultConfigFile]
+export const supportedPostCssConfigFile = [cjsPostCssConfigFile, defaultPostCssConfigFile]
 
 export const defaultConfigStubFile = path.resolve(__dirname, '../stubs/defaultConfig.stub.js')
 export const simpleConfigStubFile = path.resolve(__dirname, '../stubs/simpleConfig.stub.js')

src/index.js

@@ -9,7 +9,7 @@ import processTailwindFeatures from './processTailwindFeatures'
 import formatCSS from './lib/formatCSS'
 import resolveConfig from './util/resolveConfig'
 import getAllConfigs from './util/getAllConfigs'
-import { defaultConfigFile } from './constants'
+import { supportedConfigFiles } from './constants'
 import defaultConfig from '../stubs/defaultConfig.stub.js'
 
 function resolveConfigPath(filePath) {
@@ -34,13 +34,15 @@ function resolveConfigPath(filePath) {
   }
 
   // require('tailwindcss')
-  try {
-    const defaultConfigPath = path.resolve(defaultConfigFile)
-    fs.accessSync(defaultConfigPath)
-    return defaultConfigPath
-  } catch (err) {
-    return undefined
+  for (const configFile of supportedConfigFiles) {
+    try {
+      const configPath = path.resolve(configFile)
+      fs.accessSync(configPath)
+      return configPath
+    } catch (err) {}
   }
+
+  return undefined
 }
 
 const getConfigFunction = (config) => () => {

src/index.postcss7.js

@@ -10,7 +10,7 @@ import processTailwindFeatures from './processTailwindFeatures'
 import formatCSS from './lib/formatCSS'
 import resolveConfig from './util/resolveConfig'
 import getAllConfigs from './util/getAllConfigs'
-import { defaultConfigFile } from './constants'
+import { supportedConfigFiles } from './constants'
 import defaultConfig from '../stubs/defaultConfig.stub.js'
 
 function resolveConfigPath(filePath) {
@@ -35,13 +35,15 @@ function resolveConfigPath(filePath) {
   }
 
   // require('tailwindcss')
-  try {
-    const defaultConfigPath = path.resolve(defaultConfigFile)
-    fs.accessSync(defaultConfigPath)
-    return defaultConfigPath
-  } catch (err) {
-    return undefined
+  for (const configFile of supportedConfigFiles) {
+    try {
+      const configPath = path.resolve(configFile)
+      fs.accessSync(configPath)
+      return configPath
+    } catch (err) {}
   }
+
+  return undefined
 }
 
 const getConfigFunction = (config) => () => {