tailwindcss 0.0.0-insiders.e2d5f21 → 0.0.0-insiders.e302ef1

package/lib/lib/setupContextUtils.js

@@ -24,6 +24,8 @@ var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
+var _generateRules = require("./generateRules");
+var _cacheInvalidationJs = require("./cacheInvalidation.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -33,13 +35,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        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) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -52,6 +52,10 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function prefix(context, selector) {
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
+}
 function parseVariantFormatString(input) {
     if (input.includes('{')) {
         if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
@@ -76,8 +80,7 @@ function isBalanced(input) {
     }
     return count === 0;
 }
-function insertInto(list, value, { before =[]  } = {
-}) {
+function insertInto(list, value, { before =[]  } = {}) {
     before = [].concat(before);
     if (before.length <= 0) {
         list.push(value);
@@ -112,44 +115,49 @@ function getClasses(selector) {
     });
     return parser.transformSync(selector);
 }
-function extractCandidates(node) {
+function extractCandidates(node, state = {
+    containsNonOnDemandable: false
+}, depth = 0) {
     let classes = [];
+    // Handle normal rules
     if (node.type === 'rule') {
         for (let selector of node.selectors){
             let classCandidates = getClasses(selector);
             // At least one of the selectors contains non-"on-demandable" candidates.
-            if (classCandidates.length === 0) return [];
-            classes = [
-                ...classes,
-                ...classCandidates
-            ];
+            if (classCandidates.length === 0) {
+                state.containsNonOnDemandable = true;
+            }
+            for (let classCandidate of classCandidates){
+                classes.push(classCandidate);
+            }
         }
-        return classes;
-    }
-    if (node.type === 'atrule') {
+    } else if (node.type === 'atrule') {
         node.walkRules((rule)=>{
-            classes = [
-                ...classes,
-                ...rule.selectors.flatMap((selector)=>getClasses(selector)
-                )
-            ];
+            for (let classCandidate of rule.selectors.flatMap((selector)=>getClasses(selector, state, depth + 1)
+            )){
+                classes.push(classCandidate);
+            }
         });
     }
+    if (depth === 0) {
+        return [
+            state.containsNonOnDemandable || classes.length === 0,
+            classes
+        ];
+    }
     return classes;
 }
 function withIdentifiers(styles) {
     return parseStyles(styles).flatMap((node)=>{
         let nodeMap = new Map();
-        let candidates = extractCandidates(node);
-        // If this isn't "on-demandable", assign it a universal candidate.
-        if (candidates.length === 0) {
-            return [
-                [
-                    '*',
-                    node
-                ]
-            ];
+        let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node);
+        // If this isn't "on-demandable", assign it a universal candidate to always include it.
+        if (containsNonOnDemandableSelectors) {
+            candidates.unshift(sharedState.NOT_ON_DEMAND);
         }
+        // However, it could be that it also contains "on-demandable" candidates.
+        // E.g.: `span, .foo {}`, in that case it should still be possible to use
+        // `@apply foo` for example.
         return candidates.map((c)=>{
             if (!nodeMap.has(node)) {
                 nodeMap.set(node, node);
@@ -169,8 +177,8 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         return (0, _prefixSelector).default(tailwindConfig.prefix, selector);
     }
     function prefixIdentifier(identifier, options) {
-        if (identifier === '*') {
-            return '*';
+        if (identifier === sharedState.NOT_ON_DEMAND) {
+            return sharedState.NOT_ON_DEMAND;
         }
         if (!options.respectPrefix) {
             return identifier;
@@ -178,8 +186,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         return context.tailwindConfig.prefix + identifier;
     }
     return {
-        addVariant (variantName, variantFunctions, options = {
-        }) {
+        addVariant (variantName, variantFunctions, options = {}) {
             variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
                 if (typeof variantFunction !== 'string') {
                     // Safelist public API functions
@@ -239,33 +246,38 @@ 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, []);
+        addBase (base) {
+            for (let [identifier, rule] of withIdentifiers(base)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {});
+                let offset = offsets.base++;
+                if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+                    context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
-                context.candidateRuleMap.get(identifier).push([
+                context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
                         sort: offset,
-                        layer: 'user'
+                        layer: 'base'
                     },
                     rule
                 ]);
             }
         },
-        addBase (base) {
-            for (let [identifier, rule] of withIdentifiers(base)){
-                let prefixedIdentifier = prefixIdentifier(identifier, {
-                });
-                let offset = offsets.base++;
+        /**
+     * @param {string} group
+     * @param {Record<string, string | string[]>} declarations
+     */ addDefaults (group, declarations) {
+            const groups = {
+                [`@defaults ${group}`]: declarations
+            };
+            for (let [identifier, rule] of withIdentifiers(groups)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {});
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offset,
-                        layer: 'base'
+                        sort: offsets.base++,
+                        layer: 'defaults'
                     },
                     rule
                 ]);
@@ -276,19 +288,16 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 respectPrefix: true,
                 respectImportant: false
             };
-            options = Object.assign({
-            }, defaultOptions, Array.isArray(options) ? {
-            } : options);
+            options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options);
             for (let [identifier, rule] of withIdentifiers(components)){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
-                let offset = offsets.components++;
                 classList.add(prefixedIdentifier);
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offset,
+                        sort: offsets.components++,
                         layer: 'components',
                         options
                     },
@@ -301,19 +310,16 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 respectPrefix: true,
                 respectImportant: true
             };
-            options = Object.assign({
-            }, defaultOptions, Array.isArray(options) ? {
-            } : options);
+            options = Object.assign({}, defaultOptions, Array.isArray(options) ? {} : options);
             for (let [identifier, rule] of withIdentifiers(utilities)){
                 let prefixedIdentifier = prefixIdentifier(identifier, options);
-                let offset = offsets.utilities++;
                 classList.add(prefixedIdentifier);
                 if (!context.candidateRuleMap.has(prefixedIdentifier)) {
                     context.candidateRuleMap.set(prefixedIdentifier, []);
                 }
                 context.candidateRuleMap.get(prefixedIdentifier).push([
                     {
-                        sort: offset,
+                        sort: offsets.utilities++,
                         layer: 'utilities',
                         options
                     },
@@ -440,11 +446,17 @@ function getFileModifiedMap(context) {
 function trackModified(files, fileModifiedMap) {
     let changed = false;
     for (let file of files){
+        var ref;
         if (!file) continue;
         let parsed = _url.default.parse(file);
         let pathname = parsed.hash ? parsed.href.replace(parsed.hash, '') : parsed.href;
         pathname = parsed.search ? pathname.replace(parsed.search, '') : pathname;
-        let newModified = _fs.default.statSync(decodeURIComponent(pathname)).mtimeMs;
+        let newModified = (ref = _fs.default.statSync(decodeURIComponent(pathname), {
+            throwIfNoEntry: false
+        })) === null || ref === void 0 ? void 0 : ref.mtimeMs;
+        if (!newModified) {
+            continue;
+        }
         if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
             changed = true;
         }
@@ -507,16 +519,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) {
@@ -562,6 +564,7 @@ function registerPlugins(plugins, context) {
     let variantList = [];
     let variantMap = new Map();
     let offsets = {
+        defaults: 0n,
         base: 0n,
         components: 0n,
         utilities: 0n,
@@ -587,6 +590,7 @@ function registerPlugins(plugins, context) {
         )
     )([
         offsets.base,
+        offsets.defaults,
         offsets.components,
         offsets.utilities,
         offsets.user, 
@@ -596,12 +600,13 @@ function registerPlugins(plugins, context) {
     // so arbitrary properties are always sorted at the end.
     context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
     context.layerOrder = {
-        base: 1n << reservedBits << 0n,
-        components: 1n << reservedBits << 1n,
-        utilities: 1n << reservedBits << 2n,
-        user: 1n << reservedBits << 3n
+        defaults: 1n << reservedBits << 0n,
+        base: 1n << reservedBits << 1n,
+        components: 1n << reservedBits << 2n,
+        utilities: 1n << reservedBits << 3n,
+        user: 1n << reservedBits << 4n
     };
-    reservedBits += 4n;
+    reservedBits += 5n;
     let offset = 0;
     context.variantOrder = new Map(variantList.map((variant, i)=>{
         let variantFunctions = variantMap.get(variant).length;
@@ -640,7 +645,8 @@ function registerPlugins(plugins, context) {
             if (value1 instanceof RegExp) {
                 _log.default.warn('root-regex', [
                     'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
-                    'Update your `safelist` configuration to eliminate this warning.'
+                    'Update your `safelist` configuration to eliminate this warning.',
+                    'https://tailwindcss.com/docs/content-configuration#safelisting-classes', 
                 ]);
                 continue;
             }
@@ -648,13 +654,33 @@ function registerPlugins(plugins, context) {
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
+            let prefixLength = context.tailwindConfig.prefix.length;
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
                     var ref;
-                    return Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
-                    }).map((value)=>(0, _nameClass).formatClass(utilName, value)
+                    let values = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {});
+                    let classes = values.map((value)=>(0, _nameClass).formatClass(utilName, value)
                     );
+                    if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
+                        // This is the normal negated version
+                        // e.g. `-inset-1` or `-tw-inset-1`
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>'-' + cls
+                            )
+                        ];
+                        // This is the negated version *after* the prefix
+                        // e.g. `tw--inset-1`
+                        // The prefix is already attached to util name
+                        // So we add the negative after the prefix
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
+                            ), 
+                        ];
+                    }
+                    return classes;
                 })() : [
                     util
                 ];
@@ -685,22 +711,51 @@ function registerPlugins(plugins, context) {
                 if (count !== 0) continue;
                 _log.default.warn([
                     `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
-                    'Fix this pattern or remove it from your `safelist` configuration.', 
+                    'Fix this pattern or remove it from your `safelist` configuration.',
+                    'https://tailwindcss.com/docs/content-configuration#safelisting-classes', 
                 ]);
             }
         }
     }
+    // A list of utilities that are used by certain Tailwind CSS utilities but
+    // that don't exist on their own. This will result in them "not existing" and
+    // sorting could be weird since you still require them in order to make the
+    // host utitlies work properly. (Thanks Biology)
+    let parasiteUtilities = new Set([
+        prefix(context, 'group'),
+        prefix(context, 'peer')
+    ]);
+    context.getClassOrder = function getClassOrder(classes) {
+        let sortedClassNames = new Map();
+        for (let [sort, rule] of (0, _generateRules).generateRules(new Set(classes), context)){
+            if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue;
+            sortedClassNames.set(rule.raws.tailwind.candidate, sort);
+        }
+        return classes.map((className)=>{
+            var ref;
+            let order = (ref = sortedClassNames.get(className)) !== null && ref !== void 0 ? ref : null;
+            if (order === null && parasiteUtilities.has(className)) {
+                // This will make sure that it is at the very beginning of the
+                // `components` layer which technically means 'before any
+                // components'.
+                order = context.layerOrder.components;
+            }
+            return [
+                className,
+                order
+            ];
+        });
+    };
     // Generate a list of strings for autocompletion purposes, e.g.
     // ['uppercase', 'lowercase', ...]
-    context.getClassList = function() {
+    context.getClassList = function getClassList() {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {
                 let [utilName, options] = util;
                 let negativeClasses = [];
                 var ref;
-                for (let [key, value] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
-                })){
+                for (let [key, value] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {})){
                     output.push((0, _nameClass).formatClass(utilName, key));
                     if ((options === null || options === void 0 ? void 0 : options.supportsNegativeValues) && (0, _negateValue).default(value)) {
                         negativeClasses.push((0, _nameClass).formatClass(utilName, `-${key}`));
@@ -748,13 +803,14 @@ function getContext(root, result, tailwindConfig, userConfigPath, tailwindConfig
         contextMap.set(sourcePath, context);
         existingContext = context;
     }
+    let cssDidChange = (0, _cacheInvalidationJs).hasContentChanged(sourcePath, root);
     // If there's already a context in the cache and we don't need to
     // reset the context, return the cached context.
     if (existingContext) {
         let contextDependenciesChanged = trackModified([
             ...contextDependencies
         ], getFileModifiedMap(existingContext));
-        if (!contextDependenciesChanged) {
+        if (!contextDependenciesChanged && !cssDidChange) {
             return [
                 existingContext,
                 false

package/lib/lib/setupTrackingContext.js

@@ -123,11 +123,12 @@ function setupTrackingContext(configOrPath) {
         return (root, result)=>{
             let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath);
             let contextDependencies = new Set(configDependencies);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
-            // 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 there are no @tailwind or @apply rules, we don't consider this CSS
+            // file or its dependencies to be dependencies of the context. Can reuse
+            // the context even if they change. 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) {
                 // Add current css file as a context dependencies.
                 contextDependencies.add(result.opts.from);
@@ -140,8 +141,8 @@ function setupTrackingContext(configOrPath) {
             }
             let [context] = (0, _setupContextUtils).getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies);
             let candidateFiles = getCandidateFiles(context, tailwindConfig);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
+            // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
+            // dependencies to be dependencies of the context. Can reuse the context even if they change.
             // 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.

package/lib/lib/sharedState.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
+exports.resolveDebug = resolveDebug;
+exports.NOT_ON_DEMAND = exports.sourceHashMap = exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
-    TAILWIND_MODE: process.env.TAILWIND_MODE,
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
-    TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
-    TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR
+    DEBUG: resolveDebug(process.env.DEBUG)
 };
 exports.env = env;
 const contextMap = new Map();
@@ -17,3 +15,38 @@ const configContextMap = new Map();
 exports.configContextMap = configContextMap;
 const contextSourcesMap = new Map();
 exports.contextSourcesMap = contextSourcesMap;
+const sourceHashMap = new Map();
+exports.sourceHashMap = sourceHashMap;
+const NOT_ON_DEMAND = new String('*');
+exports.NOT_ON_DEMAND = NOT_ON_DEMAND;
+function resolveDebug(debug) {
+    if (debug === undefined) {
+        return false;
+    }
+    // Environment variables are strings, so convert to boolean
+    if (debug === 'true' || debug === '1') {
+        return true;
+    }
+    if (debug === 'false' || debug === '0') {
+        return false;
+    }
+    // Keep the debug convention into account:
+    // DEBUG=* -> This enables all debug modes
+    // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
+    // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
+    // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
+    if (debug === '*') {
+        return true;
+    }
+    let debuggers = debug.split(',').map((d)=>d.split(':')[0]
+    );
+    // Ignoring tailwindcss
+    if (debuggers.includes('-tailwindcss')) {
+        return false;
+    }
+    // Including tailwindcss
+    if (debuggers.includes('tailwindcss')) {
+        return true;
+    }
+    return false;
+}

package/lib/postcss-plugins/nesting/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _plugin = require("./plugin");
+var _default = Object.assign(function(opts) {
+    return {
+        postcssPlugin: 'tailwindcss/nesting',
+        Once (root, { result  }) {
+            return (0, _plugin).nesting(opts)(root, result);
+        }
+    };
+}, {
+    postcss: true
+});
+exports.default = _default;

package/lib/postcss-plugins/nesting/plugin.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.nesting = nesting;
+var _postcss = _interopRequireDefault(require("postcss"));
+var _postcssNested = _interopRequireDefault(require("postcss-nested"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function nesting(opts = _postcssNested.default) {
+    return (root, result)=>{
+        root.walkAtRules('screen', (rule)=>{
+            rule.name = 'media';
+            rule.params = `screen(${rule.params})`;
+        });
+        root.walkAtRules('apply', (rule)=>{
+            rule.before(_postcss.default.decl({
+                prop: '__apply',
+                value: rule.params,
+                source: rule.source
+            }));
+            rule.remove();
+        });
+        let plugin = (()=>{
+            var ref;
+            if (typeof opts === 'function' || typeof opts === 'object' && (opts === null || opts === void 0 ? void 0 : (ref = opts.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(opts, 'postcssPlugin'))) {
+                return opts;
+            }
+            if (typeof opts === 'string') {
+                return require(opts);
+            }
+            if (Object.keys(opts).length <= 0) {
+                return _postcssNested.default;
+            }
+            throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.');
+        })();
+        (0, _postcss).default([
+            plugin
+        ]).process(root, result.opts).sync();
+        root.walkDecls('__apply', (decl)=>{
+            decl.before(_postcss.default.atRule({
+                name: 'apply',
+                params: decl.value,
+                source: decl.source
+            }));
+            decl.remove();
+        });
+        /**
+     * Use a private PostCSS API to remove the "clean" flag from the entire AST.
+     * This is done because running process() on the AST will set the "clean"
+     * flag on all nodes, which we don't want.
+     *
+     * This causes downstream plugins using the visitor API to be skipped.
+     *
+     * This is guarded because the PostCSS API is not public
+     * and may change in future versions of PostCSS.
+     *
+     * See https://github.com/postcss/postcss/issues/1712 for more details
+     *
+     * @param {import('postcss').Node} node
+     */ function markDirty(node) {
+            if (!('markDirty' in node)) {
+                return;
+            }
+            // Traverse the tree down to the leaf nodes
+            if (node.nodes) {
+                node.nodes.forEach((n)=>markDirty(n)
+                );
+            }
+            // If it's a leaf node mark it as dirty
+            // We do this here because marking a node as dirty
+            // will walk up the tree and mark all parents as dirty
+            // resulting in a lot of unnecessary work if we did this
+            // for every single node
+            if (!node.nodes) {
+                node.markDirty();
+            }
+        }
+        markDirty(root);
+        return root;
+    };
+}

package/lib/processTailwindFeatures.js

@@ -11,6 +11,7 @@ var _substituteScreenAtRules = _interopRequireDefault(require("./lib/substituteS
 var _resolveDefaultsAtRules = _interopRequireDefault(require("./lib/resolveDefaultsAtRules"));
 var _collapseAdjacentRules = _interopRequireDefault(require("./lib/collapseAdjacentRules"));
 var _collapseDuplicateDeclarations = _interopRequireDefault(require("./lib/collapseDuplicateDeclarations"));
+var _partitionApplyAtRules = _interopRequireDefault(require("./lib/partitionApplyAtRules"));
 var _detectNesting = _interopRequireDefault(require("./lib/detectNesting"));
 var _setupContextUtils = require("./lib/setupContextUtils");
 var _featureFlags = require("./featureFlags");
@@ -21,9 +22,14 @@ function _interopRequireDefault(obj) {
 }
 function processTailwindFeatures(setupContext) {
     return function(root, result) {
-        let tailwindDirectives = (0, _normalizeTailwindDirectives).default(root);
+        let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives).default(root);
+        (0, _detectNesting).default()(root, result);
+        // Partition apply rules that are found in the css
+        // itself.
+        (0, _partitionApplyAtRules).default()(root, result);
         let context = setupContext({
             tailwindDirectives,
+            applyDirectives,
             registerDependency (dependency) {
                 result.messages.push({
                     plugin: 'tailwindcss',
@@ -39,8 +45,10 @@ function processTailwindFeatures(setupContext) {
             throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
         }
         (0, _featureFlags).issueFlagNotices(context.tailwindConfig);
-        (0, _detectNesting).default(context)(root, result);
         (0, _expandTailwindAtRules).default(context)(root, result);
+        // Partition apply rules that are generated by
+        // addComponents, addUtilities and so on.
+        (0, _partitionApplyAtRules).default()(root, result);
         (0, _expandApplyAtRules).default(context)(root, result);
         (0, _evaluateTailwindFunctions).default(context)(root, result);
         (0, _substituteScreenAtRules).default(context)(root, result);