Merge branch 'master' into resolve-purge-paths

Author: bradlc

CHANGELOG.md

@@ -10,6 +10,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `background-origin` utilities ([#4117](https://github.com/tailwindlabs/tailwindcss/pull/4117))
+- Improve `@apply` performance in projects that process many CSS sources ([#3178](https://github.com/tailwindlabs/tailwindcss/pull/3718))
+- JIT: Don't use CSS variables for color utilities if color opacity utilities are disabled ([#3984](https://github.com/tailwindlabs/tailwindcss/pull/3984))
+- JIT: Redesign `matchUtilities` API to make it more suitable for third-party use ([#4232](https://github.com/tailwindlabs/tailwindcss/pull/4232))
+- JIT: Support applying important utility variants ([#4260](https://github.com/tailwindlabs/tailwindcss/pull/4260))
+
+### Fixed
+
+- JIT: Improve support for Svelte class bindings ([#4187](https://github.com/tailwindlabs/tailwindcss/pull/4187))
+- JIT: Improve support for `calc` and `var` in arbitrary values ([#4147](https://github.com/tailwindlabs/tailwindcss/pull/4147))
+- Convert `hsl` colors to `hsla` when transforming for opacity support instead of `rgba` ([#3850](https://github.com/tailwindlabs/tailwindcss/pull/3850))
+- Fix `backdropBlur` variants not being generated ([#4188](https://github.com/tailwindlabs/tailwindcss/pull/4188))
+- Improve animation value parsing ([#4250](https://github.com/tailwindlabs/tailwindcss/pull/4250))
+- Ignore unknown object types when hashing config ([82f4eaa](https://github.com/tailwindlabs/tailwindcss/commit/82f4eaa6832ef8a4e3fd90869e7068efdf6e34f2))
 
 ## [2.1.2] - 2021-04-23
 

package-lock.json

@@ -51,7 +51,7 @@
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.4.0",
     "jest": "^26.6.3",
-    "postcss": "^8.2.8",
+    "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.0"

package.json

@@ -30,7 +30,6 @@ function buildApplyCache(applyCandidates, context) {
   return context.applyClassCache
 }
 
-// TODO: Apply `!important` stuff correctly instead of just skipping it
 function extractApplyCandidates(params) {
   let candidates = params.split(/[\s\t\n]+/g)
 
@@ -143,7 +142,6 @@ function processApply(root, context) {
         .join(', ')
     }
 
-    /** @type {Map<import('postcss').Node, [string, boolean, import('postcss').Node[]][]>} */
     let perParentApplies = new Map()
 
     // Collect all apply candidates and their rules
@@ -197,7 +195,7 @@ function processApply(root, context) {
               rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
 
               rule.walkDecls((d) => {
-                d.important = important
+                d.important = meta.important || important
               })
             })
           }

src/jit/lib/expandApplyAtRules.js

@@ -25,9 +25,12 @@ function getDefaultExtractor(fileExtension) {
   }
 }
 
-function getExtractor(fileName, tailwindConfig) {
+function getExtractor(tailwindConfig, fileExtension) {
   const purgeOptions = tailwindConfig && tailwindConfig.purge && tailwindConfig.purge.options
-  const fileExtension = path.extname(fileName).slice(1)
+
+  if (!fileExtension) {
+    return (purgeOptions && purgeOptions.defaultExtractor) || getDefaultExtractor()
+  }
 
   if (!purgeOptions) {
     return getDefaultExtractor(fileExtension)
@@ -208,11 +211,16 @@ export default function expandTailwindAtRules(context, registerDependency) {
     env.DEBUG && console.time('Reading changed files')
     for (let file of context.changedFiles) {
       let content = fs.readFileSync(file, 'utf8')
-      let extractor = getExtractor(file, context.tailwindConfig)
+      let extractor = getExtractor(context.tailwindConfig, path.extname(file).slice(1))
       getClassCandidates(content, extractor, contentMatchCache, candidates, seen)
     }
     env.DEBUG && console.timeEnd('Reading changed files')
 
+    for (let { content, extension } of context.rawContent) {
+      let extractor = getExtractor(context.tailwindConfig, extension)
+      getClassCandidates(content, extractor, contentMatchCache, candidates, seen)
+    }
+
     // ---
 
     // Generate the actual CSS

src/jit/lib/expandTailwindAtRules.js

@@ -79,7 +79,7 @@ function applyImportant(matches) {
       })
       r.walkDecls((d) => (d.important = true))
     })
-    result.push([meta, container.nodes[0]])
+    result.push([{ ...meta, important: true }, container.nodes[0]])
   }
 
   return result
@@ -192,9 +192,13 @@ function* resolveMatchedPlugins(classCandidate, context) {
   }
 }
 
+function splitWithSeparator(input, separator) {
+  return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
+}
+
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
-  let [classCandidate, ...variants] = candidate.split(separator).reverse()
+  let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
 
   if (classCandidate.startsWith('!')) {
@@ -215,17 +219,12 @@ function* resolveMatches(candidate, context) {
   // }
 
   for (let matchedPlugins of resolveMatchedPlugins(classCandidate, context)) {
-    let pluginHelpers = {
-      candidate: classCandidate,
-      theme: context.tailwindConfig.theme,
-    }
-
     let matches = []
     let [plugins, modifier] = matchedPlugins
 
     for (let [sort, plugin] of plugins) {
       if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) {
+        for (let ruleSet of [].concat(plugin(modifier))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
           for (let rule of rules) {
             matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])

src/jit/lib/generateRules.js

@@ -5,12 +5,12 @@ import path from 'path'
 import crypto from 'crypto'
 import chokidar from 'chokidar'
 import postcss from 'postcss'
-import hash from 'object-hash'
 import dlv from 'dlv'
 import selectorParser from 'postcss-selector-parser'
 import LRU from 'quick-lru'
 import normalizePath from 'normalize-path'
 
+import hash from '../../util/hashConfig'
 import transformThemeValue from '../../util/transformThemeValue'
 import parseObjectStyles from '../../util/parseObjectStyles'
 import getModuleDependencies from '../../lib/getModuleDependencies'
@@ -22,6 +22,9 @@ import corePlugins from '../corePlugins'
 import isPlainObject from '../../util/isPlainObject'
 import escapeClassName from '../../util/escapeClassName'
 
+import nameClass from '../../util/nameClass'
+import { coerceValue } from '../../util/pluginUtils'
+
 import * as sharedState from './sharedState'
 
 let contextMap = sharedState.contextMap
@@ -513,36 +516,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           .push([{ sort: offset, layer: 'utilities', options }, rule])
       }
     },
-    matchBase: function (base) {
-      let offset = offsets.base++
-
-      for (let identifier in base) {
-        let prefixedIdentifier = prefixIdentifier(identifier, options)
-        let rule = base[identifier]
-
-        let withOffsets = [{ sort: offset, layer: 'base' }, rule]
-
-        if (!context.candidateRuleMap.has(prefixedIdentifier)) {
-          context.candidateRuleMap.set(prefixedIdentifier, [])
-        }
-
-        context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
-      }
-    },
     matchUtilities: function (utilities, options) {
-      // TODO: Redesign this API to work like this so it's more end-user friendly
-      // matchUtilities({
-      //   animate: (value, { includeRules }) => {
-      //     let { name: animationName } = parseAnimationValue(value)
-
-      //     if (keyframes[animationName] !== undefined) {
-      //       includeRules(keyframes[animationName])
-      //     }
-
-      //     return { animation: value }
-      //   },
-      // }, { values: [...], variants: [lol], ...otherStuff })
-
       let defaultOptions = {
         variants: [],
         respectPrefix: true,
@@ -558,7 +532,32 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         let prefixedIdentifier = prefixIdentifier(identifier, options)
         let rule = utilities[identifier]
 
-        let withOffsets = [{ sort: offset, layer: 'utilities', options }, rule]
+        function wrapped(modifier) {
+          let { type = 'any' } = options
+          let [value, coercedType] = coerceValue(type, modifier, options.values)
+
+          if (type !== coercedType || value === undefined) {
+            return []
+          }
+
+          let includedRules = []
+          let ruleSets = []
+            .concat(
+              rule(value, {
+                includeRules(rules) {
+                  includedRules.push(...rules)
+                },
+              })
+            )
+            .filter(Boolean)
+            .map((declaration) => ({
+              [nameClass(identifier, modifier)]: declaration,
+            }))
+
+          return [...includedRules, ...ruleSets]
+        }
+
+        let withOffsets = [{ sort: offset, layer: 'utilities', options }, wrapped]
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
@@ -567,16 +566,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets)
       }
     },
-    // ---
-    jit: {
-      e: escapeClassName,
-      config: tailwindConfig,
-      theme: tailwindConfig.theme,
-      addVariant(variantName, applyVariant, options = {}) {
-        insertInto(variantList, variantName, options)
-        variantMap.set(variantName, applyVariant)
-      },
-    },
   }
 }
 
@@ -776,19 +765,11 @@ export default function setupContext(configOrPath) {
       }
     }
 
-    let candidateFiles = (Array.isArray(tailwindConfig.purge)
+    process.env.DEBUG && console.log('Setting up new context...')
+
+    let purgeContent = Array.isArray(tailwindConfig.purge)
       ? tailwindConfig.purge
       : tailwindConfig.purge.content
-    )
-      .map((purgePath) =>
-        path.resolve(
-          userConfigPath === null ? process.cwd() : path.dirname(userConfigPath),
-          purgePath
-        )
-      )
-      .map((purgePath) => normalizePath(purgePath))
-
-    process.env.DEBUG && console.log('Setting up new context...')
 
     let context = {
       changedFiles: new Set(),
@@ -804,7 +785,19 @@ export default function setupContext(configOrPath) {
       configPath: userConfigPath,
       tailwindConfig: tailwindConfig,
       configDependencies: new Set(),
-      candidateFiles,
+      candidateFiles: purgeContent
+        .filter((item) => typeof item === 'string')
+        .map((purgePath) =>
+          normalizePath(
+            path.resolve(
+              userConfigPath === null ? process.cwd() : path.dirname(userConfigPath),
+              purgePath
+            )
+          )
+        ),
+      rawContent: purgeContent
+        .filter((item) => typeof item.raw === 'string')
+        .map(({ raw, extension }) => ({ content: raw, extension })),
       variantMap: new Map(),
       stylesheetCache: null,
       fileModifiedMap: new Map(),

src/jit/lib/setupContext.js

@@ -1,60 +1,41 @@
-import _ from 'lodash'
 import parseAnimationValue from '../util/parseAnimationValue'
-import nameClass from '../util/nameClass'
 
 export default function () {
-  return function ({ config, matchUtilities, addUtilities, theme, variants, prefix }) {
-    if (config('mode') === 'jit') {
-      let keyframes = Object.fromEntries(
-        Object.entries(theme('keyframes')).map(([key, value]) => {
-          return [
-            key,
-            [
-              {
-                [`@keyframes ${key}`]: value,
-              },
-              { respectVariants: false },
-            ],
-          ]
-        })
-      )
+  return function ({ matchUtilities, theme, variants, prefix }) {
+    let prefixName = (name) => prefix(`.${name}`).slice(1)
+    let keyframes = Object.fromEntries(
+      Object.entries(theme('keyframes')).map(([key, value]) => {
+        return [
+          key,
+          [
+            {
+              [`@keyframes ${prefixName(key)}`]: value,
+            },
+            { respectVariants: false },
+          ],
+        ]
+      })
+    )
 
-      matchUtilities({
-        animate: (modifier, { theme }) => {
-          let value = theme.animation[modifier]
+    matchUtilities(
+      {
+        animate: (value, { includeRules }) => {
+          let { name: animationName } = parseAnimationValue(value)
 
-          if (value === undefined) {
-            return []
+          if (keyframes[animationName] !== undefined) {
+            includeRules(keyframes[animationName], { respectImportant: false })
           }
 
-          let { name: animationName } = parseAnimationValue(value)
+          if (animationName === undefined || keyframes[animationName] === undefined) {
+            return { animation: value }
+          }
 
-          return [
-            keyframes[animationName],
-            { [nameClass('animate', modifier)]: { animation: value } },
-          ].filter(Boolean)
+          return {
+            animation: value.replace(animationName, prefixName(animationName)),
+          }
         },
-      })
-    } else {
-      const prefixName = (name) => prefix(`.${name}`).slice(1)
-      const keyframesConfig = theme('keyframes')
-      const keyframesStyles = _.mapKeys(
-        keyframesConfig,
-        (_keyframes, name) => `@keyframes ${prefixName(name)}`
-      )
-
-      addUtilities(keyframesStyles, { respectImportant: false })
-
-      const animationConfig = theme('animation')
-      const utilities = _.mapValues(
-        _.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)),
-        (animation) => {
-          const { name } = parseAnimationValue(animation)
-          if (name === undefined || keyframesConfig[name] === undefined) return { animation }
-          return { animation: animation.replace(name, prefixName(name)) }
-        }
-      )
-      addUtilities(utilities, variants('animation'))
-    }
+      },
+      { values: theme('animation'), variants: variants('animation') }
+    )
   }
 }