tailwindcss 3.1.7 → 3.2.0

package/src/corePlugins.js

@@ -12,10 +12,16 @@ import isPlainObject from './util/isPlainObject'
 import transformThemeValue from './util/transformThemeValue'
 import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
-import { normalizeScreens } from './util/normalizeScreens'
+import {
+  normalizeScreens,
+  isScreenSortable,
+  compareScreens,
+  toScreen,
+} from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
 import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
+import { normalize } from './util/dataTypes'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -74,7 +80,7 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant, config }) => {
+  pseudoClassVariants: ({ addVariant, matchVariant, config }) => {
     let pseudoVariants = [
       // Positional
       ['first', '&:first-child'],
@@ -142,20 +148,25 @@ export let variantPlugins = {
       })
     }
 
-    for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, (ctx) => {
-        let result = typeof state === 'function' ? state(ctx) : state
-
-        return result.replace(/&(\S+)/, ':merge(.group)$1 &')
-      })
+    let variants = {
+      group: (_, { modifier }) =>
+        modifier ? [`:merge(.group\\/${modifier})`, ' &'] : [`:merge(.group)`, ' &'],
+      peer: (_, { modifier }) =>
+        modifier ? [`:merge(.peer\\/${modifier})`, ' ~ &'] : [`:merge(.peer)`, ' ~ &'],
     }
 
-    for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, (ctx) => {
-        let result = typeof state === 'function' ? state(ctx) : state
+    for (let [name, fn] of Object.entries(variants)) {
+      matchVariant(
+        name,
+        (value = '', extra) => {
+          let result = normalize(typeof value === 'function' ? value(extra) : value)
+          if (!result.includes('&')) result = '&' + result
 
-        return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ &')
-      })
+          let [a, b] = fn('', extra)
+          return result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+        },
+        { values: Object.fromEntries(pseudoVariants) }
+      )
     }
   },
 
@@ -207,12 +218,200 @@ export let variantPlugins = {
     addVariant('print', '@media print')
   },
 
-  screenVariants: ({ theme, addVariant }) => {
-    for (let screen of normalizeScreens(theme('screens'))) {
-      let query = buildMediaQuery(screen)
+  screenVariants: ({ theme, addVariant, matchVariant }) => {
+    let rawScreens = theme('screens') ?? {}
+    let areSimpleScreens = Object.values(rawScreens).every((v) => typeof v === 'string')
+    let screens = normalizeScreens(theme('screens'))
+
+    /** @type {Set<string>} */
+    let unitCache = new Set([])
+
+    /** @param {string} value */
+    function units(value) {
+      return value.match(/(\D+)$/)?.[1] ?? '(none)'
+    }
+
+    /** @param {string} value */
+    function recordUnits(value) {
+      if (value !== undefined) {
+        unitCache.add(units(value))
+      }
+    }
+
+    /** @param {string} value */
+    function canUseUnits(value) {
+      recordUnits(value)
 
-      addVariant(screen.name, `@media ${query}`)
+      // If the cache was empty it'll become 1 because we've just added the current unit
+      // If the cache was not empty and the units are the same the size doesn't change
+      // Otherwise, if the units are different from what is already known the size will always be > 1
+      return unitCache.size === 1
+    }
+
+    for (const screen of screens) {
+      for (const value of screen.values) {
+        recordUnits(value.min)
+        recordUnits(value.max)
+      }
+    }
+
+    let screensUseConsistentUnits = unitCache.size <= 1
+
+    /**
+     * @typedef {import('./util/normalizeScreens').Screen} Screen
+     */
+
+    /**
+     * @param {'min' | 'max'} type
+     * @returns {Record<string, Screen>}
+     */
+    function buildScreenValues(type) {
+      return Object.fromEntries(
+        screens
+          .filter((screen) => isScreenSortable(screen).result)
+          .map((screen) => {
+            let { min, max } = screen.values[0]
+
+            if (type === 'min' && min !== undefined) {
+              return screen
+            } else if (type === 'min' && max !== undefined) {
+              return { ...screen, not: !screen.not }
+            } else if (type === 'max' && max !== undefined) {
+              return screen
+            } else if (type === 'max' && min !== undefined) {
+              return { ...screen, not: !screen.not }
+            }
+          })
+          .map((screen) => [screen.name, screen])
+      )
+    }
+
+    /**
+     * @param {'min' | 'max'} type
+     * @returns {(a: { value: string | Screen }, z: { value: string | Screen }) => number}
+     */
+    function buildSort(type) {
+      return (a, z) => compareScreens(type, a.value, z.value)
+    }
+
+    let maxSort = buildSort('max')
+    let minSort = buildSort('min')
+
+    /** @param {'min'|'max'} type */
+    function buildScreenVariant(type) {
+      return (value) => {
+        if (!areSimpleScreens) {
+          log.warn('complex-screen-config', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing objects.',
+          ])
+
+          return []
+        } else if (!screensUseConsistentUnits) {
+          log.warn('mixed-screen-units', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
+          ])
+
+          return []
+        } else if (typeof value === 'string' && !canUseUnits(value)) {
+          log.warn('minmax-have-mixed-units', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
+          ])
+
+          return []
+        }
+
+        return [`@media ${buildMediaQuery(toScreen(value, type))}`]
+      }
+    }
+
+    matchVariant('max', buildScreenVariant('max'), {
+      sort: maxSort,
+      values: areSimpleScreens ? buildScreenValues('max') : {},
+    })
+
+    // screens and min-* are sorted together when they can be
+    let id = 'min-screens'
+    for (let screen of screens) {
+      addVariant(screen.name, `@media ${buildMediaQuery(screen)}`, {
+        id,
+        sort: areSimpleScreens && screensUseConsistentUnits ? minSort : undefined,
+        value: screen,
+      })
     }
+
+    matchVariant('min', buildScreenVariant('min'), {
+      id,
+      sort: minSort,
+    })
+  },
+
+  supportsVariants: ({ matchVariant, theme }) => {
+    matchVariant(
+      'supports',
+      (value = '') => {
+        let check = normalize(value)
+        let isRaw = /^\w*\s*\(/.test(check)
+
+        // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+        // But `(condition1) or (condition2)` is supported.
+        check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check
+
+        if (isRaw) {
+          return `@supports ${check}`
+        }
+
+        if (!check.includes(':')) {
+          check = `${check}: var(--tw)`
+        }
+
+        if (!(check.startsWith('(') && check.endsWith(')'))) {
+          check = `(${check})`
+        }
+
+        return `@supports ${check}`
+      },
+      { values: theme('supports') ?? {} }
+    )
+  },
+
+  ariaVariants: ({ matchVariant, theme }) => {
+    matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
+    matchVariant(
+      'group-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
+          : `:merge(.group)[aria-${normalize(value)}] &`,
+      { values: theme('aria') ?? {} }
+    )
+    matchVariant(
+      'peer-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
+          : `:merge(.peer)[aria-${normalize(value)}] ~ &`,
+      { values: theme('aria') ?? {} }
+    )
+  },
+
+  dataVariants: ({ matchVariant, theme }) => {
+    matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
+    matchVariant(
+      'group-data',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
+          : `:merge(.group)[data-${normalize(value)}] &`,
+      { values: theme('data') ?? {} }
+    )
+    matchVariant(
+      'peer-data',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
+          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
+      { values: theme('data') ?? {} }
+    )
   },
 
   orientationVariants: ({ addVariant }) => {
@@ -397,6 +596,7 @@ export let corePlugins = {
     addUtilities({
       '.visible': { visibility: 'visible' },
       '.invisible': { visibility: 'hidden' },
+      '.collapse': { visibility: 'collapse' },
     })
   },
 
@@ -936,6 +1136,7 @@ export let corePlugins = {
       '.place-content-between': { 'place-content': 'space-between' },
       '.place-content-around': { 'place-content': 'space-around' },
       '.place-content-evenly': { 'place-content': 'space-evenly' },
+      '.place-content-baseline': { 'place-content': 'baseline' },
       '.place-content-stretch': { 'place-content': 'stretch' },
     })
   },
@@ -945,6 +1146,7 @@ export let corePlugins = {
       '.place-items-start': { 'place-items': 'start' },
       '.place-items-end': { 'place-items': 'end' },
       '.place-items-center': { 'place-items': 'center' },
+      '.place-items-baseline': { 'place-items': 'baseline' },
       '.place-items-stretch': { 'place-items': 'stretch' },
     })
   },
@@ -957,6 +1159,7 @@ export let corePlugins = {
       '.content-between': { 'align-content': 'space-between' },
       '.content-around': { 'align-content': 'space-around' },
       '.content-evenly': { 'align-content': 'space-evenly' },
+      '.content-baseline': { 'align-content': 'baseline' },
     })
   },
 
@@ -1061,7 +1264,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('divideWidth'), type: ['line-width', 'length'] }
+      { values: theme('divideWidth'), type: ['line-width', 'length', 'any'] }
     )
 
     addUtilities({
@@ -1109,7 +1312,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('divideColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
@@ -1221,6 +1424,7 @@ export let corePlugins = {
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
       '.break-words': { 'overflow-wrap': 'break-word' },
       '.break-all': { 'word-break': 'break-all' },
+      '.break-keep': { 'word-break': 'keep-all' },
     })
   },
 
@@ -1288,7 +1492,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: ['color'],
+        type: ['color', 'any'],
       }
     )
 
@@ -1325,7 +1529,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
 
@@ -1386,7 +1590,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
@@ -1412,7 +1616,7 @@ export let corePlugins = {
           })
         },
       },
-      { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
+      { values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1480,7 +1684,7 @@ export let corePlugins = {
   },
 
   backgroundSize: createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
-    type: ['lookup', 'length', 'percentage'],
+    type: ['lookup', 'length', 'percentage', 'size'],
   }),
 
   backgroundAttachment: ({ addUtilities }) => {
@@ -1501,7 +1705,7 @@ export let corePlugins = {
   },
 
   backgroundPosition: createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
-    type: ['lookup', 'position'],
+    type: ['lookup', ['position', { preferOnConflict: true }]],
   }),
 
   backgroundRepeat: ({ addUtilities }) => {
@@ -1541,7 +1745,7 @@ export let corePlugins = {
           return { stroke: toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('stroke')), type: ['color', 'url'] }
+      { values: flattenColorPalette(theme('stroke')), type: ['color', 'url', 'any'] }
     )
   },
 
@@ -1604,9 +1808,28 @@ export let corePlugins = {
     matchUtilities({ align: (value) => ({ 'vertical-align': value }) })
   },
 
-  fontFamily: createUtilityPlugin('fontFamily', [['font', ['fontFamily']]], {
-    type: ['lookup', 'generic-name', 'family-name'],
-  }),
+  fontFamily: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        font: (value) => {
+          let [families, options = {}] =
+            Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
+          let { fontFeatureSettings } = options
+
+          return {
+            'font-family': Array.isArray(families) ? families.join(', ') : families,
+            ...(fontFeatureSettings === undefined
+              ? {}
+              : { 'font-feature-settings': fontFeatureSettings }),
+          }
+        },
+      },
+      {
+        values: theme('fontFamily'),
+        type: ['lookup', 'generic-name', 'family-name'],
+      }
+    )
+  },
 
   fontSize: ({ matchUtilities, theme }) => {
     matchUtilities(
@@ -1633,7 +1856,7 @@ export let corePlugins = {
   },
 
   fontWeight: createUtilityPlugin('fontWeight', [['font', ['fontWeight']]], {
-    type: ['lookup', 'number'],
+    type: ['lookup', 'number', 'any'],
   }),
 
   textTransform: ({ addUtilities }) => {
@@ -1729,7 +1952,7 @@ export let corePlugins = {
           })
         },
       },
-      { values: flattenColorPalette(theme('textColor')), type: 'color' }
+      { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1751,7 +1974,7 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1774,7 +1997,7 @@ export let corePlugins = {
   textUnderlineOffset: createUtilityPlugin(
     'textUnderlineOffset',
     [['underline-offset', ['text-underline-offset']]],
-    { type: ['length', 'percentage'] }
+    { type: ['length', 'percentage', 'any'] }
   ),
 
   fontSmoothing: ({ addUtilities }) => {
@@ -1947,7 +2170,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1961,7 +2184,6 @@ export let corePlugins = {
       '.outline-dashed': { 'outline-style': 'dashed' },
       '.outline-dotted': { 'outline-style': 'dotted' },
       '.outline-double': { 'outline-style': 'double' },
-      '.outline-hidden': { 'outline-style': 'hidden' },
     })
   },
 
@@ -1970,7 +2192,8 @@ export let corePlugins = {
   }),
 
   outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
-    type: ['length', 'number', 'percentage'],
+    type: ['length', 'number', 'percentage', 'any'],
+    supportsNegativeValues: true,
   }),
 
   outlineColor: ({ matchUtilities, theme }) => {
@@ -1980,7 +2203,7 @@ export let corePlugins = {
           return { 'outline-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('outlineColor')), type: ['color', 'any'] }
     )
   },
 
@@ -2060,7 +2283,7 @@ export let corePlugins = {
             ([modifier]) => modifier !== 'DEFAULT'
           )
         ),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
@@ -2087,7 +2310,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: flattenColorPalette(theme('ringOffsetColor')), type: 'color' }
+      { values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] }
     )
   },
 

package/src/css/preflight.css

@@ -358,3 +358,8 @@ video {
   max-width: 100%;
   height: auto;
 }
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}

package/src/featureFlags.js

@@ -3,11 +3,21 @@ import log from './util/log'
 
 let defaults = {
   optimizeUniversalDefaults: false,
+  generalizedModifiers: true,
 }
 
 let featureFlags = {
-  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
-  experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
+  future: [
+    'hoverOnlyWhenSupported',
+    'respectDefaultRingColorOpacity',
+    'disableColorOpacityUtilitiesByDefault',
+    'relativeContentPathsByDefault',
+  ],
+  experimental: [
+    'optimizeUniversalDefaults',
+    'generalizedModifiers',
+    // 'variantGrouping',
+  ],
 }
 
 export function flagEnabled(config, flag) {

package/src/index.js

@@ -1,6 +1,7 @@
 import setupTrackingContext from './lib/setupTrackingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
+import { findAtConfigPath } from './lib/findAtConfigPath'
 
 module.exports = function tailwindcss(configOrPath) {
   return {
@@ -13,6 +14,10 @@ module.exports = function tailwindcss(configOrPath) {
           return root
         },
       function (root, result) {
+        // Use the path for the `@config` directive if it exists, otherwise use the
+        // path for the file being processed
+        configOrPath = findAtConfigPath(root, result) ?? configOrPath
+
         let context = setupTrackingContext(configOrPath)
 
         if (root.type === 'document') {