tailwindcss 0.0.0-insiders.ca1dfd6 → 0.0.0-insiders.cb6e45a

package/src/util/splitAtTopLevelOnly.js

@@ -0,0 +1,45 @@
+/**
+ * This splits a string on a top-level character.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren placement.
+ *
+ * Expected behavior using commas:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ * @param {string} separator
+ */
+export function splitAtTopLevelOnly(input, separator) {
+  let stack = []
+  let parts = []
+  let lastPos = 0
+
+  for (let idx = 0; idx < input.length; idx++) {
+    let char = input[idx]
+
+    if (stack.length === 0 && char === separator[0]) {
+      if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
+        parts.push(input.slice(lastPos, idx))
+        lastPos = idx + separator.length
+      }
+    }
+
+    if (char === '(' || char === '[' || char === '{') {
+      stack.push(char)
+    } else if (
+      (char === ')' && stack[stack.length - 1] === '(') ||
+      (char === ']' && stack[stack.length - 1] === '[') ||
+      (char === '}' && stack[stack.length - 1] === '{')
+    ) {
+      stack.pop()
+    }
+  }
+
+  parts.push(input.slice(lastPos))
+
+  return parts
+}

package/src/util/toPath.js

@@ -1,4 +1,26 @@
+/**
+ * Parse a path string into an array of path segments.
+ *
+ * Square bracket notation `a[b]` may be used to "escape" dots that would otherwise be interpreted as path separators.
+ *
+ * Example:
+ * a -> ['a']
+ * a.b.c -> ['a', 'b', 'c']
+ * a[b].c -> ['a', 'b', 'c']
+ * a[b.c].e.f -> ['a', 'b.c', 'e', 'f']
+ * a[b][c][d] -> ['a', 'b', 'c', 'd']
+ *
+ * @param {string|string[]} path
+ **/
 export function toPath(path) {
   if (Array.isArray(path)) return path
-  return path.split(/[\.\]\[]+/g)
+
+  let openBrackets = path.split('[').length - 1
+  let closedBrackets = path.split(']').length - 1
+
+  if (openBrackets !== closedBrackets) {
+    throw new Error(`Path is invalid. Has unbalanced brackets: ${path}`)
+  }
+
+  return path.split(/\.(?![^\[]*\])|[\[\]]/g).filter(Boolean)
 }

package/src/util/transformThemeValue.js

@@ -1,13 +1,26 @@
 import postcss from 'postcss'
+import isPlainObject from './isPlainObject'
 
 export default function transformThemeValue(themeSection) {
   if (['fontSize', 'outline'].includes(themeSection)) {
-    return (value) => (Array.isArray(value) ? value[0] : value)
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (Array.isArray(value)) value = value[0]
+
+      return value
+    }
+  }
+
+  if (themeSection === 'fontFamily') {
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      let families = Array.isArray(value) && isPlainObject(value[1]) ? value[0] : value
+      return Array.isArray(families) ? families.join(', ') : families
+    }
   }
 
   if (
     [
-      'fontFamily',
       'boxShadow',
       'transitionProperty',
       'transitionDuration',
@@ -20,18 +33,30 @@ export default function transformThemeValue(themeSection) {
       'animation',
     ].includes(themeSection)
   ) {
-    return (value) => (Array.isArray(value) ? value.join(', ') : value)
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (Array.isArray(value)) value = value.join(', ')
+
+      return value
+    }
   }
 
   // For backwards compatibility reasons, before we switched to underscores
   // instead of commas for arbitrary values.
   if (['gridTemplateColumns', 'gridTemplateRows', 'objectPosition'].includes(themeSection)) {
-    return (value) => (typeof value === 'string' ? postcss.list.comma(value).join(' ') : value)
-  }
+    return (value) => {
+      if (typeof value === 'function') value = value({})
+      if (typeof value === 'string') value = postcss.list.comma(value).join(' ')
 
-  if (themeSection === 'colors') {
-    return (value) => (typeof value === 'function' ? value({}) : value)
+      return value
+    }
   }
 
-  return (value) => value
+  return (value, opts = {}) => {
+    if (typeof value === 'function') {
+      value = value(opts)
+    }
+
+    return value
+  }
 }

package/src/util/validateConfig.js

@@ -0,0 +1,13 @@
+import log from './log'
+
+export function validateConfig(config) {
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` option in your Tailwind CSS configuration is missing or empty.',
+      'Configure your content sources or your generated CSS will be missing styles.',
+      'https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
+  return config
+}

package/src/util/validateFormalSyntax.js

@@ -0,0 +1,34 @@
+import { length, percentage } from './dataTypes'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
+/**
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#formal_syntax
+ *
+ * background-size =
+ *  <bg-size>#
+ *
+ * <bg-size> =
+ *   [ <length-percentage [0,∞]> | auto ]{1,2}  |
+ *   cover                                      |
+ *   contain
+ *
+ * <length-percentage> =
+ *   <length>      |
+ *   <percentage>
+ *
+ * @param {string} value
+ */
+export function backgroundSize(value) {
+  let keywordValues = ['cover', 'contain']
+  // the <length-percentage> type will probably be a css function
+  // so we have to use `splitAtTopLevelOnly`
+  return splitAtTopLevelOnly(value, ',').every((part) => {
+    let sizes = splitAtTopLevelOnly(part, '_').filter(Boolean)
+    if (sizes.length === 1 && keywordValues.includes(sizes[0])) return true
+
+    if (sizes.length !== 1 && sizes.length !== 2) return false
+
+    return sizes.every((size) => length(size) || percentage(size) || size === 'auto')
+  })
+}

package/src/util/withAlphaVariable.js

@@ -5,7 +5,7 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
     return color({ opacityValue: alphaValue })
   }
 
-  let parsed = parseColor(color)
+  let parsed = parseColor(color, { loose: true })
 
   if (parsed === null) {
     return defaultValue

package/stubs/defaultConfig.stub.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [],
   presets: [],
@@ -111,21 +112,31 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    aria: {
+      checked: 'checked="true"',
+      disabled: 'disabled="true"',
+      expanded: 'expanded="true"',
+      hidden: 'hidden="true"',
+      pressed: 'pressed="true"',
+      readonly: 'readonly="true"',
+      required: 'required="true"',
+      selected: 'selected="true"',
+    },
     aspectRatio: {
       auto: 'auto',
       square: '1 / 1',
       video: '16 / 9',
     },
-    backdropBlur: (theme) => theme('blur'),
-    backdropBrightness: (theme) => theme('brightness'),
-    backdropContrast: (theme) => theme('contrast'),
-    backdropGrayscale: (theme) => theme('grayscale'),
-    backdropHueRotate: (theme) => theme('hueRotate'),
-    backdropInvert: (theme) => theme('invert'),
-    backdropOpacity: (theme) => theme('opacity'),
-    backdropSaturate: (theme) => theme('saturate'),
-    backdropSepia: (theme) => theme('sepia'),
-    backgroundColor: (theme) => theme('colors'),
+    backdropBlur: ({ theme }) => theme('blur'),
+    backdropBrightness: ({ theme }) => theme('brightness'),
+    backdropContrast: ({ theme }) => theme('contrast'),
+    backdropGrayscale: ({ theme }) => theme('grayscale'),
+    backdropHueRotate: ({ theme }) => theme('hueRotate'),
+    backdropInvert: ({ theme }) => theme('invert'),
+    backdropOpacity: ({ theme }) => theme('opacity'),
+    backdropSaturate: ({ theme }) => theme('saturate'),
+    backdropSepia: ({ theme }) => theme('sepia'),
+    backgroundColor: ({ theme }) => theme('colors'),
     backgroundImage: {
       none: 'none',
       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
@@ -137,7 +148,7 @@ module.exports = {
       'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
       'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
     },
-    backgroundOpacity: (theme) => theme('opacity'),
+    backgroundOpacity: ({ theme }) => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -178,11 +189,11 @@ module.exports = {
       150: '1.5',
       200: '2',
     },
-    borderColor: (theme) => ({
+    borderColor: ({ theme }) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.200', 'currentColor'),
     }),
-    borderOpacity: (theme) => theme('opacity'),
+    borderOpacity: ({ theme }) => theme('opacity'),
     borderRadius: {
       none: '0px',
       sm: '0.125rem',
@@ -194,6 +205,9 @@ module.exports = {
       '3xl': '1.5rem',
       full: '9999px',
     },
+    borderSpacing: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
     borderWidth: {
       DEFAULT: '1px',
       0: '0px',
@@ -203,16 +217,17 @@ module.exports = {
     },
     boxShadow: {
       sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-      DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)',
-      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)',
-      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)',
-      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04)',
+      DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
       '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
+      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
       none: 'none',
     },
-    caretColor: (theme) => theme('colors'),
-    accentColor: (theme) => ({
+    boxShadowColor: ({ theme }) => theme('colors'),
+    caretColor: ({ theme }) => theme('colors'),
+    accentColor: ({ theme }) => ({
       ...theme('colors'),
       auto: 'auto',
     }),
@@ -238,10 +253,38 @@ module.exports = {
       move: 'move',
       help: 'help',
       'not-allowed': 'not-allowed',
-    },
-    divideColor: (theme) => theme('borderColor'),
-    divideOpacity: (theme) => theme('borderOpacity'),
-    divideWidth: (theme) => theme('borderWidth'),
+      none: 'none',
+      'context-menu': 'context-menu',
+      progress: 'progress',
+      cell: 'cell',
+      crosshair: 'crosshair',
+      'vertical-text': 'vertical-text',
+      alias: 'alias',
+      copy: 'copy',
+      'no-drop': 'no-drop',
+      grab: 'grab',
+      grabbing: 'grabbing',
+      'all-scroll': 'all-scroll',
+      'col-resize': 'col-resize',
+      'row-resize': 'row-resize',
+      'n-resize': 'n-resize',
+      'e-resize': 'e-resize',
+      's-resize': 's-resize',
+      'w-resize': 'w-resize',
+      'ne-resize': 'ne-resize',
+      'nw-resize': 'nw-resize',
+      'se-resize': 'se-resize',
+      'sw-resize': 'sw-resize',
+      'ew-resize': 'ew-resize',
+      'ns-resize': 'ns-resize',
+      'nesw-resize': 'nesw-resize',
+      'nwse-resize': 'nwse-resize',
+      'zoom-in': 'zoom-in',
+      'zoom-out': 'zoom-out',
+    },
+    divideColor: ({ theme }) => theme('borderColor'),
+    divideOpacity: ({ theme }) => theme('borderOpacity'),
+    divideWidth: ({ theme }) => theme('borderWidth'),
     dropShadow: {
       sm: '0 1px 1px rgb(0 0 0 / 0.05)',
       DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
@@ -251,17 +294,15 @@ module.exports = {
       '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
       none: '0 0 #0000',
     },
-    fill: { current: 'currentColor' },
+    fill: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
     grayscale: {
       0: '0',
       DEFAULT: '100%',
     },
     hueRotate: {
-      '-180': '-180deg',
-      '-90': '-90deg',
-      '-60': '-60deg',
-      '-30': '-30deg',
-      '-15': '-15deg',
       0: '0deg',
       15: '15deg',
       30: '30deg',
@@ -279,6 +320,37 @@ module.exports = {
       initial: '0 1 auto',
       none: 'none',
     },
+    flexBasis: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+    }),
     flexGrow: {
       0: '0',
       DEFAULT: '1',
@@ -342,8 +414,8 @@ module.exports = {
       extrabold: '800',
       black: '900',
     },
-    gap: (theme) => theme('spacing'),
-    gradientColorStops: (theme) => theme('colors'),
+    gap: ({ theme }) => theme('spacing'),
+    gradientColorStops: ({ theme }) => theme('colors'),
     gridAutoColumns: {
       auto: 'auto',
       min: 'min-content',
@@ -458,7 +530,7 @@ module.exports = {
       5: 'repeat(5, minmax(0, 1fr))',
       6: 'repeat(6, minmax(0, 1fr))',
     },
-    height: (theme) => ({
+    height: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -478,11 +550,13 @@ module.exports = {
       '5/6': '83.333333%',
       full: '100%',
       screen: '100vh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
     }),
-    inset: (theme, { negative }) => ({
+    inset: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
-      ...negative(theme('spacing')),
       '1/2': '50%',
       '1/3': '33.333333%',
       '2/3': '66.666667%',
@@ -490,13 +564,6 @@ module.exports = {
       '2/4': '50%',
       '3/4': '75%',
       full: '100%',
-      '-1/2': '-50%',
-      '-1/3': '-33.333333%',
-      '-2/3': '-66.666667%',
-      '-1/4': '-25%',
-      '-2/4': '-50%',
-      '-3/4': '-75%',
-      '-full': '-100%',
     }),
     keyframes: {
       spin: {
@@ -555,17 +622,19 @@ module.exports = {
       disc: 'disc',
       decimal: 'decimal',
     },
-    margin: (theme, { negative }) => ({
+    margin: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
-      ...negative(theme('spacing')),
     }),
-    maxHeight: (theme) => ({
+    maxHeight: ({ theme }) => ({
       ...theme('spacing'),
       full: '100%',
       screen: '100vh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
     }),
-    maxWidth: (theme, { breakpoints }) => ({
+    maxWidth: ({ theme, breakpoints }) => ({
       none: 'none',
       0: '0rem',
       xs: '20rem',
@@ -582,6 +651,7 @@ module.exports = {
       full: '100%',
       min: 'min-content',
       max: 'max-content',
+      fit: 'fit-content',
       prose: '65ch',
       ...breakpoints(theme('screens')),
     }),
@@ -589,12 +659,16 @@ module.exports = {
       0: '0px',
       full: '100%',
       screen: '100vh',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
     },
     minWidth: {
       0: '0px',
       full: '100%',
       min: 'min-content',
       max: 'max-content',
+      fit: 'fit-content',
     },
     objectPosition: {
       bottom: 'bottom',
@@ -641,19 +715,29 @@ module.exports = {
       11: '11',
       12: '12',
     },
-    outline: {
-      none: ['2px solid transparent', '2px'],
-      white: ['2px dotted white', '2px'],
-      black: ['2px dotted black', '2px'],
+    padding: ({ theme }) => theme('spacing'),
+    placeholderColor: ({ theme }) => theme('colors'),
+    placeholderOpacity: ({ theme }) => theme('opacity'),
+    outlineColor: ({ theme }) => theme('colors'),
+    outlineOffset: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    outlineWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
     },
-    padding: (theme) => theme('spacing'),
-    placeholderColor: (theme) => theme('colors'),
-    placeholderOpacity: (theme) => theme('opacity'),
-    ringColor: (theme) => ({
+    ringColor: ({ theme }) => ({
       DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),
     }),
-    ringOffsetColor: (theme) => theme('colors'),
+    ringOffsetColor: ({ theme }) => theme('colors'),
     ringOffsetWidth: {
       0: '0px',
       1: '1px',
@@ -661,7 +745,7 @@ module.exports = {
       4: '4px',
       8: '8px',
     },
-    ringOpacity: (theme) => ({
+    ringOpacity: ({ theme }) => ({
       DEFAULT: '0.5',
       ...theme('opacity'),
     }),
@@ -674,14 +758,6 @@ module.exports = {
       8: '8px',
     },
     rotate: {
-      '-180': '-180deg',
-      '-90': '-90deg',
-      '-45': '-45deg',
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
       0: '0deg',
       1: '1deg',
       2: '2deg',
@@ -711,21 +787,15 @@ module.exports = {
       125: '1.25',
       150: '1.5',
     },
-    scrollMargin: (theme, { negative }) => ({
+    scrollMargin: ({ theme }) => ({
       ...theme('spacing'),
-      ...negative(theme('spacing')),
     }),
-    scrollPadding: (theme) => theme('spacing'),
+    scrollPadding: ({ theme }) => theme('spacing'),
     sepia: {
       0: '0',
       DEFAULT: '100%',
     },
     skew: {
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
       0: '0deg',
       1: '1deg',
       2: '2deg',
@@ -733,24 +803,41 @@ module.exports = {
       6: '6deg',
       12: '12deg',
     },
-    space: (theme, { negative }) => ({
+    space: ({ theme }) => ({
       ...theme('spacing'),
-      ...negative(theme('spacing')),
     }),
-    stroke: {
-      current: 'currentColor',
-    },
+    stroke: ({ theme }) => ({
+      none: 'none',
+      ...theme('colors'),
+    }),
     strokeWidth: {
       0: '0',
       1: '1',
       2: '2',
     },
-    textColor: (theme) => theme('colors'),
-    textIndent: (theme, { negative }) => ({
+    textColor: ({ theme }) => theme('colors'),
+    textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      auto: 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textUnderlineOffset: {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textIndent: ({ theme }) => ({
       ...theme('spacing'),
-      ...negative(theme('spacing')),
     }),
-    textOpacity: (theme) => theme('opacity'),
+    textOpacity: ({ theme }) => theme('opacity'),
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -787,8 +874,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'background-color, border-color, color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',
@@ -800,9 +887,8 @@ module.exports = {
       out: 'cubic-bezier(0, 0, 0.2, 1)',
       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
     },
-    translate: (theme, { negative }) => ({
+    translate: ({ theme }) => ({
       ...theme('spacing'),
-      ...negative(theme('spacing')),
       '1/2': '50%',
       '1/3': '33.333333%',
       '2/3': '66.666667%',
@@ -810,15 +896,8 @@ module.exports = {
       '2/4': '50%',
       '3/4': '75%',
       full: '100%',
-      '-1/2': '-50%',
-      '-1/3': '-33.333333%',
-      '-2/3': '-66.666667%',
-      '-1/4': '-25%',
-      '-2/4': '-50%',
-      '-3/4': '-75%',
-      '-full': '-100%',
     }),
-    width: (theme) => ({
+    width: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -851,6 +930,7 @@ module.exports = {
       screen: '100vw',
       min: 'min-content',
       max: 'max-content',
+      fit: 'fit-content',
     }),
     willChange: {
       auto: 'auto',