tailwindcss 0.0.0-insiders.8259dfd → 0.0.0-insiders.8293c2d

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,27 @@ 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){
+            // Don't generate variants for user css
+            if (meta.layer === 'user') {
+                continue;
+            }
             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 +160,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);
             }
@@ -165,8 +233,7 @@ function applyVariant(variant, matches, context) {
     }
     return [];
 }
-function parseRules(rule, cache, options = {
-}) {
+function parseRules(rule, cache, options = {}) {
     // PostCSS node
     if (!(0, _isPlainObject).default(rule) && !Array.isArray(rule)) {
         return [
@@ -189,6 +256,49 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
+function isValidPropName(name) {
+    return IS_VALID_PROPERTY_NAME.test(name);
+}
+function isParsableCssValue(property, value) {
+    try {
+        _postcss.default.parse(`a{${property}:${value}}`).toResult();
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
+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;
+    }
+    if (!isValidPropName(property)) {
+        return null;
+    }
+    if (!(0, _isValidArbitraryValue).default(value)) {
+        return null;
+    }
+    let normalized = (0, _dataTypes).normalize(value);
+    if (!isParsableCssValue(property, 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,9 +306,17 @@ 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;
@@ -216,7 +334,6 @@ function* resolveMatchedPlugins(classCandidate, context) {
                 context.candidateRuleMap.get(prefix),
                 negative ? `-${modifier}` : modifier
             ];
-            return;
         }
     }
 }
@@ -292,9 +409,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.
@@ -339,8 +456,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;
         }
     }
 }
@@ -365,15 +500,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()
@@ -383,9 +531,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/normalizeTailwindDirectives.js

@@ -12,7 +12,11 @@ function _interopRequireDefault(obj) {
 function normalizeTailwindDirectives(root) {
     let tailwindDirectives = new Set();
     let layerDirectives = new Set();
+    let applyDirectives = new Set();
     root.walkAtRules((atRule)=>{
+        if (atRule.name === 'apply') {
+            applyDirectives.add(atRule);
+        }
         if (atRule.name === 'import') {
             if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
                 atRule.name = 'tailwind';
@@ -72,5 +76,8 @@ function normalizeTailwindDirectives(root) {
             }
         }
     }
-    return tailwindDirectives;
+    return {
+        tailwindDirectives,
+        applyDirectives
+    };
 }

package/lib/lib/partitionApplyAtRules.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = expandApplyAtRules;
+function partitionRules(root) {
+    if (!root.walkAtRules) return;
+    let applyParents = new Set();
+    root.walkAtRules('apply', (rule)=>{
+        applyParents.add(rule.parent);
+    });
+    if (applyParents.size === 0) {
+        return;
+    }
+    for (let rule1 of applyParents){
+        let nodeGroups = [];
+        let lastGroup = [];
+        for (let node of rule1.nodes){
+            if (node.type === 'atrule' && node.name === 'apply') {
+                if (lastGroup.length > 0) {
+                    nodeGroups.push(lastGroup);
+                    lastGroup = [];
+                }
+                nodeGroups.push([
+                    node
+                ]);
+            } else {
+                lastGroup.push(node);
+            }
+        }
+        if (lastGroup.length > 0) {
+            nodeGroups.push(lastGroup);
+        }
+        if (nodeGroups.length === 1) {
+            continue;
+        }
+        for (let group of [
+            ...nodeGroups
+        ].reverse()){
+            let clone = rule1.clone({
+                nodes: []
+            });
+            clone.append(group);
+            rule1.after(clone);
+        }
+        rule1.remove();
+    }
+}
+function expandApplyAtRules() {
+    return (root)=>{
+        partitionRules(root);
+    };
+}

package/lib/lib/resolveDefaultsAtRules.js

@@ -47,8 +47,8 @@ function minimumImpactSelector(nodes) {
     let splitPointIdx = rest.findIndex((n)=>searchFor.has(n.type)
     );
     if (splitPointIdx === -1) return rest.reverse().join('').trim();
-    let node = rest[splitPointIdx];
-    let bestNode = getNode[node.type] ? getNode[node.type](node) : node;
+    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 === '>'
     );
@@ -79,7 +79,7 @@ function extractElementSelector(selector) {
 function resolveDefaultsAtRules({ tailwindConfig  }) {
     return (root)=>{
         let variableNodeMap = new Map();
-        let universals = new Set();
+        /** @type {Set<import('postcss').AtRule>} */ let universals = new Set();
         root.walkAtRules('defaults', (rule)=>{
             if (rule.nodes && rule.nodes.length > 0) {
                 universals.add(rule);
@@ -93,32 +93,46 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             rule.remove();
         });
         for (let universal of universals){
-            let selectors = new Set();
+            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
             var ref;
             let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
             for (let rule of rules){
                 for (let selector of extractElementSelector(rule.selector)){
+                    // If selector contains a vendor prefix after a pseudo element or class,
+                    // we consider them separately because merging the declarations into
+                    // a single rule will cause browsers that do not understand the
+                    // vendor prefix to throw out the whole rule
+                    let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__';
+                    var ref1;
+                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                    selectorGroups.set(selectorGroupName, selectors);
                     selectors.add(selector);
                 }
             }
-            if (selectors.size === 0) {
-                universal.remove();
-                continue;
-            }
-            let universalRule = _postcss.default.rule();
             if ((0, _featureFlags).flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-                universalRule.selectors = [
-                    ...selectors
-                ];
+                if (selectorGroups.size === 0) {
+                    universal.remove();
+                    continue;
+                }
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule();
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule();
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };