tailwindcss 3.2.7 → 3.3.1

package/lib/public/colors.js

@@ -34,7 +34,8 @@ const _default = {
         600: "#475569",
         700: "#334155",
         800: "#1e293b",
-        900: "#0f172a"
+        900: "#0f172a",
+        950: "#020617"
     },
     gray: {
         50: "#f9fafb",
@@ -46,7 +47,8 @@ const _default = {
         600: "#4b5563",
         700: "#374151",
         800: "#1f2937",
-        900: "#111827"
+        900: "#111827",
+        950: "#030712"
     },
     zinc: {
         50: "#fafafa",
@@ -58,7 +60,8 @@ const _default = {
         600: "#52525b",
         700: "#3f3f46",
         800: "#27272a",
-        900: "#18181b"
+        900: "#18181b",
+        950: "#09090b"
     },
     neutral: {
         50: "#fafafa",
@@ -70,7 +73,8 @@ const _default = {
         600: "#525252",
         700: "#404040",
         800: "#262626",
-        900: "#171717"
+        900: "#171717",
+        950: "#0a0a0a"
     },
     stone: {
         50: "#fafaf9",
@@ -82,7 +86,8 @@ const _default = {
         600: "#57534e",
         700: "#44403c",
         800: "#292524",
-        900: "#1c1917"
+        900: "#1c1917",
+        950: "#0c0a09"
     },
     red: {
         50: "#fef2f2",
@@ -94,7 +99,8 @@ const _default = {
         600: "#dc2626",
         700: "#b91c1c",
         800: "#991b1b",
-        900: "#7f1d1d"
+        900: "#7f1d1d",
+        950: "#450a0a"
     },
     orange: {
         50: "#fff7ed",
@@ -106,7 +112,8 @@ const _default = {
         600: "#ea580c",
         700: "#c2410c",
         800: "#9a3412",
-        900: "#7c2d12"
+        900: "#7c2d12",
+        950: "#431407"
     },
     amber: {
         50: "#fffbeb",
@@ -118,7 +125,8 @@ const _default = {
         600: "#d97706",
         700: "#b45309",
         800: "#92400e",
-        900: "#78350f"
+        900: "#78350f",
+        950: "#451a03"
     },
     yellow: {
         50: "#fefce8",
@@ -130,7 +138,8 @@ const _default = {
         600: "#ca8a04",
         700: "#a16207",
         800: "#854d0e",
-        900: "#713f12"
+        900: "#713f12",
+        950: "#422006"
     },
     lime: {
         50: "#f7fee7",
@@ -142,7 +151,8 @@ const _default = {
         600: "#65a30d",
         700: "#4d7c0f",
         800: "#3f6212",
-        900: "#365314"
+        900: "#365314",
+        950: "#1a2e05"
     },
     green: {
         50: "#f0fdf4",
@@ -154,7 +164,8 @@ const _default = {
         600: "#16a34a",
         700: "#15803d",
         800: "#166534",
-        900: "#14532d"
+        900: "#14532d",
+        950: "#052e16"
     },
     emerald: {
         50: "#ecfdf5",
@@ -166,7 +177,8 @@ const _default = {
         600: "#059669",
         700: "#047857",
         800: "#065f46",
-        900: "#064e3b"
+        900: "#064e3b",
+        950: "#022c22"
     },
     teal: {
         50: "#f0fdfa",
@@ -178,7 +190,8 @@ const _default = {
         600: "#0d9488",
         700: "#0f766e",
         800: "#115e59",
-        900: "#134e4a"
+        900: "#134e4a",
+        950: "#042f2e"
     },
     cyan: {
         50: "#ecfeff",
@@ -190,7 +203,8 @@ const _default = {
         600: "#0891b2",
         700: "#0e7490",
         800: "#155e75",
-        900: "#164e63"
+        900: "#164e63",
+        950: "#083344"
     },
     sky: {
         50: "#f0f9ff",
@@ -202,7 +216,8 @@ const _default = {
         600: "#0284c7",
         700: "#0369a1",
         800: "#075985",
-        900: "#0c4a6e"
+        900: "#0c4a6e",
+        950: "#082f49"
     },
     blue: {
         50: "#eff6ff",
@@ -214,7 +229,8 @@ const _default = {
         600: "#2563eb",
         700: "#1d4ed8",
         800: "#1e40af",
-        900: "#1e3a8a"
+        900: "#1e3a8a",
+        950: "#172554"
     },
     indigo: {
         50: "#eef2ff",
@@ -226,7 +242,8 @@ const _default = {
         600: "#4f46e5",
         700: "#4338ca",
         800: "#3730a3",
-        900: "#312e81"
+        900: "#312e81",
+        950: "#1e1b4b"
     },
     violet: {
         50: "#f5f3ff",
@@ -238,7 +255,8 @@ const _default = {
         600: "#7c3aed",
         700: "#6d28d9",
         800: "#5b21b6",
-        900: "#4c1d95"
+        900: "#4c1d95",
+        950: "#2e1065"
     },
     purple: {
         50: "#faf5ff",
@@ -250,7 +268,8 @@ const _default = {
         600: "#9333ea",
         700: "#7e22ce",
         800: "#6b21a8",
-        900: "#581c87"
+        900: "#581c87",
+        950: "#3b0764"
     },
     fuchsia: {
         50: "#fdf4ff",
@@ -262,7 +281,8 @@ const _default = {
         600: "#c026d3",
         700: "#a21caf",
         800: "#86198f",
-        900: "#701a75"
+        900: "#701a75",
+        950: "#4a044e"
     },
     pink: {
         50: "#fdf2f8",
@@ -274,7 +294,8 @@ const _default = {
         600: "#db2777",
         700: "#be185d",
         800: "#9d174d",
-        900: "#831843"
+        900: "#831843",
+        950: "#500724"
     },
     rose: {
         50: "#fff1f2",
@@ -286,7 +307,8 @@ const _default = {
         600: "#e11d48",
         700: "#be123c",
         800: "#9f1239",
-        900: "#881337"
+        900: "#881337",
+        950: "#4c0519"
     },
     get lightBlue () {
         warn({

package/lib/public/default-config.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "default", {
     get: ()=>_default
 });
 const _cloneDeep = require("../util/cloneDeep");
-const _defaultConfigStub = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/defaultConfig.stub"));
+const _configFull = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/config.full"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const _default = (0, _cloneDeep.cloneDeep)(_defaultConfigStub.default);
+const _default = (0, _cloneDeep.cloneDeep)(_configFull.default);

package/lib/public/default-theme.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "default", {
     get: ()=>_default
 });
 const _cloneDeep = require("../util/cloneDeep");
-const _defaultConfigStub = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/defaultConfig.stub"));
+const _configFull = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/config.full"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const _default = (0, _cloneDeep.cloneDeep)(_defaultConfigStub.default.theme);
+const _default = (0, _cloneDeep.cloneDeep)(_configFull.default.theme);

package/lib/public/load-config.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _loadConfig = require("../lib/load-config");
+const _default = _loadConfig.loadConfig;

package/lib/util/applyImportantSelector.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "applyImportantSelector", {
+    enumerable: true,
+    get: ()=>applyImportantSelector
+});
+const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
+const _formatVariantSelectorJs = require("./formatVariantSelector.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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/dataTypes.js

@@ -41,6 +41,9 @@ function isCSSFunction(value) {
 const placeholder = "--tw-placeholder";
 const placeholderRe = new RegExp(placeholder, "g");
 function normalize(value, isRoot = true) {
+    if (value.startsWith("--")) {
+        return `var(${value})`;
+    }
     // Keep raw strings if it starts with `url(`
     if (value.includes("url(")) {
         return value.split(/(url\(.*?\))/g).filter(Boolean).map((part)=>{

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/getAllConfigs.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "default", {
     enumerable: true,
     get: ()=>getAllConfigs
 });
-const _defaultConfigStubJs = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/defaultConfig.stub.js"));
+const _configFullJs = /*#__PURE__*/ _interopRequireDefault(require("../../stubs/config.full.js"));
 const _featureFlags = require("../featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) {
 function getAllConfigs(config) {
     var _config_presets;
     const configs = ((_config_presets = config === null || config === void 0 ? void 0 : config.presets) !== null && _config_presets !== void 0 ? _config_presets : [
-        _defaultConfigStubJs.default
+        _configFullJs.default
     ]).slice().reverse().flatMap((preset)=>getAllConfigs(preset instanceof Function ? preset() : preset));
     const features = {
         // Add experimental configs here...

package/lib/util/normalizeConfig.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "normalizeConfig", {
     enumerable: true,
     get: ()=>normalizeConfig
 });
+const _featureFlags = require("../featureFlags");
 const _log = /*#__PURE__*/ _interopRequireWildcard(require("./log"));
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -191,13 +192,11 @@ function normalizeConfig(config) {
     // Normalize the `content`
     config.content = {
         relative: (()=>{
-            var _config_future;
             let { content  } = config;
             if (content === null || content === void 0 ? void 0 : content.relative) {
                 return content.relative;
             }
-            var _config_future_relativeContentPathsByDefault;
-            return (_config_future_relativeContentPathsByDefault = (_config_future = config.future) === null || _config_future === void 0 ? void 0 : _config_future.relativeContentPathsByDefault) !== null && _config_future_relativeContentPathsByDefault !== void 0 ? _config_future_relativeContentPathsByDefault : false;
+            return (0, _featureFlags.flagEnabled)(config, "relativeContentPathsByDefault");
         })(),
         files: (()=>{
             let { content , purge  } = config;

package/lib/util/pluginUtils.js

@@ -104,6 +104,13 @@ function parseColorFormat(value) {
     }
     return value;
 }
+function unwrapArbitraryModifier(modifier) {
+    modifier = modifier.slice(1, -1);
+    if (modifier.startsWith("--")) {
+        modifier = `var(${modifier})`;
+    }
+    return modifier;
+}
 function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
     var _options_values;
     if (((_options_values = options.values) === null || _options_values === void 0 ? void 0 : _options_values[modifier]) !== undefined) {
@@ -122,7 +129,7 @@ function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
         }
         normalizedColor = parseColorFormat(normalizedColor);
         if (isArbitraryValue(alpha)) {
-            return (0, _withAlphaVariable.withAlphaValue)(normalizedColor, alpha.slice(1, -1));
+            return (0, _withAlphaVariable.withAlphaValue)(normalizedColor, unwrapArbitraryModifier(alpha));
         }
         if (((_tailwindConfig_theme = tailwindConfig.theme) === null || _tailwindConfig_theme === void 0 ? void 0 : (_tailwindConfig_theme_opacity = _tailwindConfig_theme.opacity) === null || _tailwindConfig_theme_opacity === void 0 ? void 0 : _tailwindConfig_theme_opacity[alpha]) === undefined) {
             return undefined;
@@ -237,7 +244,7 @@ function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
             if (configValue !== null) {
                 utilityModifier = configValue;
             } else if (isArbitraryValue(utilityModifier)) {
-                utilityModifier = utilityModifier.slice(1, -1);
+                utilityModifier = unwrapArbitraryModifier(utilityModifier);
             }
         }
     }

package/lib/util/resolveConfigPath.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: ()=>resolveConfigPath
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: ()=>resolveConfigPath,
+    resolveDefaultConfigPath: ()=>resolveDefaultConfigPath
 });
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireDefault(require("path"));
@@ -13,6 +19,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+const defaultConfigFiles = [
+    "./tailwind.config.js",
+    "./tailwind.config.cjs",
+    "./tailwind.config.mjs",
+    "./tailwind.config.ts"
+];
 function isObject(value) {
     return typeof value === "object" && value !== null;
 }
@@ -40,10 +52,10 @@ function resolveConfigPath(pathOrConfig) {
         return _path.default.resolve(pathOrConfig);
     }
     // require('tailwindcss')
-    for (const configFile of [
-        "./tailwind.config.js",
-        "./tailwind.config.cjs"
-    ]){
+    return resolveDefaultConfigPath();
+}
+function resolveDefaultConfigPath() {
+    for (const configFile of defaultConfigFiles){
         try {
             const configPath = _path.default.resolve(configFile);
             _fs.default.accessSync(configPath);

package/lib/util/splitAtTopLevelOnly.js

@@ -24,14 +24,20 @@ function splitAtTopLevelOnly(input, separator) {
     let stack = [];
     let parts = [];
     let lastPos = 0;
+    let isEscaped = false;
     for(let idx = 0; idx < input.length; idx++){
         let char = input[idx];
-        if (stack.length === 0 && char === separator[0]) {
+        if (stack.length === 0 && char === separator[0] && !isEscaped) {
             if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
                 parts.push(input.slice(lastPos, idx));
                 lastPos = idx + separator.length;
             }
         }
+        if (isEscaped) {
+            isEscaped = false;
+        } else if (char === "\\") {
+            isEscaped = true;
+        }
         if (char === "(" || char === "[" || char === "{") {
             stack.push(char);
         } else if (char === ")" && stack[stack.length - 1] === "(" || char === "]" && stack[stack.length - 1] === "[" || char === "}" && stack[stack.length - 1] === "{") {

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/loadConfig.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from './types/config'
+
+declare function loadConfig(path: string): Config
+export = loadConfig

package/loadConfig.js

@@ -0,0 +1,2 @@
+let loadConfig = require('./lib/public/load-config')
+module.exports = (loadConfig.__esModule ? loadConfig : { default: loadConfig }).default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.2.7",
+  "version": "3.3.1",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -38,7 +38,7 @@
     "lib/*",
     "peers/*",
     "scripts/*.js",
-    "stubs/*.stub.js",
+    "stubs/*",
     "nesting/*",
     "types/**/*",
     "*.d.ts",
@@ -73,12 +73,12 @@
     "arg": "^5.0.2",
     "chokidar": "^3.5.3",
     "color-name": "^1.1.4",
-    "detective": "^5.2.1",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
     "fast-glob": "^3.2.12",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
+    "jiti": "^1.17.2",
     "lilconfig": "^2.0.6",
     "micromatch": "^4.0.5",
     "normalize-path": "^3.0.0",
@@ -92,7 +92,8 @@
     "postcss-selector-parser": "^6.0.11",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.22.1"
+    "resolve": "^1.22.1",
+    "sucrase": "^3.29.0"
   },
   "browserslist": [
     "> 1%",

package/src/cli/build/index.js

@@ -2,9 +2,10 @@
 
 import fs from 'fs'
 import path from 'path'
+import { resolveDefaultConfigPath } from '../../util/resolveConfigPath.js'
 import { createProcessor } from './plugin.js'
 
-export async function build(args, configs) {
+export async function build(args) {
   let input = args['--input']
   let shouldWatch = args['--watch']
 
@@ -25,11 +26,7 @@ export async function build(args, configs) {
   }
 
   // TODO: Reference the @config path here if exists
-  let configPath = args['--config']
-    ? args['--config']
-    : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve(`./${configs.tailwind}`)
-      )
+  let configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 
   let processor = await createProcessor(args, configPath)
 
@@ -44,6 +41,9 @@ export async function build(args, configs) {
 
     await processor.watch()
   } else {
-    await processor.build()
+    await processor.build().catch((e) => {
+      console.error(e)
+      process.exit(1)
+    })
   }
 }