tailwindcss 3.0.22 → 3.0.23

package/CHANGELOG.md

@@ -9,6 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.23] - 2022-02-16
+
+### Fixed
+
+- Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
+- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
+- Don't duplicate layer output when scanning content with variants + wildcards ([#7478](https://github.com/tailwindlabs/tailwindcss/pull/7478))
+- Implement `getClassOrder` instead of `sortClassList` ([#7459](https://github.com/tailwindlabs/tailwindcss/pull/7459))
+
 ## [3.0.22] - 2022-02-11
 
 ### Fixed
@@ -1865,7 +1874,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...HEAD
+[3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23
 [3.0.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...v3.0.22
 [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

package/lib/corePlugins.js

@@ -116,7 +116,28 @@ let variantPlugins = {
             'last-of-type',
             'only-of-type',
             // State
-            'visited',
+            [
+                'visited',
+                ({ container  })=>{
+                    let toRemove = [
+                        '--tw-text-opacity',
+                        '--tw-border-opacity',
+                        '--tw-bg-opacity'
+                    ];
+                    container.walkDecls((decl)=>{
+                        if (toRemove.includes(decl.prop)) {
+                            decl.remove();
+                            return;
+                        }
+                        for (const varName of toRemove){
+                            if (decl.value.includes(`/ var(${varName})`)) {
+                                decl.value = decl.value.replace(`/ var(${varName})`, '');
+                            }
+                        }
+                    });
+                    return ':visited';
+                }, 
+            ],
             'target',
             [
                 'open',
@@ -149,13 +170,22 @@ let variantPlugins = {
             ]
         );
         for (let [variantName, state] of pseudoVariants){
-            addVariant(variantName, `&${state}`);
+            addVariant(variantName, (ctx)=>{
+                let result = typeof state === 'function' ? state(ctx) : state;
+                return `&${result}`;
+            });
         }
         for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
+            addVariant(`group-${variantName1}`, (ctx)=>{
+                let result = typeof state1 === 'function' ? state1(ctx) : state1;
+                return `:merge(.group)${result} &`;
+            });
         }
         for (let [variantName2, state2] of pseudoVariants){
-            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
+            addVariant(`peer-${variantName2}`, (ctx)=>{
+                let result = typeof state2 === 'function' ? state2(ctx) : state2;
+                return `:merge(.peer)${result} ~ &`;
+            });
         }
     },
     directionVariants: ({ addVariant  })=>{

package/lib/lib/defaultExtractor.js

@@ -13,6 +13,8 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,

package/lib/lib/expandTailwindAtRules.js

@@ -157,7 +157,7 @@ function expandTailwindAtRules(context) {
         // ---
         // Find potential rules in changed files
         let candidates = new Set([
-            '*'
+            sharedState.NOT_ON_DEMAND
         ]);
         let seen = new Set();
         env.DEBUG && console.time('Reading changed files');

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;
@@ -375,6 +397,11 @@ function* resolveMatchedPlugins(classCandidate, context) {
     }
 }
 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) {

package/lib/lib/setupContextUtils.js

@@ -152,7 +152,7 @@ function withIdentifiers(styles) {
         let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node);
         // If this isn't "on-demandable", assign it a universal candidate to always include it.
         if (containsNonOnDemandableSelectors) {
-            candidates.unshift('*');
+            candidates.unshift(sharedState.NOT_ON_DEMAND);
         }
         // However, it could be that it also contains "on-demandable" candidates.
         // E.g.: `span, .foo {}`, in that case it should still be possible to use
@@ -176,8 +176,8 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         return (0, _prefixSelector).default(tailwindConfig.prefix, selector);
     }
     function prefixIdentifier(identifier, options) {
-        if (identifier === '*') {
-            return '*';
+        if (identifier === sharedState.NOT_ON_DEMAND) {
+            return sharedState.NOT_ON_DEMAND;
         }
         if (!options.respectPrefix) {
             return identifier;
@@ -749,7 +749,7 @@ function registerPlugins(plugins, context) {
         prefix(context, 'group'),
         prefix(context, 'peer')
     ]);
-    context.sortClassList = function sortClassList(classes) {
+    context.getClassOrder = function getClassOrder(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;
@@ -768,13 +768,7 @@ function registerPlugins(plugins, context) {
                 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', ...]

package/lib/lib/sharedState.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.resolveDebug = resolveDebug;
-exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
+exports.NOT_ON_DEMAND = exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
     NODE_ENV: process.env.NODE_ENV,
     DEBUG: resolveDebug(process.env.DEBUG)
@@ -15,6 +15,8 @@ const configContextMap = new Map();
 exports.configContextMap = configContextMap;
 const contextSourcesMap = new Map();
 exports.contextSourcesMap = contextSourcesMap;
+const NOT_ON_DEMAND = new String('*');
+exports.NOT_ON_DEMAND = NOT_ON_DEMAND;
 function resolveDebug(debug) {
     if (debug === undefined) {
         return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,12 +44,12 @@
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.2",
     "cssnano": "^5.0.16",
-    "esbuild": "^0.14.10",
+    "esbuild": "^0.14.21",
     "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",
+    "jest": "^27.5.1",
+    "jest-diff": "^27.5.1",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.7",
     "rimraf": "^3.0.0"

package/peers/index.js

@@ -22,31 +22,31 @@ var require_picocolors = __commonJS({
     };
     var createColors = (enabled = isColorSupported) => ({
       isColorSupported: enabled,
-      reset: enabled ? (s) => `${s}` : String,
-      bold: enabled ? formatter("", "", "") : String,
-      dim: enabled ? formatter("", "", "") : String,
-      italic: enabled ? formatter("", "") : String,
-      underline: enabled ? formatter("", "") : String,
-      inverse: enabled ? formatter("", "") : String,
-      hidden: enabled ? formatter("", "") : String,
-      strikethrough: enabled ? formatter("", "") : String,
-      black: enabled ? formatter("", "") : String,
-      red: enabled ? formatter("", "") : String,
-      green: enabled ? formatter("", "") : String,
-      yellow: enabled ? formatter("", "") : String,
-      blue: enabled ? formatter("", "") : String,
-      magenta: enabled ? formatter("", "") : String,
-      cyan: enabled ? formatter("", "") : String,
-      white: enabled ? formatter("", "") : String,
-      gray: enabled ? formatter("", "") : String,
-      bgBlack: enabled ? formatter("", "") : String,
-      bgRed: enabled ? formatter("", "") : String,
-      bgGreen: enabled ? formatter("", "") : String,
-      bgYellow: enabled ? formatter("", "") : String,
-      bgBlue: enabled ? formatter("", "") : String,
-      bgMagenta: enabled ? formatter("", "") : String,
-      bgCyan: enabled ? formatter("", "") : String,
-      bgWhite: enabled ? formatter("", "") : String
+      reset: enabled ? (s) => `\x1B[0m${s}\x1B[0m` : String,
+      bold: enabled ? formatter("\x1B[1m", "\x1B[22m", "\x1B[22m\x1B[1m") : String,
+      dim: enabled ? formatter("\x1B[2m", "\x1B[22m", "\x1B[22m\x1B[2m") : String,
+      italic: enabled ? formatter("\x1B[3m", "\x1B[23m") : String,
+      underline: enabled ? formatter("\x1B[4m", "\x1B[24m") : String,
+      inverse: enabled ? formatter("\x1B[7m", "\x1B[27m") : String,
+      hidden: enabled ? formatter("\x1B[8m", "\x1B[28m") : String,
+      strikethrough: enabled ? formatter("\x1B[9m", "\x1B[29m") : String,
+      black: enabled ? formatter("\x1B[30m", "\x1B[39m") : String,
+      red: enabled ? formatter("\x1B[31m", "\x1B[39m") : String,
+      green: enabled ? formatter("\x1B[32m", "\x1B[39m") : String,
+      yellow: enabled ? formatter("\x1B[33m", "\x1B[39m") : String,
+      blue: enabled ? formatter("\x1B[34m", "\x1B[39m") : String,
+      magenta: enabled ? formatter("\x1B[35m", "\x1B[39m") : String,
+      cyan: enabled ? formatter("\x1B[36m", "\x1B[39m") : String,
+      white: enabled ? formatter("\x1B[37m", "\x1B[39m") : String,
+      gray: enabled ? formatter("\x1B[90m", "\x1B[39m") : String,
+      bgBlack: enabled ? formatter("\x1B[40m", "\x1B[49m") : String,
+      bgRed: enabled ? formatter("\x1B[41m", "\x1B[49m") : String,
+      bgGreen: enabled ? formatter("\x1B[42m", "\x1B[49m") : String,
+      bgYellow: enabled ? formatter("\x1B[43m", "\x1B[49m") : String,
+      bgBlue: enabled ? formatter("\x1B[44m", "\x1B[49m") : String,
+      bgMagenta: enabled ? formatter("\x1B[45m", "\x1B[49m") : String,
+      bgCyan: enabled ? formatter("\x1B[46m", "\x1B[49m") : String,
+      bgWhite: enabled ? formatter("\x1B[47m", "\x1B[49m") : String
     });
     module2.exports = createColors();
     module2.exports.createColors = createColors;
@@ -19743,7 +19743,7 @@ var require_parse_cst = __commonJS({
                 str += "\b";
                 break;
               case "e":
-                str += "";
+                str += "\x1B";
                 break;
               case "f":
                 str += "\f";

package/src/corePlugins.js

@@ -70,7 +70,28 @@ export let variantPlugins = {
       'only-of-type',
 
       // State
-      'visited',
+      [
+        'visited',
+        ({ container }) => {
+          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
+
+          container.walkDecls((decl) => {
+            if (toRemove.includes(decl.prop)) {
+              decl.remove()
+
+              return
+            }
+
+            for (const varName of toRemove) {
+              if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, '')
+              }
+            }
+          })
+
+          return ':visited'
+        },
+      ],
       'target',
       ['open', '[open]'],
 
@@ -100,15 +121,27 @@ export let variantPlugins = {
     ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(variantName, `&${state}`)
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `&${result}`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+      addVariant(`group-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.group)${result} &`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
+      addVariant(`peer-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.peer)${result} ~ &`
+      })
     }
   },
 

package/src/lib/defaultExtractor.js

@@ -8,6 +8,8 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
   /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source, // h-[calc(100%-theme('spacing.1'))]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source, // h-[calc(100%-theme("spacing.1"))]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`

package/src/lib/expandTailwindAtRules.js

@@ -158,7 +158,7 @@ export default function expandTailwindAtRules(context) {
     // ---
 
     // Find potential rules in changed files
-    let candidates = new Set(['*'])
+    let candidates = new Set([sharedState.NOT_ON_DEMAND])
     let seen = new Set()
 
     env.DEBUG && console.time('Reading changed files')

package/src/lib/generateRules.js

@@ -5,6 +5,7 @@ import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
 import { updateAllClasses } from '../util/pluginUtils'
 import log from '../util/log'
+import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
@@ -382,6 +383,10 @@ function* resolveMatchedPlugins(classCandidate, context) {
 }
 
 function splitWithSeparator(input, separator) {
+  if (input === sharedState.NOT_ON_DEMAND) {
+    return [sharedState.NOT_ON_DEMAND]
+  }
+
   return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
 }
 

package/src/lib/setupContextUtils.js

@@ -138,7 +138,7 @@ function withIdentifiers(styles) {
 
     // If this isn't "on-demandable", assign it a universal candidate to always include it.
     if (containsNonOnDemandableSelectors) {
-      candidates.unshift('*')
+      candidates.unshift(sharedState.NOT_ON_DEMAND)
     }
 
     // However, it could be that it also contains "on-demandable" candidates.
@@ -163,8 +163,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
   }
 
   function prefixIdentifier(identifier, options) {
-    if (identifier === '*') {
-      return '*'
+    if (identifier === sharedState.NOT_ON_DEMAND) {
+      return sharedState.NOT_ON_DEMAND
     }
 
     if (!options.respectPrefix) {
@@ -744,33 +744,25 @@ function registerPlugins(plugins, context) {
   // 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) {
+  context.getClassOrder = function getClassOrder(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
+    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
-        }
+      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)
+      return [className, order]
+    })
   }
 
   // Generate a list of strings for autocompletion purposes, e.g.

package/src/lib/sharedState.js

@@ -5,6 +5,7 @@ export const env = {
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+export const NOT_ON_DEMAND = new String('*')
 
 export function resolveDebug(debug) {
   if (debug === undefined) {