tailwindcss 0.0.0-insiders.da85042 → 0.0.0-insiders.db50bbb

package/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
 - Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
 - Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
+- Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
 
 ### Fixed
 
@@ -21,7 +22,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Sort tags before classes when `@applying` a selector with joined classes ([#9107](https://github.com/tailwindlabs/tailwindcss/pull/9107))
 - Remove invalid `outline-hidden` utility ([#9147](https://github.com/tailwindlabs/tailwindcss/pull/9147))
 - Honor the `hidden` attribute on elements in preflight ([#9174](https://github.com/tailwindlabs/tailwindcss/pull/9174))
-- Don't stop watching atomically renamed files ([#9173](https://github.com/tailwindlabs/tailwindcss/pull/9173))
+- Don't stop watching atomically renamed files ([#9173](https://github.com/tailwindlabs/tailwindcss/pull/9173), [#9215](https://github.com/tailwindlabs/tailwindcss/pull/9215))
+- Re-use existing entries in the rule cache ([#9208](https://github.com/tailwindlabs/tailwindcss/pull/9208))
+- Don't output duplicate utilities ([#9208](https://github.com/tailwindlabs/tailwindcss/pull/9208))
+- Fix `fontFamily` config TypeScript types ([#9214](https://github.com/tailwindlabs/tailwindcss/pull/9214))
+- Handle variants on complex selector utilities ([#9262](https://github.com/tailwindlabs/tailwindcss/pull/9262))
 
 ## [3.1.8] - 2022-08-05
 

package/lib/cli.js

@@ -21,6 +21,7 @@ const _getModuleDependencies = /*#__PURE__*/ _interopRequireDefault(require("./l
 const _log = /*#__PURE__*/ _interopRequireDefault(require("./util/log"));
 const _packageJson = /*#__PURE__*/ _interopRequireDefault(require("../package.json"));
 const _normalizePath = /*#__PURE__*/ _interopRequireDefault(require("normalize-path"));
+const _micromatch = /*#__PURE__*/ _interopRequireDefault(require("micromatch"));
 const _validateConfigJs = require("./util/validateConfig.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -741,6 +742,25 @@ async function build() {
             return result;
         }
         let config = refreshConfig(configPath);
+        let contentPatterns = refreshContentPatterns(config);
+        /**
+     * @param {import('../types/config.js').RequiredConfig} config
+     * @return {{all: string[], dynamic: string[], static: string[]}}
+     **/ function refreshContentPatterns(config) {
+            let globs = extractFileGlobs(config);
+            let tasks = _fastGlob.default.generateTasks(globs, {
+                absolute: true
+            });
+            let dynamicPatterns = tasks.filter((task)=>task.dynamic).flatMap((task)=>task.patterns);
+            let staticPatterns = tasks.filter((task)=>!task.dynamic).flatMap((task)=>task.patterns);
+            return {
+                all: [
+                    ...staticPatterns,
+                    ...dynamicPatterns
+                ],
+                dynamic: dynamicPatterns
+            };
+        }
         if (input) {
             contextDependencies.add(_path.default.resolve(input));
         }
@@ -767,6 +787,7 @@ async function build() {
                 env.DEBUG && console.time("Resolve config");
                 context = null;
                 config = refreshConfig(configPath);
+                contentPatterns = refreshContentPatterns(config);
                 env.DEBUG && console.timeEnd("Resolve config");
                 env.DEBUG && console.time("Watch new files");
                 let globs = extractFileGlobs(config);
@@ -816,7 +837,15 @@ async function build() {
         // Restore watching any files that are "removed"
         // This can happen when a file is pseudo-atomically replaced (a copy is created, overwritten, the old one is unlinked, and the new one is renamed)
         // TODO: An an optimization we should allow removal when the config changes
-        watcher.on("unlink", (file)=>watcher.add(file));
+        watcher.on("unlink", (file)=>{
+            file = (0, _normalizePath.default)(file);
+            // Only re-add the file if it's not covered by a dynamic pattern
+            if (!_micromatch.default.some([
+                file
+            ], contentPatterns.dynamic)) {
+                watcher.add(file);
+            }
+        });
         // Some applications such as Visual Studio (but not VS Code)
         // will only fire a rename event for atomic writes and not a change event
         // This is very likely a chokidar bug but it's one we need to work around
@@ -825,10 +854,16 @@ async function build() {
             if (evt !== "rename") {
                 return;
             }
-            let watchedPath = _path.default.resolve(meta.watchedPath);
+            let watchedPath = meta.watchedPath;
             // Watched path might be the file itself
             // Or the directory it is in
-            filePath = watchedPath.endsWith(filePath) ? watchedPath : _path.default.resolve(watchedPath, filePath);
+            filePath = watchedPath.endsWith(filePath) ? watchedPath : _path.default.join(watchedPath, filePath);
+            // Skip this event since the files it is for does not match any of the registered content globs
+            if (!_micromatch.default.some([
+                filePath
+            ], contentPatterns.all)) {
+                return;
+            }
             // Skip since we've already queued a rebuild for this file that hasn't happened yet
             if (pendingRebuilds.has(filePath)) {
                 return;

package/lib/lib/expandTailwindAtRules.js

@@ -188,14 +188,11 @@ function expandTailwindAtRules(context) {
         // Generate the actual CSS
         let classCacheCount = context.classCache.size;
         env.DEBUG && console.time("Generate rules");
-        let rules = (0, _generateRules.generateRules)(candidates, context);
+        (0, _generateRules.generateRules)(candidates, context);
         env.DEBUG && console.timeEnd("Generate rules");
         // We only ever add to the classCache, so if it didn't grow, there is nothing new.
         env.DEBUG && console.time("Build stylesheet");
         if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-            for (let rule of rules){
-                context.ruleCache.add(rule);
-            }
             context.stylesheetCache = buildStylesheet([
                 ...context.ruleCache
             ], context);

package/lib/lib/generateRules.js

@@ -665,14 +665,39 @@ function* resolveMatches(candidate, context, original = candidate) {
 function inKeyframes(rule) {
     return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
 }
+function getImportantStrategy(important) {
+    if (important === true) {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.walkDecls((d)=>{
+                if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
+                    d.important = true;
+                }
+            });
+        };
+    }
+    if (typeof important === "string") {
+        return (rule)=>{
+            if (inKeyframes(rule)) {
+                return;
+            }
+            rule.selectors = rule.selectors.map((selector)=>{
+                return `${important} ${selector}`;
+            });
+        };
+    }
+}
 function generateRules(candidates, context) {
     let allRules = [];
+    let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
         if (context.notClassCache.has(candidate)) {
             continue;
         }
-        if (context.classCache.has(candidate)) {
-            allRules.push(context.classCache.get(candidate));
+        if (context.candidateRuleCache.has(candidate)) {
+            allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)));
             continue;
         }
         let matches = Array.from(resolveMatches(candidate, context));
@@ -681,49 +706,30 @@ function generateRules(candidates, context) {
             continue;
         }
         context.classCache.set(candidate, matches);
-        allRules.push(matches);
-    }
-    // Strategy based on `tailwindConfig.important`
-    let strategy = ((important)=>{
-        if (important === true) {
-            return (rule)=>{
-                rule.walkDecls((d)=>{
-                    if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
-                        d.important = true;
-                    }
-                });
-            };
-        }
-        if (typeof important === "string") {
-            return (rule)=>{
-                rule.selectors = rule.selectors.map((selector)=>{
-                    return `${important} ${selector}`;
-                });
-            };
-        }
-    })(context.tailwindConfig.important);
-    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
-        if (options.respectImportant) {
-            if (strategy) {
+        var ref;
+        let rules = (ref = context.candidateRuleCache.get(candidate)) !== null && ref !== void 0 ? ref : new Set();
+        context.candidateRuleCache.set(candidate, rules);
+        for (const match of matches){
+            let [{ sort , layer , options  }, rule] = match;
+            if (options.respectImportant && strategy) {
                 let container = _postcss.default.root({
                     nodes: [
                         rule.clone()
                     ]
                 });
-                container.walkRules((r)=>{
-                    if (inKeyframes(r)) {
-                        return;
-                    }
-                    strategy(r);
-                });
+                container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            let newEntry = [
+                sort | context.layerOrder[layer],
+                rule
+            ];
+            rules.add(newEntry);
+            context.ruleCache.add(newEntry);
+            allRules.push(newEntry);
         }
-        return [
-            sort | context.layerOrder[layer],
-            rule
-        ];
-    });
+    }
+    return allRules;
 }
 function isArbitraryValue(input) {
     return input.startsWith("[") && input.endsWith("]");

package/lib/lib/setupContextUtils.js

@@ -858,6 +858,7 @@ function createContext(tailwindConfig, changedContent = [], root = _postcss.defa
     let context = {
         disposables: [],
         ruleCache: new Set(),
+        candidateRuleCache: new Map(),
         classCache: new Map(),
         applyClassCache: new Map(),
         notClassCache: new Set(),

package/lib/util/formatVariantSelector.js

@@ -45,6 +45,48 @@ function formatVariantSelector(current, ...others) {
     }
     return current;
 }
+/**
+ * Given any node in a selector this gets the "simple" selector it's a part of
+ * A simple selector is just a list of nodes without any combinators
+ * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
+ * inside the relevant node and won't be picked up so they're fine to ignore
+ *
+ * @param {import('postcss-selector-parser').Node} node
+ * @returns {import('postcss-selector-parser').Node[]}
+ **/ function simpleSelectorForNode(node) {
+    /** @type {import('postcss-selector-parser').Node[]} */ let nodes = [];
+    // Walk backwards until we hit a combinator node (or the start)
+    while(node.prev() && node.prev().type !== "combinator"){
+        node = node.prev();
+    }
+    // Now record all non-combinator nodes until we hit one (or the end)
+    while(node && node.type !== "combinator"){
+        nodes.push(node);
+        node = node.next();
+    }
+    return nodes;
+}
+/**
+ * Resorts the nodes in a selector to ensure they're in the correct order
+ * Tags go before classes, and pseudo classes go after classes
+ *
+ * @param {import('postcss-selector-parser').Selector} sel
+ * @returns {import('postcss-selector-parser').Selector}
+ **/ function resortSelector(sel) {
+    sel.sort((a, b)=>{
+        if (a.type === "tag" && b.type === "class") {
+            return -1;
+        } else if (a.type === "class" && b.type === "tag") {
+            return 1;
+        } else if (a.type === "class" && b.type === "pseudo" && b.value !== ":merge") {
+            return -1;
+        } else if (a.type === "pseudo" && a.value !== ":merge" && b.type === "class") {
+            return 1;
+        }
+        return sel.index(a) - sel.index(b);
+    });
+    return sel;
+}
 var ref1;
 function finalizeSelector(format, { selector , candidate , context , isArbitraryVariant , // Split by the separator, but ignore the separator inside square brackets:
 //
@@ -87,12 +129,40 @@ base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === vo
             node.raws.value = (0, _escapeClassName.default)((0, _unesc.default)(node.raws.value));
         }
     });
+    let simpleStart = _postcssSelectorParser.default.comment({
+        value: "/*__simple__*/"
+    });
+    let simpleEnd = _postcssSelectorParser.default.comment({
+        value: "/*__simple__*/"
+    });
     // We can safely replace the escaped base now, since the `base` section is
     // now in a normalized escaped value.
     ast.walkClasses((node)=>{
-        if (node.value === base) {
-            node.replaceWith(...formatAst.nodes);
+        if (node.value !== base) {
+            return;
+        }
+        let parent = node.parent;
+        let formatNodes = formatAst.nodes[0].nodes;
+        // Perf optimization: if the parent is a single class we can just replace it and be done
+        if (parent.nodes.length === 1) {
+            node.replaceWith(...formatNodes);
+            return;
+        }
+        let simpleSelector = simpleSelectorForNode(node);
+        parent.insertBefore(simpleSelector[0], simpleStart);
+        parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd);
+        for (let child of formatNodes){
+            parent.insertBefore(simpleSelector[0], child);
         }
+        node.remove();
+        // Re-sort the simple selector to ensure it's in the correct order
+        simpleSelector = simpleSelectorForNode(simpleStart);
+        let firstNode = parent.index(simpleStart);
+        parent.nodes.splice(firstNode, simpleSelector.length, ...resortSelector(_postcssSelectorParser.default.selector({
+            nodes: simpleSelector
+        })).nodes);
+        simpleStart.remove();
+        simpleEnd.remove();
     });
     // This will make sure to move pseudo's to the correct spot (the end for
     // pseudo elements) because otherwise the selector will never work

package/lib/util/negateValue.js

@@ -15,7 +15,20 @@ function _default(value) {
     if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
         return value.replace(/^[+-]?/, (sign)=>sign === "-" ? "" : "-");
     }
-    if (value.includes("var(") || value.includes("calc(")) {
-        return `calc(${value} * -1)`;
+    // What functions we support negating numeric values for
+    // var() isn't inherently a numeric function but we support it anyway
+    // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+    // to produce generally useful results and that will be covered already
+    let numericFunctions = [
+        "var",
+        "calc",
+        "min",
+        "max",
+        "clamp"
+    ];
+    for (const fn of numericFunctions){
+        if (value.includes(`${fn}(`)) {
+            return `calc(${value} * -1)`;
+        }
     }
 }

package/lib/util/transformThemeValue.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "default", {
     get: ()=>transformThemeValue
 });
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _isPlainObject = /*#__PURE__*/ _interopRequireDefault(require("./isPlainObject"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -23,8 +24,14 @@ function transformThemeValue(themeSection) {
             return value;
         };
     }
+    if (themeSection === "fontFamily") {
+        return (value)=>{
+            if (typeof value === "function") value = value({});
+            let families = Array.isArray(value) && (0, _isPlainObject.default)(value[1]) ? value[0] : value;
+            return Array.isArray(families) ? families.join(", ") : families;
+        };
+    }
     if ([
-        "fontFamily",
         "boxShadow",
         "transitionProperty",
         "transitionDuration",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.da85042",
+  "version": "0.0.0-insiders.db50bbb",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,13 +43,13 @@
   ],
   "devDependencies": {
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.218",
+    "@swc/core": "^1.2.244",
     "@swc/jest": "^0.2.22",
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.8",
     "cssnano": "^5.1.13",
     "esbuild": "^0.14.54",
-    "eslint": "^8.21.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",

package/src/cli.js

@@ -17,6 +17,7 @@ import getModuleDependencies from './lib/getModuleDependencies'
 import log from './util/log'
 import packageJson from '../package.json'
 import normalizePath from 'normalize-path'
+import micromatch from 'micromatch'
 import { validateConfig } from './util/validateConfig.js'
 
 let env = {
@@ -837,6 +838,23 @@ async function build() {
     }
 
     let config = refreshConfig(configPath)
+    let contentPatterns = refreshContentPatterns(config)
+
+    /**
+     * @param {import('../types/config.js').RequiredConfig} config
+     * @return {{all: string[], dynamic: string[], static: string[]}}
+     **/
+    function refreshContentPatterns(config) {
+      let globs = extractFileGlobs(config)
+      let tasks = fastGlob.generateTasks(globs, { absolute: true })
+      let dynamicPatterns = tasks.filter((task) => task.dynamic).flatMap((task) => task.patterns)
+      let staticPatterns = tasks.filter((task) => !task.dynamic).flatMap((task) => task.patterns)
+
+      return {
+        all: [...staticPatterns, ...dynamicPatterns],
+        dynamic: dynamicPatterns,
+      }
+    }
 
     if (input) {
       contextDependencies.add(path.resolve(input))
@@ -867,6 +885,7 @@ async function build() {
         env.DEBUG && console.time('Resolve config')
         context = null
         config = refreshConfig(configPath)
+        contentPatterns = refreshContentPatterns(config)
         env.DEBUG && console.timeEnd('Resolve config')
 
         env.DEBUG && console.time('Watch new files')
@@ -924,7 +943,14 @@ async function build() {
     // Restore watching any files that are "removed"
     // This can happen when a file is pseudo-atomically replaced (a copy is created, overwritten, the old one is unlinked, and the new one is renamed)
     // TODO: An an optimization we should allow removal when the config changes
-    watcher.on('unlink', (file) => watcher.add(file))
+    watcher.on('unlink', (file) => {
+      file = normalizePath(file)
+
+      // Only re-add the file if it's not covered by a dynamic pattern
+      if (!micromatch.some([file], contentPatterns.dynamic)) {
+        watcher.add(file)
+      }
+    })
 
     // Some applications such as Visual Studio (but not VS Code)
     // will only fire a rename event for atomic writes and not a change event
@@ -935,11 +961,16 @@ async function build() {
         return
       }
 
-      let watchedPath = path.resolve(meta.watchedPath)
+      let watchedPath = meta.watchedPath
 
       // Watched path might be the file itself
       // Or the directory it is in
-      filePath = watchedPath.endsWith(filePath) ? watchedPath : path.resolve(watchedPath, filePath)
+      filePath = watchedPath.endsWith(filePath) ? watchedPath : path.join(watchedPath, filePath)
+
+      // Skip this event since the files it is for does not match any of the registered content globs
+      if (!micromatch.some([filePath], contentPatterns.all)) {
+        return
+      }
 
       // Skip since we've already queued a rebuild for this file that hasn't happened yet
       if (pendingRebuilds.has(filePath)) {

package/src/lib/expandTailwindAtRules.js

@@ -177,16 +177,12 @@ export default function expandTailwindAtRules(context) {
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    let rules = generateRules(candidates, context)
+    generateRules(candidates, context)
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.
     env.DEBUG && console.time('Build stylesheet')
     if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-      for (let rule of rules) {
-        context.ruleCache.add(rule)
-      }
-
       context.stylesheetCache = buildStylesheet([...context.ruleCache], context)
     }
     env.DEBUG && console.timeEnd('Build stylesheet')

package/src/lib/generateRules.js

@@ -649,16 +649,45 @@ function inKeyframes(rule) {
   return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
 }
 
+function getImportantStrategy(important) {
+  if (important === true) {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.walkDecls((d) => {
+        if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
+          d.important = true
+        }
+      })
+    }
+  }
+
+  if (typeof important === 'string') {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.selectors = rule.selectors.map((selector) => {
+        return `${important} ${selector}`
+      })
+    }
+  }
+}
+
 function generateRules(candidates, context) {
   let allRules = []
+  let strategy = getImportantStrategy(context.tailwindConfig.important)
 
   for (let candidate of candidates) {
     if (context.notClassCache.has(candidate)) {
       continue
     }
 
-    if (context.classCache.has(candidate)) {
-      allRules.push(context.classCache.get(candidate))
+    if (context.candidateRuleCache.has(candidate)) {
+      allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)))
       continue
     }
 
@@ -670,47 +699,27 @@ function generateRules(candidates, context) {
     }
 
     context.classCache.set(candidate, matches)
-    allRules.push(matches)
-  }
 
-  // Strategy based on `tailwindConfig.important`
-  let strategy = ((important) => {
-    if (important === true) {
-      return (rule) => {
-        rule.walkDecls((d) => {
-          if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
-            d.important = true
-          }
-        })
-      }
-    }
+    let rules = context.candidateRuleCache.get(candidate) ?? new Set()
+    context.candidateRuleCache.set(candidate, rules)
 
-    if (typeof important === 'string') {
-      return (rule) => {
-        rule.selectors = rule.selectors.map((selector) => {
-          return `${important} ${selector}`
-        })
-      }
-    }
-  })(context.tailwindConfig.important)
+    for (const match of matches) {
+      let [{ sort, layer, options }, rule] = match
 
-  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
-    if (options.respectImportant) {
-      if (strategy) {
+      if (options.respectImportant && strategy) {
         let container = postcss.root({ nodes: [rule.clone()] })
-        container.walkRules((r) => {
-          if (inKeyframes(r)) {
-            return
-          }
-
-          strategy(r)
-        })
+        container.walkRules(strategy)
         rule = container.nodes[0]
       }
+
+      let newEntry = [sort | context.layerOrder[layer], rule]
+      rules.add(newEntry)
+      context.ruleCache.add(newEntry)
+      allRules.push(newEntry)
     }
+  }
 
-    return [sort | context.layerOrder[layer], rule]
-  })
+  return allRules
 }
 
 function isArbitraryValue(input) {

package/src/lib/setupContextUtils.js

@@ -873,6 +873,7 @@ export function createContext(tailwindConfig, changedContent = [], root = postcs
   let context = {
     disposables: [],
     ruleCache: new Set(),
+    candidateRuleCache: new Map(),
     classCache: new Map(),
     applyClassCache: new Map(),
     notClassCache: new Set(),

package/src/util/formatVariantSelector.js

@@ -29,6 +29,58 @@ export function formatVariantSelector(current, ...others) {
   return current
 }
 
+/**
+ * Given any node in a selector this gets the "simple" selector it's a part of
+ * A simple selector is just a list of nodes without any combinators
+ * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
+ * inside the relevant node and won't be picked up so they're fine to ignore
+ *
+ * @param {import('postcss-selector-parser').Node} node
+ * @returns {import('postcss-selector-parser').Node[]}
+ **/
+function simpleSelectorForNode(node) {
+  /** @type {import('postcss-selector-parser').Node[]} */
+  let nodes = []
+
+  // Walk backwards until we hit a combinator node (or the start)
+  while (node.prev() && node.prev().type !== 'combinator') {
+    node = node.prev()
+  }
+
+  // Now record all non-combinator nodes until we hit one (or the end)
+  while (node && node.type !== 'combinator') {
+    nodes.push(node)
+    node = node.next()
+  }
+
+  return nodes
+}
+
+/**
+ * Resorts the nodes in a selector to ensure they're in the correct order
+ * Tags go before classes, and pseudo classes go after classes
+ *
+ * @param {import('postcss-selector-parser').Selector} sel
+ * @returns {import('postcss-selector-parser').Selector}
+ **/
+function resortSelector(sel) {
+  sel.sort((a, b) => {
+    if (a.type === 'tag' && b.type === 'class') {
+      return -1
+    } else if (a.type === 'class' && b.type === 'tag') {
+      return 1
+    } else if (a.type === 'class' && b.type === 'pseudo' && b.value !== ':merge') {
+      return -1
+    } else if (a.type === 'pseudo' && a.value !== ':merge' && b.type === 'class') {
+      return 1
+    }
+
+    return sel.index(a) - sel.index(b)
+  })
+
+  return sel
+}
+
 export function finalizeSelector(
   format,
   {
@@ -88,12 +140,47 @@ export function finalizeSelector(
     }
   })
 
+  let simpleStart = selectorParser.comment({ value: '/*__simple__*/' })
+  let simpleEnd = selectorParser.comment({ value: '/*__simple__*/' })
+
   // We can safely replace the escaped base now, since the `base` section is
   // now in a normalized escaped value.
   ast.walkClasses((node) => {
-    if (node.value === base) {
-      node.replaceWith(...formatAst.nodes)
+    if (node.value !== base) {
+      return
+    }
+
+    let parent = node.parent
+    let formatNodes = formatAst.nodes[0].nodes
+
+    // Perf optimization: if the parent is a single class we can just replace it and be done
+    if (parent.nodes.length === 1) {
+      node.replaceWith(...formatNodes)
+      return
     }
+
+    let simpleSelector = simpleSelectorForNode(node)
+    parent.insertBefore(simpleSelector[0], simpleStart)
+    parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd)
+
+    for (let child of formatNodes) {
+      parent.insertBefore(simpleSelector[0], child)
+    }
+
+    node.remove()
+
+    // Re-sort the simple selector to ensure it's in the correct order
+    simpleSelector = simpleSelectorForNode(simpleStart)
+    let firstNode = parent.index(simpleStart)
+
+    parent.nodes.splice(
+      firstNode,
+      simpleSelector.length,
+      ...resortSelector(selectorParser.selector({ nodes: simpleSelector })).nodes
+    )
+
+    simpleStart.remove()
+    simpleEnd.remove()
   })
 
   // This will make sure to move pseudo's to the correct spot (the end for

package/src/util/negateValue.js

@@ -10,7 +10,15 @@ export default function (value) {
     return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
   }
 
-  if (value.includes('var(') || value.includes('calc(')) {
-    return `calc(${value} * -1)`
+  // What functions we support negating numeric values for
+  // var() isn't inherently a numeric function but we support it anyway
+  // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+  // to produce generally useful results and that will be covered already
+  let numericFunctions = ['var', 'calc', 'min', 'max', 'clamp']
+
+  for (const fn of numericFunctions) {
+    if (value.includes(`${fn}(`)) {
+      return `calc(${value} * -1)`
+    }
   }
 }

package/src/util/transformThemeValue.js

@@ -1,4 +1,5 @@
 import postcss from 'postcss'
+import isPlainObject from './isPlainObject'
 
 export default function transformThemeValue(themeSection) {
   if (['fontSize', 'outline'].includes(themeSection)) {
@@ -10,9 +11,16 @@ export default function transformThemeValue(themeSection) {
     }
   }
 
+  if (themeSection === 'fontFamily') {
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      let families = Array.isArray(value) && isPlainObject(value[1]) ? value[0] : value
+      return Array.isArray(families) ? families.join(', ') : families
+    }
+  }
+
   if (
     [
-      'fontFamily',
       'boxShadow',
       'transitionProperty',
       'transitionDuration',

package/types/config.d.ts

@@ -153,7 +153,14 @@ interface ThemeConfig {
   objectPosition: ResolvableTo<KeyValuePair>
   padding: ThemeConfig['spacing']
   textIndent: ThemeConfig['spacing']
-  fontFamily: ResolvableTo<KeyValuePair<string, string[]>>
+  fontFamily: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | string[]
+      | [fontFamily: string | string[], configuration: Partial<{ fontFeatureSettings: string }>]
+    >
+  >
   fontSize: ResolvableTo<
     KeyValuePair<
       string,