tailwindcss 3.1.8 → 3.2.1

package/plugin.d.ts

@@ -2,9 +2,9 @@ import type { Config, PluginCreator } from './types/config'
 type Plugin = {
   withOptions<T>(
     plugin: (options: T) => PluginCreator,
-    config?: (options: T) => Config
-  ): { (options: T): { handler: PluginCreator; config?: Config }; __isOptionsFunction: true }
-  (plugin: PluginCreator, config?: Config): { handler: PluginCreator; config?: Config }
+    config?: (options: T) => Partial<Config>
+  ): { (options: T): { handler: PluginCreator; config?: Partial<Config> }; __isOptionsFunction: true }
+  (plugin: PluginCreator, config?: Partial<Config>): { handler: PluginCreator; config?: Partial<Config> }
 }
 
 declare const plugin: Plugin

package/scripts/release-channel.js

@@ -0,0 +1,18 @@
+// Given a version, figure out what the release channel is so that we can publish to the correct
+// channel on npm.
+//
+// E.g.:
+//
+//   1.2.3                  -> latest (default)
+//   0.0.0-insiders.ffaa88  -> insiders
+//   4.1.0-alpha.4          -> alpha
+
+let version =
+  process.argv[2] || process.env.npm_package_version || require('../package.json').version
+
+let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
+if (match) {
+  console.log(match[1])
+} else {
+  console.log('latest')
+}

package/scripts/release-notes.js

@@ -0,0 +1,21 @@
+// Given a version, figure out what the release notes are so that we can use this to pre-fill the
+// relase notes on a GitHub release for the current version.
+
+let path = require('path')
+let fs = require('fs')
+
+let version =
+  process.argv[2] || process.env.npm_package_version || require('../package.json').version
+
+let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
+let match = new RegExp(
+  `## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
+  'g'
+).exec(changelog)
+
+if (match) {
+  let [, , notes] = match
+  console.log(notes.trim())
+} else {
+  console.log(`Placeholder release notes for version: v${version}`)
+}

package/src/cli/build/deps.js

@@ -0,0 +1,56 @@
+// @ts-check
+
+import {
+  // @ts-ignore
+  lazyPostcss,
+
+  // @ts-ignore
+  lazyPostcssImport,
+
+  // @ts-ignore
+  lazyCssnano,
+
+  // @ts-ignore
+  lazyAutoprefixer,
+} from '../../../peers/index.js'
+
+/**
+ * @returns {import('postcss')}
+ */
+export function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
+export function loadPostcssImport() {
+  // Try to load a local `postcss-import` version first
+  try {
+    return require('postcss-import')
+  } catch {}
+
+  return lazyPostcssImport()
+}
+
+export function loadCssNano() {
+  let options = { preset: ['default', { cssDeclarationSorter: false }] }
+
+  // Try to load a local `cssnano` version first
+  try {
+    return require('cssnano')
+  } catch {}
+
+  return lazyCssnano()(options)
+}
+
+export function loadAutoprefixer() {
+  // Try to load a local `autoprefixer` version first
+  try {
+    return require('autoprefixer')
+  } catch {}
+
+  return lazyAutoprefixer()
+}

package/src/cli/build/index.js

@@ -0,0 +1,45 @@
+// @ts-check
+
+import fs from 'fs'
+import path from 'path'
+import { createProcessor } from './plugin.js'
+
+export async function build(args, configs) {
+  let input = args['--input']
+  let shouldWatch = args['--watch']
+
+  // TODO: Deprecate this in future versions
+  if (!input && args['_'][1]) {
+    console.error('[deprecation] Running tailwindcss without -i, please provide an input file.')
+    input = args['--input'] = args['_'][1]
+  }
+
+  if (input && input !== '-' && !fs.existsSync((input = path.resolve(input)))) {
+    console.error(`Specified input file ${args['--input']} does not exist.`)
+    process.exit(9)
+  }
+
+  if (args['--config'] && !fs.existsSync((args['--config'] = path.resolve(args['--config'])))) {
+    console.error(`Specified config file ${args['--config']} does not exist.`)
+    process.exit(9)
+  }
+
+  // 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 processor = await createProcessor(args, configPath)
+
+  if (shouldWatch) {
+    /* Abort the watcher if stdin is closed to avoid zombie processes */
+    process.stdin.on('end', () => process.exit(0))
+    process.stdin.resume()
+
+    await processor.watch()
+  } else {
+    await processor.build()
+  }
+}

package/src/cli/build/plugin.js

@@ -0,0 +1,417 @@
+// @ts-check
+
+import path from 'path'
+import fs from 'fs'
+import postcssrc from 'postcss-load-config'
+import { lilconfig } from 'lilconfig'
+import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
+import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API
+
+import tailwind from '../../processTailwindFeatures'
+import { loadAutoprefixer, loadCssNano, loadPostcss, loadPostcssImport } from './deps'
+import { formatNodes, drainStdin, outputFile } from './utils'
+import { env } from '../shared'
+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'
+
+/**
+ *
+ * @param {string} [customPostCssPath ]
+ * @returns
+ */
+async function loadPostCssPlugins(customPostCssPath) {
+  let config = customPostCssPath
+    ? await (async () => {
+        let file = path.resolve(customPostCssPath)
+
+        // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.1.0/src/index.js
+        // @ts-ignore
+        let { config = {} } = await lilconfig('postcss').load(file)
+        if (typeof config === 'function') {
+          config = config()
+        } else {
+          config = Object.assign({}, config)
+        }
+
+        if (!config.plugins) {
+          config.plugins = []
+        }
+
+        return {
+          file,
+          plugins: loadPlugins(config, file),
+          options: loadOptions(config, file),
+        }
+      })()
+    : await postcssrc()
+
+  let configPlugins = config.plugins
+
+  let configPluginTailwindIdx = configPlugins.findIndex((plugin) => {
+    if (typeof plugin === 'function' && plugin.name === 'tailwindcss') {
+      return true
+    }
+
+    if (typeof plugin === 'object' && plugin !== null && plugin.postcssPlugin === 'tailwindcss') {
+      return true
+    }
+
+    return false
+  })
+
+  let beforePlugins =
+    configPluginTailwindIdx === -1 ? [] : configPlugins.slice(0, configPluginTailwindIdx)
+  let afterPlugins =
+    configPluginTailwindIdx === -1
+      ? configPlugins
+      : configPlugins.slice(configPluginTailwindIdx + 1)
+
+  return [beforePlugins, afterPlugins, config.options]
+}
+
+function loadBuiltinPostcssPlugins() {
+  let postcss = loadPostcss()
+  let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+  return [
+    [
+      (root) => {
+        root.walkAtRules('import', (rule) => {
+          if (rule.params.slice(1).startsWith('tailwindcss/')) {
+            rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+            rule.remove()
+          }
+        })
+      },
+      loadPostcssImport(),
+      (root) => {
+        root.walkComments((rule) => {
+          if (rule.text.startsWith(IMPORT_COMMENT)) {
+            rule.after(
+              postcss.atRule({
+                name: 'import',
+                params: rule.text.replace(IMPORT_COMMENT, ''),
+              })
+            )
+            rule.remove()
+          }
+        })
+      },
+    ],
+    [],
+    {},
+  ]
+}
+
+let state = {
+  /** @type {any} */
+  context: null,
+
+  /** @type {ReturnType<typeof createWatcher> | null} */
+  watcher: null,
+
+  /** @type {{content: string, extension: string}[]} */
+  changedContent: [],
+
+  configDependencies: new Set(),
+  contextDependencies: new Set(),
+
+  /** @type {import('../../lib/content.js').ContentPath[]} */
+  contentPaths: [],
+
+  refreshContentPaths() {
+    this.contentPaths = parseCandidateFiles(this.context, this.context?.tailwindConfig)
+  },
+
+  get config() {
+    return this.context.tailwindConfig
+  },
+
+  get contentPatterns() {
+    return {
+      all: this.contentPaths.map((contentPath) => contentPath.pattern),
+      dynamic: this.contentPaths
+        .filter((contentPath) => contentPath.glob !== undefined)
+        .map((contentPath) => contentPath.pattern),
+    }
+  },
+
+  loadConfig(configPath, content) {
+    if (this.watcher && configPath) {
+      this.refreshConfigDependencies(configPath)
+    }
+
+    let config = configPath ? require(configPath) : {}
+
+    // @ts-ignore
+    config = resolveConfig(config, { content: { files: [] } })
+
+    // Override content files if `--content` has been passed explicitly
+    if (content?.length > 0) {
+      config.content.files = content
+    }
+
+    return 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)
+      }
+    }
+
+    env.DEBUG && console.timeEnd('Module dependencies')
+  },
+
+  readContentPaths() {
+    let content = []
+
+    // Resolve globs from the content config
+    // TODO: When we make the postcss plugin async-capable this can become async
+    let files = fastGlob.sync(this.contentPatterns.all)
+
+    for (let file of files) {
+      content.push({
+        content: fs.readFileSync(path.resolve(file), 'utf8'),
+        extension: path.extname(file).slice(1),
+      })
+    }
+
+    // Resolve raw content in the tailwind config
+    let rawContent = this.config.content.files.filter((file) => {
+      return file !== null && typeof file === 'object'
+    })
+
+    for (let { raw: content, extension = 'html' } of rawContent) {
+      content.push({ content, extension })
+    }
+
+    return content
+  },
+
+  getContext({ createContext, cliConfigPath, root, result, content }) {
+    if (this.context) {
+      this.context.changedContent = this.changedContent.splice(0)
+
+      return this.context
+    }
+
+    env.DEBUG && console.time('Searching for config')
+    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
+    env.DEBUG && console.timeEnd('Searching for config')
+
+    env.DEBUG && console.time('Loading config')
+    let config = this.loadConfig(configPath, content)
+    env.DEBUG && console.timeEnd('Loading config')
+
+    env.DEBUG && console.time('Creating context')
+    this.context = createContext(config, [])
+    Object.assign(this.context, {
+      userConfigPath: configPath,
+    })
+    env.DEBUG && console.timeEnd('Creating context')
+
+    env.DEBUG && console.time('Resolving content paths')
+    this.refreshContentPaths()
+    env.DEBUG && console.timeEnd('Resolving content paths')
+
+    if (this.watcher) {
+      env.DEBUG && console.time('Watch new files')
+      this.watcher.refreshWatchedFiles()
+      env.DEBUG && console.timeEnd('Watch new files')
+    }
+
+    env.DEBUG && console.time('Reading content files')
+    for (let file of this.readContentPaths()) {
+      this.context.changedContent.push(file)
+    }
+    env.DEBUG && console.timeEnd('Reading content files')
+
+    return this.context
+  },
+}
+
+export async function createProcessor(args, cliConfigPath) {
+  let postcss = loadPostcss()
+
+  let input = args['--input']
+  let output = args['--output']
+  let includePostCss = args['--postcss']
+  let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined
+
+  let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
+    ? await loadPostCssPlugins(customPostCssPath)
+    : loadBuiltinPostcssPlugins()
+
+  if (args['--purge']) {
+    log.warn('purge-flag-deprecated', [
+      'The `--purge` flag has been deprecated.',
+      'Please use `--content` instead.',
+    ])
+
+    if (!args['--content']) {
+      args['--content'] = args['--purge']
+    }
+  }
+
+  let content = args['--content']?.split(/(?<!{[^}]+),/) ?? []
+
+  let tailwindPlugin = () => {
+    return {
+      postcssPlugin: 'tailwindcss',
+      Once(root, { result }) {
+        env.DEBUG && console.time('Compiling CSS')
+        tailwind(({ createContext }) => {
+          console.error()
+          console.error('Rebuilding...')
+
+          return () => {
+            return state.getContext({
+              createContext,
+              cliConfigPath,
+              root,
+              result,
+              content,
+            })
+          }
+        })(root, result)
+        env.DEBUG && console.timeEnd('Compiling CSS')
+      },
+    }
+  }
+
+  tailwindPlugin.postcss = true
+
+  let plugins = [
+    ...beforePlugins,
+    tailwindPlugin,
+    !args['--minify'] && formatNodes,
+    ...afterPlugins,
+    !args['--no-autoprefixer'] && loadAutoprefixer(),
+    args['--minify'] && loadCssNano(),
+  ].filter(Boolean)
+
+  /** @type {import('postcss').Processor} */
+  // @ts-ignore
+  let processor = postcss(plugins)
+
+  async function readInput() {
+    // Piping in data, let's drain the stdin
+    if (input === '-') {
+      return drainStdin()
+    }
+
+    // Input file has been provided
+    if (input) {
+      return fs.promises.readFile(path.resolve(input), 'utf8')
+    }
+
+    // No input file provided, fallback to default atrules
+    return '@tailwind base; @tailwind components; @tailwind utilities'
+  }
+
+  async function build() {
+    let start = process.hrtime.bigint()
+
+    return readInput()
+      .then((css) => processor.process(css, { ...postcssOptions, from: input, to: output }))
+      .then((result) => {
+        if (!state.watcher) {
+          return result
+        }
+
+        env.DEBUG && console.time('Recording PostCSS dependencies')
+        for (let message of result.messages) {
+          if (message.type === 'dependency') {
+            state.contextDependencies.add(message.file)
+          }
+        }
+        env.DEBUG && console.timeEnd('Recording PostCSS dependencies')
+
+        // TODO: This needs to be in a different spot
+        env.DEBUG && console.time('Watch new files')
+        state.watcher.refreshWatchedFiles()
+        env.DEBUG && console.timeEnd('Watch new files')
+
+        return result
+      })
+      .then((result) => {
+        if (!output) {
+          process.stdout.write(result.css)
+          return
+        }
+
+        return Promise.all([
+          outputFile(output, result.css),
+          result.map && outputFile(output + '.map', result.map.toString()),
+        ])
+      })
+      .then(() => {
+        let end = process.hrtime.bigint()
+        console.error()
+        console.error('Done in', (end - start) / BigInt(1e6) + 'ms.')
+      })
+  }
+
+  /**
+   * @param {{file: string, content(): Promise<string>, extension: string}[]} changes
+   */
+  async function parseChanges(changes) {
+    return Promise.all(
+      changes.map(async (change) => ({
+        content: await change.content(),
+        extension: change.extension,
+      }))
+    )
+  }
+
+  if (input !== undefined && input !== '-') {
+    state.contextDependencies.add(path.resolve(input))
+  }
+
+  return {
+    build,
+    watch: async () => {
+      state.watcher = createWatcher(args, {
+        state,
+
+        /**
+         * @param {{file: string, content(): Promise<string>, extension: string}[]} changes
+         */
+        async rebuild(changes) {
+          let needsNewContext = changes.some((change) => {
+            return (
+              state.configDependencies.has(change.file) ||
+              state.contextDependencies.has(change.file)
+            )
+          })
+
+          if (needsNewContext) {
+            state.context = null
+          } else {
+            for (let change of await parseChanges(changes)) {
+              state.changedContent.push(change)
+            }
+          }
+
+          return build()
+        },
+      })
+
+      await build()
+    },
+  }
+}

package/src/cli/build/utils.js

@@ -0,0 +1,76 @@
+// @ts-check
+
+import fs from 'fs'
+import path from 'path'
+
+export function indentRecursive(node, indent = 0) {
+  node.each &&
+    node.each((child, i) => {
+      if (!child.raws.before || !child.raws.before.trim() || child.raws.before.includes('\n')) {
+        child.raws.before = `\n${node.type !== 'rule' && i > 0 ? '\n' : ''}${'  '.repeat(indent)}`
+      }
+      child.raws.after = `\n${'  '.repeat(indent)}`
+      indentRecursive(child, indent + 1)
+    })
+}
+
+export function formatNodes(root) {
+  indentRecursive(root)
+  if (root.first) {
+    root.first.raws.before = ''
+  }
+}
+
+/**
+ * When rapidly saving files atomically a couple of situations can happen:
+ * - The file is missing since the external program has deleted it by the time we've gotten around to reading it from the earlier save.
+ * - The file is being written to by the external program by the time we're going to read it and is thus treated as busy because a lock is held.
+ *
+ * To work around this we retry reading the file a handful of times with a delay between each attempt
+ *
+ * @param {string} path
+ * @param {number} tries
+ * @returns {Promise<string | undefined>}
+ * @throws {Error} If the file is still missing or busy after the specified number of tries
+ */
+export async function readFileWithRetries(path, tries = 5) {
+  for (let n = 0; n <= tries; n++) {
+    try {
+      return await fs.promises.readFile(path, 'utf8')
+    } catch (err) {
+      if (n !== tries) {
+        if (err.code === 'ENOENT' || err.code === 'EBUSY') {
+          await new Promise((resolve) => setTimeout(resolve, 10))
+
+          continue
+        }
+      }
+
+      throw err
+    }
+  }
+}
+
+export function drainStdin() {
+  return new Promise((resolve, reject) => {
+    let result = ''
+    process.stdin.on('data', (chunk) => {
+      result += chunk
+    })
+    process.stdin.on('end', () => resolve(result))
+    process.stdin.on('error', (err) => reject(err))
+  })
+}
+
+export async function outputFile(file, newContents) {
+  try {
+    let currentContents = await fs.promises.readFile(file, 'utf8')
+    if (currentContents === newContents) {
+      return // Skip writing the file
+    }
+  } catch {}
+
+  // Write the file
+  await fs.promises.mkdir(path.dirname(file), { recursive: true })
+  await fs.promises.writeFile(file, newContents, 'utf8')
+}