tailwindcss 3.0.15 → 3.0.19

package/src/cli.js

@@ -437,7 +437,6 @@ async function build() {
 
   function resolveConfig() {
     let config = configPath ? require(configPath) : {}
-    let resolvedConfig = resolveConfigInternal(config)
 
     if (args['--purge']) {
       log.warn('purge-flag-deprecated', [
@@ -450,10 +449,13 @@ async function build() {
     }
 
     if (args['--content']) {
-      resolvedConfig.content.files = args['--content'].split(/(?<!{[^}]+),/)
+      let files = args['--content'].split(/(?<!{[^}]+),/)
+      let resolvedConfig = resolveConfigInternal(config, { content: { files } })
+      resolvedConfig.content.files = files
+      return resolvedConfig
     }
 
-    return resolvedConfig
+    return resolveConfigInternal(config)
   }
 
   function extractFileGlobs(config) {

package/src/corePlugins.js

@@ -144,6 +144,7 @@ export let variantPlugins = {
       log.warn('darkmode-false', [
         'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
         'Change `darkMode` to `media` or remove it entirely.',
+        'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
     }
 

package/src/css/preflight.css

@@ -9,7 +9,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 ::before,

package/src/lib/expandTailwindAtRules.js

@@ -247,7 +247,8 @@ export default function expandTailwindAtRules(context) {
 
     if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
       log.warn('content-problems', [
-        'No utilities were generated there is likely a problem with the `content` key in the tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+        'No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.',
+        'https://tailwindcss.com/docs/content-configuration',
       ])
     }
 

package/src/lib/generateRules.js

@@ -25,33 +25,33 @@ function getClassNameFromSelector(selector) {
 // Example with dynamic classes:
 // ['grid-cols', '[[linename],1fr,auto]']
 // ['grid', 'cols-[[linename],1fr,auto]']
-function* candidatePermutations(candidate, lastIndex = Infinity) {
-  if (lastIndex < 0) {
-    return
-  }
+function* candidatePermutations(candidate) {
+  let lastIndex = Infinity
 
-  let dashIdx
+  while (lastIndex >= 0) {
+    let dashIdx
 
-  if (lastIndex === Infinity && candidate.endsWith(']')) {
-    let bracketIdx = candidate.indexOf('[')
+    if (lastIndex === Infinity && candidate.endsWith(']')) {
+      let bracketIdx = candidate.indexOf('[')
 
-    // If character before `[` isn't a dash or a slash, this isn't a dynamic class
-    // eg. string[]
-    dashIdx = ['-', '/'].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1
-  } else {
-    dashIdx = candidate.lastIndexOf('-', lastIndex)
-  }
+      // If character before `[` isn't a dash or a slash, this isn't a dynamic class
+      // eg. string[]
+      dashIdx = ['-', '/'].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1
+    } else {
+      dashIdx = candidate.lastIndexOf('-', lastIndex)
+    }
 
-  if (dashIdx < 0) {
-    return
-  }
+    if (dashIdx < 0) {
+      break
+    }
 
-  let prefix = candidate.slice(0, dashIdx)
-  let modifier = candidate.slice(dashIdx + 1)
+    let prefix = candidate.slice(0, dashIdx)
+    let modifier = candidate.slice(dashIdx + 1)
 
-  yield [prefix, modifier]
+    yield [prefix, modifier]
 
-  yield* candidatePermutations(candidate, dashIdx - 1)
+    lastIndex = dashIdx - 1
+  }
 }
 
 function applyPrefix(matches, context) {
@@ -63,9 +63,23 @@ function applyPrefix(matches, context) {
     let [meta] = match
     if (meta.options.respectPrefix) {
       let container = postcss.root({ nodes: [match[1].clone()] })
+      let classCandidate = match[1].raws.tailwind.classCandidate
+
       container.walkRules((r) => {
-        r.selector = prefixSelector(context.tailwindConfig.prefix, r.selector)
+        // If this is a negative utility with a dash *before* the prefix we
+        // have to ensure that the generated selector matches the candidate
+
+        // Not doing this will cause `-tw-top-1` to generate the class `.tw--top-1`
+        // The disconnect between candidate <-> class can cause @apply to hard crash.
+        let shouldPrependNegative = classCandidate.startsWith('-')
+
+        r.selector = prefixSelector(
+          context.tailwindConfig.prefix,
+          r.selector,
+          shouldPrependNegative
+        )
       })
+
       match[1] = container.nodes[0]
     }
   }
@@ -265,7 +279,34 @@ function isValidPropName(name) {
   return IS_VALID_PROPERTY_NAME.test(name)
 }
 
+/**
+ * @param {string} declaration
+ * @returns {boolean}
+ */
+function looksLikeUri(declaration) {
+  // Quick bailout for obvious non-urls
+  // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
+  if (!declaration.includes('://')) {
+    return false
+  }
+
+  try {
+    const url = new URL(declaration)
+    return url.scheme !== '' && url.host !== ''
+  } catch (err) {
+    // Definitely not a valid url
+    return false
+  }
+}
+
 function isParsableCssValue(property, value) {
+  // We don't want to to treat [https://example.com] as a custom property
+  // Even though, according to the CSS grammar, it's a totally valid CSS declaration
+  // So we short-circuit here by checking if the custom property looks like a url
+  if (looksLikeUri(`${property}:${value}`)) {
+    return false
+  }
+
   try {
     postcss.parse(`a{${property}:${value}}`).toResult()
     return true
@@ -344,6 +385,14 @@ function splitWithSeparator(input, separator) {
   return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
 }
 
+function* recordCandidates(matches, classCandidate) {
+  for (const match of matches) {
+    match[1].raws.tailwind = { classCandidate }
+
+    yield match
+  }
+}
+
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
@@ -455,7 +504,9 @@ function* resolveMatches(candidate, context) {
       continue
     }
 
-    matches = applyPrefix(matches.flat(), context)
+    matches = matches.flat()
+    matches = Array.from(recordCandidates(matches, classCandidate))
+    matches = applyPrefix(matches, context)
 
     if (important) {
       matches = applyImportant(matches, context)

package/src/lib/normalizeTailwindDirectives.js

@@ -49,6 +49,7 @@ export default function normalizeTailwindDirectives(root) {
         log.warn(`${atRule.name}-at-rule-deprecated`, [
           `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
           `Use \`@layer utilities\` or \`@layer components\` instead.`,
+          'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer',
         ])
       }
       layerDirectives.add(atRule)

package/src/lib/setupContextUtils.js

@@ -656,7 +656,7 @@ function registerPlugins(plugins, context) {
         log.warn('root-regex', [
           'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
           'Update your `safelist` configuration to eliminate this warning.',
-          // TODO: Add https://tw.wtf/regex-safelist
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
         continue
       }
@@ -666,17 +666,30 @@ function registerPlugins(plugins, context) {
 
     if (checks.length > 0) {
       let patternMatchingCount = new Map()
+      let prefixLength = context.tailwindConfig.prefix.length
 
       for (let util of classList) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              let classes = Object.keys(options?.values ?? {}).map((value) =>
-                formatClass(utilName, value)
-              )
+              let values = Object.keys(options?.values ?? {})
+              let classes = values.map((value) => formatClass(utilName, value))
 
               if (options?.supportsNegativeValues) {
+                // This is the normal negated version
+                // e.g. `-inset-1` or `-tw-inset-1`
                 classes = [...classes, ...classes.map((cls) => '-' + cls)]
+
+                // This is the negated version *after* the prefix
+                // e.g. `tw--inset-1`
+                // The prefix is already attached to util name
+                // So we add the negative after the prefix
+                classes = [
+                  ...classes,
+                  ...classes.map(
+                    (cls) => cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
+                  ),
+                ]
               }
 
               return classes
@@ -714,6 +727,7 @@ function registerPlugins(plugins, context) {
         log.warn([
           `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
           'Fix this pattern or remove it from your `safelist` configuration.',
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
       }
     }

package/src/postcss-plugins/nesting/README.md

@@ -0,0 +1,42 @@
+# tailwindcss/nesting
+
+This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`.
+
+Add it to your PostCSS configuration, somewhere before Tailwind itself:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins#css-in-js-syntax).
+
+If you'd rather use [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside:
+
+```shell
+npm install postcss-nesting
+```
+
+Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting')(require('postcss-nesting')),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself.
+

package/src/postcss-plugins/nesting/index.js

@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)

package/{nesting → src/postcss-plugins/nesting}/plugin.js

@@ -1,7 +1,7 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
 
-module.exports = function nesting(opts = postcssNested) {
+export function nesting(opts = postcssNested) {
   return (root, result) => {
     root.walkAtRules('screen', (rule) => {
       rule.name = 'media'
@@ -16,7 +16,7 @@ module.exports = function nesting(opts = postcssNested) {
     let plugin = (() => {
       if (
         typeof opts === 'function' ||
-        (typeof opts === 'object' && opts.hasOwnProperty('postcssPlugin'))
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
       ) {
         return opts
       }

package/src/processTailwindFeatures.js

@@ -16,6 +16,9 @@ export default function processTailwindFeatures(setupContext) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     detectNesting()(root, result)
+
+    // Partition apply rules that are found in the css
+    // itself.
     partitionApplyAtRules()(root, result)
 
     let context = setupContext({
@@ -42,6 +45,9 @@ export default function processTailwindFeatures(setupContext) {
     issueFlagNotices(context.tailwindConfig)
 
     expandTailwindAtRules(context)(root, result)
+    // Partition apply rules that are generated by
+    // addComponents, addUtilities and so on.
+    partitionApplyAtRules()(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)

package/src/util/normalizeConfig.js

@@ -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 {
@@ -250,8 +250,8 @@ export function normalizeConfig(config) {
   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 config is invalid.`,
-        `    Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        `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
@@ -260,7 +260,9 @@ export function normalizeConfig(config) {
 
   if (config.content.files.length === 0) {
     log.warn('content-problems', [
-      'The `content` key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+      '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',
     ])
   }
 

package/src/util/parseBoxShadowValue.js

@@ -1,7 +1,7 @@
 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
 
 export function parseBoxShadowValue(input) {
   let shadows = input.split(COMMA)

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)
 }