tailwindcss 0.0.0-insiders.bd970d0 → 0.0.0-insiders.bda8421

package/lib/util/normalizeScreens.js

@@ -50,9 +50,9 @@ 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`.');
+                throw new Error("The tuple syntax is not supported for `screens`.");
             }
-            if (typeof screen === 'string') {
+            if (typeof screen === "string") {
                 return {
                     name: screen.toString(),
                     not: false,
@@ -66,7 +66,7 @@ function normalizeScreens(screens, root = true) {
             }
             let [name, options] = screen;
             name = name.toString();
-            if (typeof options === 'string') {
+            if (typeof options === "string") {
                 return {
                     name,
                     not: false,
@@ -100,17 +100,17 @@ function isScreenSortable(screen) {
     if (screen.values.length !== 1) {
         return {
             result: false,
-            reason: 'multiple-values'
+            reason: "multiple-values"
         };
     } else if (screen.values[0].raw !== undefined) {
         return {
             result: false,
-            reason: 'raw-values'
+            reason: "raw-values"
         };
     } else if (screen.values[0].min !== undefined && screen.values[0].max !== undefined) {
         return {
             result: false,
-            reason: 'min-and-max'
+            reason: "min-and-max"
         };
     }
     return {
@@ -124,16 +124,16 @@ function compareScreens(type, a, z) {
     let aSorting = isScreenSortable(aScreen);
     let bSorting = isScreenSortable(zScreen);
     // These cases should never happen and indicate a bug in Tailwind CSS itself
-    if (aSorting.reason === 'multiple-values' || bSorting.reason === 'multiple-values') {
-        throw new Error('Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.');
-    } else if (aSorting.reason === 'raw-values' || bSorting.reason === 'raw-values') {
-        throw new Error('Attempted to sort a screen with raw values. This should never happen. Please open a bug report.');
-    } else if (aSorting.reason === 'min-and-max' || bSorting.reason === 'min-and-max') {
-        throw new Error('Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.');
+    if (aSorting.reason === "multiple-values" || bSorting.reason === "multiple-values") {
+        throw new Error("Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.");
+    } else if (aSorting.reason === "raw-values" || bSorting.reason === "raw-values") {
+        throw new Error("Attempted to sort a screen with raw values. This should never happen. Please open a bug report.");
+    } else if (aSorting.reason === "min-and-max" || bSorting.reason === "min-and-max") {
+        throw new Error("Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.");
     }
     // Let the sorting begin
-    let { min: aMin, max: aMax } = aScreen.values[0];
-    let { min: zMin, max: zMax } = zScreen.values[0];
+    let { min: aMin , max: aMax  } = aScreen.values[0];
+    let { min: zMin , max: zMax  } = zScreen.values[0];
     // Negating screens flip their behavior. Basically `not min-width` is `max-width`
     if (a.not) [aMin, aMax] = [
         aMax,
@@ -147,7 +147,7 @@ function compareScreens(type, a, z) {
     aMax = aMax === undefined ? aMax : parseFloat(aMax);
     zMin = zMin === undefined ? zMin : parseFloat(zMin);
     zMax = zMax === undefined ? zMax : parseFloat(zMax);
-    let [aValue, zValue] = type === 'min' ? [
+    let [aValue, zValue] = type === "min" ? [
         aMin,
         zMin
     ] : [
@@ -157,11 +157,11 @@ function compareScreens(type, a, z) {
     return aValue - zValue;
 }
 function toScreen(value, type) {
-    if (typeof value === 'object') {
+    if (typeof value === "object") {
         return value;
     }
     return {
-        name: 'arbitrary-screen',
+        name: "arbitrary-screen",
         values: [
             {
                 [type]: value
@@ -169,7 +169,7 @@ function toScreen(value, type) {
         ]
     };
 }
-function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {
+function resolveValue({ "min-width": _minWidth , min =_minWidth , max , raw  } = {}) {
     return {
         min,
         max,

package/lib/util/parseAnimationValue.js

@@ -9,36 +9,36 @@ Object.defineProperty(exports, "default", {
     }
 });
 const DIRECTIONS = new Set([
-    'normal',
-    'reverse',
-    'alternate',
-    'alternate-reverse'
+    "normal",
+    "reverse",
+    "alternate",
+    "alternate-reverse"
 ]);
 const PLAY_STATES = new Set([
-    'running',
-    'paused'
+    "running",
+    "paused"
 ]);
 const FILL_MODES = new Set([
-    'none',
-    'forwards',
-    'backwards',
-    'both'
+    "none",
+    "forwards",
+    "backwards",
+    "both"
 ]);
 const ITERATION_COUNTS = new Set([
-    'infinite'
+    "infinite"
 ]);
 const TIMINGS = new Set([
-    'linear',
-    'ease',
-    'ease-in',
-    'ease-out',
-    'ease-in-out',
-    'step-start',
-    'step-end'
+    "linear",
+    "ease",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+    "step-start",
+    "step-end"
 ]);
 const TIMING_FNS = [
-    'cubic-bezier',
-    'steps'
+    "cubic-bezier",
+    "steps"
 ];
 const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 ;
@@ -56,33 +56,33 @@ function parseAnimationValue(input) {
         let parts = value.split(SPACE);
         let seen = new Set();
         for (let part of parts){
-            if (!seen.has('DIRECTIONS') && DIRECTIONS.has(part)) {
+            if (!seen.has("DIRECTIONS") && DIRECTIONS.has(part)) {
                 result.direction = part;
-                seen.add('DIRECTIONS');
-            } else if (!seen.has('PLAY_STATES') && PLAY_STATES.has(part)) {
+                seen.add("DIRECTIONS");
+            } else if (!seen.has("PLAY_STATES") && PLAY_STATES.has(part)) {
                 result.playState = part;
-                seen.add('PLAY_STATES');
-            } else if (!seen.has('FILL_MODES') && FILL_MODES.has(part)) {
+                seen.add("PLAY_STATES");
+            } else if (!seen.has("FILL_MODES") && FILL_MODES.has(part)) {
                 result.fillMode = part;
-                seen.add('FILL_MODES');
-            } else if (!seen.has('ITERATION_COUNTS') && (ITERATION_COUNTS.has(part) || DIGIT.test(part))) {
+                seen.add("FILL_MODES");
+            } else if (!seen.has("ITERATION_COUNTS") && (ITERATION_COUNTS.has(part) || DIGIT.test(part))) {
                 result.iterationCount = part;
-                seen.add('ITERATION_COUNTS');
-            } else if (!seen.has('TIMING_FUNCTION') && TIMINGS.has(part)) {
+                seen.add("ITERATION_COUNTS");
+            } else if (!seen.has("TIMING_FUNCTION") && TIMINGS.has(part)) {
                 result.timingFunction = part;
-                seen.add('TIMING_FUNCTION');
-            } else if (!seen.has('TIMING_FUNCTION') && TIMING_FNS.some((f)=>part.startsWith(`${f}(`))) {
+                seen.add("TIMING_FUNCTION");
+            } else if (!seen.has("TIMING_FUNCTION") && TIMING_FNS.some((f)=>part.startsWith(`${f}(`))) {
                 result.timingFunction = part;
-                seen.add('TIMING_FUNCTION');
-            } else if (!seen.has('DURATION') && TIME.test(part)) {
+                seen.add("TIMING_FUNCTION");
+            } else if (!seen.has("DURATION") && TIME.test(part)) {
                 result.duration = part;
-                seen.add('DURATION');
-            } else if (!seen.has('DELAY') && TIME.test(part)) {
+                seen.add("DURATION");
+            } else if (!seen.has("DELAY") && TIME.test(part)) {
                 result.delay = part;
-                seen.add('DELAY');
-            } else if (!seen.has('NAME')) {
+                seen.add("DELAY");
+            } else if (!seen.has("NAME")) {
                 result.name = part;
-                seen.add('NAME');
+                seen.add("NAME");
             } else {
                 if (!result.unknown) result.unknown = [];
                 result.unknown.push(part);

package/lib/util/parseBoxShadowValue.js

@@ -18,17 +18,17 @@ _export(exports, {
 });
 const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
 let KEYWORDS = new Set([
-    'inset',
-    'inherit',
-    'initial',
-    'revert',
-    'unset'
+    "inset",
+    "inherit",
+    "initial",
+    "revert",
+    "unset"
 ]);
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
 ;
 let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g;
 function parseBoxShadowValue(input) {
-    let shadows = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(input, ',');
+    let shadows = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(input, ",");
     return shadows.map((shadow)=>{
         let value = shadow.trim();
         let result = {
@@ -40,22 +40,22 @@ function parseBoxShadowValue(input) {
             // Reset index, since the regex is stateful.
             LENGTH.lastIndex = 0;
             // Keyword
-            if (!seen.has('KEYWORD') && KEYWORDS.has(part)) {
+            if (!seen.has("KEYWORD") && KEYWORDS.has(part)) {
                 result.keyword = part;
-                seen.add('KEYWORD');
+                seen.add("KEYWORD");
             } else if (LENGTH.test(part)) {
-                if (!seen.has('X')) {
+                if (!seen.has("X")) {
                     result.x = part;
-                    seen.add('X');
-                } else if (!seen.has('Y')) {
+                    seen.add("X");
+                } else if (!seen.has("Y")) {
                     result.y = part;
-                    seen.add('Y');
-                } else if (!seen.has('BLUR')) {
+                    seen.add("Y");
+                } else if (!seen.has("BLUR")) {
                     result.blur = part;
-                    seen.add('BLUR');
-                } else if (!seen.has('SPREAD')) {
+                    seen.add("BLUR");
+                } else if (!seen.has("SPREAD")) {
                     result.spread = part;
-                    seen.add('SPREAD');
+                    seen.add("SPREAD");
                 }
             } else {
                 if (!result.color) {
@@ -83,6 +83,6 @@ function formatBoxShadowValue(shadows) {
             shadow.blur,
             shadow.spread,
             shadow.color
-        ].filter(Boolean).join(' ');
-    }).join(', ');
+        ].filter(Boolean).join(" ");
+    }).join(", ");
 }

package/lib/util/parseDependency.js

@@ -22,24 +22,24 @@ function parseDependency(contentPath) {
     if (!contentPath.glob) {
         return [
             {
-                type: 'dependency',
+                type: "dependency",
                 file: contentPath.base
             }
         ];
     }
-    if (process.env.ROLLUP_WATCH === 'true') {
+    if (process.env.ROLLUP_WATCH === "true") {
         // rollup-plugin-postcss does not support dir-dependency messages
         // but directories can be watched in the same way as files
         return [
             {
-                type: 'dependency',
+                type: "dependency",
                 file: contentPath.base
             }
         ];
     }
     return [
         {
-            type: 'dir-dependency',
+            type: "dir-dependency",
             dir: contentPath.base,
             glob: contentPath.glob
         }

package/lib/util/parseGlob.js

@@ -17,16 +17,16 @@ function _interop_require_default(obj) {
 function parseGlob(pattern) {
     let glob = pattern;
     let base = (0, _globparent.default)(pattern);
-    if (base !== '.') {
+    if (base !== ".") {
         glob = pattern.substr(base.length);
-        if (glob.charAt(0) === '/') {
+        if (glob.charAt(0) === "/") {
             glob = glob.substr(1);
         }
     }
-    if (glob.substr(0, 2) === './') {
+    if (glob.substr(0, 2) === "./") {
         glob = glob.substr(2);
     }
-    if (glob.charAt(0) === '/') {
+    if (glob.charAt(0) === "/") {
         glob = glob.substr(1);
     }
     return {

package/lib/util/parseObjectStyles.js

@@ -26,7 +26,7 @@ function parseObjectStyles(styles) {
         return (0, _postcss.default)([
             (0, _postcssnested.default)({
                 bubble: [
-                    'screen'
+                    "screen"
                 ]
             })
         ]).process(style, {

package/lib/util/pluginUtils.js

@@ -39,6 +39,7 @@ const _withAlphaVariable = require("./withAlphaVariable");
 const _dataTypes = require("./dataTypes");
 const _negateValue = /*#__PURE__*/ _interop_require_default(require("./negateValue"));
 const _validateFormalSyntax = require("./validateFormalSyntax");
+const _featureFlags = require("../featureFlags.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -75,22 +76,35 @@ function asNegativeValue(modifier, lookup = {}, validate) {
         return (0, _negateValue.default)(resolved);
     }
 }
-function asValue(modifier, options = {}, { validate = ()=>true } = {}) {
+function asValue(modifier, options = {}, { validate =()=>true  } = {}) {
     var _options_values;
     let value = (_options_values = options.values) === null || _options_values === void 0 ? void 0 : _options_values[modifier];
     if (value !== undefined) {
         return value;
     }
-    if (options.supportsNegativeValues && modifier.startsWith('-')) {
+    if (options.supportsNegativeValues && modifier.startsWith("-")) {
         return asNegativeValue(modifier.slice(1), options.values, validate);
     }
     return resolveArbitraryValue(modifier, validate);
 }
 function isArbitraryValue(input) {
-    return input.startsWith('[') && input.endsWith(']');
+    return input.startsWith("[") && input.endsWith("]");
 }
 function splitUtilityModifier(modifier) {
-    let slashIdx = modifier.lastIndexOf('/');
+    let slashIdx = modifier.lastIndexOf("/");
+    // If the `/` is inside an arbitrary, we want to find the previous one if any
+    // This logic probably isn't perfect but it should work for most cases
+    let arbitraryStartIdx = modifier.lastIndexOf("[", slashIdx);
+    let arbitraryEndIdx = modifier.indexOf("]", slashIdx);
+    let isNextToArbitrary = modifier[slashIdx - 1] === "]" || modifier[slashIdx + 1] === "[";
+    // Backtrack to the previous `/` if the one we found was inside an arbitrary
+    if (!isNextToArbitrary) {
+        if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+            if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+                slashIdx = modifier.lastIndexOf("/", arbitraryStartIdx);
+            }
+        }
+    }
     if (slashIdx === -1 || slashIdx === modifier.length - 1) {
         return [
             modifier,
@@ -101,7 +115,7 @@ function splitUtilityModifier(modifier) {
     // The modifier could be of the form `[foo]/[bar]`
     // We want to handle this case properly
     // without affecting `[foo/bar]`
-    if (arbitrary && !modifier.includes(']/[')) {
+    if (arbitrary && !modifier.includes("]/[")) {
         return [
             modifier,
             undefined
@@ -113,16 +127,16 @@ function splitUtilityModifier(modifier) {
     ];
 }
 function parseColorFormat(value) {
-    if (typeof value === 'string' && value.includes('<alpha-value>')) {
+    if (typeof value === "string" && value.includes("<alpha-value>")) {
         let oldValue = value;
-        return ({ opacityValue = 1 })=>oldValue.replace('<alpha-value>', opacityValue);
+        return ({ opacityValue =1  })=>oldValue.replace("<alpha-value>", opacityValue);
     }
     return value;
 }
 function unwrapArbitraryModifier(modifier) {
     return (0, _dataTypes.normalize)(modifier.slice(1, -1));
 }
-function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
+function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
     var _options_values;
     if (((_options_values = options.values) === null || _options_values === void 0 ? void 0 : _options_values[modifier]) !== undefined) {
         var _options_values1;
@@ -132,7 +146,7 @@ function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     // We do this here because we need the alpha value (if any)
     let [color, alpha] = splitUtilityModifier(modifier);
     if (alpha !== undefined) {
-        var _options_values2, _tailwindConfig_theme_opacity, _tailwindConfig_theme;
+        var _options_values2, _tailwindConfig_theme, _tailwindConfig_theme_opacity;
         var _options_values_color;
         let normalizedColor = (_options_values_color = (_options_values2 = options.values) === null || _options_values2 === void 0 ? void 0 : _options_values2[color]) !== null && _options_values_color !== void 0 ? _options_values_color : isArbitraryValue(color) ? color.slice(1, -1) : undefined;
         if (normalizedColor === undefined) {
@@ -171,12 +185,12 @@ let typeMap = {
     percentage: guess(_dataTypes.percentage),
     position: guess(_dataTypes.position),
     lookup: asLookupValue,
-    'generic-name': guess(_dataTypes.genericName),
-    'family-name': guess(_dataTypes.familyName),
+    "generic-name": guess(_dataTypes.genericName),
+    "family-name": guess(_dataTypes.familyName),
     number: guess(_dataTypes.number),
-    'line-width': guess(_dataTypes.lineWidth),
-    'absolute-size': guess(_dataTypes.absoluteSize),
-    'relative-size': guess(_dataTypes.relativeSize),
+    "line-width": guess(_dataTypes.lineWidth),
+    "absolute-size": guess(_dataTypes.absoluteSize),
+    "relative-size": guess(_dataTypes.relativeSize),
     shadow: guess(_dataTypes.shadow),
     size: guess(_validateFormalSyntax.backgroundSize)
 };
@@ -194,7 +208,7 @@ function splitAtFirst(input, delim) {
 }
 function coerceValue(types, modifier, options, tailwindConfig) {
     if (options.values && modifier in options.values) {
-        for (let { type } of types !== null && types !== void 0 ? types : []){
+        for (let { type  } of types !== null && types !== void 0 ? types : []){
             let result = typeMap[type](modifier, options, {
                 tailwindConfig
             });
@@ -210,7 +224,7 @@ function coerceValue(types, modifier, options, tailwindConfig) {
     }
     if (isArbitraryValue(modifier)) {
         let arbitraryValue = modifier.slice(1, -1);
-        let [explicitType, value] = splitAtFirst(arbitraryValue, ':');
+        let [explicitType, value] = splitAtFirst(arbitraryValue, ":");
         // It could be that this resolves to `url(https` which is not a valid
         // identifier. We currently only support "simple" words with dashes or
         // underscores. E.g.: family-name
@@ -235,19 +249,20 @@ function coerceValue(types, modifier, options, tailwindConfig) {
     return [];
 }
 function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
+    let modifiersEnabled = (0, _featureFlags.flagEnabled)(tailwindConfig, "generalizedModifiers");
     let [modifier, utilityModifier] = splitUtilityModifier(rawModifier);
-    let canUseUtilityModifier = options.modifiers != null && (options.modifiers === 'any' || typeof options.modifiers === 'object' && (utilityModifier && isArbitraryValue(utilityModifier) || utilityModifier in options.modifiers));
+    let canUseUtilityModifier = modifiersEnabled && options.modifiers != null && (options.modifiers === "any" || typeof options.modifiers === "object" && (utilityModifier && isArbitraryValue(utilityModifier) || utilityModifier in options.modifiers));
     if (!canUseUtilityModifier) {
         modifier = rawModifier;
         utilityModifier = undefined;
     }
-    if (utilityModifier !== undefined && modifier === '') {
-        modifier = 'DEFAULT';
+    if (utilityModifier !== undefined && modifier === "") {
+        modifier = "DEFAULT";
     }
     // Check the full value first
     // TODO: Move to asValue… somehow
     if (utilityModifier !== undefined) {
-        if (typeof options.modifiers === 'object') {
+        if (typeof options.modifiers === "object") {
             var _options_modifiers;
             var _options_modifiers_utilityModifier;
             let configValue = (_options_modifiers_utilityModifier = (_options_modifiers = options.modifiers) === null || _options_modifiers === void 0 ? void 0 : _options_modifiers[utilityModifier]) !== null && _options_modifiers_utilityModifier !== void 0 ? _options_modifiers_utilityModifier : null;
@@ -258,7 +273,7 @@ function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
             }
         }
     }
-    for (let { type } of types !== null && types !== void 0 ? types : []){
+    for (let { type  } of types !== null && types !== void 0 ? types : []){
         let result = typeMap[type](modifier, options, {
             tailwindConfig
         });

package/lib/util/prefixSelector.js

@@ -26,14 +26,14 @@ function _interop_require_default(obj) {
     };
 }
 function _default(prefix, selector, prependNegative = false) {
-    if (prefix === '') {
+    if (prefix === "") {
         return selector;
     }
-    /** @type {import('postcss-selector-parser').Root} */ let ast = typeof selector === 'string' ? (0, _postcssselectorparser.default)().astSync(selector) : selector;
+    /** @type {import('postcss-selector-parser').Root} */ let ast = typeof selector === "string" ? (0, _postcssselectorparser.default)().astSync(selector) : selector;
     ast.walkClasses((classSelector)=>{
         let baseClass = classSelector.value;
-        let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-');
+        let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith("-");
         classSelector.value = shouldPlaceNegativeBeforePrefix ? `-${prefix}${baseClass.slice(1)}` : `${prefix}${baseClass}`;
     });
-    return typeof selector === 'string' ? ast.toString() : ast;
+    return typeof selector === "string" ? ast.toString() : ast;
 }