tailwindcss 0.0.0-oxide-insiders.694aea0 → 0.0.0-oxide-insiders.ac1738e

package/lib/util/resolveConfigPath.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: ()=>resolveConfigPath
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: ()=>resolveConfigPath,
+    resolveDefaultConfigPath: ()=>resolveDefaultConfigPath
 });
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireDefault(require("path"));
@@ -13,6 +19,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+const defaultConfigFiles = [
+    "./tailwind.config.js",
+    "./tailwind.config.cjs",
+    "./tailwind.config.mjs",
+    "./tailwind.config.ts"
+];
 function isObject(value) {
     return typeof value === "object" && value !== null;
 }
@@ -40,10 +52,10 @@ function resolveConfigPath(pathOrConfig) {
         return _path.default.resolve(pathOrConfig);
     }
     // require('tailwindcss')
-    for (const configFile of [
-        "./tailwind.config.js",
-        "./tailwind.config.cjs"
-    ]){
+    return resolveDefaultConfigPath();
+}
+function resolveDefaultConfigPath() {
+    for (const configFile of defaultConfigFiles){
         try {
             const configPath = _path.default.resolve(configFile);
             _fs.default.accessSync(configPath);

package/loadConfig.d.ts

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

package/loadConfig.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.694aea0",
+  "version": "0.0.0-oxide-insiders.ac1738e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -40,7 +40,7 @@
     "lib/*",
     "peers/*",
     "scripts/*.js",
-    "stubs/*.stub.js",
+    "stubs/*",
     "nesting/*",
     "types/**/*",
     "*.d.ts",
@@ -70,17 +70,18 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.694aea0",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.ac1738e",
     "arg": "^5.0.2",
     "browserslist": "^4.21.5",
     "chokidar": "^3.5.3",
     "color-name": "^1.1.4",
-    "detective": "^5.2.1",
+    "detective-typescript": "^9.0.0",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
     "fast-glob": "^3.2.12",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
+    "jiti": "^1.17.2",
     "lightningcss": "^1.18.0",
     "lilconfig": "^2.1.0",
     "micromatch": "^4.0.5",
@@ -95,7 +96,8 @@
     "postcss-selector-parser": "^6.0.11",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.22.1"
+    "resolve": "^1.22.1",
+    "sucrase": "^3.29.0"
   },
   "browserslist": [
     "> 1%",

package/src/cli/build/index.js

@@ -2,9 +2,10 @@
 
 import fs from 'fs'
 import path from 'path'
+import { resolveDefaultConfigPath } from '../../util/resolveConfigPath.js'
 import { createProcessor } from './plugin.js'
 
-export async function build(args, configs) {
+export async function build(args) {
   let input = args['--input']
   let shouldWatch = args['--watch']
 
@@ -25,11 +26,7 @@ export async function build(args, configs) {
   }
 
   // TODO: Reference the @config path here if exists
-  let configPath = args['--config']
-    ? args['--config']
-    : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve(`./${configs.tailwind}`)
-      )
+  let configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 
   let processor = await createProcessor(args, configPath)
 

package/src/cli/build/plugin.js

@@ -12,12 +12,13 @@ import { loadAutoprefixer, loadCssNano, loadPostcss, loadPostcssImport } from '.
 import { formatNodes, drainStdin, outputFile } from './utils'
 import { env } from '../../lib/sharedState'
 import resolveConfig from '../../../resolveConfig.js'
-import getModuleDependencies from '../../lib/getModuleDependencies.js'
 import { parseCandidateFiles } from '../../lib/content.js'
 import { createWatcher } from './watching.js'
 import fastGlob from 'fast-glob'
 import { findAtConfigPath } from '../../lib/findAtConfigPath.js'
 import log from '../../util/log'
+import { loadConfig } from '../../lib/load-config'
+import getModuleDependencies from '../../lib/getModuleDependencies'
 
 /**
  *
@@ -117,7 +118,9 @@ let state = {
   /** @type {{content: string, extension: string}[]} */
   changedContent: [],
 
-  configDependencies: new Set(),
+  /** @type {ReturnType<typeof load> | null} */
+  configBag: null,
+
   contextDependencies: new Set(),
 
   /** @type {import('../../lib/content.js').ContentPath[]} */
@@ -142,37 +145,35 @@ let state = {
 
   loadConfig(configPath, content) {
     if (this.watcher && configPath) {
-      this.refreshConfigDependencies(configPath)
+      this.refreshConfigDependencies()
     }
 
-    let config = configPath ? require(configPath) : {}
+    let config = loadConfig(configPath)
+    let dependencies = getModuleDependencies(configPath)
+    this.configBag = {
+      config,
+      dependencies,
+      dispose() {
+        for (let file of dependencies) {
+          delete require.cache[require.resolve(file)]
+        }
+      },
+    }
 
     // @ts-ignore
-    config = resolveConfig(config, { content: { files: [] } })
+    this.configBag.config = resolveConfig(this.configBag.config, { content: { files: [] } })
 
     // Override content files if `--content` has been passed explicitly
     if (content?.length > 0) {
-      config.content.files = content
+      this.configBag.config.content.files = content
     }
 
-    return config
+    return this.configBag.config
   },
 
-  refreshConfigDependencies(configPath) {
+  refreshConfigDependencies() {
     env.DEBUG && console.time('Module dependencies')
-
-    for (let file of this.configDependencies) {
-      delete require.cache[require.resolve(file)]
-    }
-
-    if (configPath) {
-      let deps = getModuleDependencies(configPath).map(({ file }) => file)
-
-      for (let dependency of deps) {
-        this.configDependencies.add(dependency)
-      }
-    }
-
+    this.configBag?.dispose()
     env.DEBUG && console.timeEnd('Module dependencies')
   },
 
@@ -420,7 +421,7 @@ export async function createProcessor(args, cliConfigPath) {
         async rebuild(changes) {
           let needsNewContext = changes.some((change) => {
             return (
-              state.configDependencies.has(change.file) ||
+              state.configBag?.dependencies.has(change.file) ||
               state.contextDependencies.has(change.file)
             )
           })

package/src/cli/build/watching.js

@@ -220,7 +220,7 @@ export function createWatcher(args, { state, rebuild }) {
 
     refreshWatchedFiles() {
       watcher.add(Array.from(state.contextDependencies))
-      watcher.add(Array.from(state.configDependencies))
+      watcher.add(Array.from(state.configBag.dependencies))
       watcher.add(state.contentPatterns.all)
     },
   }

package/src/cli/index.js

@@ -8,29 +8,6 @@ import { build } from './build'
 import { help } from './help'
 import { init } from './init'
 
-function isESM() {
-  const pkgPath = path.resolve('./package.json')
-
-  try {
-    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
-    return pkg.type && pkg.type === 'module'
-  } catch (err) {
-    return false
-  }
-}
-
-let configs = isESM()
-  ? {
-      tailwind: 'tailwind.config.cjs',
-      postcss: 'postcss.config.cjs',
-    }
-  : {
-      tailwind: 'tailwind.config.js',
-      postcss: 'postcss.config.js',
-    }
-
-// ---
-
 function oneOf(...options) {
   return Object.assign(
     (value = true) => {
@@ -51,8 +28,13 @@ let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
-      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
+      '--esm': { type: Boolean, description: `Initialize configuration file as ESM` },
+      '--ts': { type: Boolean, description: `Initialize configuration file as TypeScript` },
+      '--postcss': { type: Boolean, description: `Initialize a \`postcss.config.js\` file` },
+      '--full': {
+        type: Boolean,
+        description: `Include the default values for all options in the generated configuration file`,
+      },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -231,4 +213,4 @@ if (args['--help']) {
   process.exit(0)
 }
 
-run(args, configs)
+run(args)

package/src/cli/init/index.js

@@ -3,22 +3,49 @@
 import fs from 'fs'
 import path from 'path'
 
-export function init(args, configs) {
+function isESM() {
+  const pkgPath = path.resolve('./package.json')
+
+  try {
+    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+    return pkg.type && pkg.type === 'module'
+  } catch (err) {
+    return false
+  }
+}
+
+export function init(args) {
   let messages = []
 
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./${configs.tailwind}`)
+  let isProjectESM = args['--ts'] || args['--esm'] || isESM()
+  let syntax = args['--ts'] ? 'ts' : isProjectESM ? 'js' : 'cjs'
+  let extension = args['--ts'] ? 'ts' : 'js'
+
+  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./tailwind.config.${extension}`)
+
   if (fs.existsSync(tailwindConfigLocation)) {
     messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
   } else {
-    let stubFile = fs.readFileSync(
+    let stubContentsFile = fs.readFileSync(
       args['--full']
-        ? path.resolve(__dirname, '../../../stubs/defaultConfig.stub.js')
-        : path.resolve(__dirname, '../../../stubs/simpleConfig.stub.js'),
+        ? path.resolve(__dirname, '../../../stubs/config.full.js')
+        : path.resolve(__dirname, '../../../stubs/config.simple.js'),
+      'utf8'
+    )
+
+    let stubFile = fs.readFileSync(
+      path.resolve(__dirname, `../../../stubs/tailwind.config.${syntax}`),
       'utf8'
     )
 
     // Change colors import
-    stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
+    stubContentsFile = stubContentsFile.replace('../colors', 'tailwindcss/colors')
+
+    // Replace contents of {ts,js,cjs} file with the stub {simple,full}.
+    stubFile =
+      stubFile
+        .replace('__CONFIG__', stubContentsFile.replace('module.exports =', '').trim())
+        .trim() + '\n\n'
 
     fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
 
@@ -26,12 +53,14 @@ export function init(args, configs) {
   }
 
   if (args['--postcss']) {
-    let postcssConfigLocation = path.resolve(`./${configs.postcss}`)
+    let postcssConfigLocation = path.resolve('./postcss.config.js')
     if (fs.existsSync(postcssConfigLocation)) {
       messages.push(`${path.basename(postcssConfigLocation)} already exists.`)
     } else {
       let stubFile = fs.readFileSync(
-        path.resolve(__dirname, '../../../stubs/defaultPostCssConfig.stub.js'),
+        isProjectESM
+          ? path.resolve(__dirname, '../../../stubs/postcss.config.js')
+          : path.resolve(__dirname, '../../../stubs/postcss.config.cjs'),
         'utf8'
       )
 

package/src/lib/getModuleDependencies.js

@@ -1,39 +1,40 @@
 import fs from 'fs'
 import path from 'path'
 import resolve from 'resolve'
-import detective from 'detective'
+import detective from 'detective-typescript'
 
 function createModule(file) {
-  const source = fs.readFileSync(file, 'utf-8')
-  const requires = detective(source)
-
-  return { file, requires }
+  let source = fs.readFileSync(file, 'utf-8')
+  return { file, requires: detective(source, { mixedImports: true }) }
 }
 
-export default function getModuleDependencies(entryFile) {
-  const rootModule = createModule(entryFile)
-  const modules = [rootModule]
+function* _getModuleDependencies(entryFile) {
+  yield entryFile
+
+  let mod = createModule(entryFile)
+
+  let ext = path.extname(entryFile)
+  let isTypeScript = ext === '.ts' || ext === '.cts' || ext === '.mts'
+  let extensions = [...(isTypeScript ? ['.ts', '.cts', '.mts'] : []), '.js', '.cjs', '.mjs']
 
   // Iterate over the modules, even when new
   // ones are being added
-  for (const mdl of modules) {
-    mdl.requires
-      .filter((dep) => {
-        // Only track local modules, not node_modules
-        return dep.startsWith('./') || dep.startsWith('../')
-      })
-      .forEach((dep) => {
-        try {
-          const basedir = path.dirname(mdl.file)
-          const depPath = resolve.sync(dep, { basedir })
-          const depModule = createModule(depPath)
+  for (let dep of mod.requires) {
+    // Only track local modules, not node_modules
+    if (!dep.startsWith('./') && !dep.startsWith('../')) {
+      continue
+    }
 
-          modules.push(depModule)
-        } catch (_err) {
-          // eslint-disable-next-line no-empty
-        }
-      })
+    try {
+      let basedir = path.dirname(mod.file)
+      let depPath = resolve.sync(dep, { basedir, extensions })
+      yield* _getModuleDependencies(depPath)
+    } catch (_err) {
+      // eslint-disable-next-line no-empty
+    }
   }
+}
 
-  return modules
+export default function getModuleDependencies(entryFile) {
+  return new Set(_getModuleDependencies(entryFile))
 }

package/src/lib/load-config.ts

@@ -0,0 +1,27 @@
+import jitiFactory from 'jiti'
+import { transform } from 'sucrase'
+
+import { Config } from '../../types/config'
+
+let jiti: ReturnType<typeof jitiFactory> | null = null
+function lazyJiti() {
+  return (
+    jiti ??
+    (jiti = jitiFactory(__filename, {
+      interopDefault: true,
+      transform: (opts) => {
+        return transform(opts.source, {
+          transforms: ['typescript', 'imports'],
+        })
+      },
+    }))
+  )
+}
+
+export function loadConfig(path: string): Config {
+  try {
+    return path ? require(path) : {}
+  } catch {
+    return lazyJiti()(path)
+  }
+}

package/src/lib/setupTrackingContext.js

@@ -4,13 +4,14 @@ import fs from 'fs'
 import LRU from 'quick-lru'
 
 import hash from '../util/hashConfig'
-import getModuleDependencies from '../lib/getModuleDependencies'
 import resolveConfig from '../public/resolve-config'
 import resolveConfigPath from '../util/resolveConfigPath'
 import { getContext, getFileModifiedMap } from './setupContextUtils'
 import parseDependency from '../util/parseDependency'
 import { validateConfig } from '../util/validateConfig.js'
 import { parseCandidateFiles, resolvedChangedContent } from './content.js'
+import { loadConfig } from '../lib/load-config'
+import getModuleDependencies from './getModuleDependencies'
 
 let configPathCache = new LRU({ maxSize: 100 })
 
@@ -34,7 +35,7 @@ function getTailwindConfig(configOrPath) {
     let [prevConfig, prevConfigHash, prevDeps, prevModified] =
       configPathCache.get(userConfigPath) || []
 
-    let newDeps = getModuleDependencies(userConfigPath).map((dep) => dep.file)
+    let newDeps = getModuleDependencies(userConfigPath)
 
     let modified = false
     let newModified = new Map()
@@ -55,8 +56,7 @@ function getTailwindConfig(configOrPath) {
     for (let file of newDeps) {
       delete require.cache[file]
     }
-    let newConfig = resolveConfig(require(userConfigPath))
-    newConfig = validateConfig(newConfig)
+    let newConfig = validateConfig(resolveConfig(loadConfig(userConfigPath)))
     let newHash = hash(newConfig)
     configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified])
     return [newConfig, userConfigPath, newHash, newDeps]

package/src/oxide/cli/build/index.ts

@@ -1,8 +1,9 @@
 import fs from 'fs'
 import path from 'path'
+import { resolveDefaultConfigPath } from '../../../util/resolveConfigPath'
 import { createProcessor } from './plugin'
 
-export async function build(args, configs) {
+export async function build(args) {
   let input = args['--input']
   let shouldWatch = args['--watch']
 
@@ -23,11 +24,7 @@ export async function build(args, configs) {
   }
 
   // TODO: Reference the @config path here if exists
-  let configPath = args['--config']
-    ? args['--config']
-    : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve(`./${configs.tailwind}`)
-      )
+  let configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 
   let processor = await createProcessor(args, configPath)
 

package/src/oxide/cli/build/plugin.ts

@@ -10,12 +10,14 @@ import { loadPostcss, loadPostcssImport, lightningcss } from './deps'
 import { formatNodes, drainStdin, outputFile } from './utils'
 import { env } from '../../../lib/sharedState'
 import resolveConfig from '../../../../resolveConfig'
-import getModuleDependencies from '../../../lib/getModuleDependencies'
 import { parseCandidateFiles } from '../../../lib/content'
 import { createWatcher } from './watching'
 import fastGlob from 'fast-glob'
 import { findAtConfigPath } from '../../../lib/findAtConfigPath'
 import log from '../../../util/log'
+import { loadConfig } from '../../../lib/load-config'
+import getModuleDependencies from '../../../lib/getModuleDependencies'
+import type { Config } from '../../../../types'
 
 /**
  *
@@ -115,7 +117,9 @@ let state = {
   /** @type {{content: string, extension: string}[]} */
   changedContent: [],
 
-  configDependencies: new Set(),
+  /** @type {{config: Config, dependencies: Set<string>, dispose: Function } | null} */
+  configBag: null,
+
   contextDependencies: new Set(),
 
   /** @type {import('../../lib/content.js').ContentPath[]} */
@@ -140,37 +144,35 @@ let state = {
 
   loadConfig(configPath, content) {
     if (this.watcher && configPath) {
-      this.refreshConfigDependencies(configPath)
+      this.refreshConfigDependencies()
     }
 
-    let config = configPath ? require(configPath) : {}
+    let config = loadConfig(configPath)
+    let dependencies = getModuleDependencies(configPath)
+    this.configBag = {
+      config,
+      dependencies,
+      dispose() {
+        for (let file of dependencies) {
+          delete require.cache[require.resolve(file)]
+        }
+      },
+    }
 
     // @ts-ignore
-    config = resolveConfig(config, { content: { files: [] } })
+    this.configBag.config = resolveConfig(this.configBag.config, { content: { files: [] } })
 
     // Override content files if `--content` has been passed explicitly
     if (content?.length > 0) {
-      config.content.files = content
+      this.configBag.config.content.files = content
     }
 
-    return config
+    return this.configBag.config
   },
 
   refreshConfigDependencies(configPath) {
     env.DEBUG && console.time('Module dependencies')
-
-    for (let file of this.configDependencies) {
-      delete require.cache[require.resolve(file)]
-    }
-
-    if (configPath) {
-      let deps = getModuleDependencies(configPath).map(({ file }) => file)
-
-      for (let dependency of deps) {
-        this.configDependencies.add(dependency)
-      }
-    }
-
+    this.configBag?.dispose()
     env.DEBUG && console.timeEnd('Module dependencies')
   },
 
@@ -417,7 +419,7 @@ export async function createProcessor(args, cliConfigPath) {
         async rebuild(changes) {
           let needsNewContext = changes.some((change) => {
             return (
-              state.configDependencies.has(change.file) ||
+              state.configBag?.dependencies.has(change.file) ||
               state.contextDependencies.has(change.file)
             )
           })

package/src/oxide/cli/build/watching.ts

@@ -218,7 +218,7 @@ export function createWatcher(args, { state, rebuild }) {
 
     refreshWatchedFiles() {
       watcher.add(Array.from(state.contextDependencies))
-      watcher.add(Array.from(state.configDependencies))
+      watcher.add(Array.from(state.configBag.dependencies))
       watcher.add(state.contentPatterns.all)
     },
   }

package/src/oxide/cli/index.ts

@@ -8,19 +8,6 @@ import { build } from './build'
 import { help } from './help'
 import { init } from './init'
 
-function isESM() {
-  const pkgPath = path.resolve('./package.json')
-
-  try {
-    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
-    return pkg.type && pkg.type === 'module'
-  } catch (err) {
-    return false
-  }
-}
-
-let configs = isESM() ? { tailwind: 'tailwind.config.cjs' } : { tailwind: 'tailwind.config.js' }
-
 // ---
 
 function oneOf(...options) {
@@ -43,7 +30,12 @@ let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '--esm': { type: Boolean, description: `Initialize configuration file as ESM` },
+      '--ts': { type: Boolean, description: `Initialize configuration file as TypeScript` },
+      '--full': {
+        type: Boolean,
+        description: `Include the default values for all options in the generated configuration file`,
+      },
       '-f': '--full',
     },
   },
@@ -209,4 +201,4 @@ if (args['--help']) {
   process.exit(0)
 }
 
-run(args, configs)
+run(args)