tailwindcss 3.0.23 → 3.0.24

package/lib/lib/generateRules.js

@@ -42,7 +42,7 @@ function _interopRequireWildcard(obj) {
     }
 }
 let classNameParser = (0, _postcssSelectorParser).default((selectors)=>{
-    return selectors.first.filter(({ type  })=>type === 'class'
+    return selectors.first.filter(({ type  })=>type === "class"
     ).pop().value;
 });
 function getClassNameFromSelector(selector) {
@@ -59,16 +59,16 @@ function* candidatePermutations(candidate) {
     let lastIndex = Infinity;
     while(lastIndex >= 0){
         let dashIdx;
-        if (lastIndex === Infinity && candidate.endsWith(']')) {
-            let bracketIdx = candidate.indexOf('[');
+        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);
+            dashIdx = candidate.lastIndexOf("-", lastIndex);
         }
         if (dashIdx < 0) {
             break;
@@ -83,7 +83,7 @@ function* candidatePermutations(candidate) {
     }
 }
 function applyPrefix(matches, context) {
-    if (matches.length === 0 || context.tailwindConfig.prefix === '') {
+    if (matches.length === 0 || context.tailwindConfig.prefix === "") {
         return matches;
     }
     for (let match of matches){
@@ -100,7 +100,7 @@ function applyPrefix(matches, context) {
                 // 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('-');
+                let shouldPrependNegative = classCandidate.startsWith("-");
                 r.selector = (0, _prefixSelector).default(context.tailwindConfig.prefix, r.selector, shouldPrependNegative);
             });
             match[1] = container.nodes[0];
@@ -108,7 +108,7 @@ function applyPrefix(matches, context) {
     }
     return matches;
 }
-function applyImportant(matches) {
+function applyImportant(matches, classCandidate) {
     if (matches.length === 0) {
         return matches;
     }
@@ -121,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
             );
@@ -153,7 +156,7 @@ function applyVariant(variant, matches, context) {
         let result = [];
         for (let [meta, rule1] of matches){
             // Don't generate variants for user css
-            if (meta.layer === 'user') {
+            if (meta.layer === "user") {
                 continue;
             }
             let container = _postcss.default.root({
@@ -173,7 +176,7 @@ function applyVariant(variant, matches, context) {
                 function modifySelectors(modifierFunction) {
                     prepareBackup();
                     clone.each((rule)=>{
-                        if (rule.type !== 'rule') {
+                        if (rule.type !== "rule") {
                             return;
                         }
                         rule.selectors = rule.selectors.map((selector)=>{
@@ -206,7 +209,7 @@ function applyVariant(variant, matches, context) {
                         collectedFormats.push(selectorFormat);
                     }
                 });
-                if (typeof ruleWithVariant === 'string') {
+                if (typeof ruleWithVariant === "string") {
                     collectedFormats.push(ruleWithVariant);
                 }
                 if (ruleWithVariant === null) {
@@ -241,7 +244,7 @@ function applyVariant(variant, matches, context) {
                         //      modified (by plugin): .foo .foo\\:markdown > p
                         //    rebuiltBase (internal): .foo\\:markdown > p
                         //                    format: .foo &
-                        collectedFormats.push(modified.replace(rebuiltBase, '&'));
+                        collectedFormats.push(modified.replace(rebuiltBase, "&"));
                         rule.selector = before;
                     });
                 }
@@ -302,17 +305,27 @@ function isValidPropName(name) {
  */ 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('://')) {
+    if (!declaration.includes("://")) {
         return false;
     }
     try {
         const url = new URL(declaration);
-        return url.scheme !== '' && url.host !== '';
+        return url.scheme !== "" && url.host !== "";
     } catch (err) {
         // Definitely not a valid url
         return false;
     }
 }
+function isParsableNode(node) {
+    let isParsable = true;
+    node.walkDecls((decl)=>{
+        if (!isParsableCssValue(decl.name, decl.value)) {
+            isParsable = false;
+            return false;
+        }
+    });
+    return isParsable;
+}
 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
@@ -347,7 +360,7 @@ function extractArbitraryProperty(classCandidate, context) {
         [
             {
                 sort: context.arbitraryPropertiesSort,
-                layer: 'utilities'
+                layer: "utilities"
             },
             ()=>({
                     [(0, _nameClass).asClass(classCandidate)]: {
@@ -362,29 +375,29 @@ function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
             context.candidateRuleMap.get(classCandidate),
-            'DEFAULT'
+            "DEFAULT"
         ];
     }
-    yield* (function*(arbitraryPropertyRule) {
+    yield* function*(arbitraryPropertyRule) {
         if (arbitraryPropertyRule !== null) {
             yield [
                 arbitraryPropertyRule,
-                'DEFAULT'
+                "DEFAULT"
             ];
         }
-    })(extractArbitraryProperty(classCandidate, context));
+    }(extractArbitraryProperty(classCandidate, context));
     let candidatePrefix = classCandidate;
     let negative = false;
     const twConfigPrefix = context.tailwindConfig.prefix;
     const twConfigPrefixLen = twConfigPrefix.length;
-    if (candidatePrefix[twConfigPrefixLen] === '-') {
+    if (candidatePrefix[twConfigPrefixLen] === "-") {
         negative = true;
         candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1);
     }
     if (negative && context.candidateRuleMap.has(candidatePrefix)) {
         yield [
             context.candidateRuleMap.get(candidatePrefix),
-            '-DEFAULT'
+            "-DEFAULT"
         ];
     }
     for (let [prefix, modifier] of candidatePermutations(candidatePrefix)){
@@ -402,7 +415,7 @@ function splitWithSeparator(input, separator) {
             sharedState.NOT_ON_DEMAND
         ];
     }
-    return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'));
+    return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, "g"));
 }
 function* recordCandidates(matches, classCandidate) {
     for (const match of matches){
@@ -417,7 +430,7 @@ function* resolveMatches(candidate, context) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
     let important = false;
-    if (classCandidate.startsWith('!')) {
+    if (classCandidate.startsWith("!")) {
         important = true;
         classCandidate = classCandidate.slice(1);
     }
@@ -439,7 +452,7 @@ function* resolveMatches(candidate, context) {
         let isOnlyPlugin = plugins.length === 1;
         for (let [sort, plugin] of plugins){
             let matchesPerPlugin = [];
-            if (typeof plugin === 'function') {
+            if (typeof plugin === "function") {
                 for (let ruleSet of [].concat(plugin(modifier, {
                     isOnlyPlugin
                 }))){
@@ -457,7 +470,7 @@ function* resolveMatches(candidate, context) {
                         ]);
                     }
                 }
-            } else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
+            } else if (modifier === "DEFAULT" || modifier === "-DEFAULT") {
                 let ruleSet = plugin;
                 let [rules, options] = parseRules(ruleSet, context.postCssNodeCache);
                 for (let rule of rules){
@@ -479,54 +492,59 @@ function* resolveMatches(candidate, context) {
                 matches.push(matchesPerPlugin);
             }
         }
-        // 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 ref1;
-            let typesPerPlugin = matches.map((match)=>new Set([
-                    ...(ref1 = typesByMatches.get(match)) !== null && ref1 !== void 0 ? ref1 : []
-                ])
-            );
-            // Remove duplicates, so that we can detect proper unique types for each plugin.
-            for (let pluginTypes of typesPerPlugin){
-                for (let type of pluginTypes){
-                    let removeFromOwnGroup = false;
-                    for (let otherGroup of typesPerPlugin){
-                        if (pluginTypes === otherGroup) continue;
-                        if (otherGroup.has(type)) {
-                            otherGroup.delete(type);
-                            removeFromOwnGroup = true;
+        if (isArbitraryValue(modifier)) {
+            // When generated arbitrary values are ambiguous, we can't know
+            // which to pick so don't generate any utilities for them
+            if (matches.length > 1) {
+                var ref1;
+                let typesPerPlugin = matches.map((match)=>new Set([
+                        ...(ref1 = typesByMatches.get(match)) !== null && ref1 !== void 0 ? ref1 : []
+                    ])
+                );
+                // Remove duplicates, so that we can detect proper unique types for each plugin.
+                for (let pluginTypes of typesPerPlugin){
+                    for (let type of pluginTypes){
+                        let removeFromOwnGroup = false;
+                        for (let otherGroup of typesPerPlugin){
+                            if (pluginTypes === otherGroup) continue;
+                            if (otherGroup.has(type)) {
+                                otherGroup.delete(type);
+                                removeFromOwnGroup = true;
+                            }
                         }
+                        if (removeFromOwnGroup) pluginTypes.delete(type);
                     }
-                    if (removeFromOwnGroup) pluginTypes.delete(type);
                 }
-            }
-            let messages = [];
-            for (let [idx, group] of typesPerPlugin.entries()){
-                for (let type of group){
-                    let rules = matches[idx].map(([, rule])=>rule
-                    ).flat().map((rule)=>rule.toString().split('\n').slice(1, -1) // Remove selector and closing '}'
-                        .map((line)=>line.trim()
-                        ).map((x)=>`      ${x}`
-                        ) // Re-indent
-                        .join('\n')
-                    ).join('\n\n');
-                    messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``);
-                    break;
+                let messages = [];
+                for (let [idx, group] of typesPerPlugin.entries()){
+                    for (let type of group){
+                        let rules = matches[idx].map(([, rule])=>rule
+                        ).flat().map((rule)=>rule.toString().split("\n").slice(1, -1) // Remove selector and closing '}'
+                            .map((line)=>line.trim()
+                            ).map((x)=>`      ${x}`
+                            ) // Re-indent
+                            .join("\n")
+                        ).join("\n\n");
+                        messages.push(`  Use \`${candidate.replace("[", `[${type}:`)}\` for \`${rules.trim()}\``);
+                        break;
+                    }
                 }
+                _log.default.warn([
+                    `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
+                    ...messages,
+                    `If this is content and not a class, replace it with \`${candidate.replace("[", "&lsqb;").replace("]", "&rsqb;")}\` to silence this warning.`, 
+                ]);
+                continue;
             }
-            _log.default.warn([
-                `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
-                ...messages,
-                `If this is content and not a class, replace it with \`${candidate.replace('[', '&lsqb;').replace(']', '&rsqb;')}\` to silence this warning.`, 
-            ]);
-            continue;
+            matches = matches.map((list)=>list.filter((match)=>isParsableNode(match[1])
+                )
+            );
         }
         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);
@@ -538,7 +556,7 @@ function* resolveMatches(candidate, context) {
             };
             // Apply final format selector
             if (match1[0].collectedFormats) {
-                let finalFormat = (0, _formatVariantSelector).formatVariantSelector('&', ...match1[0].collectedFormats);
+                let finalFormat = (0, _formatVariantSelector).formatVariantSelector("&", ...match1[0].collectedFormats);
                 let container = _postcss.default.root({
                     nodes: [
                         match1[1].clone()
@@ -558,8 +576,9 @@ function* resolveMatches(candidate, context) {
         }
     }
 }
+exports.resolveMatches = resolveMatches;
 function inKeyframes(rule) {
-    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes';
+    return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
 }
 function generateRules(candidates, context) {
     let allRules = [];
@@ -584,13 +603,13 @@ function generateRules(candidates, context) {
         if (important === true) {
             return (rule)=>{
                 rule.walkDecls((d)=>{
-                    if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
+                    if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
                         d.important = true;
                     }
                 });
             };
         }
-        if (typeof important === 'string') {
+        if (typeof important === "string") {
             return (rule)=>{
                 rule.selectors = rule.selectors.map((selector)=>{
                     return `${important} ${selector}`;
@@ -621,8 +640,7 @@ function generateRules(candidates, context) {
         ];
     });
 }
+exports.generateRules = generateRules;
 function isArbitraryValue(input) {
-    return input.startsWith('[') && input.endsWith(']');
+    return input.startsWith("[") && input.endsWith("]");
 }
-exports.resolveMatches = resolveMatches;
-exports.generateRules = generateRules;

package/lib/lib/getModuleDependencies.js

@@ -7,19 +7,6 @@ var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
 var _resolve = _interopRequireDefault(require("resolve"));
 var _detective = _interopRequireDefault(require("detective"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function createModule(file) {
-    const source = _fs.default.readFileSync(file, 'utf-8');
-    const requires = (0, _detective).default(source);
-    return {
-        file,
-        requires
-    };
-}
 function getModuleDependencies(entryFile) {
     const rootModule = createModule(entryFile);
     const modules = [
@@ -30,7 +17,7 @@ function getModuleDependencies(entryFile) {
     for (const mdl of modules){
         mdl.requires.filter((dep)=>{
             // Only track local modules, not node_modules
-            return dep.startsWith('./') || dep.startsWith('../');
+            return dep.startsWith("./") || dep.startsWith("../");
         }).forEach((dep)=>{
             try {
                 const basedir = _path.default.dirname(mdl.file);
@@ -46,3 +33,16 @@ function getModuleDependencies(entryFile) {
     }
     return modules;
 }
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function createModule(file) {
+    const source = _fs.default.readFileSync(file, "utf-8");
+    const requires = (0, _detective).default(source);
+    return {
+        file,
+        requires
+    };
+}

package/lib/lib/normalizeTailwindDirectives.js

@@ -4,75 +4,70 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = normalizeTailwindDirectives;
 var _log = _interopRequireDefault(require("../util/log"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function normalizeTailwindDirectives(root) {
     let tailwindDirectives = new Set();
     let layerDirectives = new Set();
     let applyDirectives = new Set();
     root.walkAtRules((atRule)=>{
-        if (atRule.name === 'apply') {
+        if (atRule.name === "apply") {
             applyDirectives.add(atRule);
         }
-        if (atRule.name === 'import') {
+        if (atRule.name === "import") {
             if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
-                atRule.name = 'tailwind';
-                atRule.params = 'base';
+                atRule.name = "tailwind";
+                atRule.params = "base";
             } else if (atRule.params === '"tailwindcss/components"' || atRule.params === "'tailwindcss/components'") {
-                atRule.name = 'tailwind';
-                atRule.params = 'components';
+                atRule.name = "tailwind";
+                atRule.params = "components";
             } else if (atRule.params === '"tailwindcss/utilities"' || atRule.params === "'tailwindcss/utilities'") {
-                atRule.name = 'tailwind';
-                atRule.params = 'utilities';
+                atRule.name = "tailwind";
+                atRule.params = "utilities";
             } else if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'" || atRule.params === '"tailwindcss/variants"' || atRule.params === "'tailwindcss/variants'") {
-                atRule.name = 'tailwind';
-                atRule.params = 'variants';
+                atRule.name = "tailwind";
+                atRule.params = "variants";
             }
         }
-        if (atRule.name === 'tailwind') {
-            if (atRule.params === 'screens') {
-                atRule.params = 'variants';
+        if (atRule.name === "tailwind") {
+            if (atRule.params === "screens") {
+                atRule.params = "variants";
             }
             tailwindDirectives.add(atRule.params);
         }
         if ([
-            'layer',
-            'responsive',
-            'variants'
+            "layer",
+            "responsive",
+            "variants"
         ].includes(atRule.name)) {
             if ([
-                'responsive',
-                'variants'
+                "responsive",
+                "variants"
             ].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.`,
-                    'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer', 
+                    "https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer", 
                 ]);
             }
             layerDirectives.add(atRule);
         }
     });
-    if (!tailwindDirectives.has('base') || !tailwindDirectives.has('components') || !tailwindDirectives.has('utilities')) {
+    if (!tailwindDirectives.has("base") || !tailwindDirectives.has("components") || !tailwindDirectives.has("utilities")) {
         for (let rule of layerDirectives){
-            if (rule.name === 'layer' && [
-                'base',
-                'components',
-                'utilities'
+            if (rule.name === "layer" && [
+                "base",
+                "components",
+                "utilities"
             ].includes(rule.params)) {
                 if (!tailwindDirectives.has(rule.params)) {
                     throw rule.error(`\`@layer ${rule.params}\` is used but no matching \`@tailwind ${rule.params}\` directive is present.`);
                 }
-            } else if (rule.name === 'responsive') {
-                if (!tailwindDirectives.has('utilities')) {
-                    throw rule.error('`@responsive` is used but `@tailwind utilities` is missing.');
+            } else if (rule.name === "responsive") {
+                if (!tailwindDirectives.has("utilities")) {
+                    throw rule.error("`@responsive` is used but `@tailwind utilities` is missing.");
                 }
-            } else if (rule.name === 'variants') {
-                if (!tailwindDirectives.has('utilities')) {
-                    throw rule.error('`@variants` is used but `@tailwind utilities` is missing.');
+            } else if (rule.name === "variants") {
+                if (!tailwindDirectives.has("utilities")) {
+                    throw rule.error("`@variants` is used but `@tailwind utilities` is missing.");
                 }
             }
         }
@@ -82,3 +77,8 @@ function normalizeTailwindDirectives(root) {
         applyDirectives
     };
 }
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/lib/lib/partitionApplyAtRules.js

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = expandApplyAtRules;
+function expandApplyAtRules() {
+    return (root)=>{
+        partitionRules(root);
+    };
+}
 function partitionRules(root) {
     if (!root.walkAtRules) return;
     let applyParents = new Set();
-    root.walkAtRules('apply', (rule)=>{
+    root.walkAtRules("apply", (rule)=>{
         applyParents.add(rule.parent);
     });
     if (applyParents.size === 0) {
@@ -16,7 +21,7 @@ function partitionRules(root) {
         let nodeGroups = [];
         let lastGroup = [];
         for (let node of rule1.nodes){
-            if (node.type === 'atrule' && node.name === 'apply') {
+            if (node.type === "atrule" && node.name === "apply") {
                 if (lastGroup.length > 0) {
                     nodeGroups.push(lastGroup);
                     lastGroup = [];
@@ -46,8 +51,3 @@ function partitionRules(root) {
         rule1.remove();
     }
 }
-function expandApplyAtRules() {
-    return (root)=>{
-        partitionRules(root);
-    };
-}