tailwindcss 3.0.0-alpha.1 → 3.0.2

package/lib/css/preflight.css

@@ -12,6 +12,11 @@
   border-color: currentColor; /* 2 */
 }
 
+::before,
+::after {
+  --tw-content: '';
+}
+
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -283,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -317,6 +323,13 @@ button,
   cursor: pointer;
 }
 
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)

package/lib/featureFlags.js

@@ -12,7 +12,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const featureFlags = {
+let defaults = {
+    // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+    // the default.
+    optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false
+};
+let featureFlags = {
     future: [],
     experimental: [
         'optimizeUniversalDefaults'
@@ -21,13 +26,13 @@ const featureFlags = {
 function flagEnabled(config, flag) {
     if (featureFlags.future.includes(flag)) {
         var ref;
-        var ref1;
-        return config.future === 'all' || ((ref1 = config === null || config === void 0 ? void 0 : (ref = config.future) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref1 !== void 0 ? ref1 : false);
+        var ref1, ref2;
+        return config.future === 'all' || ((ref2 = (ref1 = config === null || config === void 0 ? void 0 : (ref = config.future) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref1 !== void 0 ? ref1 : defaults[flag]) !== null && ref2 !== void 0 ? ref2 : false);
     }
     if (featureFlags.experimental.includes(flag)) {
-        var ref;
-        var ref5;
-        return config.experimental === 'all' || ((ref5 = config === null || config === void 0 ? void 0 : (ref = config.experimental) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref5 !== void 0 ? ref5 : false);
+        var ref3;
+        var ref4, ref5;
+        return config.experimental === 'all' || ((ref5 = (ref4 = config === null || config === void 0 ? void 0 : (ref3 = config.experimental) === null || ref3 === void 0 ? void 0 : ref3[flag]) !== null && ref4 !== void 0 ? ref4 : defaults[flag]) !== null && ref5 !== void 0 ? ref5 : false);
     }
     return false;
 }
@@ -45,7 +50,7 @@ function issueFlagNotices(config) {
         return;
     }
     if (experimentalFlagsEnabled(config).length > 0) {
-        const changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
+        let changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
         ).join(', ');
         _log.default.warn('experimental-flags-enabled', [
             `You have enabled experimental features: ${changes}`,

package/lib/lib/collapseDuplicateDeclarations.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = collapseDuplicateDeclarations;
+function collapseDuplicateDeclarations() {
+    return (root)=>{
+        root.walkRules((node)=>{
+            let seen = new Map();
+            let droppable = new Set([]);
+            node.walkDecls((decl)=>{
+                // This could happen if we have nested selectors. In that case the
+                // parent will loop over all its declarations but also the declarations
+                // of nested rules. With this we ensure that we are shallowly checking
+                // declarations.
+                if (decl.parent !== node) {
+                    return;
+                }
+                if (seen.has(decl.prop)) {
+                    droppable.add(seen.get(decl.prop));
+                }
+                seen.set(decl.prop, decl);
+            });
+            for (let decl1 of droppable){
+                decl1.remove();
+            }
+        });
+    };
+}

package/lib/lib/detectNesting.js

@@ -6,12 +6,27 @@ exports.default = _default;
 function _default(_context) {
     return (root, result)=>{
         let found = false;
+        root.walkAtRules('tailwind', (node)=>{
+            if (found) return false;
+            if (node.parent && node.parent.type !== 'root') {
+                found = true;
+                node.warn(result, [
+                    'Nested @tailwind rules were detected, but are not supported.',
+                    "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+                    'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy', 
+                ].join('\n'));
+                return false;
+            }
+        });
         root.walkRules((rule)=>{
             if (found) return false;
             rule.walkRules((nestedRule)=>{
                 found = true;
-                nestedRule.warn(result, // TODO: Improve this warning message
-                'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting');
+                nestedRule.warn(result, [
+                    'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+                    'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+                    'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting', 
+                ].join('\n'));
                 return false;
             });
         });

package/lib/lib/evaluateTailwindFunctions.js

@@ -7,6 +7,7 @@ var _dlv = _interopRequireDefault(require("dlv"));
 var _didyoumean = _interopRequireDefault(require("didyoumean"));
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
 function _interopRequireDefault(obj) {
@@ -112,11 +113,11 @@ function extractArgs(node, vNodes, functions) {
     let args = [
         ''
     ];
-    for (let vNode of vNodes){
-        if (vNode.type === 'div' && vNode.value === ',') {
+    for (let vNode1 of vNodes){
+        if (vNode1.type === 'div' && vNode1.value === ',') {
             args.push('');
         } else {
-            args[args.length - 1] += _postcssValueParser.default.stringify(vNode);
+            args[args.length - 1] += _postcssValueParser.default.stringify(vNode1);
         }
     }
     return args;
@@ -149,10 +150,13 @@ function _default({ tailwindConfig: config  }) {
         },
         screen: (node, screen)=>{
             screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
-            if (config.theme.screens[screen] === undefined) {
+            let screens = (0, _normalizeScreens).normalizeScreens(config.theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }
-            return (0, _buildMediaQuery).default(config.theme.screens[screen]);
+            return (0, _buildMediaQuery).default(screenDefinition);
         }
     };
     return (root)=>{

package/lib/lib/expandApplyAtRules.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = expandApplyAtRules;
 var _postcss = _interopRequireDefault(require("postcss"));
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
@@ -12,9 +13,21 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function containsBase(selector, classCandidateBase, separator) {
+    return (0, _postcssSelectorParser).default((selectors)=>{
+        let contains = false;
+        selectors.walkClasses((classSelector)=>{
+            if (classSelector.value.split(separator).pop() === classCandidateBase) {
+                contains = true;
+                return false;
+            }
+        });
+        return contains;
+    }).transformSync(selector);
+}
 function prefix(context, selector) {
-    let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
 function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
@@ -56,10 +69,10 @@ function partitionApplyParents(root) {
     root.walkAtRules('apply', (rule)=>{
         applyParents.add(rule.parent);
     });
-    for (let rule of applyParents){
+    for (let rule1 of applyParents){
         let nodeGroups = [];
         let lastGroup = [];
-        for (let node of rule.nodes){
+        for (let node of rule1.nodes){
             if (node.type === 'atrule' && node.name === 'apply') {
                 if (lastGroup.length > 0) {
                     nodeGroups.push(lastGroup);
@@ -81,13 +94,13 @@ function partitionApplyParents(root) {
         for (let group of [
             ...nodeGroups
         ].reverse()){
-            let newParent = rule.clone({
+            let newParent = rule1.clone({
                 nodes: []
             });
             newParent.append(group);
-            rule.after(newParent);
+            rule1.after(newParent);
         }
-        rule.remove();
+        rule1.remove();
     }
 }
 function processApply(root, context) {
@@ -127,8 +140,8 @@ function processApply(root, context) {
      */ // TODO: Should we use postcss-selector-parser for this instead?
         function replaceSelector(selector, utilitySelectors, candidate) {
             let needle = `.${(0, _escapeClassName).default(candidate)}`;
-            let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g);
-            return selector.split(/\s*,\s*/g).map((s)=>{
+            let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g);
+            return selector.split(/\s*\,(?![^(]*\))\s*/g).map((s)=>{
                 let replaced = [];
                 for (let utilitySelector of utilitySelectorsList){
                     let replacedSelector = utilitySelector.replace(needle, s);
@@ -173,7 +186,11 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
+                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
+                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
+                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    }
                     let root = _postcss.default.root({
                         nodes: [
                             node.clone()

package/lib/lib/expandTailwindAtRules.js

@@ -42,8 +42,12 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source,
     /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
     /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
+    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
     /([^<>"'`\s]*[^"'`\s:])/.source
 ].join('|');
@@ -230,7 +234,6 @@ function expandTailwindAtRules(context) {
         if (env.DEBUG) {
             console.log('Potential classes: ', candidates.size);
             console.log('Active contexts: ', sharedState.contextSourcesMap.size);
-            console.log('Content match entries', contentMatchCache.size);
         }
         // Clear the cache for the changed files
         context.changedContent = [];

package/lib/lib/generateRules.js

@@ -10,6 +10,10 @@ var _isPlainObject = _interopRequireDefault(require("../util/isPlainObject"));
 var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
 var _pluginUtils = require("../util/pluginUtils");
 var _log = _interopRequireDefault(require("../util/log"));
+var _formatVariantSelector = require("../util/formatVariantSelector");
+var _nameClass = require("../util/nameClass");
+var _dataTypes = require("../util/dataTypes");
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -119,15 +123,23 @@ function applyVariant(variant, matches, context) {
     if (context.variantMap.has(variant)) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
-        for (let [meta, rule] of matches){
+        for (let [meta, rule1] of matches){
             let container = _postcss.default.root({
                 nodes: [
-                    rule.clone()
+                    rule1.clone()
                 ]
             });
             for (let [variantSort, variantFunction] of variantFunctionTuples){
                 let clone = container.clone();
+                let collectedFormats = [];
+                let originals = new Map();
+                function prepareBackup() {
+                    if (originals.size > 0) return; // Already prepared, chicken out
+                    clone.walkRules((rule)=>originals.set(rule, rule.selector)
+                    );
+                }
                 function modifySelectors(modifierFunction) {
+                    prepareBackup();
                     clone.each((rule)=>{
                         if (rule.type !== 'rule') {
                             return;
@@ -144,19 +156,71 @@ function applyVariant(variant, matches, context) {
                     return clone;
                 }
                 let ruleWithVariant = variantFunction({
-                    container: clone,
+                    // Public API
+                    get container () {
+                        prepareBackup();
+                        return clone;
+                    },
                     separator: context.tailwindConfig.separator,
-                    modifySelectors
+                    modifySelectors,
+                    // Private API for now
+                    wrap (wrapper) {
+                        let nodes = clone.nodes;
+                        clone.removeAll();
+                        wrapper.append(nodes);
+                        clone.append(wrapper);
+                    },
+                    format (selectorFormat) {
+                        collectedFormats.push(selectorFormat);
+                    }
                 });
+                if (typeof ruleWithVariant === 'string') {
+                    collectedFormats.push(ruleWithVariant);
+                }
                 if (ruleWithVariant === null) {
                     continue;
                 }
+                // We filled the `originals`, therefore we assume that somebody touched
+                // `container` or `modifySelectors`. Let's see if they did, so that we
+                // can restore the selectors, and collect the format strings.
+                if (originals.size > 0) {
+                    clone.walkRules((rule)=>{
+                        if (!originals.has(rule)) return;
+                        let before = originals.get(rule);
+                        if (before === rule.selector) return; // No mutation happened
+                        let modified = rule.selector;
+                        // Rebuild the base selector, this is what plugin authors would do
+                        // as well. E.g.: `${variant}${separator}${className}`.
+                        // However, plugin authors probably also prepend or append certain
+                        // classes, pseudos, ids, ...
+                        let rebuiltBase = (0, _postcssSelectorParser).default((selectors)=>{
+                            selectors.walkClasses((classNode)=>{
+                                classNode.value = `${variant}${context.tailwindConfig.separator}${classNode.value}`;
+                            });
+                        }).processSync(before);
+                        // Now that we know the original selector, the new selector, and
+                        // the rebuild part in between, we can replace the part that plugin
+                        // authors need to rebuild with `&`, and eventually store it in the
+                        // collectedFormats. Similar to what `format('...')` would do.
+                        //
+                        // E.g.:
+                        //                   variant: foo
+                        //                  selector: .markdown > p
+                        //      modified (by plugin): .foo .foo\\:markdown > p
+                        //    rebuiltBase (internal): .foo\\:markdown > p
+                        //                    format: .foo &
+                        collectedFormats.push(modified.replace(rebuiltBase, '&'));
+                        rule.selector = before;
+                    });
+                }
+                var _collectedFormats;
                 let withOffset = [
                     {
                         ...meta,
-                        sort: variantSort | meta.sort
+                        sort: variantSort | meta.sort,
+                        collectedFormats: ((_collectedFormats = meta.collectedFormats) !== null && _collectedFormats !== void 0 ? _collectedFormats : []).concat(collectedFormats)
                     },
-                    clone.nodes[0]
+                    clone.nodes[0], 
                 ];
                 result.push(withOffset);
             }
@@ -189,6 +253,31 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+function extractArbitraryProperty(classCandidate, context) {
+    var ref;
+    let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
+    if (value === undefined) {
+        return null;
+    }
+    let normalized = (0, _dataTypes).normalize(value);
+    if (!(0, _isValidArbitraryValue).default(normalized)) {
+        return null;
+    }
+    return [
+        [
+            {
+                sort: context.arbitraryPropertiesSort,
+                layer: 'utilities'
+            },
+            ()=>({
+                    [(0, _nameClass).asClass(classCandidate)]: {
+                        [property]: normalized
+                    }
+                })
+            , 
+        ], 
+    ];
+}
 function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
@@ -196,14 +285,28 @@ function* resolveMatchedPlugins(classCandidate, context) {
             'DEFAULT'
         ];
     }
+    yield* (function*(arbitraryPropertyRule) {
+        if (arbitraryPropertyRule !== null) {
+            yield [
+                arbitraryPropertyRule,
+                'DEFAULT'
+            ];
+        }
+    })(extractArbitraryProperty(classCandidate, context));
     let candidatePrefix = classCandidate;
     let negative = false;
-    const twConfigPrefix = context.tailwindConfig.prefix || '';
+    const twConfigPrefix = context.tailwindConfig.prefix;
     const twConfigPrefixLen = twConfigPrefix.length;
     if (candidatePrefix[twConfigPrefixLen] === '-') {
         negative = true;
         candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1);
     }
+    if (negative && context.candidateRuleMap.has(candidatePrefix)) {
+        yield [
+            context.candidateRuleMap.get(candidatePrefix),
+            '-DEFAULT'
+        ];
+    }
     for (let [prefix, modifier] of candidatePermutations(candidatePrefix)){
         if (context.candidateRuleMap.has(prefix)) {
             yield [
@@ -261,7 +364,7 @@ function* resolveMatches(candidate, context) {
                         ]);
                     }
                 }
-            } else if (modifier === 'DEFAULT') {
+            } else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
                 let ruleSet = plugin;
                 let [rules, options] = parseRules(ruleSet, context.postCssNodeCache);
                 for (let rule of rules){
@@ -286,9 +389,9 @@ function* resolveMatches(candidate, context) {
         // Only keep the result of the very first plugin if we are dealing with
         // arbitrary values, to protect against ambiguity.
         if (isArbitraryValue(modifier) && matches.length > 1) {
-            var ref;
+            var ref1;
             let typesPerPlugin = matches.map((match)=>new Set([
-                    ...(ref = typesByMatches.get(match)) !== null && ref !== void 0 ? ref : []
+                    ...(ref1 = typesByMatches.get(match)) !== null && ref1 !== void 0 ? ref1 : []
                 ])
             );
             // Remove duplicates, so that we can detect proper unique types for each plugin.
@@ -333,8 +436,26 @@ function* resolveMatches(candidate, context) {
         for (let variant of variants){
             matches = applyVariant(variant, matches, context);
         }
-        for (let match of matches){
-            yield match;
+        for (let match1 of matches){
+            // Apply final format selector
+            if (match1[0].collectedFormats) {
+                let finalFormat = (0, _formatVariantSelector).formatVariantSelector('&', ...match1[0].collectedFormats);
+                let container = _postcss.default.root({
+                    nodes: [
+                        match1[1].clone()
+                    ]
+                });
+                container.walkRules((rule)=>{
+                    if (inKeyframes(rule)) return;
+                    rule.selector = (0, _formatVariantSelector).finalizeSelector(finalFormat, {
+                        selector: rule.selector,
+                        candidate,
+                        context
+                    });
+                });
+                match1[1] = container.nodes[0];
+            }
+            yield match1;
         }
     }
 }
@@ -359,15 +480,28 @@ function generateRules(candidates, context) {
         context.classCache.set(candidate, matches);
         allRules.push(matches);
     }
-    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
-        if (options.respectImportant) {
-            if (context.tailwindConfig.important === true) {
+    // Strategy based on `tailwindConfig.important`
+    let strategy = ((important)=>{
+        if (important === true) {
+            return (rule)=>{
                 rule.walkDecls((d)=>{
                     if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
                         d.important = true;
                     }
                 });
-            } else if (typeof context.tailwindConfig.important === 'string') {
+            };
+        }
+        if (typeof important === 'string') {
+            return (rule)=>{
+                rule.selectors = rule.selectors.map((selector)=>{
+                    return `${important} ${selector}`;
+                });
+            };
+        }
+    })(context.tailwindConfig.important);
+    return allRules.flat(1).map(([{ sort , layer , options  }, rule])=>{
+        if (options.respectImportant) {
+            if (strategy) {
                 let container = _postcss.default.root({
                     nodes: [
                         rule.clone()
@@ -377,9 +511,7 @@ function generateRules(candidates, context) {
                     if (inKeyframes(r)) {
                         return;
                     }
-                    r.selectors = r.selectors.map((selector)=>{
-                        return `${context.tailwindConfig.important} ${selector}`;
-                    });
+                    strategy(r);
                 });
                 rule = container.nodes[0];
             }