tailwindcss 3.0.22 → 3.1.0

package/src/corePlugins.js

@@ -3,6 +3,7 @@ import * as path from 'path'
 import postcss from 'postcss'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
+import escapeClassName from './util/escapeClassName'
 import parseAnimationValue from './util/parseAnimationValue'
 import flattenColorPalette from './util/flattenColorPalette'
 import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
@@ -13,6 +14,7 @@ import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
 import { normalizeScreens } from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { flagEnabled } from './featureFlags'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -26,6 +28,8 @@ export let variantPlugins = {
 
     addVariant('placeholder', '&::placeholder')
 
+    addVariant('backdrop', '&::backdrop')
+
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
         let foundContent = false
@@ -57,22 +61,43 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant }) => {
+  pseudoClassVariants: ({ addVariant, config }) => {
     let pseudoVariants = [
       // Positional
-      ['first', ':first-child'],
-      ['last', ':last-child'],
-      ['only', ':only-child'],
-      ['odd', ':nth-child(odd)'],
-      ['even', ':nth-child(even)'],
+      ['first', '&:first-child'],
+      ['last', '&:last-child'],
+      ['only', '&:only-child'],
+      ['odd', '&:nth-child(odd)'],
+      ['even', '&:nth-child(even)'],
       'first-of-type',
       'last-of-type',
       'only-of-type',
 
       // State
-      'visited',
+      [
+        'visited',
+        ({ container }) => {
+          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
+
+          container.walkDecls((decl) => {
+            if (toRemove.includes(decl.prop)) {
+              decl.remove()
+
+              return
+            }
+
+            for (const varName of toRemove) {
+              if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, '')
+              }
+            }
+          })
+
+          return '&:visited'
+        },
+      ],
       'target',
-      ['open', '[open]'],
+      ['open', '&[open]'],
 
       // Forms
       'default',
@@ -80,6 +105,7 @@ export let variantPlugins = {
       'indeterminate',
       'placeholder-shown',
       'autofill',
+      'optional',
       'required',
       'valid',
       'invalid',
@@ -92,23 +118,41 @@ export let variantPlugins = {
 
       // Interactive
       'focus-within',
-      'hover',
+      [
+        'hover',
+        !flagEnabled(config(), 'hoverOnlyWhenSupported')
+          ? '&:hover'
+          : '@media (hover: hover) and (pointer: fine) { &:hover }',
+      ],
       'focus',
       'focus-visible',
       'active',
+      'enabled',
       'disabled',
-    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
+    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `&:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(variantName, `&${state}`)
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return result
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+      addVariant(`group-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return result.replace(/&(\S+)/, ':merge(.group)$1 &')
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
+      addVariant(`peer-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ &')
+      })
     }
   },
 
@@ -138,7 +182,8 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let mode = config('darkMode', 'media')
+    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
+
     if (mode === false) {
       mode = 'media'
       log.warn('darkmode-false', [
@@ -149,7 +194,7 @@ export let variantPlugins = {
     }
 
     if (mode === 'class') {
-      addVariant('dark', '.dark &')
+      addVariant('dark', `${className} &`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
     }
@@ -171,6 +216,11 @@ export let variantPlugins = {
     addVariant('portrait', '@media (orientation: portrait)')
     addVariant('landscape', '@media (orientation: landscape)')
   },
+
+  prefersContrastVariants: ({ addVariant }) => {
+    addVariant('contrast-more', '@media (prefers-contrast: more)')
+    addVariant('contrast-less', '@media (prefers-contrast: less)')
+  },
 }
 
 let cssTransformValue = [
@@ -494,6 +544,41 @@ export let corePlugins = {
     })
   },
 
+  borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
+    addDefaults('border-spacing', {
+      '--tw-border-spacing-x': 0,
+      '--tw-border-spacing-y': 0,
+    })
+
+    matchUtilities(
+      {
+        'border-spacing': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-x': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-y': (value) => {
+          return {
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+      },
+      { values: theme('borderSpacing') }
+    )
+  },
+
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
   translate: createUtilityPlugin(
     'translate',
@@ -578,8 +663,8 @@ export let corePlugins = {
     })
   },
 
-  animation: ({ matchUtilities, theme, prefix }) => {
-    let prefixName = (name) => prefix(`.${name}`).slice(1)
+  animation: ({ matchUtilities, theme, config }) => {
+    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]
@@ -811,6 +896,7 @@ export let corePlugins = {
     addUtilities({
       '.grid-flow-row': { gridAutoFlow: 'row' },
       '.grid-flow-col': { gridAutoFlow: 'column' },
+      '.grid-flow-dense': { gridAutoFlow: 'dense' },
       '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
       '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
     })
@@ -1351,7 +1437,8 @@ export let corePlugins = {
 
             return {
               '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
+              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
@@ -1363,10 +1450,11 @@ export let corePlugins = {
             let transparentToValue = transparentTo(value)
 
             return {
+              '--tw-gradient-to': transparentToValue,
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                 value,
                 'via'
-              )}, var(--tw-gradient-to, ${transparentToValue})`,
+              )}, var(--tw-gradient-to)`,
             }
           },
         },
@@ -1489,6 +1577,8 @@ export let corePlugins = {
       '.text-center': { 'text-align': 'center' },
       '.text-right': { 'text-align': 'right' },
       '.text-justify': { 'text-align': 'justify' },
+      '.text-start': { 'text-align': 'start' },
+      '.text-end': { 'text-align': 'end' },
     })
   },
 
@@ -1795,6 +1885,7 @@ export let corePlugins = {
       '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
       '.mix-blend-color': { 'mix-blend-mode': 'color' },
       '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
+      '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
     })
   },
 
@@ -1889,13 +1980,24 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
-    let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
-    let ringColorDefault = withAlphaValue(
-      theme('ringColor.DEFAULT'),
-      ringOpacityDefault,
-      `rgb(147 197 253 / ${ringOpacityDefault})`
-    )
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+    let ringColorDefault = (() => {
+      if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
+        return theme('ringColor.DEFAULT')
+      }
+
+      let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+
+      if (!theme('ringColor')?.DEFAULT) {
+        return `rgb(147 197 253 / ${ringOpacityDefault})`
+      }
+
+      return withAlphaValue(
+        theme('ringColor')?.DEFAULT,
+        ringOpacityDefault,
+        `rgb(147 197 253 / ${ringOpacityDefault})`
+      )
+    })()
 
     addDefaults('ring-width', {
       '--tw-ring-inset': ' ',
@@ -1931,10 +2033,16 @@ export let corePlugins = {
     })
   },
 
-  ringColor: ({ matchUtilities, theme }) => {
+  ringColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
       {
         ring: (value) => {
+          if (!corePlugins('ringOpacity')) {
+            return {
+              '--tw-ring-color': toColorValue(value),
+            }
+          }
+
           return withAlphaVariable({
             color: value,
             property: '--tw-ring-color',
@@ -1953,9 +2061,13 @@ export let corePlugins = {
     )
   },
 
-  ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
-    filterDefault: true,
-  }),
+  ringOpacity: (helpers) => {
+    let { config } = helpers
+
+    return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
+      filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
+    })(helpers)
+  },
   ringOffsetWidth: createUtilityPlugin(
     'ringOffsetWidth',
     [['ring-offset', ['--tw-ring-offset-width']]],

package/src/css/preflight.css

@@ -160,6 +160,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -357,11 +358,3 @@ video {
   max-width: 100%;
   height: auto;
 }
-
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}

package/src/featureFlags.js

@@ -1,4 +1,4 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 import log from './util/log'
 
 let defaults = {
@@ -6,8 +6,8 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: [],
-  experimental: ['optimizeUniversalDefaults'],
+  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
+  experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
 }
 
 export function flagEnabled(config, flag) {
@@ -41,7 +41,7 @@ export function issueFlagNotices(config) {
 
   if (experimentalFlagsEnabled(config).length > 0) {
     let changes = experimentalFlagsEnabled(config)
-      .map((s) => chalk.yellow(s))
+      .map((s) => colors.yellow(s))
       .join(', ')
 
     log.warn('experimental-flags-enabled', [

package/src/index.js

@@ -13,7 +13,21 @@ module.exports = function tailwindcss(configOrPath) {
           return root
         },
       function (root, result) {
-        processTailwindFeatures(setupTrackingContext(configOrPath))(root, result)
+        let context = setupTrackingContext(configOrPath)
+
+        if (root.type === 'document') {
+          let roots = root.nodes.filter((node) => node.type === 'root')
+
+          for (const root of roots) {
+            if (root.type === 'root') {
+              processTailwindFeatures(context)(root, result)
+            }
+          }
+
+          return
+        }
+
+        processTailwindFeatures(context)(root, result)
       },
       env.DEBUG &&
         function (root) {

package/src/lib/cacheInvalidation.js

@@ -0,0 +1,52 @@
+import crypto from 'crypto'
+import * as sharedState from './sharedState'
+
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */
+function getHash(str) {
+  try {
+    return crypto.createHash('md5').update(str, 'utf-8').digest('binary')
+  } catch (err) {
+    return ''
+  }
+}
+
+/**
+ * Determine if the CSS tree is different from the
+ * previous version for the given `sourcePath`.
+ *
+ * @param {string} sourcePath
+ * @param {import('postcss').Node} root
+ */
+export function hasContentChanged(sourcePath, root) {
+  let css = root.toString()
+
+  // We only care about files with @tailwind directives
+  // Other files use an existing context
+  if (!css.includes('@tailwind')) {
+    return false
+  }
+
+  let existingHash = sharedState.sourceHashMap.get(sourcePath)
+  let rootHash = getHash(css)
+  let didChange = existingHash !== rootHash
+
+  sharedState.sourceHashMap.set(sourcePath, rootHash)
+
+  return didChange
+}

package/src/lib/collapseAdjacentRules.js

@@ -5,7 +5,7 @@ let comparisonMap = {
 let types = new Set(Object.keys(comparisonMap))
 
 export default function collapseAdjacentRules() {
-  return (root) => {
+  function collapseRulesIn(root) {
     let currentRule = null
     root.each((node) => {
       if (!types.has(node.type)) {
@@ -29,11 +29,30 @@ export default function collapseAdjacentRules() {
             (currentRule[property] ?? '').replace(/\s+/g, ' ')
         )
       ) {
-        currentRule.append(node.nodes)
+        // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+        if (node.nodes) {
+          currentRule.append(node.nodes)
+        }
+
         node.remove()
       } else {
         currentRule = node
       }
     })
+
+    // After we've collapsed adjacent rules & at-rules, we need to collapse
+    // adjacent rules & at-rules that are children of at-rules.
+    // We do not care about nesting rules because Tailwind CSS
+    // explicitly does not handle rule nesting on its own as
+    // the user is expected to use a nesting plugin
+    root.each((node) => {
+      if (node.type === 'atrule') {
+        collapseRulesIn(node)
+      }
+    })
+  }
+
+  return (root) => {
+    collapseRulesIn(root)
   }
 }