tailwindcss 0.0.0-insiders.db475be → 0.0.0-insiders.dbb5b1d

package/CHANGELOG.md

@@ -9,14 +9,44 @@ 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))
+- Correctly parse and prefix animation names with dots ([#7163](https://github.com/tailwindlabs/tailwindcss/pull/7163))
+- Fix extraction from template literal/function with array ([#7481](https://github.com/tailwindlabs/tailwindcss/pull/7481))
+
+### Changed
+
+- Replace `chalk` with `picocolors` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6039))
+- Replace `cosmiconfig` with `lilconfig` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6038))
+
+### 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))
+- Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
+- Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
+- Add `--poll` option to the CLI ([#7725](https://github.com/tailwindlabs/tailwindcss/pull/7725))
+
+## [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))
+- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
 
 ## [3.0.21] - 2022-02-10
 
@@ -1868,7 +1898,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...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

package/lib/cli.js

@@ -6,7 +6,7 @@ var _path = _interopRequireDefault(require("path"));
 var _arg = _interopRequireDefault(require("arg"));
 var _fs = _interopRequireDefault(require("fs"));
 var _postcssLoadConfig = _interopRequireDefault(require("postcss-load-config"));
-var _cosmiconfig = require("cosmiconfig");
+var _lilconfig = require("lilconfig");
 var _plugins // Little bit scary, looking at private/internal API
  = _interopRequireDefault(require("postcss-load-config/src/plugins"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
@@ -159,6 +159,10 @@ let commands = {
                 type: Boolean,
                 description: 'Watch for changes and rebuild as needed'
             },
+            '--poll': {
+                type: Boolean,
+                description: 'Use polling instead of filesystem events when watching'
+            },
             '--content': {
                 type: String,
                 description: 'Content paths to use for removing unused classes'
@@ -187,7 +191,8 @@ let commands = {
             '-i': '--input',
             '-o': '--output',
             '-m': '--minify',
-            '-w': '--watch'
+            '-w': '--watch',
+            '-p': '--poll'
         }
     }
 };
@@ -348,7 +353,12 @@ async function build() {
     let input = args['--input'];
     let output = args['--output'];
     let shouldWatch = args['--watch'];
+    let shouldPoll = args['--poll'];
+    let shouldCoalesceWriteEvents = shouldPoll || process.platform === 'win32';
     let includePostCss = args['--postcss'];
+    // Polling interval in milliseconds
+    // Used only when polling or coalescing add/change events on Windows
+    let pollInterval = 10;
     // TODO: Deprecate this in future versions
     if (!input && args['_'][1]) {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
@@ -368,8 +378,8 @@ async function build() {
         let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined;
         let { plugins: configPlugins  } = customPostCssPath ? await (async ()=>{
             let file = _path.default.resolve(customPostCssPath);
-            // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
-            let { config ={}  } = await (0, _cosmiconfig).cosmiconfig('postcss').load(file);
+            // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.1.0/src/index.js
+            let { config ={}  } = await (0, _lilconfig).lilconfig('postcss').load(file);
             if (typeof config === 'function') {
                 config = config();
             } else {
@@ -684,10 +694,12 @@ async function build() {
             ...contextDependencies,
             ...extractFileGlobs(config1)
         ], {
+            usePolling: shouldPoll,
+            interval: shouldPoll ? pollInterval : undefined,
             ignoreInitial: true,
-            awaitWriteFinish: process.platform === 'win32' ? {
+            awaitWriteFinish: shouldCoalesceWriteEvents ? {
                 stabilityThreshold: 50,
-                pollInterval: 10
+                pollInterval: pollInterval
             } : false
         });
         let chain = Promise.resolve();

package/lib/corePluginList.js

@@ -38,6 +38,7 @@ var _default = [
     "flexBasis",
     "tableLayout",
     "borderCollapse",
+    "borderSpacing",
     "transformOrigin",
     "translate",
     "rotate",

package/lib/corePlugins.js

@@ -8,6 +8,7 @@ var path = _interopRequireWildcard(require("path"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _createUtilityPlugin = _interopRequireDefault(require("./util/createUtilityPlugin"));
 var _buildMediaQuery = _interopRequireDefault(require("./util/buildMediaQuery"));
+var _escapeClassName = _interopRequireDefault(require("./util/escapeClassName"));
 var _parseAnimationValue = _interopRequireDefault(require("./util/parseAnimationValue"));
 var _flattenColorPalette = _interopRequireDefault(require("./util/flattenColorPalette"));
 var _withAlphaVariable = _interopRequireWildcard(require("./util/withAlphaVariable"));
@@ -209,7 +210,7 @@ let variantPlugins = {
         addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');
     },
     darkVariants: ({ config , addVariant  })=>{
-        let mode = config('darkMode', 'media');
+        let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'));
         if (mode === false) {
             mode = 'media';
             _log.default.warn('darkmode-false', [
@@ -219,7 +220,7 @@ let variantPlugins = {
             ]);
         }
         if (mode === 'class') {
-            addVariant('dark', '.dark &');
+            addVariant('dark', `${className} &`);
         } else if (mode === 'media') {
             addVariant('dark', '@media (prefers-color-scheme: dark)');
         }
@@ -820,6 +821,38 @@ let corePlugins = {
             }
         });
     },
+    borderSpacing: ({ addDefaults , matchUtilities , theme  })=>{
+        addDefaults('border-spacing', {
+            '--tw-border-spacing-x': 0,
+            '--tw-border-spacing-y': 0
+        });
+        matchUtilities({
+            'border-spacing': (value)=>{
+                return {
+                    '--tw-border-spacing-x': value,
+                    '--tw-border-spacing-y': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            },
+            'border-spacing-x': (value)=>{
+                return {
+                    '--tw-border-spacing-x': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            },
+            'border-spacing-y': (value)=>{
+                return {
+                    '--tw-border-spacing-y': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            }
+        }, {
+            values: theme('borderSpacing')
+        });
+    },
     transformOrigin: (0, _createUtilityPlugin).default('transformOrigin', [
         [
             'origin',
@@ -989,8 +1022,8 @@ let corePlugins = {
             }
         });
     },
-    animation: ({ matchUtilities , theme , prefix  })=>{
-        let prefixName = (name)=>prefix(`.${name}`).slice(1)
+    animation: ({ matchUtilities , theme , config  })=>{
+        let prefixName = (name)=>`${config('prefix')}${(0, _escapeClassName).default(name)}`
         ;
         var ref;
         let keyframes = Object.fromEntries(Object.entries((ref = theme('keyframes')) !== null && ref !== void 0 ? ref : {}).map(([key, value])=>{
@@ -2531,6 +2564,12 @@ let corePlugins = {
             },
             '.text-justify': {
                 'text-align': 'justify'
+            },
+            '.text-start': {
+                'text-align': 'start'
+            },
+            '.text-end': {
+                'text-align': 'end'
             }
         });
     },
@@ -3148,8 +3187,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'),
@@ -3184,9 +3224,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/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

@@ -7,16 +7,16 @@ const PATTERNS = [
     /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
     /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
     /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
-    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
+    /([^${(<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
+    /([^${(<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
     /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
     /([^<>"'`\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]*'\])/.source,
+    /([^${(<>"'`\s]*\["[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\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') {
@@ -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);
     };
 }