tailwindcss 0.0.0-insiders.bab689c → 0.0.0-insiders.bbafc8e

package/CHANGELOG.md

@@ -9,7 +9,82 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- 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))
+- 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))
+- Invalidate context when main CSS changes ([#7626](https://github.com/tailwindlabs/tailwindcss/pull/7626))
+- Only add `!` to selector class matching template candidate when using important modifier with mutli-class selectors ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664))
+
+### Changed
+
+- Replace `chalk` with `picocolors` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6039))
+
+### Added
+
+- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
+- Add `rgb` and `hsl` color helpers for CSS variables ([#7665](https://github.com/tailwindlabs/tailwindcss/pull/7665))
+- Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
+
+## [3.0.23] - 2022-02-16
+
+### Fixed
+
+- Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
+- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
+- Don't duplicate layer output when scanning content with variants + wildcards ([#7478](https://github.com/tailwindlabs/tailwindcss/pull/7478))
+- Implement `getClassOrder` instead of `sortClassList` ([#7459](https://github.com/tailwindlabs/tailwindcss/pull/7459))
+
+## [3.0.22] - 2022-02-11
+
+### Fixed
+
+- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
+
+## [3.0.21] - 2022-02-10
+
+### Fixed
+
+- Move prettier plugin to dev dependencies ([#7418](https://github.com/tailwindlabs/tailwindcss/pull/7418))
+
+## [3.0.20] - 2022-02-10
+
+### Added
+
+- Expose `context.sortClassList(classes)` ([#7412](https://github.com/tailwindlabs/tailwindcss/pull/7412))
+
+## [3.0.19] - 2022-02-07
+
+### Fixed
+
+- Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
+- Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
+- Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
+- Use less hacky fix for URLs detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
+- Correctly generate negative utilities when dash is before the prefix ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+- Detect prefixed negative utilities in the safelist ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+
+## [3.0.18] - 2022-01-28
+
+### Fixed
+
+- Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))
+- Quick fix for incorrect arbitrary properties when using URLs ([#7252](https://github.com/tailwindlabs/tailwindcss/pull/7252))
+
+## [3.0.17] - 2022-01-26
+
+### Fixed
+
+- Remove false positive warning in CLI when using the `--content` option ([#7220](https://github.com/tailwindlabs/tailwindcss/pull/7220))
+
+## [3.0.16] - 2022-01-24
+
+### Fixed
+
 - Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting) ([#7080](https://github.com/tailwindlabs/tailwindcss/pull/7080))
+- Improve various warnings ([#7118](https://github.com/tailwindlabs/tailwindcss/pull/7118))
+- Fix grammatical mistake ([cca5a38](https://github.com/tailwindlabs/tailwindcss/commit/cca5a3804e1d3ee0214491921e1aec35bf62a813))
 
 ## [3.0.15] - 2022-01-15
 
@@ -1817,7 +1892,15 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...HEAD
+[3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23
+[3.0.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...v3.0.22
+[3.0.21]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...v3.0.21
+[3.0.20]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...v3.0.20
+[3.0.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...v3.0.19
+[3.0.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...v3.0.18
+[3.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.16...v3.0.17
+[3.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...v3.0.16
 [3.0.15]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.14...v3.0.15
 [3.0.14]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.13...v3.0.14
 [3.0.13]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.12...v3.0.13

package/LICENSE

@@ -1,7 +1,6 @@
 MIT License
 
-Copyright (c) Adam Wathan <adam.wathan@gmail.com>
-Copyright (c) Jonathan Reinink <jonathan@reinink.ca>
+Copyright (c) Tailwind Labs, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/lib/cli.js

@@ -400,7 +400,6 @@ async function build() {
     }
     function resolveConfig() {
         let config = configPath ? require(configPath) : {};
-        let resolvedConfig = (0, _resolveConfig).default(config);
         if (args['--purge']) {
             _log.default.warn('purge-flag-deprecated', [
                 'The `--purge` flag has been deprecated.',
@@ -411,9 +410,16 @@ async function build() {
             }
         }
         if (args['--content']) {
-            resolvedConfig.content.files = args['--content'].split(/(?<!{[^}]+),/);
+            let files = args['--content'].split(/(?<!{[^}]+),/);
+            let resolvedConfig = (0, _resolveConfig).default(config, {
+                content: {
+                    files
+                }
+            });
+            resolvedConfig.content.files = files;
+            return resolvedConfig;
         }
-        return resolvedConfig;
+        return (0, _resolveConfig).default(config);
     }
     function extractFileGlobs(config) {
         return config.content.files.filter((file)=>{

package/lib/corePlugins.js

@@ -116,7 +116,28 @@ let variantPlugins = {
             'last-of-type',
             'only-of-type',
             // State
-            'visited',
+            [
+                'visited',
+                ({ container  })=>{
+                    let toRemove = [
+                        '--tw-text-opacity',
+                        '--tw-border-opacity',
+                        '--tw-bg-opacity'
+                    ];
+                    container.walkDecls((decl)=>{
+                        if (toRemove.includes(decl.prop)) {
+                            decl.remove();
+                            return;
+                        }
+                        for (const varName of toRemove){
+                            if (decl.value.includes(`/ var(${varName})`)) {
+                                decl.value = decl.value.replace(`/ var(${varName})`, '');
+                            }
+                        }
+                    });
+                    return ':visited';
+                }, 
+            ],
             'target',
             [
                 'open',
@@ -149,13 +170,22 @@ let variantPlugins = {
             ]
         );
         for (let [variantName, state] of pseudoVariants){
-            addVariant(variantName, `&${state}`);
+            addVariant(variantName, (ctx)=>{
+                let result = typeof state === 'function' ? state(ctx) : state;
+                return `&${result}`;
+            });
         }
         for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
+            addVariant(`group-${variantName1}`, (ctx)=>{
+                let result = typeof state1 === 'function' ? state1(ctx) : state1;
+                return `:merge(.group)${result} &`;
+            });
         }
         for (let [variantName2, state2] of pseudoVariants){
-            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
+            addVariant(`peer-${variantName2}`, (ctx)=>{
+                let result = typeof state2 === 'function' ? state2(ctx) : state2;
+                return `:merge(.peer)${result} ~ &`;
+            });
         }
     },
     directionVariants: ({ addVariant  })=>{
@@ -3118,8 +3148,9 @@ let corePlugins = {
         });
     },
     ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
+        var ref;
         let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
-        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue((ref = theme('ringColor')) === null || ref === void 0 ? void 0 : ref.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
         addDefaults('ring-width', {
             '--tw-ring-inset': ' ',
             '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
@@ -3154,9 +3185,14 @@ let corePlugins = {
             }
         });
     },
-    ringColor: ({ matchUtilities , theme  })=>{
+    ringColor: ({ matchUtilities , theme , corePlugins: corePlugins6  })=>{
         matchUtilities({
             ring: (value)=>{
+                if (!corePlugins6('ringOpacity')) {
+                    return {
+                        '--tw-ring-color': (0, _toColorValue).default(value)
+                    };
+                }
                 return (0, _withAlphaVariable).default({
                     color: value,
                     property: '--tw-ring-color',

package/lib/css/preflight.css

@@ -9,7 +9,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 ::before,

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/index.js

@@ -17,7 +17,18 @@ module.exports = function tailwindcss(configOrPath) {
                 return root;
             },
             function(root, result) {
-                (0, _processTailwindFeatures).default((0, _setupTrackingContext).default(configOrPath))(root, result);
+                let context = (0, _setupTrackingContext).default(configOrPath);
+                if (root.type === 'document') {
+                    let roots = root.nodes.filter((node)=>node.type === 'root'
+                    );
+                    for (const root1 of roots){
+                        if (root1.type === 'root') {
+                            (0, _processTailwindFeatures).default(context)(root1, result);
+                        }
+                    }
+                    return;
+                }
+                (0, _processTailwindFeatures).default(context)(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd('JIT TOTAL');

package/lib/lib/cacheInvalidation.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.hasContentChanged = hasContentChanged;
+var _crypto = _interopRequireDefault(require("crypto"));
+var sharedState = _interopRequireWildcard(require("./sharedState"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */ function getHash(str) {
+    try {
+        return _crypto.default.createHash('md5').update(str, 'utf-8').digest('binary');
+    } catch (err) {
+        return '';
+    }
+}
+function hasContentChanged(sourcePath, root) {
+    let css = root.toString();
+    // We only care about files with @tailwind directives
+    // Other files use an existing context
+    if (!css.includes('@tailwind')) {
+        return false;
+    }
+    let existingHash = sharedState.sourceHashMap.get(sourcePath);
+    let rootHash = getHash(css);
+    let didChange = existingHash !== rootHash;
+    sharedState.sourceHashMap.set(sourcePath, rootHash);
+    return didChange;
+}

package/lib/lib/collapseAdjacentRules.js

@@ -14,7 +14,7 @@ let comparisonMap = {
 };
 let types = new Set(Object.keys(comparisonMap));
 function collapseAdjacentRules() {
-    return (root)=>{
+    function collapseRulesIn(root) {
         let currentRule = null;
         root.each((node)=>{
             if (!types.has(node.type)) {
@@ -37,5 +37,18 @@ function collapseAdjacentRules() {
                 currentRule = node;
             }
         });
+        // After we've collapsed adjacent rules & at-rules, we need to collapse
+        // adjacent rules & at-rules that are children of at-rules.
+        // We do not care about nesting rules because Tailwind CSS
+        // explicitly does not handle rule nesting on its own as
+        // the user is expected to use a nesting plugin
+        root.each((node)=>{
+            if (node.type === 'atrule') {
+                collapseRulesIn(node);
+            }
+        });
+    }
+    return (root)=>{
+        collapseRulesIn(root);
     };
 }

package/lib/lib/defaultExtractor.js

@@ -13,6 +13,8 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,

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') {
@@ -140,11 +286,14 @@ function processApply(root, context) {
                 throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
             }
             for (let applyCandidate of applyCandidates){
+                if ([
+                    prefix(context, 'group'),
+                    prefix(context, 'peer')
+                ].includes(applyCandidate)) {
+                    // TODO: Link to specific documentation page with error code.
+                    throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
+                }
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix(context, 'group')) {
-                        // TODO: Link to specific documentation page with error code.
-                        throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
-                    }
                     throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
                 }
                 let rules = applyClassCache.get(applyCandidate);
@@ -155,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.
@@ -187,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:
@@ -267,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);
     };
 }