tailwindcss 3.0.0-alpha.1 → 3.0.2

package/lib/lib/resolveDefaultsAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = resolveDefaultsAtRules;
+exports.elementSelectorParser = void 0;
 var _postcss = _interopRequireDefault(require("postcss"));
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _featureFlags = require("../featureFlags");
@@ -11,58 +12,53 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function isPseudoElement(n) {
-    if (n.type !== 'pseudo') {
-        return false;
+let getNode = {
+    id (node) {
+        return _postcssSelectorParser.default.attribute({
+            attribute: 'id',
+            operator: '=',
+            value: node.value,
+            quoteMark: '"'
+        });
     }
-    return n.value.startsWith('::') || [
-        ':before',
-        ':after',
-        ':first-line',
-        ':first-letter'
-    ].includes(n.value);
-}
+};
 function minimumImpactSelector(nodes) {
-    let rest = nodes// Keep all pseudo & combinator types (:not([hidden]) ~ :not([hidden]))
-    .filter((n)=>n.type === 'pseudo' || n.type === 'combinator'
-    )// Remove leading pseudo's (:hover, :focus, ...)
-    .filter((n, idx, all)=>{
-        // Keep pseudo elements
-        if (isPseudoElement(n)) return true;
-        if (idx === 0 && n.type === 'pseudo') return false;
-        if (idx > 0 && n.type === 'pseudo' && all[idx - 1].type === 'pseudo') return false;
-        return true;
-    });
-    let [bestNode] = nodes;
-    for (let [type, getNode = (n)=>n
-    ] of [
-        [
-            'class'
-        ],
-        [
-            'id',
-            (n)=>_postcssSelectorParser.default.attribute({
-                    attribute: 'id',
-                    operator: '=',
-                    value: n.value,
-                    quoteMark: '"'
-                })
-            , 
-        ],
-        [
-            'attribute'
-        ], 
-    ]){
-        let match = nodes.find((n)=>n.type === type
-        );
-        if (match) {
-            bestNode = getNode(match);
-            break;
-        }
+    let rest = nodes.filter((node)=>{
+        // Keep non-pseudo nodes
+        if (node.type !== 'pseudo') return true;
+        // Keep pseudo nodes that have subnodes
+        // E.g.: `:not()` contains subnodes inside the parentheses
+        if (node.nodes.length > 0) return true;
+        // Keep pseudo `elements`
+        // This implicitly means that we ignore pseudo `classes`
+        return node.value.startsWith('::') || [
+            ':before',
+            ':after',
+            ':first-line',
+            ':first-letter'
+        ].includes(node.value);
+    }).reverse();
+    let searchFor = new Set([
+        'tag',
+        'class',
+        'id',
+        'attribute'
+    ]);
+    let splitPointIdx = rest.findIndex((n)=>searchFor.has(n.type)
+    );
+    if (splitPointIdx === -1) return rest.reverse().join('').trim();
+    let node1 = rest[splitPointIdx];
+    let bestNode = getNode[node1.type] ? getNode[node1.type](node1) : node1;
+    rest = rest.slice(0, splitPointIdx);
+    let combinatorIdx = rest.findIndex((n)=>n.type === 'combinator' && n.value === '>'
+    );
+    if (combinatorIdx !== -1) {
+        rest.splice(0, combinatorIdx);
+        rest.unshift(_postcssSelectorParser.default.universal());
     }
     return [
         bestNode,
-        ...rest
+        ...rest.reverse()
     ].join('').trim();
 }
 let elementSelectorParser = (0, _postcssSelectorParser).default((selectors)=>{
@@ -72,6 +68,7 @@ let elementSelectorParser = (0, _postcssSelectorParser).default((selectors)=>{
         return minimumImpactSelector(nodes);
     });
 });
+exports.elementSelectorParser = elementSelectorParser;
 let cache = new Map();
 function extractElementSelector(selector) {
     if (!cache.has(selector)) {
@@ -82,7 +79,7 @@ function extractElementSelector(selector) {
 function resolveDefaultsAtRules({ tailwindConfig  }) {
     return (root)=>{
         let variableNodeMap = new Map();
-        let universals = new Set();
+        /** @type {Set<import('postcss').AtRule>} */ let universals = new Set();
         root.walkAtRules('defaults', (rule)=>{
             if (rule.nodes && rule.nodes.length > 0) {
                 universals.add(rule);
@@ -96,32 +93,46 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             rule.remove();
         });
         for (let universal of universals){
-            let selectors = new Set();
+            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
             var ref;
             let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
             for (let rule of rules){
                 for (let selector of extractElementSelector(rule.selector)){
+                    // If selector contains a vendor prefix after a pseudo element or class,
+                    // we consider them separately because merging the declarations into
+                    // a single rule will cause browsers that do not understand the
+                    // vendor prefix to throw out the whole rule
+                    let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__';
+                    var ref1;
+                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                    selectorGroups.set(selectorGroupName, selectors);
                     selectors.add(selector);
                 }
             }
-            if (selectors.size === 0) {
+            if (selectorGroups.size === 0) {
                 universal.remove();
                 continue;
             }
-            let universalRule = _postcss.default.rule();
             if ((0, _featureFlags).flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-                universalRule.selectors = [
-                    ...selectors
-                ];
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule();
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule();
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };

package/lib/lib/setupContextUtils.js

@@ -22,6 +22,8 @@ var _corePlugins = require("../corePlugins");
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
+var _negateValue = _interopRequireDefault(require("../util/negateValue"));
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -50,6 +52,30 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function parseVariantFormatString(input) {
+    if (input.includes('{')) {
+        if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`);
+        return input.split(/{(.*)}/gim).flatMap((line)=>parseVariantFormatString(line)
+        ).filter(Boolean);
+    }
+    return [
+        input.trim()
+    ];
+}
+function isBalanced(input) {
+    let count = 0;
+    for (let char of input){
+        if (char === '{') {
+            count++;
+        } else if (char === '}') {
+            if (--count < 0) {
+                return false // unbalanced
+                ;
+            }
+        }
+    }
+    return count === 0;
+}
 function insertInto(list, value, { before =[]  } = {
 }) {
     before = [].concat(before);
@@ -135,68 +161,6 @@ function withIdentifiers(styles) {
         });
     });
 }
-let matchingBrackets = new Map([
-    [
-        '{',
-        '}'
-    ],
-    [
-        '[',
-        ']'
-    ],
-    [
-        '(',
-        ')'
-    ], 
-]);
-let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
-        v,
-        k
-    ]
-));
-let quotes = new Set([
-    '"',
-    "'",
-    '`'
-]);
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-    let stack = [];
-    let inQuotes = false;
-    for(let i = 0; i < value.length; i++){
-        let char = value[i];
-        // 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;
-}
 function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv).default(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -211,15 +175,41 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         if (!options.respectPrefix) {
             return identifier;
         }
-        if (typeof context.tailwindConfig.prefix === 'function') {
-            return (0, _prefixSelector).default(context.tailwindConfig.prefix, `.${identifier}`).substr(1);
-        }
         return context.tailwindConfig.prefix + identifier;
     }
     return {
         addVariant (variantName, variantFunctions, options = {
         }) {
-            variantFunctions = [].concat(variantFunctions);
+            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
+                if (typeof variantFunction !== 'string') {
+                    // Safelist public API functions
+                    return ({ modifySelectors , container , separator  })=>{
+                        return variantFunction({
+                            modifySelectors,
+                            container,
+                            separator
+                        });
+                    };
+                }
+                variantFunction = variantFunction.replace(/\n+/g, '').replace(/\s{1,}/g, ' ').trim();
+                let fns = parseVariantFormatString(variantFunction).map((str)=>{
+                    if (!str.startsWith('@')) {
+                        return ({ format  })=>format(str)
+                        ;
+                    }
+                    let [, name, params] = /@(.*?) (.*)/g.exec(str);
+                    return ({ wrap  })=>wrap(_postcss.default.atRule({
+                            name,
+                            params
+                        }))
+                    ;
+                }).reverse();
+                return (api)=>{
+                    for (let fn of fns){
+                        fn(api);
+                    }
+                };
+            });
             insertInto(variantList, variantName, options);
             variantMap.set(variantName, variantFunctions);
         },
@@ -351,14 +341,14 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 function wrapped(modifier, { isOnlyPlugin  }) {
                     let { type ='any'  } = options;
                     type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options.values, tailwindConfig);
+                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
                     if (!type.includes(coercedType) && !isOnlyPlugin) {
                         return [];
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -401,7 +391,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 function wrapped(modifier, { isOnlyPlugin  }) {
                     let { type ='any'  } = options;
                     type = [].concat(type);
-                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options.values, tailwindConfig);
+                    let [value, coercedType] = (0, _pluginUtils).coerceValue(type, modifier, options, tailwindConfig);
                     if (value === undefined) {
                         return [];
                     }
@@ -415,7 +405,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                             return [];
                         }
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -556,7 +546,9 @@ function resolvePlugins(context, root) {
         _corePlugins.variantPlugins['directionVariants'],
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['darkVariants'],
-        _corePlugins.variantPlugins['screenVariants'], 
+        _corePlugins.variantPlugins['printVariant'],
+        _corePlugins.variantPlugins['screenVariants'],
+        _corePlugins.variantPlugins['orientationVariants'], 
     ];
     return [
         ...corePluginList,
@@ -600,6 +592,9 @@ function registerPlugins(plugins, context) {
         offsets.user, 
     ]);
     let reservedBits = BigInt(highestOffset.toString(2).length);
+    // A number one less than the top range of the highest offset area
+    // so arbitrary properties are always sorted at the end.
+    context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
     context.layerOrder = {
         base: 1n << reservedBits << 0n,
         components: 1n << reservedBits << 1n,
@@ -622,9 +617,9 @@ function registerPlugins(plugins, context) {
         ...context.variantOrder.values()
     ].shift();
     // Build variantMap
-    for (let [variantName, variantFunctions] of variantMap.entries()){
+    for (let [variantName, variantFunctions1] of variantMap.entries()){
         let sort = context.variantOrder.get(variantName);
-        context.variantMap.set(variantName, variantFunctions.map((variantFunction, idx)=>[
+        context.variantMap.set(variantName, variantFunctions1.map((variantFunction, idx)=>[
                 sort << BigInt(idx),
                 variantFunction
             ]
@@ -634,22 +629,22 @@ function registerPlugins(plugins, context) {
     let safelist = ((_safelist = context.tailwindConfig.safelist) !== null && _safelist !== void 0 ? _safelist : []).filter(Boolean);
     if (safelist.length > 0) {
         let checks = [];
-        for (let value of safelist){
-            if (typeof value === 'string') {
+        for (let value1 of safelist){
+            if (typeof value1 === 'string') {
                 context.changedContent.push({
-                    content: value,
+                    content: value1,
                     extension: 'html'
                 });
                 continue;
             }
-            if (value instanceof RegExp) {
+            if (value1 instanceof RegExp) {
                 _log.default.warn('root-regex', [
                     'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
                     'Update your `safelist` configuration to eliminate this warning.'
                 ]);
                 continue;
             }
-            checks.push(value);
+            checks.push(value1);
         }
         if (checks.length > 0) {
             let patternMatchingCount = new Map();
@@ -702,11 +697,16 @@ function registerPlugins(plugins, context) {
         for (let util of classList){
             if (Array.isArray(util)) {
                 let [utilName, options] = util;
+                let negativeClasses = [];
                 var ref;
-                for (let value of Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
+                for (let [key, value] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
                 })){
-                    output.push((0, _nameClass).formatClass(utilName, value));
+                    output.push((0, _nameClass).formatClass(utilName, key));
+                    if ((options === null || options === void 0 ? void 0 : options.supportsNegativeValues) && (0, _negateValue).default(value)) {
+                        negativeClasses.push((0, _nameClass).formatClass(utilName, `-${key}`));
+                    }
                 }
+                output.push(...negativeClasses);
             } else {
                 output.push(util);
             }

package/lib/lib/setupWatchingContext.js

@@ -75,7 +75,11 @@ function rebootWatcher(context, configPath, configDependencies, candidateFiles)
             ...candidateFiles,
             ...configDependencies
         ], {
-            ignoreInitial: true
+            ignoreInitial: true,
+            awaitWriteFinish: process.platform === 'win32' ? {
+                stabilityThreshold: 50,
+                pollInterval: 10
+            } : false
         });
         setWatcher(context, watcher);
         watcher.on('add', (file)=>{

package/lib/lib/sharedState.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.contextSourcesMap = exports.configContextMap = exports.env = exports.contextMap = void 0;
+exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
     TAILWIND_MODE: process.env.TAILWIND_MODE,
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: process.env.DEBUG !== undefined,
+    DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
     TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
     TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR
 };

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

@@ -10,8 +10,10 @@ var _evaluateTailwindFunctions = _interopRequireDefault(require("./lib/evaluateT
 var _substituteScreenAtRules = _interopRequireDefault(require("./lib/substituteScreenAtRules"));
 var _resolveDefaultsAtRules = _interopRequireDefault(require("./lib/resolveDefaultsAtRules"));
 var _collapseAdjacentRules = _interopRequireDefault(require("./lib/collapseAdjacentRules"));
+var _collapseDuplicateDeclarations = _interopRequireDefault(require("./lib/collapseDuplicateDeclarations"));
 var _detectNesting = _interopRequireDefault(require("./lib/detectNesting"));
 var _setupContextUtils = require("./lib/setupContextUtils");
+var _featureFlags = require("./featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -36,6 +38,7 @@ function processTailwindFeatures(setupContext) {
         if (context.tailwindConfig.separator === '-') {
             throw new Error("The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead.");
         }
+        (0, _featureFlags).issueFlagNotices(context.tailwindConfig);
         (0, _detectNesting).default(context)(root, result);
         (0, _expandTailwindAtRules).default(context)(root, result);
         (0, _expandApplyAtRules).default(context)(root, result);
@@ -43,5 +46,6 @@ function processTailwindFeatures(setupContext) {
         (0, _substituteScreenAtRules).default(context)(root, result);
         (0, _resolveDefaultsAtRules).default(context)(root, result);
         (0, _collapseAdjacentRules).default(context)(root, result);
+        (0, _collapseDuplicateDeclarations).default(context)(root, result);
     };
 }

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

@@ -16,7 +16,7 @@ function createUtilityPlugin(themeKey, utilityVariations = [
             themeKey
         ]
     ]
-], { filterDefault =false , type ='any'  } = {
+], { filterDefault =false , ...options } = {
 }) {
     let transformValue = (0, _transformThemeValue).default(themeKey);
     return function({ matchUtilities , theme  }) {
@@ -25,8 +25,8 @@ function createUtilityPlugin(themeKey, utilityVariations = [
                 utilityVariation
             ];
             var ref;
-            matchUtilities(group.reduce((obj, [classPrefix, properties])=>{
-                return Object.assign(obj, {
+            matchUtilities(group.reduce((obj1, [classPrefix, properties])=>{
+                return Object.assign(obj1, {
                     [classPrefix]: (value)=>{
                         return properties.reduce((obj, name)=>{
                             if (Array.isArray(name)) {
@@ -43,10 +43,10 @@ function createUtilityPlugin(themeKey, utilityVariations = [
                 });
             }, {
             }), {
+                ...options,
                 values: filterDefault ? Object.fromEntries(Object.entries((ref = theme(themeKey)) !== null && ref !== void 0 ? ref : {
                 }).filter(([modifier])=>modifier !== 'DEFAULT'
-                )) : theme(themeKey),
-                type
+                )) : theme(themeKey)
             });
         }
     };