tailwindcss 0.0.0-insiders.d72b277 → 0.0.0-insiders.d9bc25d

package/CHANGELOG.md

@@ -10,6 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Prevent nesting plugin from breaking other plugins ([#7563](https://github.com/tailwindlabs/tailwindcss/pull/7563))
 - Recursively collapse adjacent rules ([#7565](https://github.com/tailwindlabs/tailwindcss/pull/7565))
 - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
+- Preserve source maps for generated CSS ([#7588](https://github.com/tailwindlabs/tailwindcss/pull/7588))
+- Split box shadows on top-level commas only ([#7479](https://github.com/tailwindlabs/tailwindcss/pull/7479))
+- Use local user CSS cache for `@apply` ([#7524](https://github.com/tailwindlabs/tailwindcss/pull/7524))
+
+### Changed
+
+- Replace `chalk` with `picocolors` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6039))
 
 ## [3.0.23] - 2022-02-16
 
@@ -24,7 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Temporarily move postcss to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
+- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
 
 ## [3.0.21] - 2022-02-10
 

package/lib/featureFlags.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.flagEnabled = flagEnabled;
 exports.issueFlagNotices = issueFlagNotices;
 exports.default = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
+var _picocolors = _interopRequireDefault(require("picocolors"));
 var _log = _interopRequireDefault(require("./util/log"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -47,7 +47,7 @@ function issueFlagNotices(config) {
         return;
     }
     if (experimentalFlagsEnabled(config).length > 0) {
-        let changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
+        let changes = experimentalFlagsEnabled(config).map((s)=>_picocolors.default.yellow(s)
         ).join(', ');
         _log.default.warn('experimental-flags-enabled', [
             `You have enabled experimental features: ${changes}`,

package/lib/lib/expandApplyAtRules.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function extractClasses(node) {
+/** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */ function extractClasses(node) {
     let classes = new Set();
     let container = _postcss.default.root({
         nodes: [
@@ -40,7 +40,114 @@ function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
     return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
-function buildApplyCache(applyCandidates, context) {
+function* pathToRoot(node) {
+    yield node;
+    while(node.parent){
+        yield node.parent;
+        node = node.parent;
+    }
+}
+/**
+ * Only clone the node itself and not its children
+ *
+ * @param {*} node
+ * @param {*} overrides
+ * @returns
+ */ function shallowClone(node, overrides = {}) {
+    let children = node.nodes;
+    node.nodes = [];
+    let tmp = node.clone(overrides);
+    node.nodes = children;
+    return tmp;
+}
+/**
+ * Clone just the nodes all the way to the top that are required to represent
+ * this singular rule in the tree.
+ *
+ * For example, if we have CSS like this:
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (display: grid) {
+ *     .foo {
+ *       display: grid;
+ *       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ *     }
+ *   }
+ *
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ *
+ *   .baz {
+ *     color: orange;
+ *   }
+ * }
+ * ```
+ *
+ * And we're cloning `.bar` it'll return a cloned version of what's required for just that single node:
+ *
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @param {import('postcss').Node} node
+ */ function nestedClone(node) {
+    for (let parent of pathToRoot(node)){
+        if (node === parent) {
+            continue;
+        }
+        if (parent.type === 'root') {
+            break;
+        }
+        node = shallowClone(parent, {
+            nodes: [
+                node
+            ]
+        });
+    }
+    return node;
+}
+/**
+ * @param {import('postcss').Root} root
+ */ function buildLocalApplyCache(root, context) {
+    /** @type {ApplyCache} */ let cache = new Map();
+    let highestOffset = context.layerOrder.user >> 4n;
+    root.walkRules((rule, idx)=>{
+        // Ignore rules generated by Tailwind
+        for (let node of pathToRoot(rule)){
+            var ref;
+            if (((ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.layer) !== undefined) {
+                return;
+            }
+        }
+        // Clone what's required to represent this singular rule in the tree
+        let container = nestedClone(rule);
+        for (let className of extractClasses(rule)){
+            let list = cache.get(className) || [];
+            cache.set(className, list);
+            list.push([
+                {
+                    layer: 'user',
+                    sort: BigInt(idx) + highestOffset,
+                    important: false
+                },
+                container, 
+            ]);
+        }
+    });
+    return cache;
+}
+/**
+ * @returns {ApplyCache}
+ */ function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
         if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
             continue;
@@ -62,6 +169,39 @@ function buildApplyCache(applyCandidates, context) {
     }
     return context.applyClassCache;
 }
+/**
+ * Build a cache only when it's first used
+ *
+ * @param {() => ApplyCache} buildCacheFn
+ * @returns {ApplyCache}
+ */ function lazyCache(buildCacheFn) {
+    let cache = null;
+    return {
+        get: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.get(name);
+        },
+        has: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.has(name);
+        }
+    };
+}
+/**
+ * Take a series of multiple caches and merge
+ * them so they act like one large cache
+ *
+ * @param {ApplyCache[]} caches
+ * @returns {ApplyCache}
+ */ function combineCaches(caches) {
+    return {
+        get: (name)=>caches.flatMap((cache)=>cache.get(name) || []
+            )
+        ,
+        has: (name)=>caches.some((cache)=>cache.has(name)
+            )
+    };
+}
 function extractApplyCandidates(params) {
     let candidates = params.split(/[\s\t\n]+/g);
     if (candidates[candidates.length - 1] === '!important') {
@@ -75,7 +215,7 @@ function extractApplyCandidates(params) {
         false
     ];
 }
-function processApply(root, context) {
+function processApply(root, context, localCache) {
     let applyCandidates = new Set();
     // Collect all @apply rules and candidates
     let applies = [];
@@ -89,7 +229,10 @@ function processApply(root, context) {
     // Start the @apply process if we have rules with @apply in them
     if (applies.length > 0) {
         // Fill up some caches!
-        let applyClassCache = buildApplyCache(applyCandidates, context);
+        let applyClassCache = combineCaches([
+            localCache,
+            buildApplyCache(applyCandidates, context)
+        ]);
         /**
      * When we have an apply like this:
      *
@@ -129,7 +272,10 @@ function processApply(root, context) {
         // Collect all apply candidates and their rules
         for (let apply of applies){
             let candidates = perParentApplies.get(apply.parent) || [];
-            perParentApplies.set(apply.parent, candidates);
+            perParentApplies.set(apply.parent, [
+                candidates,
+                apply.source
+            ]);
             let [applyCandidates, important] = extractApplyCandidates(apply.params);
             if (apply.parent.type === 'atrule') {
                 if (apply.parent.name === 'screen') {
@@ -158,12 +304,12 @@ function processApply(root, context) {
                 ]);
             }
         }
-        for (const [parent, candidates] of perParentApplies){
+        for (const [parent, [candidates, atApplySource]] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
-                for (let [meta, node] of rules){
+                for (let [meta, node1] of rules){
                     let parentClasses = extractClasses(parent);
-                    let nodeClasses = extractClasses(node);
+                    let nodeClasses = extractClasses(node1);
                     // Add base utility classes from the @apply node to the list of
                     // classes to check whether it intersects and therefore results in a
                     // circular dependency or not.
@@ -190,14 +336,18 @@ function processApply(root, context) {
                     let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
                     );
                     if (intersects) {
-                        throw node.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
+                        throw node1.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
                     }
                     let root = _postcss.default.root({
                         nodes: [
-                            node.clone()
+                            node1.clone()
                         ]
                     });
-                    let canRewriteSelector = node.type !== 'atrule' || node.type === 'atrule' && node.name !== 'keyframes';
+                    // Make sure every node in the entire tree points back at the @apply rule that generated it
+                    root.walk((node)=>{
+                        node.source = atApplySource;
+                    });
+                    let canRewriteSelector = node1.type !== 'atrule' || node1.type === 'atrule' && node1.name !== 'keyframes';
                     if (canRewriteSelector) {
                         root.walkRules((rule)=>{
                             // Let's imagine you have the following structure:
@@ -270,11 +420,14 @@ function processApply(root, context) {
             }
         }
         // Do it again, in case we have other `@apply` rules
-        processApply(root, context);
+        processApply(root, context, localCache);
     }
 }
 function expandApplyAtRules(context) {
     return (root)=>{
-        processApply(root, context);
+        // Build a cache of the user's CSS so we can use it to resolve classes used by @apply
+        let localCache = lazyCache(()=>buildLocalApplyCache(root, context)
+        );
+        processApply(root, context, localCache);
     };
 }

package/lib/lib/expandTailwindAtRules.js

@@ -191,19 +191,25 @@ function expandTailwindAtRules(context) {
             layerNodes.base.before((0, _cloneNodes).default([
                 ...baseNodes,
                 ...defaultNodes
-            ], layerNodes.base.source));
+            ], layerNodes.base.source, {
+                layer: 'base'
+            }));
             layerNodes.base.remove();
         }
         if (layerNodes.components) {
             layerNodes.components.before((0, _cloneNodes).default([
                 ...componentNodes
-            ], layerNodes.components.source));
+            ], layerNodes.components.source, {
+                layer: 'components'
+            }));
             layerNodes.components.remove();
         }
         if (layerNodes.utilities) {
             layerNodes.utilities.before((0, _cloneNodes).default([
                 ...utilityNodes
-            ], layerNodes.utilities.source));
+            ], layerNodes.utilities.source, {
+                layer: 'utilities'
+            }));
             layerNodes.utilities.remove();
         }
         // We do post-filtering to not alter the emitted order of the variants
@@ -219,10 +225,14 @@ function expandTailwindAtRules(context) {
             return true;
         });
         if (layerNodes.variants) {
-            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source));
+            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source, {
+                layer: 'variants'
+            }));
             layerNodes.variants.remove();
         } else if (variantNodes.length > 0) {
-            root.append((0, _cloneNodes).default(variantNodes, root.source));
+            root.append((0, _cloneNodes).default(variantNodes, root.source, {
+                layer: 'variants'
+            }));
         }
         // If we've got a utility layer and no utilities are generated there's likely something wrong
         const hasUtilityVariants = variantNodes.some((node)=>{

package/lib/lib/resolveDefaultsAtRules.js

@@ -115,7 +115,9 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
                     continue;
                 }
                 for (let [, selectors] of selectorGroups){
-                    let universalRule = _postcss.default.rule();
+                    let universalRule = _postcss.default.rule({
+                        source: universal.source
+                    });
                     universalRule.selectors = [
                         ...selectors
                     ];
@@ -124,7 +126,9 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
                     universal.before(universalRule);
                 }
             } else {
-                let universalRule = _postcss.default.rule();
+                let universalRule = _postcss.default.rule({
+                    source: universal.source
+                });
                 universalRule.selectors = [
                     '*',
                     '::before',

package/lib/lib/setupContextUtils.js

@@ -245,21 +245,6 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
             // Preserved for backwards compatibility but not used in v3.0+
             return [];
         },
-        addUserCss (userCss) {
-            for (let [identifier, rule] of withIdentifiers(userCss)){
-                let offset = offsets.user++;
-                if (!context.candidateRuleMap.has(identifier)) {
-                    context.candidateRuleMap.set(identifier, []);
-                }
-                context.candidateRuleMap.get(identifier).push([
-                    {
-                        sort: offset,
-                        layer: 'user'
-                    },
-                    rule
-                ]);
-            }
-        },
         addBase (base) {
             for (let [identifier, rule] of withIdentifiers(base)){
                 let prefixedIdentifier = prefixIdentifier(identifier, {});
@@ -533,16 +518,6 @@ function collectLayerPlugins(root) {
             layerRule.remove();
         }
     });
-    root.walkRules((rule)=>{
-        // At this point it is safe to include all the left-over css from the
-        // user's css file. This is because the `@tailwind` and `@layer` directives
-        // will already be handled and will be removed from the css tree.
-        layerPlugins.push(function({ addUserCss  }) {
-            addUserCss(rule, {
-                respectPrefix: false
-            });
-        });
-    });
     return layerPlugins;
 }
 function resolvePlugins(context, root) {

package/lib/lib/setupTrackingContext.js

@@ -119,7 +119,7 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     return changedFiles;
 }
 function setupTrackingContext(configOrPath) {
-    return ({ tailwindDirectives , registerDependency , applyDirectives  })=>{
+    return ({ tailwindDirectives , registerDependency  })=>{
         return (root, result)=>{
             let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath);
             let contextDependencies = new Set(configDependencies);
@@ -129,7 +129,7 @@ function setupTrackingContext(configOrPath) {
             // being part of this trigger too, but it's tough because it's impossible
             // for a layer in one file to end up in the actual @tailwind rule in
             // another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+            if (tailwindDirectives.size > 0) {
                 // Add current css file as a context dependencies.
                 contextDependencies.add(result.opts.from);
                 // Add all css @import dependencies as context dependencies.
@@ -146,7 +146,7 @@ function setupTrackingContext(configOrPath) {
             // We may want to think about `@layer` being part of this trigger too, but it's tough
             // because it's impossible for a layer in one file to end up in the actual @tailwind rule
             // in another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+            if (tailwindDirectives.size > 0) {
                 let fileModifiedMap = (0, _setupContextUtils).getFileModifiedMap(context);
                 // Add template paths as postcss dependencies.
                 for (let fileOrGlob of candidateFiles){

package/lib/util/cloneNodes.js

@@ -3,11 +3,22 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = cloneNodes;
-function cloneNodes(nodes, source) {
+function cloneNodes(nodes, source = undefined, raws = undefined) {
     return nodes.map((node)=>{
         let cloned = node.clone();
         if (source !== undefined) {
             cloned.source = source;
+            if ('walk' in cloned) {
+                cloned.walk((child)=>{
+                    child.source = source;
+                });
+            }
+        }
+        if (raws !== undefined) {
+            cloned.raws.tailwind = {
+                ...cloned.raws.tailwind,
+                ...raws
+            };
         }
         return cloned;
     });

package/lib/util/log.js

@@ -4,27 +4,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.dim = dim;
 exports.default = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
+var _picocolors = _interopRequireDefault(require("picocolors"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 let alreadyShown = new Set();
-function log(chalk, messages, key) {
+function log(type, messages, key) {
     if (process.env.JEST_WORKER_ID !== undefined) return;
     if (key && alreadyShown.has(key)) return;
     if (key) alreadyShown.add(key);
     console.warn('');
-    messages.forEach((message)=>console.warn(chalk, '-', message)
+    messages.forEach((message)=>console.warn(type, '-', message)
     );
 }
 function dim(input) {
-    return _chalk.default.dim(input);
+    return _picocolors.default.dim(input);
 }
 var _default = {
     info (key, messages) {
-        log(_chalk.default.bold.cyan('info'), ...Array.isArray(key) ? [
+        log(_picocolors.default.bold(_picocolors.default.cyan('info')), ...Array.isArray(key) ? [
             key
         ] : [
             messages,
@@ -32,7 +32,7 @@ var _default = {
         ]);
     },
     warn (key, messages) {
-        log(_chalk.default.bold.yellow('warn'), ...Array.isArray(key) ? [
+        log(_picocolors.default.bold(_picocolors.default.yellow('warn')), ...Array.isArray(key) ? [
             key
         ] : [
             messages,
@@ -40,7 +40,7 @@ var _default = {
         ]);
     },
     risk (key, messages) {
-        log(_chalk.default.bold.magenta('risk'), ...Array.isArray(key) ? [
+        log(_picocolors.default.bold(_picocolors.default.magenta('risk')), ...Array.isArray(key) ? [
             key
         ] : [
             messages,

package/lib/util/parseBoxShadowValue.js

@@ -11,13 +11,53 @@ let KEYWORDS = new Set([
     'revert',
     'unset'
 ]);
-let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
-;
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 ;
 let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g;
+let SPECIALS = /[(),]/g;
+/**
+ * This splits a string on top-level commas.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren vs comma
+ * placement. Before we'd only exclude commas from the inner-most nested
+ * set of parens rather than any commas that were not contained in parens
+ * at all which is the intended behavior here.
+ *
+ * Expected behavior:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ */ function* splitByTopLevelCommas(input) {
+    SPECIALS.lastIndex = -1;
+    let depth = 0;
+    let lastIndex = 0;
+    let found = false;
+    // Find all parens & commas
+    // And only split on commas if they're top-level
+    for (let match of input.matchAll(SPECIALS)){
+        if (match[0] === '(') depth++;
+        if (match[0] === ')') depth--;
+        if (match[0] === ',' && depth === 0) {
+            found = true;
+            yield input.substring(lastIndex, match.index);
+            lastIndex = match.index + match[0].length;
+        }
+    }
+    // Provide the last segment of the string if available
+    // Otherwise the whole string since no commas were found
+    // This mirrors the behavior of string.split()
+    if (found) {
+        yield input.substring(lastIndex);
+    } else {
+        yield input;
+    }
+}
 function parseBoxShadowValue(input) {
-    let shadows = input.split(COMMA);
+    let shadows = Array.from(splitByTopLevelCommas(input));
     return shadows.map((shadow)=>{
         let value = shadow.trim();
         let result = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.d72b277",
+  "version": "0.0.0-insiders.d9bc25d",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -52,7 +52,8 @@
     "jest-diff": "^27.5.1",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.7",
-    "rimraf": "^3.0.0"
+    "rimraf": "^3.0.0",
+    "source-map-js": "^1.0.2"
   },
   "peerDependencies": {
     "autoprefixer": "^10.0.2",
@@ -60,7 +61,6 @@
   },
   "dependencies": {
     "arg": "^5.0.1",
-    "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
     "color-name": "^1.1.4",
     "cosmiconfig": "^7.0.1",
@@ -71,7 +71,8 @@
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
-    "object-hash": "^2.2.0",
+    "object-hash": "^3.0.0",
+    "picocolors": "^1.0.0",
     "postcss": "^8.4.6",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.3",

package/src/featureFlags.js

@@ -1,4 +1,4 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 import log from './util/log'
 
 let defaults = {
@@ -41,7 +41,7 @@ export function issueFlagNotices(config) {
 
   if (experimentalFlagsEnabled(config).length > 0) {
     let changes = experimentalFlagsEnabled(config)
-      .map((s) => chalk.yellow(s))
+      .map((s) => colors.yellow(s))
       .join(', ')
 
     log.warn('experimental-flags-enabled', [

package/src/lib/expandApplyAtRules.js

@@ -5,6 +5,8 @@ import { resolveMatches } from './generateRules'
 import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
+/** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
+
 function extractClasses(node) {
   let classes = new Set()
   let container = postcss.root({ nodes: [node.clone()] })
@@ -35,6 +37,131 @@ function prefix(context, selector) {
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
 }
 
+function* pathToRoot(node) {
+  yield node
+  while (node.parent) {
+    yield node.parent
+    node = node.parent
+  }
+}
+
+/**
+ * Only clone the node itself and not its children
+ *
+ * @param {*} node
+ * @param {*} overrides
+ * @returns
+ */
+function shallowClone(node, overrides = {}) {
+  let children = node.nodes
+  node.nodes = []
+
+  let tmp = node.clone(overrides)
+
+  node.nodes = children
+
+  return tmp
+}
+
+/**
+ * Clone just the nodes all the way to the top that are required to represent
+ * this singular rule in the tree.
+ *
+ * For example, if we have CSS like this:
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (display: grid) {
+ *     .foo {
+ *       display: grid;
+ *       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ *     }
+ *   }
+ *
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ *
+ *   .baz {
+ *     color: orange;
+ *   }
+ * }
+ * ```
+ *
+ * And we're cloning `.bar` it'll return a cloned version of what's required for just that single node:
+ *
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @param {import('postcss').Node} node
+ */
+function nestedClone(node) {
+  for (let parent of pathToRoot(node)) {
+    if (node === parent) {
+      continue
+    }
+
+    if (parent.type === 'root') {
+      break
+    }
+
+    node = shallowClone(parent, {
+      nodes: [node],
+    })
+  }
+
+  return node
+}
+
+/**
+ * @param {import('postcss').Root} root
+ */
+function buildLocalApplyCache(root, context) {
+  /** @type {ApplyCache} */
+  let cache = new Map()
+
+  let highestOffset = context.layerOrder.user >> 4n
+
+  root.walkRules((rule, idx) => {
+    // Ignore rules generated by Tailwind
+    for (let node of pathToRoot(rule)) {
+      if (node.raws.tailwind?.layer !== undefined) {
+        return
+      }
+    }
+
+    // Clone what's required to represent this singular rule in the tree
+    let container = nestedClone(rule)
+
+    for (let className of extractClasses(rule)) {
+      let list = cache.get(className) || []
+      cache.set(className, list)
+
+      list.push([
+        {
+          layer: 'user',
+          sort: BigInt(idx) + highestOffset,
+          important: false,
+        },
+        container,
+      ])
+    }
+  })
+
+  return cache
+}
+
+/**
+ * @returns {ApplyCache}
+ */
 function buildApplyCache(applyCandidates, context) {
   for (let candidate of applyCandidates) {
     if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
@@ -62,6 +189,43 @@ function buildApplyCache(applyCandidates, context) {
   return context.applyClassCache
 }
 
+/**
+ * Build a cache only when it's first used
+ *
+ * @param {() => ApplyCache} buildCacheFn
+ * @returns {ApplyCache}
+ */
+function lazyCache(buildCacheFn) {
+  let cache = null
+
+  return {
+    get: (name) => {
+      cache = cache || buildCacheFn()
+
+      return cache.get(name)
+    },
+    has: (name) => {
+      cache = cache || buildCacheFn()
+
+      return cache.has(name)
+    },
+  }
+}
+
+/**
+ * Take a series of multiple caches and merge
+ * them so they act like one large cache
+ *
+ * @param {ApplyCache[]} caches
+ * @returns {ApplyCache}
+ */
+function combineCaches(caches) {
+  return {
+    get: (name) => caches.flatMap((cache) => cache.get(name) || []),
+    has: (name) => caches.some((cache) => cache.has(name)),
+  }
+}
+
 function extractApplyCandidates(params) {
   let candidates = params.split(/[\s\t\n]+/g)
 
@@ -72,7 +236,7 @@ function extractApplyCandidates(params) {
   return [candidates, false]
 }
 
-function processApply(root, context) {
+function processApply(root, context, localCache) {
   let applyCandidates = new Set()
 
   // Collect all @apply rules and candidates
@@ -90,7 +254,7 @@ function processApply(root, context) {
   // Start the @apply process if we have rules with @apply in them
   if (applies.length > 0) {
     // Fill up some caches!
-    let applyClassCache = buildApplyCache(applyCandidates, context)
+    let applyClassCache = combineCaches([localCache, buildApplyCache(applyCandidates, context)])
 
     /**
      * When we have an apply like this:
@@ -140,7 +304,7 @@ function processApply(root, context) {
     for (let apply of applies) {
       let candidates = perParentApplies.get(apply.parent) || []
 
-      perParentApplies.set(apply.parent, candidates)
+      perParentApplies.set(apply.parent, [candidates, apply.source])
 
       let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
@@ -178,7 +342,7 @@ function processApply(root, context) {
       }
     }
 
-    for (const [parent, candidates] of perParentApplies) {
+    for (const [parent, [candidates, atApplySource]] of perParentApplies) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
@@ -220,6 +384,12 @@ function processApply(root, context) {
           }
 
           let root = postcss.root({ nodes: [node.clone()] })
+
+          // Make sure every node in the entire tree points back at the @apply rule that generated it
+          root.walk((node) => {
+            node.source = atApplySource
+          })
+
           let canRewriteSelector =
             node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')
 
@@ -296,12 +466,15 @@ function processApply(root, context) {
     }
 
     // Do it again, in case we have other `@apply` rules
-    processApply(root, context)
+    processApply(root, context, localCache)
   }
 }
 
 export default function expandApplyAtRules(context) {
   return (root) => {
-    processApply(root, context)
+    // Build a cache of the user's CSS so we can use it to resolve classes used by @apply
+    let localCache = lazyCache(() => buildLocalApplyCache(root, context))
+
+    processApply(root, context, localCache)
   }
 }

package/src/lib/expandTailwindAtRules.js

@@ -204,17 +204,29 @@ export default function expandTailwindAtRules(context) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source))
+      layerNodes.base.before(
+        cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source, {
+          layer: 'base',
+        })
+      )
       layerNodes.base.remove()
     }
 
     if (layerNodes.components) {
-      layerNodes.components.before(cloneNodes([...componentNodes], layerNodes.components.source))
+      layerNodes.components.before(
+        cloneNodes([...componentNodes], layerNodes.components.source, {
+          layer: 'components',
+        })
+      )
       layerNodes.components.remove()
     }
 
     if (layerNodes.utilities) {
-      layerNodes.utilities.before(cloneNodes([...utilityNodes], layerNodes.utilities.source))
+      layerNodes.utilities.before(
+        cloneNodes([...utilityNodes], layerNodes.utilities.source, {
+          layer: 'utilities',
+        })
+      )
       layerNodes.utilities.remove()
     }
 
@@ -234,10 +246,18 @@ export default function expandTailwindAtRules(context) {
     })
 
     if (layerNodes.variants) {
-      layerNodes.variants.before(cloneNodes(variantNodes, layerNodes.variants.source))
+      layerNodes.variants.before(
+        cloneNodes(variantNodes, layerNodes.variants.source, {
+          layer: 'variants',
+        })
+      )
       layerNodes.variants.remove()
     } else if (variantNodes.length > 0) {
-      root.append(cloneNodes(variantNodes, root.source))
+      root.append(
+        cloneNodes(variantNodes, root.source, {
+          layer: 'variants',
+        })
+      )
     }
 
     // If we've got a utility layer and no utilities are generated there's likely something wrong

package/src/lib/resolveDefaultsAtRules.js

@@ -120,7 +120,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
         }
 
         for (let [, selectors] of selectorGroups) {
-          let universalRule = postcss.rule()
+          let universalRule = postcss.rule({
+            source: universal.source,
+          })
 
           universalRule.selectors = [...selectors]
 
@@ -128,7 +130,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
           universal.before(universalRule)
         }
       } else {
-        let universalRule = postcss.rule()
+        let universalRule = postcss.rule({
+          source: universal.source,
+        })
 
         universalRule.selectors = ['*', '::before', '::after']
 

package/src/lib/setupContextUtils.js

@@ -230,17 +230,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       // Preserved for backwards compatibility but not used in v3.0+
       return []
     },
-    addUserCss(userCss) {
-      for (let [identifier, rule] of withIdentifiers(userCss)) {
-        let offset = offsets.user++
-
-        if (!context.candidateRuleMap.has(identifier)) {
-          context.candidateRuleMap.set(identifier, [])
-        }
-
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'user' }, rule])
-      }
-    },
     addBase(base) {
       for (let [identifier, rule] of withIdentifiers(base)) {
         let prefixedIdentifier = prefixIdentifier(identifier, {})
@@ -521,15 +510,6 @@ function collectLayerPlugins(root) {
     }
   })
 
-  root.walkRules((rule) => {
-    // At this point it is safe to include all the left-over css from the
-    // user's css file. This is because the `@tailwind` and `@layer` directives
-    // will already be handled and will be removed from the css tree.
-    layerPlugins.push(function ({ addUserCss }) {
-      addUserCss(rule, { respectPrefix: false })
-    })
-  })
-
   return layerPlugins
 }
 

package/src/lib/setupTrackingContext.js

@@ -112,7 +112,7 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
 // source path), or set up a new one (including setting up watchers and registering
 // plugins) then return it
 export default function setupTrackingContext(configOrPath) {
-  return ({ tailwindDirectives, registerDependency, applyDirectives }) => {
+  return ({ tailwindDirectives, registerDependency }) => {
     return (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
         getTailwindConfig(configOrPath)
@@ -125,7 +125,7 @@ export default function setupTrackingContext(configOrPath) {
       // being part of this trigger too, but it's tough because it's impossible
       // for a layer in one file to end up in the actual @tailwind rule in
       // another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+      if (tailwindDirectives.size > 0) {
         // Add current css file as a context dependencies.
         contextDependencies.add(result.opts.from)
 
@@ -153,7 +153,7 @@ export default function setupTrackingContext(configOrPath) {
       // We may want to think about `@layer` being part of this trigger too, but it's tough
       // because it's impossible for a layer in one file to end up in the actual @tailwind rule
       // in another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+      if (tailwindDirectives.size > 0) {
         let fileModifiedMap = getFileModifiedMap(context)
 
         // Add template paths as postcss dependencies.

package/src/util/cloneNodes.js

@@ -1,9 +1,22 @@
-export default function cloneNodes(nodes, source) {
+export default function cloneNodes(nodes, source = undefined, raws = undefined) {
   return nodes.map((node) => {
     let cloned = node.clone()
 
     if (source !== undefined) {
       cloned.source = source
+
+      if ('walk' in cloned) {
+        cloned.walk((child) => {
+          child.source = source
+        })
+      }
+    }
+
+    if (raws !== undefined) {
+      cloned.raws.tailwind = {
+        ...cloned.raws.tailwind,
+        ...raws,
+      }
     }
 
     return cloned

package/src/util/log.js

@@ -1,29 +1,29 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 
 let alreadyShown = new Set()
 
-function log(chalk, messages, key) {
+function log(type, messages, key) {
   if (process.env.JEST_WORKER_ID !== undefined) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)
 
   console.warn('')
-  messages.forEach((message) => console.warn(chalk, '-', message))
+  messages.forEach((message) => console.warn(type, '-', message))
 }
 
 export function dim(input) {
-  return chalk.dim(input)
+  return colors.dim(input)
 }
 
 export default {
   info(key, messages) {
-    log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   warn(key, messages) {
-    log(chalk.bold.yellow('warn'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.yellow('warn')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   risk(key, messages) {
-    log(chalk.bold.magenta('risk'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.magenta('risk')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
 }

package/src/util/parseBoxShadowValue.js

@@ -1,10 +1,58 @@
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
+let SPECIALS = /[(),]/g
+
+/**
+ * This splits a string on top-level commas.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren vs comma
+ * placement. Before we'd only exclude commas from the inner-most nested
+ * set of parens rather than any commas that were not contained in parens
+ * at all which is the intended behavior here.
+ *
+ * Expected behavior:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ */
+function* splitByTopLevelCommas(input) {
+  SPECIALS.lastIndex = -1
+
+  let depth = 0
+  let lastIndex = 0
+  let found = false
+
+  // Find all parens & commas
+  // And only split on commas if they're top-level
+  for (let match of input.matchAll(SPECIALS)) {
+    if (match[0] === '(') depth++
+    if (match[0] === ')') depth--
+    if (match[0] === ',' && depth === 0) {
+      found = true
+
+      yield input.substring(lastIndex, match.index)
+      lastIndex = match.index + match[0].length
+    }
+  }
+
+  // Provide the last segment of the string if available
+  // Otherwise the whole string since no commas were found
+  // This mirrors the behavior of string.split()
+  if (found) {
+    yield input.substring(lastIndex)
+  } else {
+    yield input
+  }
+}
+
 export function parseBoxShadowValue(input) {
-  let shadows = input.split(COMMA)
+  let shadows = Array.from(splitByTopLevelCommas(input))
   return shadows.map((shadow) => {
     let value = shadow.trim()
     let result = { raw: value }