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

package/src/plugin.js

@@ -1,16 +1,7 @@
-import postcss from 'postcss'
-import lightningcss, { Features } from 'lightningcss'
-import browserslist from 'browserslist'
 import setupTrackingContext from './lib/setupTrackingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
 import { findAtConfigPath } from './lib/findAtConfigPath'
-import { handleImportAtRules } from './lib/handleImportAtRules'
-import { version as tailwindVersion } from '../package.json'
-
-function license() {
-  return `/* ! tailwindcss v${tailwindVersion} | MIT License | https://tailwindcss.com */\n`
-}
 
 module.exports = function tailwindcss(configOrPath) {
   return {
@@ -22,7 +13,6 @@ module.exports = function tailwindcss(configOrPath) {
           console.time('JIT TOTAL')
           return root
         },
-      ...handleImportAtRules(),
       async function (root, result) {
         // Use the path for the `@config` directive if it exists, otherwise use the
         // path for the file being processed
@@ -44,82 +34,6 @@ module.exports = function tailwindcss(configOrPath) {
 
         await processTailwindFeatures(context)(root, result)
       },
-      function lightningCssPlugin(_root, result) {
-        let map = result.map ?? result.opts.map
-
-        let intermediateResult = result.root.toResult({
-          map: map ? { inline: true } : false,
-        })
-
-        let intermediateMap = intermediateResult.map?.toJSON?.() ?? map
-
-        try {
-          let resolvedBrowsersListConfig = browserslist.findConfig(
-            result.opts.from ?? process.cwd()
-          )?.defaults
-          let defaultBrowsersListConfig = require('../package.json').browserslist
-          let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
-
-          let transformed = lightningcss.transform({
-            filename: result.opts.from,
-            code: Buffer.from(intermediateResult.css),
-            minify: false,
-            sourceMap: !!intermediateMap,
-            targets: lightningcss.browserslistToTargets(browserslist(browsersListConfig)),
-            drafts: {
-              nesting: true,
-              customMedia: true,
-            },
-            nonStandard: {
-              deepSelectorCombinator: true,
-            },
-            include: Features.Nesting,
-            exclude: Features.LogicalProperties,
-          })
-
-          let code = transformed.code.toString()
-
-          // https://postcss.org/api/#sourcemapoptions
-          if (intermediateMap && transformed.map != null) {
-            let prev = transformed.map.toString()
-
-            if (typeof intermediateMap === 'object') {
-              intermediateMap.prev = prev
-            } else {
-              code = `${code}\n/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
-                prev
-              ).toString('base64')} */`
-            }
-          }
-
-          result.root = postcss.parse(license() + code, {
-            ...result.opts,
-            map: intermediateMap,
-          })
-        } catch (err) {
-          if (err.source && typeof process !== 'undefined' && process.env.JEST_WORKER_ID) {
-            let lines = err.source.split('\n')
-            err = new Error(
-              [
-                'Error formatting using Lightning CSS:',
-                '',
-                ...[
-                  '```css',
-                  ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
-                  ' '.repeat(err.loc.column - 1) + '^-- ' + err.toString(),
-                  ...lines.slice(err.loc.line, err.loc.line + 2),
-                  '```',
-                ],
-              ].join('\n')
-            )
-          }
-
-          if (Error.captureStackTrace) {
-            Error.captureStackTrace(err, lightningCssPlugin)
-          }
-          throw err
-        }
-      },
       env.DEBUG &&
         function (root) {
           console.timeEnd('JIT TOTAL')

package/src/processTailwindFeatures.js

@@ -7,7 +7,6 @@ import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import partitionApplyAtRules from './lib/partitionApplyAtRules'
-import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
@@ -15,8 +14,6 @@ export default function processTailwindFeatures(setupContext) {
   return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
-    detectNesting()(root, result)
-
     // Partition apply rules that are found in the css
     // itself.
     partitionApplyAtRules()(root, result)

package/src/util/cloneNodes.js

@@ -1,21 +1,13 @@
+/**
+ * @param {import('postcss').Container[]} nodes
+ * @param {any} source
+ * @param {any} raws
+ * @returns {import('postcss').Container[]}
+ */
 export default function cloneNodes(nodes, source = undefined, raws = undefined) {
   return nodes.map((node) => {
     let cloned = node.clone()
 
-    // We always want override the source map
-    // except when explicitly told not to
-    let shouldOverwriteSource = node.raws.tailwind?.preserveSource !== true || !cloned.source
-
-    if (source !== undefined && shouldOverwriteSource) {
-      cloned.source = source
-
-      if ('walk' in cloned) {
-        cloned.walk((child) => {
-          child.source = source
-        })
-      }
-    }
-
     if (raws !== undefined) {
       cloned.raws.tailwind = {
         ...cloned.raws.tailwind,
@@ -23,6 +15,35 @@ export default function cloneNodes(nodes, source = undefined, raws = undefined)
       }
     }
 
+    if (source !== undefined) {
+      traverse(cloned, (node) => {
+        // Do not traverse nodes that have opted
+        // to preserve their original source
+        let shouldPreserveSource = node.raws.tailwind?.preserveSource === true && node.source
+        if (shouldPreserveSource) {
+          return false
+        }
+
+        // Otherwise we can safely replace the source
+        // And continue traversing
+        node.source = source
+      })
+    }
+
     return cloned
   })
 }
+
+/**
+ * Traverse a tree of nodes and don't traverse children if the callback
+ * returns false. Ideally we'd use Container#walk instead of this
+ * function but it stops traversing siblings too.
+ *
+ * @param {import('postcss').Container} node
+ * @param {(node: import('postcss').Container) => boolean} onNode
+ */
+function traverse(node, onNode) {
+  if (onNode(node) !== false) {
+    node.each?.((child) => traverse(child, onNode))
+  }
+}

package/src/util/dataTypes.js

@@ -10,10 +10,34 @@ function isCSSFunction(value) {
   return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
 }
 
+// These properties accept a `<dashed-ident>` as one of the values. This means that you can use them
+// as: `timeline-scope: --tl;`
+//
+// Without the `var(--tl)`, in these cases we don't want to normalize the value, and you should add
+// the `var()` yourself.
+//
+// More info:
+// - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
+// - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+//
+const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
+  // Concrete properties
+  'scroll-timeline-name',
+  'timeline-scope',
+  'view-timeline-name',
+  'font-palette',
+
+  // Shorthand properties
+  'scroll-timeline',
+  'animation-timeline',
+  'view-timeline',
+])
+
 // This is not a data type, but rather a function that can normalize the
 // correct values.
-export function normalize(value, isRoot = true) {
-  if (value.startsWith('--')) {
+export function normalize(value, context = null, isRoot = true) {
+  let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property)
+  if (value.startsWith('--') && !isVarException) {
     return `var(${value})`
   }
 
@@ -27,7 +51,7 @@ export function normalize(value, isRoot = true) {
           return part
         }
 
-        return normalize(part, false)
+        return normalize(part, context, false)
       })
       .join('')
   }
@@ -53,13 +77,43 @@ export function normalize(value, isRoot = true) {
 
 /**
  * Add spaces around operators inside math functions
- * like calc() that do not follow an operator or '('.
+ * like calc() that do not follow an operator, '(', or `,`.
  *
  * @param {string} value
  * @returns {string}
  */
 function normalizeMathOperatorSpacing(value) {
   let preventFormattingInFunctions = ['theme']
+  let preventFormattingKeywords = [
+    'min-content',
+    'max-content',
+    'fit-content',
+
+    // Env
+    'safe-area-inset-top',
+    'safe-area-inset-right',
+    'safe-area-inset-bottom',
+    'safe-area-inset-left',
+
+    'titlebar-area-x',
+    'titlebar-area-y',
+    'titlebar-area-width',
+    'titlebar-area-height',
+
+    'keyboard-inset-top',
+    'keyboard-inset-right',
+    'keyboard-inset-bottom',
+    'keyboard-inset-left',
+    'keyboard-inset-width',
+    'keyboard-inset-height',
+
+    'radial-gradient',
+    'linear-gradient',
+    'conic-gradient',
+    'repeating-radial-gradient',
+    'repeating-linear-gradient',
+    'repeating-conic-gradient',
+  ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     let result = ''
@@ -102,15 +156,27 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')', ','])
       }
 
+      // Skip formatting of known keywords
+      else if (preventFormattingKeywords.some((keyword) => peek(keyword))) {
+        let keyword = preventFormattingKeywords.find((keyword) => peek(keyword))
+        result += keyword
+        i += keyword.length - 1
+      }
+
       // Skip formatting inside known functions
       else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
         result += consumeUntil([')'])
       }
 
+      // Don't break CSS grid track names
+      else if (peek('[')) {
+        result += consumeUntil([']'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&
-        !['(', '+', '-', '*', '/'].includes(lastChar())
+        !['(', '+', '-', '*', '/', ','].includes(lastChar())
       ) {
         result += ` ${char} `
       } else {
@@ -327,7 +393,7 @@ let absoluteSizes = new Set([
   'medium',
   'large',
   'x-large',
-  'x-large',
+  'xx-large',
   'xxx-large',
 ])
 export function absoluteSize(value) {

package/src/util/formatVariantSelector.js

@@ -186,6 +186,13 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   // Remove extraneous selectors that do not include the base candidate
   selector.each((sel) => eliminateIrrelevantSelectors(sel, base))
 
+  // If ffter eliminating irrelevant selectors, we end up with nothing
+  // Then the whole "rule" this is associated with does not need to exist
+  // We use `null` as a marker value for that case
+  if (selector.length === 0) {
+    return null
+  }
+
   // If there are no formats that means there were no variants added to the candidate
   // so we can just return the selector as-is
   let formatAst = Array.isArray(formats)

package/src/util/isPlainObject.js

@@ -4,5 +4,5 @@ export default function isPlainObject(value) {
   }
 
   const prototype = Object.getPrototypeOf(value)
-  return prototype === null || prototype === Object.prototype
+  return prototype === null || Object.getPrototypeOf(prototype) === null
 }

package/src/util/log.js

@@ -17,30 +17,6 @@ export function dim(input) {
 }
 
 export default {
-  group(key, cb) {
-    if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) return
-
-    if (key && alreadyShown.has(key)) return
-    if (key) alreadyShown.add(key)
-
-    console.warn('')
-
-    cb({
-      info(messages) {
-        messages.forEach((message) => console.warn(colors.bold(colors.cyan('info')), '-', message))
-      },
-      warn(messages) {
-        messages.forEach((message) =>
-          console.warn(colors.bold(colors.yellow('warn')), '-', message)
-        )
-      },
-      risk(messages) {
-        messages.forEach((message) =>
-          console.warn(colors.bold(colors.magenta('risk')), '-', message)
-        )
-      },
-    })
-  },
   info(key, messages) {
     log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },

package/src/util/normalizeConfig.js

@@ -1,4 +1,4 @@
-import { flagEnabled, featureFlags } from '../featureFlags'
+import { flagEnabled } from '../featureFlags'
 import log, { dim } from './log'
 
 export function normalizeConfig(config) {
@@ -18,10 +18,6 @@ export function normalizeConfig(config) {
    *   }
    */
   let valid = (() => {
-    if (config.content === 'auto') {
-      return true
-    }
-
     // `config.purge` should not exist anymore
     if (config.purge) {
       return false
@@ -200,17 +196,11 @@ export function normalizeConfig(config) {
     files: (() => {
       let { content, purge } = config
 
-      if (content === undefined && purge === undefined) return []
-      if (purge) {
-        if (Array.isArray(purge)) return purge
-        if (Array.isArray(purge?.content)) return purge.content
-        return []
-      }
-
+      if (Array.isArray(purge)) return purge
+      if (Array.isArray(purge?.content)) return purge.content
       if (Array.isArray(content)) return content
       if (Array.isArray(content?.content)) return content.content
       if (Array.isArray(content?.files)) return content.files
-      if (content === 'auto') return ['auto']
 
       return []
     })(),
@@ -294,33 +284,16 @@ export function normalizeConfig(config) {
     })(),
   }
 
-  // Force disable the `oxideParser` feature flag when using unsupported features.
-  // TODO: Remove once we have prefix or separator support in the oxide parser.
-  if (config.prefix !== '' || config.separator !== ':') {
-    if (config.experimental === 'all') {
-      config.experimental = {}
-      for (let key of featureFlags.experimental) {
-        config.experimental[key] = true
-      }
-    } else {
-      config.experimental = config.experimental ?? {}
-    }
-
-    config.experimental.oxideParser = false
-  }
-
   // Validate globs to prevent bogus globs.
   // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
-  if (config.content.files !== 'auto') {
-    for (let file of config.content.files) {
-      if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
-        log.warn('invalid-glob-braces', [
-          `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
-          `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
-          // TODO: Add https://tw.wtf/invalid-glob-braces
-        ])
-        break
-      }
+  for (let file of config.content.files) {
+    if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
+      log.warn('invalid-glob-braces', [
+        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
+        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        // TODO: Add https://tw.wtf/invalid-glob-braces
+      ])
+      break
     }
   }
 

package/src/util/pluginUtils.js

@@ -18,6 +18,7 @@ import {
 } from './dataTypes'
 import negateValue from './negateValue'
 import { backgroundSize } from './validateFormalSyntax'
+import { flagEnabled } from '../featureFlags.js'
 
 /**
  * @param {import('postcss-selector-parser').Container} selectors
@@ -87,6 +88,22 @@ function isArbitraryValue(input) {
 function splitUtilityModifier(modifier) {
   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, undefined]
   }
@@ -242,9 +259,12 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
  * @returns {Iterator<[value: string, type: string, modifier: string | null]>}
  */
 export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
+  let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
   let [modifier, utilityModifier] = splitUtilityModifier(rawModifier)
 
   let canUseUtilityModifier =
+    modifiersEnabled &&
     options.modifiers != null &&
     (options.modifiers === 'any' ||
       (typeof options.modifiers === 'object' &&

package/src/util/pseudoElements.js

@@ -60,6 +60,10 @@ let elementProperties = {
   ':first-letter': ['terminal', 'jumpable'],
   ':first-line': ['terminal', 'jumpable'],
 
+  ':where': [],
+  ':is': [],
+  ':has': [],
+
   // The default value is used when the pseudo-element is not recognized
   // Because it's not recognized, we don't know if it's terminal or not
   // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/src/util/validateConfig.js

@@ -1,4 +1,3 @@
-import pc from 'picocolors'
 import log from './log'
 
 export function validateConfig(config) {
@@ -10,15 +9,6 @@ export function validateConfig(config) {
     ])
   }
 
-  if (config.content.files.includes('auto')) {
-    log.group('auto-content-experimental', (log) => {
-      log.info([pc.bold('Automatically detecting Tailwind CSS content sources...')])
-      log.warn([
-        'Automatic content detection is experimental, and the behavior may change at any time.',
-      ])
-    })
-  }
-
   // Warn if the line-clamp plugin is installed
   try {
     let plugin = require('@tailwindcss/line-clamp')

package/stubs/config.full.js

@@ -1,5 +1,5 @@
 module.exports = {
-  content: ['auto'],
+  content: [],
   presets: [],
   darkMode: 'media', // or 'class'
   theme: {
@@ -444,6 +444,12 @@ module.exports = {
       'span-4': 'span 4 / span 4',
       'span-5': 'span 5 / span 5',
       'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
       'span-full': '1 / -1',
     },
     gridRowEnd: {
@@ -455,6 +461,12 @@ module.exports = {
       5: '5',
       6: '6',
       7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
     gridRowStart: {
       auto: 'auto',
@@ -465,9 +477,16 @@ module.exports = {
       5: '5',
       6: '6',
       7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
     gridTemplateColumns: {
       none: 'none',
+      subgrid: 'subgrid',
       1: 'repeat(1, minmax(0, 1fr))',
       2: 'repeat(2, minmax(0, 1fr))',
       3: 'repeat(3, minmax(0, 1fr))',
@@ -483,12 +502,19 @@ module.exports = {
     },
     gridTemplateRows: {
       none: 'none',
+      subgrid: 'subgrid',
       1: 'repeat(1, minmax(0, 1fr))',
       2: 'repeat(2, minmax(0, 1fr))',
       3: 'repeat(3, minmax(0, 1fr))',
       4: 'repeat(4, minmax(0, 1fr))',
       5: 'repeat(5, minmax(0, 1fr))',
       6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))',
     },
     height: ({ theme }) => ({
       auto: 'auto',
@@ -625,8 +651,8 @@ module.exports = {
       fit: 'fit-content',
     }),
     maxWidth: ({ theme, breakpoints }) => ({
+      ...theme('spacing'),
       none: 'none',
-      0: '0rem',
       xs: '20rem',
       sm: '24rem',
       md: '28rem',
@@ -645,8 +671,8 @@ module.exports = {
       prose: '65ch',
       ...breakpoints(theme('screens')),
     }),
-    minHeight: {
-      0: '0px',
+    minHeight: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       screen: '100vh',
       svh: '100svh',
@@ -655,14 +681,14 @@ module.exports = {
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
-    minWidth: {
-      0: '0px',
+    }),
+    minWidth: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -944,6 +970,40 @@ module.exports = {
       '3/4': '75%',
       full: '100%',
     }),
+    size: ({ 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%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
     width: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),

package/stubs/config.simple.js

@@ -1,5 +1,5 @@
 module.exports = {
-  content: ['auto'],
+  content: [],
   theme: {
     extend: {},
   },