tailwindcss 3.0.19 → 3.0.20

package/CHANGELOG.md

@@ -7,7 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-Nothing yet!
+- Nothing yet!
+
+## [3.0.20] - 2022-02-10
+
+### Added
+
+- Expose `context.sortClassList(classes)` ([#7412](https://github.com/tailwindlabs/tailwindcss/pull/7412))
 
 ## [3.0.19] - 2022-02-07
 
@@ -1847,7 +1853,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...HEAD
+[3.0.20]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...v3.0.20
 [3.0.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...v3.0.19
 [3.0.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...v3.0.18
 [3.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.16...v3.0.17

package/lib/lib/expandApplyAtRules.js

@@ -140,11 +140,14 @@ function processApply(root, context) {
                 throw apply.error(`@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`);
             }
             for (let applyCandidate of applyCandidates){
+                if ([
+                    prefix(context, 'group'),
+                    prefix(context, 'peer')
+                ].includes(applyCandidate)) {
+                    // TODO: Link to specific documentation page with error code.
+                    throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
+                }
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix(context, 'group')) {
-                        // TODO: Link to specific documentation page with error code.
-                        throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
-                    }
                     throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
                 }
                 let rules = applyClassCache.get(applyCandidate);

package/lib/lib/generateRules.js

@@ -228,6 +228,7 @@ function applyVariant(variant, matches, context) {
                 // .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;
@@ -379,6 +380,7 @@ function splitWithSeparator(input, separator) {
 function* recordCandidates(matches, classCandidate) {
     for (const match of matches){
         match[1].raws.tailwind = {
+            ...match[1].raws.tailwind,
             classCandidate
         };
         yield match;
@@ -503,6 +505,10 @@ function* resolveMatches(candidate, context) {
             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/setupContextUtils.js

@@ -24,6 +24,7 @@ var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
+var _generateRules = require("./generateRules");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -50,6 +51,10 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function prefix(context, selector) {
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
+}
 function parseVariantFormatString(input) {
     if (input.includes('{')) {
         if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
@@ -736,9 +741,44 @@ function registerPlugins(plugins, context) {
             }
         }
     }
+    // A list of utilities that are used by certain Tailwind CSS utilities but
+    // that don't exist on their own. This will result in them "not existing" and
+    // sorting could be weird since you still require them in order to make the
+    // host utitlies work properly. (Thanks Biology)
+    let parasiteUtilities = new Set([
+        prefix(context, 'group'),
+        prefix(context, 'peer')
+    ]);
+    context.sortClassList = function sortClassList(classes) {
+        let sortedClassNames = new Map();
+        for (let [sort, rule] of (0, _generateRules).generateRules(new Set(classes), context)){
+            if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue;
+            sortedClassNames.set(rule.raws.tailwind.candidate, sort);
+        }
+        return classes.map((className)=>{
+            var ref;
+            let order = (ref = sortedClassNames.get(className)) !== null && ref !== void 0 ? ref : null;
+            if (order === null && parasiteUtilities.has(className)) {
+                // This will make sure that it is at the very beginning of the
+                // `components` layer which technically means 'before any
+                // components'.
+                order = context.layerOrder.components;
+            }
+            return [
+                className,
+                order
+            ];
+        }).sort(([, a], [, z])=>{
+            if (a === z) return 0;
+            if (a === null) return -1;
+            if (z === null) return 1;
+            return (0, _bigSign).default(a - z);
+        }).map(([className])=>className
+        );
+    };
     // Generate a list of strings for autocompletion purposes, e.g.
     // ['uppercase', 'lowercase', ...]
-    context.getClassList = function() {
+    context.getClassList = function getClassList() {
         let output = [];
         for (let util of classList){
             if (Array.isArray(util)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.19",
+  "version": "3.0.20",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -50,7 +50,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.4.7",
     "jest-diff": "^27.4.6",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.0"
   },
@@ -77,6 +77,7 @@
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.9",
     "postcss-value-parser": "^4.2.0",
+    "prettier-plugin-tailwindcss": "^0.1.7",
     "quick-lru": "^5.1.1",
     "resolve": "^1.22.0"
   },

package/peers/index.js

@@ -4407,11 +4407,13 @@ var require_parser = __commonJS({
         if (brackets.length > 0)
           this.unclosedBracket(bracket);
         if (end && colon) {
-          while (tokens.length) {
-            token = tokens[tokens.length - 1][0];
-            if (token !== "space" && token !== "comment")
-              break;
-            this.tokenizer.back(tokens.pop());
+          if (!customProperty) {
+            while (tokens.length) {
+              token = tokens[tokens.length - 1][0];
+              if (token !== "space" && token !== "comment")
+                break;
+              this.tokenizer.back(tokens.pop());
+            }
           }
           this.decl(tokens, customProperty);
         } else {
@@ -4467,7 +4469,14 @@ var require_parser = __commonJS({
           node.raws.before += node.prop[0];
           node.prop = node.prop.slice(1);
         }
-        let firstSpaces = this.spacesAndCommentsFromStart(tokens);
+        let firstSpaces = [];
+        let next;
+        while (tokens.length) {
+          next = tokens[0][0];
+          if (next !== "space" && next !== "comment")
+            break;
+          firstSpaces.push(tokens.shift());
+        }
         this.precheckMissedSemicolon(tokens);
         for (let i = tokens.length - 1; i >= 0; i--) {
           token = tokens[i];
@@ -4499,12 +4508,11 @@ var require_parser = __commonJS({
           }
         }
         let hasWord = tokens.some((i) => i[0] !== "space" && i[0] !== "comment");
-        this.raw(node, "value", tokens);
         if (hasWord) {
-          node.raws.between += firstSpaces;
-        } else {
-          node.value = firstSpaces + node.value;
+          node.raws.between += firstSpaces.map((i) => i[1]).join("");
+          firstSpaces = [];
         }
+        this.raw(node, "value", firstSpaces.concat(tokens), customProperty);
         if (node.value.includes(":") && !customProperty) {
           this.checkMissedSemicolon(tokens);
         }
@@ -4635,28 +4643,25 @@ var require_parser = __commonJS({
         if (node.type !== "comment")
           this.semicolon = false;
       }
-      raw(node, prop, tokens) {
+      raw(node, prop, tokens, customProperty) {
         let token, type;
         let length = tokens.length;
         let value = "";
         let clean = true;
         let next, prev;
-        let pattern = /^([#.|])?(\w)+/i;
         for (let i = 0; i < length; i += 1) {
           token = tokens[i];
           type = token[0];
-          if (type === "comment" && node.type === "rule") {
+          if (type === "space" && i === length - 1 && !customProperty) {
+            clean = false;
+          } else if (type === "comment") {
             prev = tokens[i - 1];
             next = tokens[i + 1];
-            if (prev[0] !== "space" && next[0] !== "space" && pattern.test(prev[1]) && pattern.test(next[1])) {
+            if (prev && next && prev[0] !== "space" && next[0] !== "space") {
               value += token[1];
             } else {
               clean = false;
             }
-            continue;
-          }
-          if (type === "comment" || type === "space" && i === length - 1) {
-            clean = false;
           } else {
             value += token[1];
           }
@@ -5356,8 +5361,12 @@ var require_no_work_result = __commonJS({
         } catch (error) {
           this.error = error;
         }
-        this._root = root;
-        return root;
+        if (this.error) {
+          throw this.error;
+        } else {
+          this._root = root;
+          return root;
+        }
       }
       get messages() {
         return [];
@@ -5408,7 +5417,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.5";
+        this.version = "8.4.6";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {

package/src/lib/expandApplyAtRules.js

@@ -161,12 +161,12 @@ function processApply(root, context) {
       }
 
       for (let applyCandidate of applyCandidates) {
-        if (!applyClassCache.has(applyCandidate)) {
-          if (applyCandidate === prefix(context, 'group')) {
-            // TODO: Link to specific documentation page with error code.
-            throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
-          }
+        if ([prefix(context, 'group'), prefix(context, 'peer')].includes(applyCandidate)) {
+          // TODO: Link to specific documentation page with error code.
+          throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
+        }
 
+        if (!applyClassCache.has(applyCandidate)) {
           throw apply.error(
             `The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`
           )

package/src/lib/generateRules.js

@@ -234,7 +234,7 @@ function applyVariant(variant, matches, context) {
         // 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 = { parentLayer: meta.layer }
+        clone.nodes[0].raws.tailwind = { ...clone.nodes[0].raws.tailwind, parentLayer: meta.layer }
 
         let withOffset = [
           {
@@ -387,7 +387,7 @@ function splitWithSeparator(input, separator) {
 
 function* recordCandidates(matches, classCandidate) {
   for (const match of matches) {
-    match[1].raws.tailwind = { classCandidate }
+    match[1].raws.tailwind = { ...match[1].raws.tailwind, classCandidate }
 
     yield match
   }
@@ -517,6 +517,8 @@ function* resolveMatches(candidate, context) {
     }
 
     for (let match of matches) {
+      match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
+
       // Apply final format selector
       if (match[0].collectedFormats) {
         let finalFormat = formatVariantSelector('&', ...match[0].collectedFormats)

package/src/lib/setupContextUtils.js

@@ -19,6 +19,12 @@ import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import { generateRules } from './generateRules'
+
+function prefix(context, selector) {
+  let prefix = context.tailwindConfig.prefix
+  return typeof prefix === 'function' ? prefix(selector) : prefix + selector
+}
 
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
@@ -733,9 +739,43 @@ function registerPlugins(plugins, context) {
     }
   }
 
+  // A list of utilities that are used by certain Tailwind CSS utilities but
+  // that don't exist on their own. This will result in them "not existing" and
+  // sorting could be weird since you still require them in order to make the
+  // host utitlies work properly. (Thanks Biology)
+  let parasiteUtilities = new Set([prefix(context, 'group'), prefix(context, 'peer')])
+  context.sortClassList = function sortClassList(classes) {
+    let sortedClassNames = new Map()
+    for (let [sort, rule] of generateRules(new Set(classes), context)) {
+      if (sortedClassNames.has(rule.raws.tailwind.candidate)) continue
+      sortedClassNames.set(rule.raws.tailwind.candidate, sort)
+    }
+
+    return classes
+      .map((className) => {
+        let order = sortedClassNames.get(className) ?? null
+
+        if (order === null && parasiteUtilities.has(className)) {
+          // This will make sure that it is at the very beginning of the
+          // `components` layer which technically means 'before any
+          // components'.
+          order = context.layerOrder.components
+        }
+
+        return [className, order]
+      })
+      .sort(([, a], [, z]) => {
+        if (a === z) return 0
+        if (a === null) return -1
+        if (z === null) return 1
+        return bigSign(a - z)
+      })
+      .map(([className]) => className)
+  }
+
   // Generate a list of strings for autocompletion purposes, e.g.
   // ['uppercase', 'lowercase', ...]
-  context.getClassList = function () {
+  context.getClassList = function getClassList() {
     let output = []
 
     for (let util of classList) {