tailwindcss 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -9,6 +9,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.3.1] - 2023-03-30
+
+### Fixed
+
+- Try resolving `config.default` before `config` to ensure the config file is resolved correctly ([#10898](https://github.com/tailwindlabs/tailwindcss/pull/10898))
+- Pull pseudo elements outside of `:is` and `:has` when using `@apply` ([#10903](https://github.com/tailwindlabs/tailwindcss/pull/10903))
+- Update the types for the `safelist` config ([#10901](https://github.com/tailwindlabs/tailwindcss/pull/10901))
+- Fix `@tailwindcss/line-clamp` warning ([#10915](https://github.com/tailwindlabs/tailwindcss/pull/10915), [#10919](https://github.com/tailwindlabs/tailwindcss/pull/10919))
+- Fix `process` is not defined error ([#10919](https://github.com/tailwindlabs/tailwindcss/pull/10919))
+
 ## [3.3.0] - 2023-03-27
 
 ### Added
@@ -2211,7 +2221,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.1...HEAD
+[3.3.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.0...v3.3.1
 [3.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.7...v3.3.0
 [3.2.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.6...v3.2.7
 [3.2.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.2.5...v3.2.6

package/lib/lib/expandApplyAtRules.js

@@ -11,6 +11,7 @@ const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("pos
 const _generateRules = require("./generateRules");
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _applyImportantSelector = require("../util/applyImportantSelector");
+const _formatVariantSelectorJs = require("../util/formatVariantSelector.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -487,6 +488,15 @@ function processApply(root, context, localCache) {
                         rule.walkDecls((d)=>{
                             d.important = meta.important || important1;
                         });
+                        // Move pseudo elements to the end of the selector (if necessary)
+                        let selector = (0, _postcssSelectorParser.default)().astSync(rule.selector);
+                        selector.each((sel)=>{
+                            let [pseudoElements] = (0, _formatVariantSelectorJs.collectPseudoElements)(sel);
+                            if (pseudoElements.length > 0) {
+                                sel.nodes.push(...pseudoElements.sort(_formatVariantSelectorJs.sortSelector));
+                            }
+                        });
+                        rule.selector = selector.toString();
                     });
                 }
                 // It could be that the node we were inserted was removed because the class didn't match

package/lib/lib/load-config.js

@@ -28,9 +28,13 @@ function lazyJiti() {
     });
 }
 function loadConfig(path) {
-    try {
-        return path ? require(path) : {};
-    } catch  {
-        return lazyJiti()(path);
-    }
+    let config = function() {
+        try {
+            return path ? require(path) : {};
+        } catch  {
+            return lazyJiti()(path);
+        }
+    }();
+    var _config_default;
+    return (_config_default = config.default) !== null && _config_default !== void 0 ? _config_default : config;
 }

package/lib/lib/sharedState.js

@@ -25,11 +25,16 @@ function _interopRequireDefault(obj) {
     };
 }
 let OXIDE_DEFAULT_ENABLED = _packageJson.default.tailwindcss.engine === "oxide";
-const env = {
+const env = typeof process !== "undefined" ? {
     NODE_ENV: process.env.NODE_ENV,
     DEBUG: resolveDebug(process.env.DEBUG),
     ENGINE: _packageJson.default.tailwindcss.engine,
     OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED)
+} : {
+    NODE_ENV: "production",
+    DEBUG: false,
+    ENGINE: _packageJson.default.tailwindcss.engine,
+    OXIDE: OXIDE_DEFAULT_ENABLED
 };
 const contextMap = new Map();
 const configContextMap = new Map();

package/lib/util/applyImportantSelector.js

@@ -6,17 +6,32 @@ Object.defineProperty(exports, "applyImportantSelector", {
     enumerable: true,
     get: ()=>applyImportantSelector
 });
-const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
-function applyImportantSelector(selector, important) {
-    let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector);
-    if (!matches) return `${important} ${wrapWithIs(selector)}`;
-    let [, before, pseudo, brackets] = matches;
-    return `${important} ${wrapWithIs(before + brackets)}${pseudo}`;
+const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
+const _formatVariantSelectorJs = require("./formatVariantSelector.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
-function wrapWithIs(selector) {
-    let parts = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(selector, " ");
-    if (parts.length === 1 && parts[0].startsWith(":is(") && parts[0].endsWith(")")) {
-        return selector;
-    }
-    return `:is(${selector})`;
+function applyImportantSelector(selector, important) {
+    let sel = (0, _postcssSelectorParser.default)().astSync(selector);
+    sel.each((sel)=>{
+        // Wrap with :is if it's not already wrapped
+        let isWrapped = sel.nodes[0].type === "pseudo" && sel.nodes[0].value === ":is" && sel.nodes.every((node)=>node.type !== "combinator");
+        if (!isWrapped) {
+            sel.nodes = [
+                _postcssSelectorParser.default.pseudo({
+                    value: ":is",
+                    nodes: [
+                        sel.clone()
+                    ]
+                })
+            ];
+        }
+        let [pseudoElements] = (0, _formatVariantSelectorJs.collectPseudoElements)(sel);
+        if (pseudoElements.length > 0) {
+            sel.nodes.push(...pseudoElements.sort(_formatVariantSelectorJs.sortSelector));
+        }
+    });
+    return `${important} ${sel.toString()}`;
 }

package/lib/util/formatVariantSelector.js

@@ -12,7 +12,9 @@ _export(exports, {
     formatVariantSelector: ()=>formatVariantSelector,
     eliminateIrrelevantSelectors: ()=>eliminateIrrelevantSelectors,
     finalizeSelector: ()=>finalizeSelector,
-    handleMergePseudo: ()=>handleMergePseudo
+    handleMergePseudo: ()=>handleMergePseudo,
+    collectPseudoElements: ()=>collectPseudoElements,
+    sortSelector: ()=>sortSelector
 });
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
 const _unesc = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser/dist/util/unesc"));
@@ -202,9 +204,9 @@ function finalizeSelector(current, formats, { context , candidate , base  }) {
     });
     // Move pseudo elements to the end of the selector (if necessary)
     selector.each((sel)=>{
-        let pseudoElements = collectPseudoElements(sel);
+        let [pseudoElements] = collectPseudoElements(sel);
         if (pseudoElements.length > 0) {
-            sel.nodes.push(pseudoElements.sort(sortSelector));
+            sel.nodes.push(...pseudoElements.sort(sortSelector));
         }
     });
     return selector.toString();
@@ -279,41 +281,38 @@ let pseudoElementExceptions = [
     "::-webkit-scrollbar-corner",
     "::-webkit-resizer"
 ];
-/**
- * This will make sure to move pseudo's to the correct spot (the end for
- * pseudo elements) because otherwise the selector will never work
- * anyway.
- *
- * E.g.:
- *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
- *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
- *
- * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
- *
- * @param {Selector} selector
- **/ function collectPseudoElements(selector) {
+function collectPseudoElements(selector, force = false) {
     /** @type {Node[]} */ let nodes = [];
-    for (let node of selector.nodes){
-        if (isPseudoElement(node)) {
+    let seenPseudoElement = null;
+    for (let node of [
+        ...selector.nodes
+    ]){
+        if (isPseudoElement(node, force)) {
             nodes.push(node);
             selector.removeChild(node);
+            seenPseudoElement = node.value;
+        } else if (seenPseudoElement !== null) {
+            if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
+                nodes.push(node);
+                selector.removeChild(node);
+            } else {
+                seenPseudoElement = null;
+            }
         }
         if (node === null || node === void 0 ? void 0 : node.nodes) {
-            nodes.push(...collectPseudoElements(node));
+            let hasPseudoElementRestrictions = node.type === "pseudo" && (node.value === ":is" || node.value === ":has");
+            let [collected, seenPseudoElementInSelector] = collectPseudoElements(node, force || hasPseudoElementRestrictions);
+            if (seenPseudoElementInSelector) {
+                seenPseudoElement = seenPseudoElementInSelector;
+            }
+            nodes.push(...collected);
         }
     }
-    return nodes;
+    return [
+        nodes,
+        seenPseudoElement
+    ];
 }
-// This will make sure to move pseudo's to the correct spot (the end for
-// pseudo elements) because otherwise the selector will never work
-// anyway.
-//
-// E.g.:
-//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-//
-// `::before:hover` doesn't work, which means that we can make it work
-// for you by flipping the order.
 function sortSelector(a, z) {
     // Both nodes are non-pseudo's so we can safely ignore them and keep
     // them in the same order.
@@ -334,8 +333,11 @@ function sortSelector(a, z) {
     // ::file-selector-button) to the right.
     return isPseudoElement(a) - isPseudoElement(z);
 }
-function isPseudoElement(node) {
+function isPseudoElement(node, force = false) {
     if (node.type !== "pseudo") return false;
-    if (pseudoElementExceptions.includes(node.value)) return false;
+    if (pseudoElementExceptions.includes(node.value) && !force) return false;
     return node.value.startsWith("::") || pseudoElementsBC.includes(node.value);
 }
+function isPseudoClass(node, force) {
+    return node.type === "pseudo" && !isPseudoElement(node, force);
+}

package/lib/util/normalizeConfig.js

@@ -276,19 +276,5 @@ function normalizeConfig(config) {
             break;
         }
     }
-    // Warn if the line-clamp plugin is installed
-    if (config.plugins.length > 0) {
-        let plugin;
-        try {
-            plugin = require("@tailwindcss/line-clamp");
-        } catch  {}
-        if (plugin && config.plugins.includes(plugin)) {
-            _log.default.warn("line-clamp-in-core", [
-                "As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.",
-                "Remove it from the `plugins` array in your configuration to eliminate this warning."
-            ]);
-            config.plugins = config.plugins.filter((p)=>p !== plugin);
-        }
-    }
     return config;
 }

package/lib/util/validateConfig.js

@@ -20,5 +20,16 @@ function validateConfig(config) {
             "https://tailwindcss.com/docs/content-configuration"
         ]);
     }
+    // Warn if the line-clamp plugin is installed
+    try {
+        let plugin = require("@tailwindcss/line-clamp");
+        if (config.plugins.includes(plugin)) {
+            _log.default.warn("line-clamp-in-core", [
+                "As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.",
+                "Remove it from the `plugins` array in your configuration to eliminate this warning."
+            ]);
+            config.plugins = config.plugins.filter((p)=>p !== plugin);
+        }
+    } catch  {}
     return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/lib/expandApplyAtRules.js

@@ -4,6 +4,7 @@ import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import escapeClassName from '../util/escapeClassName'
 import { applyImportantSelector } from '../util/applyImportantSelector'
+import { collectPseudoElements, sortSelector } from '../util/formatVariantSelector.js'
 
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
 
@@ -562,6 +563,17 @@ function processApply(root, context, localCache) {
             rule.walkDecls((d) => {
               d.important = meta.important || important
             })
+
+            // Move pseudo elements to the end of the selector (if necessary)
+            let selector = parser().astSync(rule.selector)
+            selector.each((sel) => {
+              let [pseudoElements] = collectPseudoElements(sel)
+              if (pseudoElements.length > 0) {
+                sel.nodes.push(...pseudoElements.sort(sortSelector))
+              }
+            })
+
+            rule.selector = selector.toString()
           })
         }
 

package/src/lib/load-config.ts

@@ -19,9 +19,13 @@ function lazyJiti() {
 }
 
 export function loadConfig(path: string): Config {
-  try {
-    return path ? require(path) : {}
-  } catch {
-    return lazyJiti()(path)
-  }
+  let config = (function () {
+    try {
+      return path ? require(path) : {}
+    } catch {
+      return lazyJiti()(path)
+    }
+  })()
+
+  return config.default ?? config
 }

package/src/lib/sharedState.js

@@ -1,12 +1,21 @@
 import pkg from '../../package.json'
 let OXIDE_DEFAULT_ENABLED = pkg.tailwindcss.engine === 'oxide'
 
-export const env = {
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: resolveDebug(process.env.DEBUG),
-  ENGINE: pkg.tailwindcss.engine,
-  OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
-}
+export const env =
+  typeof process !== 'undefined'
+    ? {
+        NODE_ENV: process.env.NODE_ENV,
+        DEBUG: resolveDebug(process.env.DEBUG),
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: resolveBoolean(process.env.OXIDE, OXIDE_DEFAULT_ENABLED),
+      }
+    : {
+        NODE_ENV: 'production',
+        DEBUG: false,
+        ENGINE: pkg.tailwindcss.engine,
+        OXIDE: OXIDE_DEFAULT_ENABLED,
+      }
+
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()

package/src/util/applyImportantSelector.js

@@ -1,19 +1,30 @@
-import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+import parser from 'postcss-selector-parser'
+import { collectPseudoElements, sortSelector } from './formatVariantSelector.js'
 
 export function applyImportantSelector(selector, important) {
-  let matches = /^(.*?)(:before|:after|::[\w-]+)(\)*)$/g.exec(selector)
-  if (!matches) return `${important} ${wrapWithIs(selector)}`
+  let sel = parser().astSync(selector)
 
-  let [, before, pseudo, brackets] = matches
-  return `${important} ${wrapWithIs(before + brackets)}${pseudo}`
-}
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
 
-function wrapWithIs(selector) {
-  let parts = splitAtTopLevelOnly(selector, ' ')
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
 
-  if (parts.length === 1 && parts[0].startsWith(':is(') && parts[0].endsWith(')')) {
-    return selector
-  }
+    let [pseudoElements] = collectPseudoElements(sel)
+    if (pseudoElements.length > 0) {
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
+    }
+  })
 
-  return `:is(${selector})`
+  return `${important} ${sel.toString()}`
 }

package/src/util/formatVariantSelector.js

@@ -246,9 +246,9 @@ export function finalizeSelector(current, formats, { context, candidate, base })
 
   // Move pseudo elements to the end of the selector (if necessary)
   selector.each((sel) => {
-    let pseudoElements = collectPseudoElements(sel)
+    let [pseudoElements] = collectPseudoElements(sel)
     if (pseudoElements.length > 0) {
-      sel.nodes.push(pseudoElements.sort(sortSelector))
+      sel.nodes.push(...pseudoElements.sort(sortSelector))
     }
   })
 
@@ -351,23 +351,45 @@ let pseudoElementExceptions = [
  * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
  *
  * @param {Selector} selector
+ * @param {boolean} force
  **/
-function collectPseudoElements(selector) {
+export function collectPseudoElements(selector, force = false) {
   /** @type {Node[]} */
   let nodes = []
+  let seenPseudoElement = null
 
-  for (let node of selector.nodes) {
-    if (isPseudoElement(node)) {
+  for (let node of [...selector.nodes]) {
+    if (isPseudoElement(node, force)) {
       nodes.push(node)
       selector.removeChild(node)
+      seenPseudoElement = node.value
+    } else if (seenPseudoElement !== null) {
+      if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
+        nodes.push(node)
+        selector.removeChild(node)
+      } else {
+        seenPseudoElement = null
+      }
     }
 
     if (node?.nodes) {
-      nodes.push(...collectPseudoElements(node))
+      let hasPseudoElementRestrictions =
+        node.type === 'pseudo' && (node.value === ':is' || node.value === ':has')
+
+      let [collected, seenPseudoElementInSelector] = collectPseudoElements(
+        node,
+        force || hasPseudoElementRestrictions
+      )
+
+      if (seenPseudoElementInSelector) {
+        seenPseudoElement = seenPseudoElementInSelector
+      }
+
+      nodes.push(...collected)
     }
   }
 
-  return nodes
+  return [nodes, seenPseudoElement]
 }
 
 // This will make sure to move pseudo's to the correct spot (the end for
@@ -380,7 +402,7 @@ function collectPseudoElements(selector) {
 //
 // `::before:hover` doesn't work, which means that we can make it work
 // for you by flipping the order.
-function sortSelector(a, z) {
+export function sortSelector(a, z) {
   // Both nodes are non-pseudo's so we can safely ignore them and keep
   // them in the same order.
   if (a.type !== 'pseudo' && z.type !== 'pseudo') {
@@ -404,9 +426,13 @@ function sortSelector(a, z) {
   return isPseudoElement(a) - isPseudoElement(z)
 }
 
-function isPseudoElement(node) {
+function isPseudoElement(node, force = false) {
   if (node.type !== 'pseudo') return false
-  if (pseudoElementExceptions.includes(node.value)) return false
+  if (pseudoElementExceptions.includes(node.value) && !force) return false
 
   return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
 }
+
+function isPseudoClass(node, force) {
+  return node.type === 'pseudo' && !isPseudoElement(node, force)
+}

package/src/util/normalizeConfig.js

@@ -297,22 +297,5 @@ export function normalizeConfig(config) {
     }
   }
 
-  // Warn if the line-clamp plugin is installed
-  if (config.plugins.length > 0) {
-    let plugin
-    try {
-      plugin = require('@tailwindcss/line-clamp')
-    } catch {}
-
-    if (plugin && config.plugins.includes(plugin)) {
-      log.warn('line-clamp-in-core', [
-        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
-        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
-      ])
-
-      config.plugins = config.plugins.filter((p) => p !== plugin)
-    }
-  }
-
   return config
 }

package/src/util/validateConfig.js

@@ -9,5 +9,18 @@ export function validateConfig(config) {
     ])
   }
 
+  // Warn if the line-clamp plugin is installed
+  try {
+    let plugin = require('@tailwindcss/line-clamp')
+    if (config.plugins.includes(plugin)) {
+      log.warn('line-clamp-in-core', [
+        'As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.',
+        'Remove it from the `plugins` array in your configuration to eliminate this warning.',
+      ])
+
+      config.plugins = config.plugins.filter((p) => p !== plugin)
+    }
+  } catch {}
+
   return config
 }

package/types/config.d.ts

@@ -46,12 +46,7 @@ type PrefixConfig = string
 type SeparatorConfig = string
 
 // Safelist related config
-type SafelistConfig =
-  | string[]
-  | {
-      pattern: RegExp
-      variants?: string[]
-    }[]
+type SafelistConfig = (string | { pattern: RegExp; variants?: string[] })[]
 
 // Blocklist related config
 type BlocklistConfig = string[]