tailwindcss 3.1.2 → 3.1.5

package/scripts/type-utils.js

@@ -0,0 +1,27 @@
+export function union(types) {
+  return [...new Set(types)].join(' | ')
+}
+
+export function unionValues(values) {
+  return union(values.map(forValue))
+}
+
+export function forKeys(value) {
+  return union(Object.keys(value).map((key) => `'${key}'`))
+}
+
+export function forValue(value) {
+  if (Array.isArray(value)) {
+    return `(${unionValues(value)})[]`
+  }
+
+  if (typeof value === 'object') {
+    return `Record<${forKeys(value)}, ${unionValues(Object.values(value))}>`
+  }
+
+  if (typeof value === 'string') {
+    return `string`
+  }
+
+  return `any`
+}

package/src/corePlugins.js

@@ -14,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 { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
 
 export let variantPlugins = {
@@ -21,7 +22,19 @@ export let variantPlugins = {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
 
-    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('marker', [
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '& *::marker'
+      },
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '&::marker'
+      },
+    ])
+
     addVariant('selection', ['& *::selection', '&::selection'])
 
     addVariant('file', '&::file-selector-button')
@@ -77,21 +90,11 @@ export let variantPlugins = {
       [
         '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})`, '')
-              }
-            }
-          })
+          removeAlphaVariables(container, [
+            '--tw-text-opacity',
+            '--tw-border-opacity',
+            '--tw-bg-opacity',
+          ])
 
           return '&:visited'
         },
@@ -1610,7 +1613,7 @@ export let corePlugins = {
       {
         text: (value) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
-          let { lineHeight, letterSpacing } = isPlainObject(options)
+          let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
 
@@ -1618,6 +1621,7 @@ export let corePlugins = {
             'font-size': fontSize,
             ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
             ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
+            ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
           }
         },
       },

package/src/lib/defaultExtractor.js

@@ -1,4 +1,4 @@
-import { flagEnabled } from '../featureFlags.js'
+import { flagEnabled } from '../featureFlags'
 import * as regex from './regex'
 
 export function defaultExtractor(context) {
@@ -12,7 +12,7 @@ export function defaultExtractor(context) {
     let results = []
 
     for (let pattern of patterns) {
-      results.push(...(content.match(pattern) ?? []))
+      results = [...results, ...(content.match(pattern) ?? [])]
     }
 
     return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
@@ -22,6 +22,10 @@ export function defaultExtractor(context) {
 function* buildRegExps(context) {
   let separator = context.tailwindConfig.separator
   let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping')
+  let prefix =
+    context.tailwindConfig.prefix !== ''
+      ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)]))
+      : ''
 
   let utility = regex.any([
     // Arbitrary properties
@@ -37,7 +41,7 @@ function* buildRegExps(context) {
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s:]+\]/,
+            /-(?:\w+-)*\[[^\s:]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -48,7 +52,7 @@ function* buildRegExps(context) {
 
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s]+\]/,
+            /-(?:\w+-)*\[[^\s]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -64,31 +68,43 @@ function* buildRegExps(context) {
     ]),
   ])
 
-  yield regex.pattern([
-    // Variants
-    '((?=((',
-    regex.any(
-      [
-        regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
-        regex.pattern([/[^\s"'`\[\\]+/, separator]),
-      ],
-      true
-    ),
-    ')+))\\2)?',
-
-    // Important (optional)
-    /!?/,
-
-    variantGroupingEnabled
-      ? regex.any([
-          // Or any of those things but grouped separated by commas
-          regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
-
-          // Arbitrary properties, constrained utilities, arbitrary values, etc…
-          utility,
-        ])
-      : utility,
-  ])
+  let variantPatterns = [
+    // Without quotes
+    regex.any([
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
+      regex.pattern([/[^\s"'`\[\\]+/, separator]),
+    ]),
+
+    // With quotes allowed
+    regex.any([
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
+      regex.pattern([/[^\s`\[\\]+/, separator]),
+    ]),
+  ]
+
+  for (const variantPattern of variantPatterns) {
+    yield regex.pattern([
+      // Variants
+      '((?=((',
+      variantPattern,
+      ')+))\\2)?',
+
+      // Important (optional)
+      /!?/,
+
+      prefix,
+
+      variantGroupingEnabled
+        ? regex.any([
+            // Or any of those things but grouped separated by commas
+            regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
+
+            // Arbitrary properties, constrained utilities, arbitrary values, etc…
+            utility,
+          ])
+        : utility,
+    ])
+  }
 
   // 5. Inner matches
   yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g

package/src/lib/evaluateTailwindFunctions.js

@@ -40,9 +40,7 @@ function listKeys(obj) {
 }
 
 function validatePath(config, path, defaultValue, themeOpts = {}) {
-  const pathString = Array.isArray(path)
-    ? pathToString(path)
-    : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+  const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
   const value = dlv(config.theme, pathSegments, defaultValue)
 
@@ -162,6 +160,10 @@ let nodeTypePropertyMap = {
 export default function ({ tailwindConfig: config }) {
   let functions = {
     theme: (node, path, ...defaultValue) => {
+      // Strip quotes from beginning and end of string
+      // This allows the alpha value to be present inside of quotes
+      path = path.replace(/^['"]+|['"]+$/g, '')
+
       let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
       let alpha = undefined
 
@@ -181,9 +183,15 @@ export default function ({ tailwindConfig: config }) {
         throw node.error(error)
       }
 
-      if (alpha !== undefined) {
-        value = parseColorFormat(value)
-        value = withAlphaValue(value, alpha, value)
+      let maybeColor = parseColorFormat(value)
+      let isColorFunction = maybeColor !== undefined && typeof maybeColor === 'function'
+
+      if (alpha !== undefined || isColorFunction) {
+        if (alpha === undefined) {
+          alpha = 1.0
+        }
+
+        value = withAlphaValue(maybeColor, alpha, maybeColor)
       }
 
       return value

package/src/lib/generateRules.js

@@ -129,6 +129,7 @@ function applyVariant(variant, matches, context) {
   }
 
   let args
+  let isArbitraryVariant = false
 
   // Find partial arbitrary variants
   if (variant.endsWith(']') && !variant.startsWith('[')) {
@@ -144,6 +145,8 @@ function applyVariant(variant, matches, context) {
       return []
     }
 
+    isArbitraryVariant = true
+
     let fn = parseVariant(selector)
 
     let sort = Array.from(context.variantOrder.values()).pop() << 1n
@@ -163,15 +166,17 @@ function applyVariant(variant, matches, context) {
 
       let container = postcss.root({ nodes: [rule.clone()] })
 
-      for (let [variantSort, variantFunction] of variantFunctionTuples) {
-        let clone = container.clone()
+      for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
+        let clone = containerFromArray ?? container.clone()
         let collectedFormats = []
 
-        let originals = new Map()
-
         function prepareBackup() {
-          if (originals.size > 0) return // Already prepared, chicken out
-          clone.walkRules((rule) => originals.set(rule, rule.selector))
+          // Already prepared, chicken out
+          if (clone.raws.neededBackup) {
+            return
+          }
+          clone.raws.neededBackup = true
+          clone.walkRules((rule) => (rule.raws.originalSelector = rule.selector))
         }
 
         function modifySelectors(modifierFunction) {
@@ -231,6 +236,10 @@ function applyVariant(variant, matches, context) {
               // reserving additional X places for these 'unknown' variants in between.
               variantSort | BigInt(idx << ruleWithVariant.length),
               variantFunction,
+
+              // If the clone has been modified we have to pass that back
+              // though so each rule can use the modified container
+              clone.clone(),
             ])
           }
           continue
@@ -244,13 +253,15 @@ function applyVariant(variant, matches, context) {
           continue
         }
 
-        // We filled the `originals`, therefore we assume that somebody touched
+        // We had to backup selectors, therefore we assume that somebody touched
         // `container` or `modifySelectors`. Let's see if they did, so that we
         // can restore the selectors, and collect the format strings.
-        if (originals.size > 0) {
+        if (clone.raws.neededBackup) {
+          delete clone.raws.neededBackup
           clone.walkRules((rule) => {
-            if (!originals.has(rule)) return
-            let before = originals.get(rule)
+            let before = rule.raws.originalSelector
+            if (!before) return
+            delete rule.raws.originalSelector
             if (before === rule.selector) return // No mutation happened
 
             let modified = rule.selector
@@ -292,6 +303,7 @@ function applyVariant(variant, matches, context) {
             ...meta,
             sort: variantSort | meta.sort,
             collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
+            isArbitraryVariant,
           },
           clone.nodes[0],
         ]
@@ -619,6 +631,7 @@ function* resolveMatches(candidate, context, original = candidate) {
             base: candidate
               .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
               .pop(),
+            isArbitraryVariant: match[0].isArbitraryVariant,
 
             context,
           })

package/src/lib/setupContextUtils.js

@@ -465,11 +465,14 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             }
 
             if (Array.isArray(result)) {
-              return result.map((variant) => parseVariant(variant))
+              return result
+                .filter((variant) => typeof variant === 'string')
+                .map((variant) => parseVariant(variant))
             }
 
             // result may be undefined with legacy variants that use APIs like `modifySelectors`
-            return result && parseVariant(result)(api)
+            // result may also be a postcss node if someone was returning the result from `modifySelectors`
+            return result && typeof result === 'string' && parseVariant(result)(api)
           }
         }
 
@@ -759,6 +762,17 @@ function registerPlugins(plugins, context) {
                 ]
               }
 
+              if ([].concat(options?.type).includes('color')) {
+                classes = [
+                  ...classes,
+                  ...classes.flatMap((cls) =>
+                    Object.keys(context.tailwindConfig.theme.opacity).map(
+                      (opacity) => `${cls}/${opacity}`
+                    )
+                  ),
+                ]
+              }
+
               return classes
             })()
           : [util]

package/src/util/dataTypes.js

@@ -40,18 +40,16 @@ export function normalize(value, isRoot = true) {
     value = value.trim()
   }
 
-  // Add spaces around operators inside calc() that do not follow an operator
+  // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
-  value = value.replace(/calc\(.+\)/g, (match) => {
+  value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     return match.replace(
       /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
       '$1 $2 '
     )
   })
 
-  // Add spaces around some operators not inside calc() that do not follow an operator
-  // or '('.
-  return value.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([\/])/g, '$1 $2 ')
+  return value
 }
 
 export function url(value) {

package/src/util/formatVariantSelector.js

@@ -35,6 +35,7 @@ export function finalizeSelector(
     selector,
     candidate,
     context,
+    isArbitraryVariant,
 
     // Split by the separator, but ignore the separator inside square brackets:
     //
@@ -50,7 +51,8 @@ export function finalizeSelector(
 ) {
   let ast = selectorParser().astSync(selector)
 
-  if (context?.tailwindConfig?.prefix) {
+  // We explicitly DO NOT prefix classes in arbitrary variants
+  if (context?.tailwindConfig?.prefix && !isArbitraryVariant) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
   }
 

package/src/util/removeAlphaVariables.js

@@ -0,0 +1,24 @@
+/**
+ * This function removes any uses of CSS variables used as an alpha channel
+ *
+ * This is required for selectors like `:visited` which do not allow
+ * changes in opacity or external control using CSS variables.
+ *
+ * @param {import('postcss').Container} container
+ * @param {string[]} toRemove
+ */
+export function removeAlphaVariables(container, toRemove) {
+  container.walkDecls((decl) => {
+    if (toRemove.includes(decl.prop)) {
+      decl.remove()
+
+      return
+    }
+
+    for (let varName of toRemove) {
+      if (decl.value.includes(`/ var(${varName})`)) {
+        decl.value = decl.value.replace(`/ var(${varName})`, '')
+      }
+    }
+  })
+}

package/types/config.d.ts

@@ -1,4 +1,4 @@
-import type { CorePluginList } from './generated/CorePluginList'
+import type { CorePluginList } from './generated/corePluginList'
 import type { DefaultColors } from './generated/colors'
 
 // Helpers
@@ -12,6 +12,7 @@ interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
   [key: string]: V | RecursiveKeyValuePair<K, V>
 }
 type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+type CSSRuleObject = RecursiveKeyValuePair<string, string | string[]>
 
 interface PluginUtils {
   colors: DefaultColors
@@ -163,6 +164,7 @@ interface ThemeConfig {
           configuration: Partial<{
             lineHeight: string
             letterSpacing: string
+            fontWeight: string | number
           }>
         ]
     >
@@ -242,7 +244,7 @@ type ValueType =
 export interface PluginAPI {
   // for registering new static utility styles
   addUtilities(
-    utilities: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    utilities: CSSRuleObject | CSSRuleObject[],
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -250,7 +252,7 @@ export interface PluginAPI {
   ): void
   // for registering new dynamic utility styles
   matchUtilities<T>(
-    utilities: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    utilities: KeyValuePair<string, (value: T) => CSSRuleObject>,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -261,7 +263,7 @@ export interface PluginAPI {
   ): void
   // for registering new static component styles
   addComponents(
-    components: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    components: CSSRuleObject | CSSRuleObject[],
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -269,7 +271,7 @@ export interface PluginAPI {
   ): void
   // for registering new dynamic component styles
   matchComponents<T>(
-    components: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    components: KeyValuePair<string, (value: T) => CSSRuleObject>,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -279,7 +281,7 @@ export interface PluginAPI {
     }>
   ): void
   // for registering new base styles
-  addBase(base: RecursiveKeyValuePair | RecursiveKeyValuePair[]): void
+  addBase(base: CSSRuleObject | CSSRuleObject[]): void
   // for registering custom variants
   addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
   // for looking up values in the user’s theme configuration