tailwindcss 3.0.17 → 3.0.21

package/CHANGELOG.md

@@ -9,6 +9,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.21] - 2022-02-10
+
+### Fixed
+
+- Move prettier plugin to dev dependencies ([#7418](https://github.com/tailwindlabs/tailwindcss/pull/7418))
+
+## [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
+
+### Fixed
+
+- Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
+- Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
+- Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
+- Use less hacky fix for URLs detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
+- Correctly generate negative utilities when dash is before the prefix ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+- Detect prefixed negative utilities in the safelist ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+
+## [3.0.18] - 2022-01-28
+
+### Fixed
+
+- Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) ([#7232](https://github.com/tailwindlabs/tailwindcss/pull/7232))
+- Quick fix for incorrect arbitrary properties when using URLs ([#7252](https://github.com/tailwindlabs/tailwindcss/pull/7252))
+
 ## [3.0.17] - 2022-01-26
 
 ### Fixed
@@ -1829,7 +1859,11 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...HEAD
+[3.0.21]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...v3.0.21
+[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
 [3.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...v3.0.16
 [3.0.15]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.14...v3.0.15

package/LICENSE

@@ -1,7 +1,6 @@
 MIT License
 
-Copyright (c) Adam Wathan <adam.wathan@gmail.com>
-Copyright (c) Jonathan Reinink <jonathan@reinink.ca>
+Copyright (c) Tailwind Labs, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/lib/css/preflight.css

@@ -9,7 +9,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 ::before,

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

@@ -33,32 +33,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,8 +72,14 @@ 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];
         }
@@ -222,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;
@@ -267,7 +274,30 @@ 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;
@@ -347,6 +377,15 @@ function* resolveMatchedPlugins(classCandidate, context) {
 function splitWithSeparator(input, separator) {
     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();
@@ -456,7 +495,9 @@ 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);
         }
@@ -464,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.`);
@@ -673,18 +678,31 @@ function registerPlugins(plugins, context) {
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
+            let prefixLength = context.tailwindConfig.prefix.length;
             for (let util of classList){
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
                     var ref;
-                    let classes = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {}).map((value)=>(0, _nameClass).formatClass(utilName, value)
+                    let values = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {});
+                    let classes = values.map((value)=>(0, _nameClass).formatClass(utilName, value)
                     );
                     if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
+                        // This is the normal negated version
+                        // e.g. `-inset-1` or `-tw-inset-1`
                         classes = [
                             ...classes,
                             ...classes.map((cls)=>'-' + cls
                             )
                         ];
+                        // This is the negated version *after* the prefix
+                        // e.g. `tw--inset-1`
+                        // The prefix is already attached to util name
+                        // So we add the negative after the prefix
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>cls.slice(0, prefixLength) + '-' + cls.slice(prefixLength)
+                            ), 
+                        ];
                     }
                     return classes;
                 })() : [
@@ -723,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/lib/processTailwindFeatures.js

@@ -24,6 +24,8 @@ function processTailwindFeatures(setupContext) {
     return function(root, result) {
         let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives).default(root);
         (0, _detectNesting).default()(root, result);
+        // Partition apply rules that are found in the css
+        // itself.
         (0, _partitionApplyAtRules).default()(root, result);
         let context = setupContext({
             tailwindDirectives,
@@ -44,6 +46,9 @@ function processTailwindFeatures(setupContext) {
         }
         (0, _featureFlags).issueFlagNotices(context.tailwindConfig);
         (0, _expandTailwindAtRules).default(context)(root, result);
+        // Partition apply rules that are generated by
+        // addComponents, addUtilities and so on.
+        (0, _partitionApplyAtRules).default()(root, result);
         (0, _expandApplyAtRules).default(context)(root, result);
         (0, _evaluateTailwindFunctions).default(context)(root, result);
         (0, _substituteScreenAtRules).default(context)(root, result);

package/lib/util/parseBoxShadowValue.js

@@ -15,7 +15,7 @@ let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brac
 ;
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 ;
-let LENGTH = /^-?(\d+)(.*?)$/g;
+let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g;
 function parseBoxShadowValue(input) {
     let shadows = input.split(COMMA);
     return shadows.map((shadow)=>{

package/lib/util/prefixSelector.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _tap = require("./tap");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _default(prefix, selector) {
+function _default(prefix, selector, prependNegative = false) {
     return (0, _postcssSelectorParser).default((selectors)=>{
         selectors.walkClasses((classSelector)=>{
-            (0, _tap).tap(classSelector.value, (baseClass)=>{
-                classSelector.value = `${prefix}${baseClass}`;
-            });
+            let baseClass = classSelector.value;
+            let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-');
+            classSelector.value = shouldPlaceNegativeBeforePrefix ? `-${prefix}${baseClass.slice(1)}` : `${prefix}${baseClass}`;
         });
     }).processSync(selector);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.17",
+  "version": "3.0.21",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -12,11 +12,6 @@
     "tailwind": "lib/cli.js",
     "tailwindcss": "lib/cli.js"
   },
-  "contributors": [
-    "Adam Wathan <adam.wathan@gmail.com>",
-    "Jonathan Reinink <jonathan@reinink.ca>",
-    "David Hemphill <davidlee.hemphill@gmail.com>"
-  ],
   "scripts": {
     "preswcify": "npm run generate:plugin-list && rimraf lib",
     "swcify": "swc src --out-dir lib --copy-files",
@@ -46,17 +41,18 @@
     "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.127",
     "@swc/jest": "^0.2.17",
-    "@swc/register": "^0.1.7",
+    "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.2",
-    "cssnano": "^5.0.15",
+    "cssnano": "^5.0.16",
     "esbuild": "^0.14.10",
-    "eslint": "^8.6.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "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",
+    "prettier-plugin-tailwindcss": "^0.1.7",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -80,10 +76,10 @@
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
-    "postcss-selector-parser": "^6.0.8",
+    "postcss-selector-parser": "^6.0.9",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.21.0"
+    "resolve": "^1.22.0"
   },
   "browserslist": [
     "> 1%",