tailwindcss 3.0.0-alpha.2 → 3.0.0

package/lib/lib/substituteScreenAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = _default;
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -12,13 +13,15 @@ function _interopRequireDefault(obj) {
 function _default({ tailwindConfig: { theme  }  }) {
     return function(css) {
         css.walkAtRules('screen', (atRule)=>{
-            var ref, ref1;
-            const screen = atRule.params;
-            if (!((ref = theme.screens) === null || ref === void 0 ? void 0 : (ref1 = ref.hasOwnProperty) === null || ref1 === void 0 ? void 0 : ref1.call(ref, screen))) {
+            let screen = atRule.params;
+            let screens = (0, _normalizeScreens).normalizeScreens(theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw atRule.error(`No \`${screen}\` screen found.`);
             }
             atRule.name = 'media';
-            atRule.params = (0, _buildMediaQuery).default(theme.screens[screen]);
+            atRule.params = (0, _buildMediaQuery).default(screenDefinition);
         });
     };
 }

package/lib/util/buildMediaQuery.js

@@ -4,28 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = buildMediaQuery;
 function buildMediaQuery(screens) {
-    if (typeof screens === 'string') {
-        screens = {
-            min: screens
-        };
-    }
-    if (!Array.isArray(screens)) {
-        screens = [
-            screens
-        ];
-    }
-    return screens.map((screen)=>{
-        var ref;
-        if (screen === null || screen === void 0 ? void 0 : (ref = screen.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(screen, 'raw')) {
-            return screen.raw;
-        }
-        return Object.entries(screen).map(([feature, value])=>{
-            var _feature;
-            feature = (_feature = ({
-                min: 'min-width',
-                max: 'max-width'
-            })[feature]) !== null && _feature !== void 0 ? _feature : feature;
-            return `(${feature}: ${value})`;
-        }).join(' and ');
-    }).join(', ');
+    screens = Array.isArray(screens) ? screens : [
+        screens
+    ];
+    return screens.map((screen1)=>screen1.values.map((screen)=>{
+            if (screen.raw !== undefined) {
+                return screen.raw;
+            }
+            return [
+                screen.min && `(min-width: ${screen.min})`,
+                screen.max && `(max-width: ${screen.max})`, 
+            ].filter(Boolean).join(' and ');
+        })
+    ).join(', ');
 }

package/lib/util/dataTypes.js

@@ -19,6 +19,12 @@ exports.absoluteSize = absoluteSize;
 exports.relativeSize = relativeSize;
 var _color = require("./color");
 var _parseBoxShadowValue = require("./parseBoxShadowValue");
+let cssFunctions = [
+    'min',
+    'max',
+    'clamp',
+    'calc'
+];
 // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
 let COMMA = /,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 ;
@@ -49,10 +55,12 @@ function url(value) {
     return value.startsWith('url(');
 }
 function number(value) {
-    return !isNaN(Number(value));
+    return !isNaN(Number(value)) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?`).test(value)
+    );
 }
 function percentage(value) {
-    return /%$/g.test(value) || /^calc\(.+?%\)/g.test(value);
+    return /%$/g.test(value) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?%`).test(value)
+    );
 }
 let lengthUnits = [
     'cm',
@@ -74,7 +82,10 @@ let lengthUnits = [
 ];
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`;
 function length(value) {
-    return new RegExp(`${lengthUnitsPattern}$`).test(value) || new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value);
+    return value.split(UNDERSCORE).every((part)=>{
+        return part === '0' || new RegExp(`${lengthUnitsPattern}$`).test(part) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part)
+        );
+    });
 }
 let lineWidths = new Set([
     'thin',

package/lib/util/formatVariantSelector.js

@@ -40,7 +40,16 @@ function formatVariantSelector(current, ...others) {
 function finalizeSelector(format, { selector: selector1 , candidate , context  }) {
     var ref, ref1;
     var ref2;
-    let base = candidate.split((ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':').pop();
+    let separator = (ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':';
+    // Split by the separator, but ignore the separator inside square brackets:
+    //
+    // E.g.: dark:lg:hover:[paint-order:markers]
+    //           ┬  ┬     ┬            ┬
+    //           │  │     │            ╰── We will not split here
+    //           ╰──┴─────┴─────────────── We will split here
+    //
+    let splitter = new RegExp(`\\${separator}(?![^[]*\\])`);
+    let base = candidate.split(splitter).pop();
     if (context === null || context === void 0 ? void 0 : (ref1 = context.tailwindConfig) === null || ref1 === void 0 ? void 0 : ref1.prefix) {
         format = (0, _prefixSelector).default(context.tailwindConfig.prefix, format);
     }
@@ -69,17 +78,92 @@ function finalizeSelector(format, { selector: selector1 , candidate , context  }
     selector1 = selector1.replace(`.${(0, _escapeClassName).default(base)}`, format);
     // Remove unnecessary pseudo selectors that we used as placeholders
     return (0, _postcssSelectorParser).default((selectors)=>{
-        return selectors.map((selector)=>{
-            selector.walkPseudos((p)=>{
+        return selectors.map((selector2)=>{
+            selector2.walkPseudos((p)=>{
                 if (selectorFunctions.has(p.value)) {
                     p.replaceWith(p.nodes);
                 }
                 return p;
             });
-            return selector;
+            // 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 collectPseudoElements(selector) {
+                let nodes = [];
+                for (let node of selector.nodes){
+                    if (isPseudoElement(node)) {
+                        nodes.push(node);
+                        selector.removeChild(node);
+                    }
+                    if (node === null || node === void 0 ? void 0 : node.nodes) {
+                        nodes.push(...collectPseudoElements(node));
+                    }
+                }
+                return nodes;
+            }
+            let pseudoElements = collectPseudoElements(selector2);
+            if (pseudoElements.length > 0) {
+                selector2.nodes.push(pseudoElements.sort(sortSelector));
+            }
+            return selector2;
         });
     }).processSync(selector1);
 }
+// Note: As a rule, double colons (::) should be used instead of a single colon
+// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+// this distinction was not present in older versions of the W3C spec, most
+// browsers support both syntaxes for the original pseudo-elements.
+let pseudoElementsBC = [
+    ':before',
+    ':after',
+    ':first-line',
+    ':first-letter'
+];
+// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
+let pseudoElementExceptions = [
+    '::file-selector-button'
+];
+// 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.
+    if (a.type !== 'pseudo' && z.type !== 'pseudo') {
+        return 0;
+    }
+    // If one of them is a combinator, we need to keep it in the same order
+    // because that means it will start a new "section" in the selector.
+    if (a.type === 'combinator' ^ z.type === 'combinator') {
+        return 0;
+    }
+    // One of the items is a pseudo and the other one isn't. Let's move
+    // the pseudo to the right.
+    if (a.type === 'pseudo' ^ z.type === 'pseudo') {
+        return (a.type === 'pseudo') - (z.type === 'pseudo');
+    }
+    // Both are pseudo's, move the pseudo elements (except for
+    // ::file-selector-button) to the right.
+    return isPseudoElement(a) - isPseudoElement(z);
+}
+function isPseudoElement(node) {
+    if (node.type !== 'pseudo') return false;
+    if (pseudoElementExceptions.includes(node.value)) return false;
+    return node.value.startsWith('::') || pseudoElementsBC.includes(node.value);
+}
 function resolveFunctionArgument(haystack, needle, arg) {
     let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle);
     if (startIdx === -1) return null;

package/lib/util/isValidArbitraryValue.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = isValidArbitraryValue;
+let matchingBrackets = new Map([
+    [
+        '{',
+        '}'
+    ],
+    [
+        '[',
+        ']'
+    ],
+    [
+        '(',
+        ')'
+    ], 
+]);
+let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
+        v,
+        k
+    ]
+));
+let quotes = new Set([
+    '"',
+    "'",
+    '`'
+]);
+function isValidArbitraryValue(value) {
+    let stack = [];
+    let inQuotes = false;
+    for(let i = 0; i < value.length; i++){
+        let char = value[i];
+        if (char === ':' && !inQuotes && stack.length === 0) {
+            return false;
+        }
+        // Non-escaped quotes allow us to "allow" anything in between
+        if (quotes.has(char) && value[i - 1] !== '\\') {
+            inQuotes = !inQuotes;
+        }
+        if (inQuotes) continue;
+        if (value[i - 1] === '\\') continue; // Escaped
+        if (matchingBrackets.has(char)) {
+            stack.push(char);
+        } else if (inverseMatchingBrackets.has(char)) {
+            let inverse = inverseMatchingBrackets.get(char);
+            // Nothing to pop from, therefore it is unbalanced
+            if (stack.length <= 0) {
+                return false;
+            }
+            // Popped value must match the inverse value, otherwise it is unbalanced
+            if (stack.pop() !== inverse) {
+                return false;
+            }
+        }
+    }
+    // If there is still something on the stack, it is also unbalanced
+    if (stack.length > 0) {
+        return false;
+    }
+    // All good, totally balanced!
+    return true;
+}

package/lib/util/nameClass.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.asClass = asClass;
 exports.default = nameClass;
 exports.formatClass = formatClass;
 var _escapeClassName = _interopRequireDefault(require("./escapeClassName"));

package/lib/util/normalizeScreens.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.normalizeScreens = normalizeScreens;
+function normalizeScreens(screens, root = true) {
+    if (Array.isArray(screens)) {
+        return screens.map((screen)=>{
+            if (root && Array.isArray(screen)) {
+                throw new Error('The tuple syntax is not supported for `screens`.');
+            }
+            if (typeof screen === 'string') {
+                return {
+                    name: screen.toString(),
+                    values: [
+                        {
+                            min: screen,
+                            max: undefined
+                        }
+                    ]
+                };
+            }
+            let [name, options] = screen;
+            name = name.toString();
+            if (typeof options === 'string') {
+                return {
+                    name,
+                    values: [
+                        {
+                            min: options,
+                            max: undefined
+                        }
+                    ]
+                };
+            }
+            if (Array.isArray(options)) {
+                return {
+                    name,
+                    values: options.map((option)=>resolveValue(option)
+                    )
+                };
+            }
+            return {
+                name,
+                values: [
+                    resolveValue(options)
+                ]
+            };
+        });
+    }
+    return normalizeScreens(Object.entries(screens !== null && screens !== void 0 ? screens : {
+    }), false);
+}
+function resolveValue({ 'min-width': _minWidth , min =_minWidth , max , raw  } = {
+}) {
+    return {
+        min,
+        max,
+        raw
+    };
+}

package/lib/util/resolveConfig.js

@@ -64,7 +64,7 @@ const configUtils = {
         });
     }
 };
-function value1(valueToResolve, ...args) {
+function value(valueToResolve, ...args) {
     return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve;
 }
 function collectExtends(items) {
@@ -99,21 +99,21 @@ function mergeThemes(themes) {
         extend: collectExtends(themes)
     };
 }
-function mergeExtensionCustomizer(merged, value) {
+function mergeExtensionCustomizer(merged, value1) {
     // When we have an array of objects, we do want to merge it
     if (Array.isArray(merged) && isObject(merged[0])) {
-        return merged.concat(value);
+        return merged.concat(value1);
     }
     // When the incoming value is an array, and the existing config is an object, prepend the existing object
-    if (Array.isArray(value) && isObject(value[0]) && isObject(merged)) {
+    if (Array.isArray(value1) && isObject(value1[0]) && isObject(merged)) {
         return [
             merged,
-            ...value
+            ...value1
         ];
     }
     // Override arrays (for example for font-families, box-shadows, ...)
-    if (Array.isArray(value)) {
-        return value;
+    if (Array.isArray(value1)) {
+        return value1;
     }
     // Execute default behaviour
     return undefined;
@@ -129,7 +129,7 @@ function mergeExtensions({ extend , ...theme }) {
             }, ...[
                 themeValue,
                 ...extensions
-            ].map((e)=>value1(e, resolveThemePath, utils)
+            ].map((e)=>value(e, resolveThemePath, utils)
             ), mergeExtensionCustomizer)
         ;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,22 +43,22 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.51",
-    "@swc/core": "^1.2.106",
+    "@swc/cli": "^0.1.52",
+    "@swc/core": "^1.2.118",
     "@swc/jest": "^0.1.5",
     "@swc/register": "^0.1.7",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.8",
+    "cssnano": "^5.0.12",
     "esbuild": "^0.13.12",
-    "eslint": "^8.0.1",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.3.1",
-    "jest-diff": "^27.2.5",
-    "postcss": "^8.3.11",
+    "jest": "^27.4.3",
+    "jest-diff": "^27.4.2",
+    "postcss": "^8.4.4",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -83,7 +83,7 @@
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.6",
-    "postcss-value-parser": "^4.1.0",
+    "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
     "resolve": "^1.20.0",
     "tmp": "^0.2.1"

package/peers/.svgo.yml

@@ -0,0 +1,75 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+  - removeDoctype
+  - removeXMLProcInst
+  - removeComments
+  - removeMetadata
+  - removeXMLNS
+  - removeEditorsNSData
+  - cleanupAttrs
+  - inlineStyles
+  - minifyStyles
+  - convertStyleToAttrs
+  - cleanupIDs
+  - prefixIds
+  - removeRasterImages
+  - removeUselessDefs
+  - cleanupNumericValues
+  - cleanupListOfValues
+  - convertColors
+  - removeUnknownsAndDefaults
+  - removeNonInheritableGroupAttrs
+  - removeUselessStrokeAndFill
+  - removeViewBox
+  - cleanupEnableBackground
+  - removeHiddenElems
+  - removeEmptyText
+  - convertShapeToPath
+  - convertEllipseToCircle
+  - moveElemsAttrsToGroup
+  - moveGroupAttrsToElems
+  - collapseGroups
+  - convertPathData
+  - convertTransform
+  - removeEmptyAttrs
+  - removeEmptyContainers
+  - mergePaths
+  - removeUnusedNS
+  - sortAttrs
+  - sortDefsChildren
+  - removeTitle
+  - removeDesc
+  - removeDimensions
+  - removeAttrs
+  - removeAttributesBySelector
+  - removeElementsByAttr
+  - addClassesToSVGElement
+  - removeStyleElement
+  - removeScriptElement
+  - addAttributesToSVGElement
+  - removeOffCanvasPaths
+  - reusePaths
+
+# configure the indent (default 4 spaces) used by `--pretty` here:
+#
+# @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
+#
+# js2svg:
+#  pretty: true
+#  indent: '  '