tailwindcss 0.0.0-insiders.e2d5f21 → 0.0.0-insiders.e302ef1

package/src/util/dataTypes.js

@@ -80,11 +80,13 @@ let lengthUnits = [
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
-  return (
-    value === '0' ||
-    new RegExp(`${lengthUnitsPattern}$`).test(value) ||
-    cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(value))
-  )
+  return value.split(UNDERSCORE).every((part) => {
+    return (
+      part === '0' ||
+      new RegExp(`${lengthUnitsPattern}$`).test(part) ||
+      cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part))
+    )
+  })
 }
 
 let lineWidths = new Set(['thin', 'medium', 'thick'])

package/src/util/defaults.js

@@ -5,6 +5,12 @@ export function defaults(target, ...sources) {
         target[k] = source[k]
       }
     }
+
+    for (let k of Object.getOwnPropertySymbols(source)) {
+      if (!target?.hasOwnProperty?.(k)) {
+        target[k] = source[k]
+      }
+    }
   }
 
   return target

package/src/util/log.js

@@ -1,25 +1,29 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 
 let alreadyShown = new Set()
 
-function log(chalk, messages, key) {
+function log(type, messages, key) {
   if (process.env.JEST_WORKER_ID !== undefined) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)
 
   console.warn('')
-  messages.forEach((message) => console.warn(chalk, '-', message))
+  messages.forEach((message) => console.warn(type, '-', message))
+}
+
+export function dim(input) {
+  return colors.dim(input)
 }
 
 export default {
   info(key, messages) {
-    log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   warn(key, messages) {
-    log(chalk.bold.yellow('warn'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.yellow('warn')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   risk(key, messages) {
-    log(chalk.bold.magenta('risk'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.magenta('risk')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
 }

package/src/util/normalizeConfig.js

@@ -1,4 +1,4 @@
-import log from './log'
+import log, { dim } from './log'
 
 export function normalizeConfig(config) {
   // Quick structure validation
@@ -124,7 +124,7 @@ export function normalizeConfig(config) {
     log.warn('purge-deprecation', [
       'The `purge`/`content` options have changed in Tailwind CSS v3.0.',
       'Update your configuration file to eliminate this warning.',
-      // TODO: Add https://tw.wtf/purge-deprecation
+      'https://tailwindcss.com/docs/upgrade-guide#configure-content-sources',
     ])
   }
 
@@ -145,7 +145,7 @@ export function normalizeConfig(config) {
     log.warn('prefix-function', [
       'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
       'Update `prefix` in your configuration to be a string to eliminate this warning.',
-      // TODO: Add https://tw.wtf/prefix-function
+      'https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function',
     ])
     config.prefix = ''
   } else {
@@ -245,5 +245,26 @@ export function normalizeConfig(config) {
     })(),
   }
 
+  // Validate globs to prevent bogus globs.
+  // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
+  for (let file of config.content.files) {
+    if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
+      log.warn('invalid-glob-braces', [
+        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
+        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        // TODO: Add https://tw.wtf/invalid-glob-braces
+      ])
+      break
+    }
+  }
+
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` option in your Tailwind CSS configuration is missing or empty.',
+      'Configure your content sources or your generated CSS will be missing styles.',
+      'https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
   return config
 }

package/src/util/normalizeScreens.js

@@ -7,14 +7,17 @@
  *   - { sm: '100px', md: '200px' } // Object with string values
  *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
  *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
- *   - [['sm', '100px'], ['md', '200px']] // Tuple object
  *
  * Output(s):
  *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
  */
-export function normalizeScreens(screens) {
+export function normalizeScreens(screens, root = true) {
   if (Array.isArray(screens)) {
     return screens.map((screen) => {
+      if (root && Array.isArray(screen)) {
+        throw new Error('The tuple syntax is not supported for `screens`.')
+      }
+
       if (typeof screen === 'string') {
         return { name: screen.toString(), values: [{ min: screen, max: undefined }] }
       }
@@ -34,7 +37,7 @@ export function normalizeScreens(screens) {
     })
   }
 
-  return normalizeScreens(Object.entries(screens ?? {}))
+  return normalizeScreens(Object.entries(screens ?? {}), false)
 }
 
 function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {

package/src/util/parseBoxShadowValue.js

@@ -1,10 +1,58 @@
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+)(.*?)$/g
+let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
+
+let SPECIALS = /[(),]/g
+
+/**
+ * This splits a string on top-level commas.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren vs comma
+ * placement. Before we'd only exclude commas from the inner-most nested
+ * set of parens rather than any commas that were not contained in parens
+ * at all which is the intended behavior here.
+ *
+ * Expected behavior:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ */
+function* splitByTopLevelCommas(input) {
+  SPECIALS.lastIndex = -1
+
+  let depth = 0
+  let lastIndex = 0
+  let found = false
+
+  // Find all parens & commas
+  // And only split on commas if they're top-level
+  for (let match of input.matchAll(SPECIALS)) {
+    if (match[0] === '(') depth++
+    if (match[0] === ')') depth--
+    if (match[0] === ',' && depth === 0) {
+      found = true
+
+      yield input.substring(lastIndex, match.index)
+      lastIndex = match.index + match[0].length
+    }
+  }
+
+  // Provide the last segment of the string if available
+  // Otherwise the whole string since no commas were found
+  // This mirrors the behavior of string.split()
+  if (found) {
+    yield input.substring(lastIndex)
+  } else {
+    yield input
+  }
+}
 
 export function parseBoxShadowValue(input) {
-  let shadows = input.split(COMMA)
+  let shadows = Array.from(splitByTopLevelCommas(input))
   return shadows.map((shadow) => {
     let value = shadow.trim()
     let result = { raw: value }

package/src/util/pluginUtils.js

@@ -185,7 +185,7 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
   // Find first matching type
   for (let type of [].concat(types)) {
     let result = typeMap[type](modifier, options, { tailwindConfig })
-    if (result) return [result, type]
+    if (result !== undefined) return [result, type]
   }
 
   return []

package/src/util/prefixSelector.js

@@ -1,12 +1,14 @@
 import parser from 'postcss-selector-parser'
-import { tap } from './tap'
 
-export default function (prefix, selector) {
+export default function (prefix, selector, prependNegative = false) {
   return parser((selectors) => {
     selectors.walkClasses((classSelector) => {
-      tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${prefix}${baseClass}`
-      })
+      let baseClass = classSelector.value
+      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+      classSelector.value = shouldPlaceNegativeBeforePrefix
+        ? `-${prefix}${baseClass.slice(1)}`
+        : `${prefix}${baseClass}`
     })
   }).processSync(selector)
 }

package/src/util/resolveConfig.js

@@ -6,6 +6,8 @@ import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
 import { normalizeConfig } from './normalizeConfig'
+import isPlainObject from './isPlainObject'
+import { cloneDeep } from './cloneDeep'
 
 function isFunction(input) {
   return typeof input === 'function'
@@ -64,6 +66,36 @@ const configUtils = {
         {}
       )
   },
+  rgb(property) {
+    if (!property.startsWith('--')) {
+      throw new Error(
+        'The rgb() helper requires a custom property name to be passed as the first argument.'
+      )
+    }
+
+    return ({ opacityValue }) => {
+      if (opacityValue === undefined || opacityValue === 1) {
+        return `rgb(var(${property}) / 1.0)`
+      }
+
+      return `rgb(var(${property}) / ${opacityValue})`
+    }
+  },
+  hsl(property) {
+    if (!property.startsWith('--')) {
+      throw new Error(
+        'The hsl() helper requires a custom property name to be passed as the first argument.'
+      )
+    }
+
+    return ({ opacityValue }) => {
+      if (opacityValue === undefined || opacityValue === 1) {
+        return `hsl(var(${property}) / 1)`
+      }
+
+      return `hsl(var(${property}) / ${opacityValue})`
+    }
+  },
 }
 
 function value(valueToResolve, ...args) {
@@ -144,7 +176,15 @@ function resolveFunctionKeys(object) {
       val = isFunction(val) ? val(resolvePath, configUtils) : val
     }
 
-    return val === undefined ? defaultValue : val
+    if (val === undefined) {
+      return defaultValue
+    }
+
+    if (isPlainObject(val)) {
+      return cloneDeep(val)
+    }
+
+    return val
   }
 
   resolvePath.theme = resolvePath

package/src/util/toPath.js

@@ -1,4 +1,26 @@
+/**
+ * Parse a path string into an array of path segments.
+ *
+ * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
+ *
+ * Example:
+ * a -> ['a]
+ * a.b.c -> ['a', 'b', 'c']
+ * a[b].c -> ['a', 'b', 'c']
+ * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
+ * a[b][c][d] -> ['a', 'b', 'c', 'd']
+ *
+ * @param {string|string[]} path
+ **/
 export function toPath(path) {
   if (Array.isArray(path)) return path
-  return path.split(/[\.\]\[]+/g)
+
+  let openBrackets = path.split('[').length - 1
+  let closedBrackets = path.split(']').length - 1
+
+  if (openBrackets !== closedBrackets) {
+    throw new Error(`Path is invalid. Has unbalanced brackets: ${path}`)
+  }
+
+  return path.split(/\.(?![^\[]*\])|[\[\]]/g).filter(Boolean)
 }

package/stubs/defaultConfig.stub.js

@@ -854,8 +854,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'background-color, border-color, color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',

package/lib/lib/setupWatchingContext.js

@@ -1,288 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = setupWatchingContext;
-var _fs = _interopRequireDefault(require("fs"));
-var _path = _interopRequireDefault(require("path"));
-var _tmp = _interopRequireDefault(require("tmp"));
-var _chokidar = _interopRequireDefault(require("chokidar"));
-var _fastGlob = _interopRequireDefault(require("fast-glob"));
-var _quickLru = _interopRequireDefault(require("quick-lru"));
-var _normalizePath = _interopRequireDefault(require("normalize-path"));
-var _hashConfig = _interopRequireDefault(require("../util/hashConfig"));
-var _log = _interopRequireDefault(require("../util/log"));
-var _getModuleDependencies = _interopRequireDefault(require("../lib/getModuleDependencies"));
-var _resolveConfig = _interopRequireDefault(require("../public/resolve-config"));
-var _resolveConfigPath = _interopRequireDefault(require("../util/resolveConfigPath"));
-var _setupContextUtils = require("./setupContextUtils");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-// This is used to trigger rebuilds. Just updating the timestamp
-// is significantly faster than actually writing to the file (10x).
-function touch(filename) {
-    let time = new Date();
-    try {
-        _fs.default.utimesSync(filename, time, time);
-    } catch (err) {
-        _fs.default.closeSync(_fs.default.openSync(filename, 'w'));
-    }
-}
-let watchers = new WeakMap();
-function getWatcher(context) {
-    if (watchers.has(context)) {
-        return watchers.get(context);
-    }
-    return null;
-}
-function setWatcher(context, watcher) {
-    return watchers.set(context, watcher);
-}
-let touchFiles = new WeakMap();
-function getTouchFile(context) {
-    if (touchFiles.has(context)) {
-        return touchFiles.get(context);
-    }
-    return null;
-}
-function setTouchFile(context, touchFile) {
-    return touchFiles.set(context, touchFile);
-}
-let configPaths = new WeakMap();
-function getConfigPath(context, configOrPath) {
-    if (!configPaths.has(context)) {
-        configPaths.set(context, (0, _resolveConfigPath).default(configOrPath));
-    }
-    return configPaths.get(context);
-}
-function rebootWatcher(context, configPath, configDependencies, candidateFiles) {
-    let touchFile = getTouchFile(context);
-    if (touchFile === null) {
-        touchFile = _tmp.default.fileSync().name;
-        setTouchFile(context, touchFile);
-        touch(touchFile);
-    }
-    let watcher = getWatcher(context);
-    Promise.resolve(watcher ? watcher.close() : null).then(()=>{
-        _log.default.info([
-            'Tailwind CSS is watching for changes...',
-            'https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds', 
-        ]);
-        watcher = _chokidar.default.watch([
-            ...candidateFiles,
-            ...configDependencies
-        ], {
-            ignoreInitial: true,
-            awaitWriteFinish: process.platform === 'win32' ? {
-                stabilityThreshold: 50,
-                pollInterval: 10
-            } : false
-        });
-        setWatcher(context, watcher);
-        watcher.on('add', (file)=>{
-            let changedFile = _path.default.resolve('.', file);
-            let content = _fs.default.readFileSync(changedFile, 'utf8');
-            let extension = _path.default.extname(changedFile).slice(1);
-            context.changedContent.push({
-                content,
-                extension
-            });
-            touch(touchFile);
-        });
-        watcher.on('change', (file)=>{
-            // If it was a config dependency, touch the config file to trigger a new context.
-            // This is not really that clean of a solution but it's the fastest, because we
-            // can do a very quick check on each build to see if the config has changed instead
-            // of having to get all of the module dependencies and check every timestamp each
-            // time.
-            if (configDependencies.has(file)) {
-                for (let dependency of configDependencies){
-                    delete require.cache[require.resolve(dependency)];
-                }
-                touch(configPath);
-            } else {
-                let changedFile = _path.default.resolve('.', file);
-                let content = _fs.default.readFileSync(changedFile, 'utf8');
-                let extension = _path.default.extname(changedFile).slice(1);
-                context.changedContent.push({
-                    content,
-                    extension
-                });
-                touch(touchFile);
-            }
-        });
-        watcher.on('unlink', (file)=>{
-            // Touch the config file if any of the dependencies are deleted.
-            if (configDependencies.has(file)) {
-                for (let dependency of configDependencies){
-                    delete require.cache[require.resolve(dependency)];
-                }
-                touch(configPath);
-            }
-        });
-    });
-}
-let configPathCache = new _quickLru.default({
-    maxSize: 100
-});
-let configDependenciesCache = new WeakMap();
-function getConfigDependencies(context) {
-    if (!configDependenciesCache.has(context)) {
-        configDependenciesCache.set(context, new Set());
-    }
-    return configDependenciesCache.get(context);
-}
-let candidateFilesCache = new WeakMap();
-function getCandidateFiles(context, tailwindConfig) {
-    if (candidateFilesCache.has(context)) {
-        return candidateFilesCache.get(context);
-    }
-    let candidateFiles = tailwindConfig.content.files.filter((item)=>typeof item === 'string'
-    ).map((contentPath)=>(0, _normalizePath).default(contentPath)
-    );
-    return candidateFilesCache.set(context, candidateFiles).get(context);
-}
-// Get the config object based on a path
-function getTailwindConfig(configOrPath) {
-    let userConfigPath = (0, _resolveConfigPath).default(configOrPath);
-    if (userConfigPath !== null) {
-        let [prevConfig, prevModified = -Infinity, prevConfigHash] = configPathCache.get(userConfigPath) || [];
-        let modified = _fs.default.statSync(userConfigPath).mtimeMs;
-        // It hasn't changed (based on timestamp)
-        if (modified <= prevModified) {
-            return [
-                prevConfig,
-                userConfigPath,
-                prevConfigHash,
-                [
-                    userConfigPath
-                ]
-            ];
-        }
-        // It has changed (based on timestamp), or first run
-        delete require.cache[userConfigPath];
-        let newConfig = (0, _resolveConfig).default(require(userConfigPath));
-        let newHash = (0, _hashConfig).default(newConfig);
-        configPathCache.set(userConfigPath, [
-            newConfig,
-            modified,
-            newHash
-        ]);
-        return [
-            newConfig,
-            userConfigPath,
-            newHash,
-            [
-                userConfigPath
-            ]
-        ];
-    }
-    // It's a plain object, not a path
-    let newConfig = (0, _resolveConfig).default(configOrPath.config === undefined ? configOrPath : configOrPath.config);
-    return [
-        newConfig,
-        null,
-        (0, _hashConfig).default(newConfig),
-        []
-    ];
-}
-function resolvedChangedContent(context, candidateFiles) {
-    let changedContent = context.tailwindConfig.content.files.filter((item)=>typeof item.raw === 'string'
-    ).map(({ raw , extension ='html'  })=>({
-            content: raw,
-            extension
-        })
-    );
-    for (let changedFile of resolveChangedFiles(context, candidateFiles)){
-        let content = _fs.default.readFileSync(changedFile, 'utf8');
-        let extension = _path.default.extname(changedFile).slice(1);
-        changedContent.push({
-            content,
-            extension
-        });
-    }
-    return changedContent;
-}
-let scannedContentCache = new WeakMap();
-function resolveChangedFiles(context, candidateFiles) {
-    let changedFiles = new Set();
-    // If we're not set up and watching files ourselves, we need to do
-    // the work of grabbing all of the template files for candidate
-    // detection.
-    if (!scannedContentCache.has(context)) {
-        let files = _fastGlob.default.sync(candidateFiles);
-        for (let file of files){
-            changedFiles.add(file);
-        }
-        scannedContentCache.set(context, true);
-    }
-    return changedFiles;
-}
-function setupWatchingContext(configOrPath) {
-    return ({ tailwindDirectives , registerDependency  })=>{
-        return (root, result)=>{
-            let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath);
-            let contextDependencies = new Set(configDependencies);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
-            // We may want to think about `@layer` being part of this trigger too, but it's tough
-            // because it's impossible for a layer in one file to end up in the actual @tailwind rule
-            // in another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0) {
-                // Add current css file as a context dependencies.
-                contextDependencies.add(result.opts.from);
-                // Add all css @import dependencies as context dependencies.
-                for (let message of result.messages){
-                    if (message.type === 'dependency') {
-                        contextDependencies.add(message.file);
-                    }
-                }
-            }
-            let [context, isNewContext] = (0, _setupContextUtils).getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies);
-            let candidateFiles = getCandidateFiles(context, tailwindConfig);
-            let contextConfigDependencies = getConfigDependencies(context);
-            for (let file of configDependencies){
-                registerDependency({
-                    type: 'dependency',
-                    file
-                });
-            }
-            context.disposables.push((oldContext)=>{
-                let watcher = getWatcher(oldContext);
-                if (watcher !== null) {
-                    watcher.close();
-                }
-            });
-            let configPath = getConfigPath(context, configOrPath);
-            if (configPath !== null) {
-                for (let dependency of (0, _getModuleDependencies).default(configPath)){
-                    if (dependency.file === configPath) {
-                        continue;
-                    }
-                    contextConfigDependencies.add(dependency.file);
-                }
-            }
-            if (isNewContext) {
-                rebootWatcher(context, configPath, contextConfigDependencies, candidateFiles);
-            }
-            // Register our temp file as a dependency — we write to this file
-            // to trigger rebuilds.
-            let touchFile = getTouchFile(context);
-            if (touchFile) {
-                registerDependency({
-                    type: 'dependency',
-                    file: touchFile
-                });
-            }
-            if (tailwindDirectives.size > 0) {
-                for (let changedContent of resolvedChangedContent(context, candidateFiles)){
-                    context.changedContent.push(changedContent);
-                }
-            }
-            return context;
-        };
-    };
-}

package/nesting/plugin.js

@@ -1,41 +0,0 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
-
-module.exports = function nesting(opts = postcssNested) {
-  return (root, result) => {
-    root.walkAtRules('screen', (rule) => {
-      rule.name = 'media'
-      rule.params = `screen(${rule.params})`
-    })
-
-    root.walkAtRules('apply', (rule) => {
-      rule.before(postcss.decl({ prop: '__apply', value: rule.params, source: rule.source }))
-      rule.remove()
-    })
-
-    let plugin = (() => {
-      if (typeof opts === 'function') {
-        return opts
-      }
-
-      if (typeof opts === 'string') {
-        return require(opts)
-      }
-
-      if (Object.keys(opts).length <= 0) {
-        return postcssNested
-      }
-
-      throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
-    })()
-
-    postcss([plugin]).process(root, result.opts).sync()
-
-    root.walkDecls('__apply', (decl) => {
-      decl.before(postcss.atRule({ name: 'apply', params: decl.value, source: decl.source }))
-      decl.remove()
-    })
-
-    return root
-  }
-}