tailwindcss 3.0.22 → 3.1.0

package/plugin.d.ts

@@ -0,0 +1,11 @@
+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 }
+}
+
+declare const plugin: Plugin
+export = plugin

package/scripts/generate-types.js

@@ -0,0 +1,52 @@
+import prettier from 'prettier'
+import { corePlugins } from '../src/corePlugins'
+import colors from '../src/public/colors'
+import fs from 'fs'
+import path from 'path'
+
+fs.writeFileSync(
+  path.join(process.cwd(), 'types', 'generated', 'corePluginList.d.ts'),
+  `export type CorePluginList = ${Object.keys(corePlugins)
+    .map((p) => `'${p}'`)
+    .join(' | ')}`
+)
+
+let colorsWithoutDeprecatedColors = Object.fromEntries(
+  Object.entries(Object.getOwnPropertyDescriptors(colors))
+    .filter(([_, { value }]) => {
+      return typeof value !== 'undefined'
+    })
+    .map(([name, definition]) => [name, definition.value])
+)
+
+let deprecatedColors = Object.entries(Object.getOwnPropertyDescriptors(colors))
+  .filter(([_, { value }]) => {
+    return typeof value === 'undefined'
+  })
+  .map(([name, definition]) => {
+    let warn = console.warn
+    let messages = []
+    console.warn = (...args) => messages.push(args.pop())
+    definition.get()
+    console.warn = warn
+    let message = messages.join(' ').trim()
+    let newColor = message.match(/renamed to `(.*)`/)[1]
+    return `/** @deprecated ${message} */${name}: DefaultColors['${newColor}'],`
+  })
+  .join('\n')
+
+fs.writeFileSync(
+  path.join(process.cwd(), 'types', 'generated', 'colors.d.ts'),
+  prettier.format(
+    `export interface DefaultColors { ${JSON.stringify(colorsWithoutDeprecatedColors).slice(
+      1,
+      -1
+    )}\n${deprecatedColors}\n}`,
+    {
+      semi: false,
+      singleQuote: true,
+      printWidth: 100,
+      parser: 'typescript',
+    }
+  )
+)

package/src/cli-peer-dependencies.js

@@ -1,4 +1,10 @@
-export let postcss = require('postcss')
+export function lazyPostcss() {
+  return require('postcss')
+}
+
+export function lazyPostcssImport() {
+  return require('postcss-import')
+}
 
 export function lazyAutoprefixer() {
   return require('autoprefixer')

package/src/cli.js

@@ -1,14 +1,15 @@
 #!/usr/bin/env node
 
-import { postcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
+import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
 
 import chokidar from 'chokidar'
 import path from 'path'
 import arg from 'arg'
 import fs from 'fs'
 import postcssrc from 'postcss-load-config'
-import { cosmiconfig } from 'cosmiconfig'
+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 resolveConfigInternal from '../resolveConfig'
 import fastGlob from 'fast-glob'
@@ -16,11 +17,33 @@ import getModuleDependencies from './lib/getModuleDependencies'
 import log from './util/log'
 import packageJson from '../package.json'
 import normalizePath from 'normalize-path'
+import { validateConfig } from './util/validateConfig.js'
 
 let env = {
   DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
 }
 
+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 indentRecursive(node, indent = 0) {
@@ -145,12 +168,21 @@ function oneOf(...options) {
   )
 }
 
+function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
 let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: 'Initialize a full `tailwind.config.js` file' },
-      '--postcss': { type: Boolean, description: 'Initialize a `postcss.config.js` file' },
+      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -161,6 +193,10 @@ let commands = {
       '--input': { type: String, description: 'Input file' },
       '--output': { type: String, description: 'Output file' },
       '--watch': { type: Boolean, description: 'Watch for changes and rebuild as needed' },
+      '--poll': {
+        type: Boolean,
+        description: 'Use polling instead of filesystem events when watching',
+      },
       '--content': {
         type: String,
         description: 'Content paths to use for removing unused classes',
@@ -187,6 +223,7 @@ let commands = {
       '-o': '--output',
       '-m': '--minify',
       '-w': '--watch',
+      '-p': '--poll',
     },
   },
 }
@@ -320,7 +357,7 @@ run()
 function init() {
   let messages = []
 
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? './tailwind.config.js')
+  let tailwindConfigLocation = path.resolve(args['_'][1] ?? `./${configs.tailwind}`)
   if (fs.existsSync(tailwindConfigLocation)) {
     messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
   } else {
@@ -340,7 +377,7 @@ function init() {
   }
 
   if (args['--postcss']) {
-    let postcssConfigLocation = path.resolve('./postcss.config.js')
+    let postcssConfigLocation = path.resolve(`./${configs.postcss}`)
     if (fs.existsSync(postcssConfigLocation)) {
       messages.push(`${path.basename(postcssConfigLocation)} already exists.`)
     } else {
@@ -367,8 +404,14 @@ async function build() {
   let input = args['--input']
   let output = args['--output']
   let shouldWatch = args['--watch']
+  let shouldPoll = args['--poll']
+  let shouldCoalesceWriteEvents = shouldPoll || process.platform === 'win32'
   let includePostCss = args['--postcss']
 
+  // Polling interval in milliseconds
+  // Used only when polling or coalescing add/change events on Windows
+  let pollInterval = 10
+
   // TODO: Deprecate this in future versions
   if (!input && args['_'][1]) {
     console.error('[deprecation] Running tailwindcss without -i, please provide an input file.')
@@ -388,17 +431,17 @@ async function build() {
   let configPath = args['--config']
     ? args['--config']
     : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve('./tailwind.config.js')
+        path.resolve(`./${configs.tailwind}`)
       )
 
   async function loadPostCssPlugins() {
     let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined
-    let { plugins: configPlugins } = customPostCssPath
+    let config = customPostCssPath
       ? await (async () => {
           let file = path.resolve(customPostCssPath)
 
-          // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
-          let { config = {} } = await cosmiconfig('postcss').load(file)
+          // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.1.0/src/index.js
+          let { config = {} } = await lilconfig('postcss').load(file)
           if (typeof config === 'function') {
             config = config()
           } else {
@@ -409,10 +452,16 @@ async function build() {
             config.plugins = []
           }
 
-          return { plugins: loadPlugins(config, file) }
+          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
@@ -432,7 +481,7 @@ async function build() {
         ? configPlugins
         : configPlugins.slice(configPluginTailwindIdx + 1)
 
-    return [beforePlugins, afterPlugins]
+    return [beforePlugins, afterPlugins, config.options]
   }
 
   function resolveConfig() {
@@ -452,10 +501,13 @@ async function build() {
       let files = args['--content'].split(/(?<!{[^}]+),/)
       let resolvedConfig = resolveConfigInternal(config, { content: { files } })
       resolvedConfig.content.files = files
+      resolvedConfig = validateConfig(resolvedConfig)
       return resolvedConfig
     }
 
-    return resolveConfigInternal(config)
+    let resolvedConfig = resolveConfigInternal(config)
+    resolvedConfig = validateConfig(resolvedConfig)
+    return resolvedConfig
   }
 
   function extractFileGlobs(config) {
@@ -516,7 +568,44 @@ async function build() {
 
     tailwindPlugin.postcss = true
 
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+    let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+
+    let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
+      ? await loadPostCssPlugins()
+      : [
+          [
+            (root) => {
+              root.walkAtRules('import', (rule) => {
+                if (rule.params.slice(1).startsWith('tailwindcss/')) {
+                  rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+                  rule.remove()
+                }
+              })
+            },
+            (() => {
+              try {
+                return require('postcss-import')
+              } catch {}
+
+              return lazyPostcssImport()
+            })(),
+            (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 plugins = [
       ...beforePlugins,
@@ -545,13 +634,14 @@ async function build() {
         })(),
     ].filter(Boolean)
 
+    let postcss = loadPostcss()
     let processor = postcss(plugins)
 
     function processCSS(css) {
       let start = process.hrtime.bigint()
       return Promise.resolve()
         .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null))
-        .then(() => processor.process(css, { from: input, to: output }))
+        .then(() => processor.process(css, { ...postcssOptions, from: input, to: output }))
         .then((result) => {
           if (!output) {
             return process.stdout.write(result.css)
@@ -678,6 +768,7 @@ async function build() {
       let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__')
       let copy = plugins.slice()
       copy.splice(tailwindPluginIdx, 1, tailwindPlugin)
+      let postcss = loadPostcss()
       let processor = postcss(copy)
 
       function processCSS(css) {
@@ -746,14 +837,15 @@ async function build() {
     }
 
     watcher = chokidar.watch([...contextDependencies, ...extractFileGlobs(config)], {
+      usePolling: shouldPoll,
+      interval: shouldPoll ? pollInterval : undefined,
       ignoreInitial: true,
-      awaitWriteFinish:
-        process.platform === 'win32'
-          ? {
-              stabilityThreshold: 50,
-              pollInterval: 10,
-            }
-          : false,
+      awaitWriteFinish: shouldCoalesceWriteEvents
+        ? {
+            stabilityThreshold: 50,
+            pollInterval: pollInterval,
+          }
+        : false,
     })
 
     let chain = Promise.resolve()
@@ -806,8 +898,10 @@ async function build() {
 
   if (shouldWatch) {
     /* Abort the watcher if stdin is closed to avoid zombie processes */
-    process.stdin.on('end', () => process.exit(0))
-    process.stdin.resume()
+    if (process.stdin.isTTY) {
+      process.stdin.on('end', () => process.exit(0))
+      process.stdin.resume()
+    }
     startWatcher()
   } else {
     buildOnce()

package/src/corePluginList.js

@@ -1 +1 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]