tailwindcss 3.0.0-alpha.1 → 3.0.0-alpha.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.
@@ -317,6 +322,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,10 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const featureFlags = {
+let defaults = {
+    optimizeUniversalDefaults: true
+};
+let featureFlags = {
     future: [],
     experimental: [
         'optimizeUniversalDefaults'
@@ -21,13 +24,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 +48,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/evaluateTailwindFunctions.js

@@ -112,11 +112,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;

package/lib/lib/expandApplyAtRules.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function prefix(context, selector) {
+function prefix1(context, selector) {
     let prefix = context.tailwindConfig.prefix;
     return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
 }
@@ -56,10 +56,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 +81,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) {
@@ -156,7 +156,7 @@ function processApply(root, context) {
             }
             for (let applyCandidate of applyCandidates){
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix(context, 'group')) {
+                    if (applyCandidate === prefix1(context, 'group')) {
                         // TODO: Link to specific documentation page with error code.
                         throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
                     }

package/lib/lib/expandTailwindAtRules.js

@@ -42,6 +42,8 @@ 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,
@@ -230,7 +232,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,7 @@ 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");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -119,15 +120,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 +153,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);
             }
@@ -198,12 +259,18 @@ function* resolveMatchedPlugins(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 +328,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 +353,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 +400,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 +444,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 +475,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];
             }

package/lib/lib/resolveDefaultsAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = resolveDefaultsAtRules;
+exports.elementSelectorParser = void 0;
 var _postcss = _interopRequireDefault(require("postcss"));
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _featureFlags = require("../featureFlags");
@@ -11,58 +12,53 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function isPseudoElement(n) {
-    if (n.type !== 'pseudo') {
-        return false;
+let getNode = {
+    id (node) {
+        return _postcssSelectorParser.default.attribute({
+            attribute: 'id',
+            operator: '=',
+            value: node.value,
+            quoteMark: '"'
+        });
     }
-    return n.value.startsWith('::') || [
-        ':before',
-        ':after',
-        ':first-line',
-        ':first-letter'
-    ].includes(n.value);
-}
+};
 function minimumImpactSelector(nodes) {
-    let rest = nodes// Keep all pseudo & combinator types (:not([hidden]) ~ :not([hidden]))
-    .filter((n)=>n.type === 'pseudo' || n.type === 'combinator'
-    )// Remove leading pseudo's (:hover, :focus, ...)
-    .filter((n, idx, all)=>{
-        // Keep pseudo elements
-        if (isPseudoElement(n)) return true;
-        if (idx === 0 && n.type === 'pseudo') return false;
-        if (idx > 0 && n.type === 'pseudo' && all[idx - 1].type === 'pseudo') return false;
-        return true;
-    });
-    let [bestNode] = nodes;
-    for (let [type, getNode = (n)=>n
-    ] of [
-        [
-            'class'
-        ],
-        [
-            'id',
-            (n)=>_postcssSelectorParser.default.attribute({
-                    attribute: 'id',
-                    operator: '=',
-                    value: n.value,
-                    quoteMark: '"'
-                })
-            , 
-        ],
-        [
-            'attribute'
-        ], 
-    ]){
-        let match = nodes.find((n)=>n.type === type
-        );
-        if (match) {
-            bestNode = getNode(match);
-            break;
-        }
+    let rest = nodes.filter((node)=>{
+        // Keep non-pseudo nodes
+        if (node.type !== 'pseudo') return true;
+        // Keep pseudo nodes that have subnodes
+        // E.g.: `:not()` contains subnodes inside the parentheses
+        if (node.nodes.length > 0) return true;
+        // Keep pseudo `elements`
+        // This implicitly means that we ignore pseudo `classes`
+        return node.value.startsWith('::') || [
+            ':before',
+            ':after',
+            ':first-line',
+            ':first-letter'
+        ].includes(node.value);
+    }).reverse();
+    let searchFor = new Set([
+        'tag',
+        'class',
+        'id',
+        'attribute'
+    ]);
+    let splitPointIdx = rest.findIndex((n)=>searchFor.has(n.type)
+    );
+    if (splitPointIdx === -1) return rest.reverse().join('').trim();
+    let node1 = rest[splitPointIdx];
+    let bestNode = getNode[node1.type] ? getNode[node1.type](node1) : node1;
+    rest = rest.slice(0, splitPointIdx);
+    let combinatorIdx = rest.findIndex((n)=>n.type === 'combinator' && n.value === '>'
+    );
+    if (combinatorIdx !== -1) {
+        rest.splice(0, combinatorIdx);
+        rest.unshift(_postcssSelectorParser.default.universal());
     }
     return [
         bestNode,
-        ...rest
+        ...rest.reverse()
     ].join('').trim();
 }
 let elementSelectorParser = (0, _postcssSelectorParser).default((selectors)=>{
@@ -72,6 +68,7 @@ let elementSelectorParser = (0, _postcssSelectorParser).default((selectors)=>{
         return minimumImpactSelector(nodes);
     });
 });
+exports.elementSelectorParser = elementSelectorParser;
 let cache = new Map();
 function extractElementSelector(selector) {
     if (!cache.has(selector)) {