tailwindcss 0.0.0-insiders.f4635e0 → 0.0.0-insiders.f4a2ccd

package/src/lib/defaultExtractor.js

@@ -0,0 +1,217 @@
+import { flagEnabled } from '../featureFlags'
+import * as regex from './regex'
+
+export function defaultExtractor(context) {
+  let patterns = Array.from(buildRegExps(context))
+
+  /**
+   * @param {string} content
+   */
+  return (content) => {
+    /** @type {(string|string)[]} */
+    let results = []
+
+    for (let pattern of patterns) {
+      results = [...results, ...(content.match(pattern) ?? [])]
+    }
+
+    return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
+  }
+}
+
+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 (without square brackets)
+    /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+
+    // Arbitrary properties with balanced square brackets
+    // This is a targeted fix to continue to allow theme()
+    // with square brackets to work in arbitrary properties
+    // while fixing a problem with the regex matching too much
+    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
+
+    // Utilities
+    regex.pattern([
+      // Utility Name / Group Name
+      /-?(?:\w+)/,
+
+      // Normal/Arbitrary values
+      regex.optional(
+        regex.any([
+          regex.pattern([
+            // Arbitrary values
+            /-(?:\w+-)*\[[^\s:]+\]/,
+
+            // Not immediately followed by an `{[(`
+            /(?![{([]])/,
+
+            // optionally followed by an opacity modifier
+            /(?:\/[^\s'"`\\><$]*)?/,
+          ]),
+
+          regex.pattern([
+            // Arbitrary values
+            /-(?:\w+-)*\[[^\s]+\]/,
+
+            // Not immediately followed by an `{[(`
+            /(?![{([]])/,
+
+            // optionally followed by an opacity modifier
+            /(?:\/[^\s'"`\\$]*)?/,
+          ]),
+
+          // Normal values w/o quotes — may include an opacity modifier
+          /[-\/][^\s'"`\\$={><]*/,
+        ])
+      ),
+    ]),
+  ])
+
+  let variantPatterns = [
+    // Without quotes
+    regex.any([
+      // This is here to provide special support for the `@` variant
+      regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
+
+      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
+}
+
+// We want to capture any "special" characters
+// AND the characters immediately following them (if there is one)
+let SPECIALS = /([\[\]'"`])([^\[\]'"`])?/g
+let ALLOWED_CLASS_CHARACTERS = /[^"'`\s<>\]]+/
+
+/**
+ * Clips a string ensuring that parentheses, quotes, etc… are balanced
+ * Used for arbitrary values only
+ *
+ * We will go past the end of the balanced parens until we find a non-class character
+ *
+ * Depth matching behavior:
+ * w-[calc(100%-theme('spacing[some_key][1.5]'))]']
+ *   ┬    ┬          ┬┬       ┬        ┬┬   ┬┬┬┬┬┬┬
+ *   1    2          3        4        34   3 210 END
+ *   ╰────┴──────────┴────────┴────────┴┴───┴─┴┴┴
+ *
+ * @param {string} input
+ */
+function clipAtBalancedParens(input) {
+  // We are care about this for arbitrary values
+  if (!input.includes('-[')) {
+    return input
+  }
+
+  let depth = 0
+  let openStringTypes = []
+
+  // Find all parens, brackets, quotes, etc
+  // Stop when we end at a balanced pair
+  // This is naive and will treat mismatched parens as balanced
+  // This shouldn't be a problem in practice though
+  let matches = input.matchAll(SPECIALS)
+
+  // We can't use lookbehind assertions because we have to support Safari
+  // So, instead, we've emulated it using capture groups and we'll re-work the matches to accommodate
+  matches = Array.from(matches).flatMap((match) => {
+    const [, ...groups] = match
+
+    return groups.map((group, idx) =>
+      Object.assign([], match, {
+        index: match.index + idx,
+        0: group,
+      })
+    )
+  })
+
+  for (let match of matches) {
+    let char = match[0]
+    let inStringType = openStringTypes[openStringTypes.length - 1]
+
+    if (char === inStringType) {
+      openStringTypes.pop()
+    } else if (char === "'" || char === '"' || char === '`') {
+      openStringTypes.push(char)
+    }
+
+    if (inStringType) {
+      continue
+    } else if (char === '[') {
+      depth++
+      continue
+    } else if (char === ']') {
+      depth--
+      continue
+    }
+
+    // We've gone one character past the point where we should stop
+    // This means that there was an extra closing `]`
+    // We'll clip to just before it
+    if (depth < 0) {
+      return input.substring(0, match.index - 1)
+    }
+
+    // We've finished balancing the brackets but there still may be characters that can be included
+    // For example in the class `text-[#336699]/[.35]`
+    // The depth goes to `0` at the closing `]` but goes up again at the `[`
+
+    // If we're at zero and encounter a non-class character then we clip the class there
+    if (depth === 0 && !ALLOWED_CLASS_CHARACTERS.test(char)) {
+      return input.substring(0, match.index)
+    }
+  }
+
+  return input
+}
+
+// Regular utilities
+// {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+
+// Arbitrary values
+// {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+// arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+
+// Arbitrary properties
+// {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/src/lib/detectNesting.js

@@ -1,7 +1,32 @@
+function isRoot(node) {
+  return node.type === 'root'
+}
+
+function isAtLayer(node) {
+  return node.type === 'atrule' && node.name === 'layer'
+}
+
 export default function (_context) {
   return (root, result) => {
     let found = false
 
+    root.walkAtRules('tailwind', (node) => {
+      if (found) return false
+
+      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
+        found = true
+        node.warn(
+          result,
+          [
+            'Nested @tailwind rules were detected, but are not supported.',
+            "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+            'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
+          ].join('\n')
+        )
+        return false
+      }
+    })
+
     root.walkRules((rule) => {
       if (found) return false
 
@@ -9,10 +34,12 @@ export default function (_context) {
         found = true
         nestedRule.warn(
           result,
-          // TODO: Improve this warning message
-          'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
+          [
+            'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+            'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+            'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+          ].join('\n')
         )
-
         return false
       })
     })

package/src/lib/evaluateTailwindFunctions.js

@@ -2,8 +2,12 @@ import dlv from 'dlv'
 import didYouMean from 'didyoumean'
 import transformThemeValue from '../util/transformThemeValue'
 import parseValue from 'postcss-value-parser'
+import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 import { toPath } from '../util/toPath'
+import { withAlphaValue } from '../util/withAlphaVariable'
+import { parseColorFormat } from '../util/pluginUtils'
+import log from '../util/log'
 
 function isObject(input) {
   return typeof input === 'object' && input !== null
@@ -36,12 +40,10 @@ function listKeys(obj) {
   return list(Object.keys(obj))
 }
 
-function validatePath(config, path, defaultValue) {
-  const pathString = Array.isArray(path)
-    ? pathToString(path)
-    : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+function validatePath(config, path, defaultValue, themeOpts = {}) {
+  const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
-  const value = dlv(config.theme, pathString, defaultValue)
+  const value = dlv(config.theme, pathSegments, defaultValue)
 
   if (value === undefined) {
     let error = `'${pathString}' does not exist in your theme config.`
@@ -113,7 +115,7 @@ function validatePath(config, path, defaultValue) {
 
   return {
     isValid: true,
-    value: transformThemeValue(themeSection)(value),
+    value: transformThemeValue(themeSection)(value, themeOpts),
   }
 }
 
@@ -156,29 +158,101 @@ let nodeTypePropertyMap = {
   decl: 'value',
 }
 
-export default function ({ tailwindConfig: config }) {
+/**
+ * @param {string} path
+ * @returns {Iterable<[path: string, alpha: string|undefined]>}
+ */
+function* toPaths(path) {
+  // 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
+
+  yield [path, undefined]
+
+  if (matches) {
+    path = matches[1]
+    alpha = matches[2]
+
+    yield [path, alpha]
+  }
+}
+
+/**
+ *
+ * @param {any} config
+ * @param {string} path
+ * @param {any} defaultValue
+ */
+function resolvePath(config, path, defaultValue) {
+  const results = Array.from(toPaths(path)).map(([path, alpha]) => {
+    return Object.assign(validatePath(config, path, defaultValue, { opacityValue: alpha }), {
+      resolvedPath: path,
+      alpha,
+    })
+  })
+
+  return results.find((result) => result.isValid) ?? results[0]
+}
+
+export default function (context) {
+  let config = context.tailwindConfig
+
   let functions = {
     theme: (node, path, ...defaultValue) => {
-      const { isValid, value, error } = validatePath(
+      let { isValid, value, error, alpha } = resolvePath(
         config,
         path,
         defaultValue.length ? defaultValue : undefined
       )
 
       if (!isValid) {
+        let parentNode = node.parent
+        let candidate = parentNode?.raws.tailwind?.candidate
+
+        if (parentNode && candidate !== undefined) {
+          // Remove this utility from any caches
+          context.markInvalidUtilityNode(parentNode)
+
+          // Remove the CSS node from the markup
+          parentNode.remove()
+
+          // Show a warning
+          log.warn('invalid-theme-key-in-class', [
+            `The utility \`${candidate}\` contains an invalid theme value and was not generated.`,
+          ])
+
+          return
+        }
+
         throw node.error(error)
       }
 
+      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
     },
     screen: (node, screen) => {
       screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+      let screens = normalizeScreens(config.theme.screens)
+      let screenDefinition = screens.find(({ name }) => name === screen)
 
-      if (config.theme.screens[screen] === undefined) {
+      if (!screenDefinition) {
         throw node.error(`The '${screen}' screen does not exist in your theme.`)
       }
 
-      return buildMediaQuery(config.theme.screens[screen])
+      return buildMediaQuery(screenDefinition)
     },
   }
   return (root) => {