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

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 sharedState = _interopRequireWildcard(require("./sharedState"));
 var _formatVariantSelector = require("../util/formatVariantSelector");
 var _nameClass = require("../util/nameClass");
 var _dataTypes = require("../util/dataTypes");
@@ -19,6 +20,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 let classNameParser = (0, _postcssSelectorParser).default((selectors)=>{
     return selectors.first.filter(({ type  })=>type === 'class'
     ).pop().value;
@@ -33,32 +55,32 @@ function getClassNameFromSelector(selector) {
 // Example with dynamic classes:
 // ['grid-cols', '[[linename],1fr,auto]']
 // ['grid', 'cols-[[linename],1fr,auto]']
-function* candidatePermutations(candidate, lastIndex = Infinity) {
-    if (lastIndex < 0) {
-        return;
-    }
-    let dashIdx;
-    if (lastIndex === Infinity && candidate.endsWith(']')) {
-        let bracketIdx = candidate.indexOf('[');
-        // If character before `[` isn't a dash or a slash, this isn't a dynamic class
-        // eg. string[]
-        dashIdx = [
-            '-',
-            '/'
-        ].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1;
-    } else {
-        dashIdx = candidate.lastIndexOf('-', lastIndex);
-    }
-    if (dashIdx < 0) {
-        return;
+function* candidatePermutations(candidate) {
+    let lastIndex = Infinity;
+    while(lastIndex >= 0){
+        let dashIdx;
+        if (lastIndex === Infinity && candidate.endsWith(']')) {
+            let bracketIdx = candidate.indexOf('[');
+            // If character before `[` isn't a dash or a slash, this isn't a dynamic class
+            // eg. string[]
+            dashIdx = [
+                '-',
+                '/'
+            ].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1;
+        } else {
+            dashIdx = candidate.lastIndexOf('-', lastIndex);
+        }
+        if (dashIdx < 0) {
+            break;
+        }
+        let prefix = candidate.slice(0, dashIdx);
+        let modifier = candidate.slice(dashIdx + 1);
+        yield [
+            prefix,
+            modifier
+        ];
+        lastIndex = dashIdx - 1;
     }
-    let prefix = candidate.slice(0, dashIdx);
-    let modifier = candidate.slice(dashIdx + 1);
-    yield [
-        prefix,
-        modifier
-    ];
-    yield* candidatePermutations(candidate, dashIdx - 1);
 }
 function applyPrefix(matches, context) {
     if (matches.length === 0 || context.tailwindConfig.prefix === '') {
@@ -72,15 +94,21 @@ function applyPrefix(matches, context) {
                     match[1].clone()
                 ]
             });
+            let classCandidate = match[1].raws.tailwind.classCandidate;
             container.walkRules((r)=>{
-                r.selector = (0, _prefixSelector).default(context.tailwindConfig.prefix, r.selector);
+                // If this is a negative utility with a dash *before* the prefix we
+                // have to ensure that the generated selector matches the candidate
+                // Not doing this will cause `-tw-top-1` to generate the class `.tw--top-1`
+                // The disconnect between candidate <-> class can cause @apply to hard crash.
+                let shouldPrependNegative = classCandidate.startsWith('-');
+                r.selector = (0, _prefixSelector).default(context.tailwindConfig.prefix, r.selector, shouldPrependNegative);
             });
             match[1] = container.nodes[0];
         }
     }
     return matches;
 }
-function applyImportant(matches) {
+function applyImportant(matches, classCandidate) {
     if (matches.length === 0) {
         return matches;
     }
@@ -93,7 +121,10 @@ function applyImportant(matches) {
         });
         container.walkRules((r)=>{
             r.selector = (0, _pluginUtils).updateAllClasses(r.selector, (className)=>{
-                return `!${className}`;
+                if (className === classCandidate) {
+                    return `!${className}`;
+                }
+                return className;
             });
             r.walkDecls((d)=>d.important = true
             );
@@ -124,6 +155,10 @@ function applyVariant(variant, matches, context) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
         for (let [meta, rule1] of matches){
+            // Don't generate variants for user css
+            if (meta.layer === 'user') {
+                continue;
+            }
             let container = _postcss.default.root({
                 nodes: [
                     rule1.clone()
@@ -213,6 +248,14 @@ function applyVariant(variant, matches, context) {
                         rule.selector = before;
                     });
                 }
+                // This tracks the originating layer for the variant
+                // For example:
+                // .sm:underline {} is a variant of something in the utilities layer
+                // .sm:container {} is a variant of the container component
+                clone.nodes[0].raws.tailwind = {
+                    ...clone.nodes[0].raws.tailwind,
+                    parentLayer: meta.layer
+                };
                 var _collectedFormats;
                 let withOffset = [
                     {
@@ -229,8 +272,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 [
@@ -253,14 +295,55 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
+function isValidPropName(name) {
+    return IS_VALID_PROPERTY_NAME.test(name);
+}
+/**
+ * @param {string} declaration
+ * @returns {boolean}
+ */ function looksLikeUri(declaration) {
+    // Quick bailout for obvious non-urls
+    // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
+    if (!declaration.includes('://')) {
+        return false;
+    }
+    try {
+        const url = new URL(declaration);
+        return url.scheme !== '' && url.host !== '';
+    } catch (err) {
+        // Definitely not a valid url
+        return false;
+    }
+}
+function isParsableCssValue(property, value) {
+    // We don't want to to treat [https://example.com] as a custom property
+    // Even though, according to the CSS grammar, it's a totally valid CSS declaration
+    // So we short-circuit here by checking if the custom property looks like a url
+    if (looksLikeUri(`${property}:${value}`)) {
+        return false;
+    }
+    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 (!(0, _isValidArbitraryValue).default(normalized)) {
+    if (!isParsableCssValue(property, normalized)) {
         return null;
     }
     return [
@@ -313,13 +396,26 @@ function* resolveMatchedPlugins(classCandidate, context) {
                 context.candidateRuleMap.get(prefix),
                 negative ? `-${modifier}` : modifier
             ];
-            return;
         }
     }
 }
 function splitWithSeparator(input, separator) {
+    if (input === sharedState.NOT_ON_DEMAND) {
+        return [
+            sharedState.NOT_ON_DEMAND
+        ];
+    }
     return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'));
 }
+function* recordCandidates(matches, classCandidate) {
+    for (const match of matches){
+        match[1].raws.tailwind = {
+            ...match[1].raws.tailwind,
+            classCandidate
+        };
+        yield match;
+    }
+}
 function* resolveMatches(candidate, context) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
@@ -429,14 +525,20 @@ function* resolveMatches(candidate, context) {
             ]);
             continue;
         }
-        matches = applyPrefix(matches.flat(), context);
+        matches = matches.flat();
+        matches = Array.from(recordCandidates(matches, classCandidate));
+        matches = applyPrefix(matches, context);
         if (important) {
-            matches = applyImportant(matches, context);
+            matches = applyImportant(matches, classCandidate);
         }
         for (let variant of variants){
             matches = applyVariant(variant, matches, context);
         }
         for (let match1 of matches){
+            match1[1].raws.tailwind = {
+                ...match1[1].raws.tailwind,
+                candidate
+            };
             // Apply final format selector
             if (match1[0].collectedFormats) {
                 let finalFormat = (0, _formatVariantSelector).formatVariantSelector('&', ...match1[0].collectedFormats);

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';
@@ -45,7 +49,8 @@ function normalizeTailwindDirectives(root) {
             ].includes(atRule.name)) {
                 _log.default.warn(`${atRule.name}-at-rule-deprecated`, [
                     `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
-                    `Use \`@layer utilities\` or \`@layer components\` instead.`, 
+                    `Use \`@layer utilities\` or \`@layer components\` instead.`,
+                    'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer', 
                 ]);
             }
             layerDirectives.add(atRule);
@@ -72,5 +77,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

@@ -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,50 @@ 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({
+                        source: universal.source
+                    });
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule({
+                    source: universal.source
+                });
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };