tailwindcss 0.0.0-insiders.ea139f2 → 0.0.0-insiders.ea4e1cd

package/src/css/preflight.css

@@ -9,7 +9,7 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: currentColor; /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
 }
 
 ::before,
@@ -22,6 +22,8 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -30,6 +32,8 @@ html {
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+  font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
 }
 
 /*
@@ -58,7 +62,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -144,7 +148,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -160,6 +164,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -310,7 +315,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 
@@ -358,10 +363,7 @@ video {
   height: auto;
 }
 
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
+/* Make elements with the HTML hidden attribute stay hidden by default */
 [hidden] {
   display: none;
 }

package/src/featureFlags.js

@@ -1,13 +1,29 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 import log from './util/log'
 
 let defaults = {
-  optimizeUniversalDefaults: true,
+  optimizeUniversalDefaults: false,
+  generalizedModifiers: true,
+  get disableColorOpacityUtilitiesByDefault() {
+    return __OXIDE__
+  },
+  get relativeContentPathsByDefault() {
+    return __OXIDE__
+  },
 }
 
 let featureFlags = {
-  future: [],
-  experimental: ['optimizeUniversalDefaults'],
+  future: [
+    'hoverOnlyWhenSupported',
+    'respectDefaultRingColorOpacity',
+    'disableColorOpacityUtilitiesByDefault',
+    'relativeContentPathsByDefault',
+  ],
+  experimental: [
+    'optimizeUniversalDefaults',
+    'generalizedModifiers',
+    // 'variantGrouping',
+  ],
 }
 
 export function flagEnabled(config, flag) {
@@ -41,7 +57,7 @@ export function issueFlagNotices(config) {
 
   if (experimentalFlagsEnabled(config).length > 0) {
     let changes = experimentalFlagsEnabled(config)
-      .map((s) => chalk.yellow(s))
+      .map((s) => colors.yellow(s))
       .join(', ')
 
     log.warn('experimental-flags-enabled', [

package/src/index.js

@@ -1,34 +1 @@
-import setupTrackingContext from './lib/setupTrackingContext'
-import setupWatchingContext from './lib/setupWatchingContext'
-import processTailwindFeatures from './processTailwindFeatures'
-import { env } from './lib/sharedState'
-
-module.exports = function tailwindcss(configOrPath) {
-  return {
-    postcssPlugin: 'tailwindcss',
-    plugins: [
-      env.DEBUG &&
-        function (root) {
-          console.log('\n')
-          console.time('JIT TOTAL')
-          return root
-        },
-      function (root, result) {
-        let setupContext =
-          env.TAILWIND_MODE === 'watch'
-            ? setupWatchingContext(configOrPath)
-            : setupTrackingContext(configOrPath)
-
-        processTailwindFeatures(setupContext)(root, result)
-      },
-      env.DEBUG &&
-        function (root) {
-          console.timeEnd('JIT TOTAL')
-          console.log('\n')
-          return root
-        },
-    ].filter(Boolean),
-  }
-}
-
-module.exports.postcss = true
+module.exports = require('./plugin')

package/src/lib/cacheInvalidation.js

@@ -0,0 +1,52 @@
+import crypto from 'crypto'
+import * as sharedState from './sharedState'
+
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */
+function getHash(str) {
+  try {
+    return crypto.createHash('md5').update(str, 'utf-8').digest('binary')
+  } catch (err) {
+    return ''
+  }
+}
+
+/**
+ * Determine if the CSS tree is different from the
+ * previous version for the given `sourcePath`.
+ *
+ * @param {string} sourcePath
+ * @param {import('postcss').Node} root
+ */
+export function hasContentChanged(sourcePath, root) {
+  let css = root.toString()
+
+  // We only care about files with @tailwind directives
+  // Other files use an existing context
+  if (!css.includes('@tailwind')) {
+    return false
+  }
+
+  let existingHash = sharedState.sourceHashMap.get(sourcePath)
+  let rootHash = getHash(css)
+  let didChange = existingHash !== rootHash
+
+  sharedState.sourceHashMap.set(sourcePath, rootHash)
+
+  return didChange
+}

package/src/lib/collapseAdjacentRules.js

@@ -5,7 +5,7 @@ let comparisonMap = {
 let types = new Set(Object.keys(comparisonMap))
 
 export default function collapseAdjacentRules() {
-  return (root) => {
+  function collapseRulesIn(root) {
     let currentRule = null
     root.each((node) => {
       if (!types.has(node.type)) {
@@ -29,11 +29,30 @@ export default function collapseAdjacentRules() {
             (currentRule[property] ?? '').replace(/\s+/g, ' ')
         )
       ) {
-        currentRule.append(node.nodes)
+        // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+        if (node.nodes) {
+          currentRule.append(node.nodes)
+        }
+
         node.remove()
       } else {
         currentRule = node
       }
     })
+
+    // After we've collapsed adjacent rules & at-rules, we need to collapse
+    // adjacent rules & at-rules that are children of at-rules.
+    // We do not care about nesting rules because Tailwind CSS
+    // explicitly does not handle rule nesting on its own as
+    // the user is expected to use a nesting plugin
+    root.each((node) => {
+      if (node.type === 'atrule') {
+        collapseRulesIn(node)
+      }
+    })
+  }
+
+  return (root) => {
+    collapseRulesIn(root)
   }
 }

package/src/lib/collapseDuplicateDeclarations.js

@@ -3,6 +3,7 @@ export default function collapseDuplicateDeclarations() {
     root.walkRules((node) => {
       let seen = new Map()
       let droppable = new Set([])
+      let byProperty = new Map()
 
       node.walkDecls((decl) => {
         // This could happen if we have nested selectors. In that case the
@@ -14,15 +15,79 @@ export default function collapseDuplicateDeclarations() {
         }
 
         if (seen.has(decl.prop)) {
-          droppable.add(seen.get(decl.prop))
+          // Exact same value as what we have seen so far
+          if (seen.get(decl.prop).value === decl.value) {
+            // Keep the last one, drop the one we've seen so far
+            droppable.add(seen.get(decl.prop))
+            // Override the existing one with the new value. This is necessary
+            // so that if we happen to have more than one declaration with the
+            // same value, that we keep removing the previous one. Otherwise we
+            // will only remove the *first* one.
+            seen.set(decl.prop, decl)
+            return
+          }
+
+          // Not the same value, so we need to check if we can merge it so
+          // let's collect it first.
+          if (!byProperty.has(decl.prop)) {
+            byProperty.set(decl.prop, new Set())
+          }
+
+          byProperty.get(decl.prop).add(seen.get(decl.prop))
+          byProperty.get(decl.prop).add(decl)
         }
 
         seen.set(decl.prop, decl)
       })
 
+      // Drop all the duplicate declarations with the exact same value we've
+      // already seen so far.
       for (let decl of droppable) {
         decl.remove()
       }
+
+      // Analyze the declarations based on its unit, drop all the declarations
+      // with the same unit but the last one in the list.
+      for (let declarations of byProperty.values()) {
+        let byUnit = new Map()
+
+        for (let decl of declarations) {
+          let unit = resolveUnit(decl.value)
+          if (unit === null) {
+            // We don't have a unit, so should never try and collapse this
+            // value. This is because we can't know how to do it in a correct
+            // way (e.g.: overrides for older browsers)
+            continue
+          }
+
+          if (!byUnit.has(unit)) {
+            byUnit.set(unit, new Set())
+          }
+
+          byUnit.get(unit).add(decl)
+        }
+
+        for (let declarations of byUnit.values()) {
+          // Get all but the last one
+          let removableDeclarations = Array.from(declarations).slice(0, -1)
+
+          for (let decl of removableDeclarations) {
+            decl.remove()
+          }
+        }
+      }
     })
   }
 }
+
+let UNITLESS_NUMBER = Symbol('unitless-number')
+
+function resolveUnit(input) {
+  let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input)
+
+  if (result) {
+    return result[1] ?? UNITLESS_NUMBER
+  }
+
+  return null
+}

package/src/lib/content.js

@@ -0,0 +1,208 @@
+// @ts-check
+
+import fs from 'fs'
+import path from 'path'
+import isGlob from 'is-glob'
+import fastGlob from 'fast-glob'
+import normalizePath from 'normalize-path'
+import { parseGlob } from '../util/parseGlob'
+import { env } from './sharedState'
+
+/** @typedef {import('../../types/config.js').RawFile} RawFile */
+/** @typedef {import('../../types/config.js').FilePath} FilePath */
+
+/**
+ * @typedef {object} ContentPath
+ * @property {string} original
+ * @property {string} base
+ * @property {string | null} glob
+ * @property {boolean} ignore
+ * @property {string} pattern
+ */
+
+/**
+ * Turn a list of content paths (absolute or not; glob or not) into a list of
+ * absolute file paths that exist on the filesystem
+ *
+ * If there are symlinks in the path then multiple paths will be returned
+ * one for the symlink and one for the actual file
+ *
+ * @param {*} context
+ * @param {import('tailwindcss').Config} tailwindConfig
+ * @returns {ContentPath[]}
+ */
+export function parseCandidateFiles(context, tailwindConfig) {
+  let files = tailwindConfig.content.files
+
+  // Normalize the file globs
+  files = files.filter((filePath) => typeof filePath === 'string')
+  files = files.map(normalizePath)
+
+  // Split into included and excluded globs
+  let tasks = fastGlob.generateTasks(files)
+
+  /** @type {ContentPath[]} */
+  let included = []
+
+  /** @type {ContentPath[]} */
+  let excluded = []
+
+  for (const task of tasks) {
+    included.push(...task.positive.map((filePath) => parseFilePath(filePath, false)))
+    excluded.push(...task.negative.map((filePath) => parseFilePath(filePath, true)))
+  }
+
+  let paths = [...included, ...excluded]
+
+  // Resolve paths relative to the config file or cwd
+  paths = resolveRelativePaths(context, paths)
+
+  // Resolve symlinks if possible
+  paths = paths.flatMap(resolvePathSymlinks)
+
+  // Update cached patterns
+  paths = paths.map(resolveGlobPattern)
+
+  return paths
+}
+
+/**
+ *
+ * @param {string} filePath
+ * @param {boolean} ignore
+ * @returns {ContentPath}
+ */
+function parseFilePath(filePath, ignore) {
+  let contentPath = {
+    original: filePath,
+    base: filePath,
+    ignore,
+    pattern: filePath,
+    glob: null,
+  }
+
+  if (isGlob(filePath)) {
+    Object.assign(contentPath, parseGlob(filePath))
+  }
+
+  return contentPath
+}
+
+/**
+ *
+ * @param {ContentPath} contentPath
+ * @returns {ContentPath}
+ */
+function resolveGlobPattern(contentPath) {
+  // This is required for Windows support to properly pick up Glob paths.
+  // Afaik, this technically shouldn't be needed but there's probably
+  // some internal, direct path matching with a normalized path in
+  // a package which can't handle mixed directory separators
+  let base = normalizePath(contentPath.base)
+
+  // If the user's file path contains any special characters (like parens) for instance fast-glob
+  // is like "OOOH SHINY" and treats them as such. So we have to escape the base path to fix this
+  base = fastGlob.escapePath(base)
+
+  contentPath.pattern = contentPath.glob ? `${base}/${contentPath.glob}` : base
+  contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern
+
+  return contentPath
+}
+
+/**
+ * Resolve each path relative to the config file (when possible) if the experimental flag is enabled
+ * Otherwise, resolve relative to the current working directory
+ *
+ * @param {any} context
+ * @param {ContentPath[]} contentPaths
+ * @returns {ContentPath[]}
+ */
+function resolveRelativePaths(context, contentPaths) {
+  let resolveFrom = []
+
+  // Resolve base paths relative to the config file (when possible) if the experimental flag is enabled
+  if (context.userConfigPath && context.tailwindConfig.content.relative) {
+    resolveFrom = [path.dirname(context.userConfigPath)]
+  }
+
+  return contentPaths.map((contentPath) => {
+    contentPath.base = path.resolve(...resolveFrom, contentPath.base)
+
+    return contentPath
+  })
+}
+
+/**
+ * Resolve the symlink for the base directory / file in each path
+ * These are added as additional dependencies to watch for changes because
+ * some tools (like webpack) will only watch the actual file or directory
+ * but not the symlink itself even in projects that use monorepos.
+ *
+ * @param {ContentPath} contentPath
+ * @returns {ContentPath[]}
+ */
+function resolvePathSymlinks(contentPath) {
+  let paths = [contentPath]
+
+  try {
+    let resolvedPath = fs.realpathSync(contentPath.base)
+    if (resolvedPath !== contentPath.base) {
+      paths.push({
+        ...contentPath,
+        base: resolvedPath,
+      })
+    }
+  } catch {
+    // TODO: log this?
+  }
+
+  return paths
+}
+
+/**
+ * @param {any} context
+ * @param {ContentPath[]} candidateFiles
+ * @param {Map<string, number>} fileModifiedMap
+ * @returns {[{ content: string, extension: string }[], Map<string, number>]}
+ */
+export function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
+  let changedContent = context.tailwindConfig.content.files
+    .filter((item) => typeof item.raw === 'string')
+    .map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
+
+  let [changedFiles, mTimesToCommit] = resolveChangedFiles(candidateFiles, fileModifiedMap)
+
+  for (let changedFile of changedFiles) {
+    let extension = path.extname(changedFile).slice(1)
+    changedContent.push({ file: changedFile, extension })
+  }
+
+  return [changedContent, mTimesToCommit]
+}
+
+/**
+ *
+ * @param {ContentPath[]} candidateFiles
+ * @param {Map<string, number>} fileModifiedMap
+ * @returns {[Set<string>, Map<string, number>]}
+ */
+function resolveChangedFiles(candidateFiles, fileModifiedMap) {
+  let paths = candidateFiles.map((contentPath) => contentPath.pattern)
+  let mTimesToCommit = new Map()
+
+  let changedFiles = new Set()
+  env.DEBUG && console.time('Finding changed files')
+  let files = fastGlob.sync(paths, { absolute: true })
+  for (let file of files) {
+    let prevModified = fileModifiedMap.get(file) || -Infinity
+    let modified = fs.statSync(file).mtimeMs
+
+    if (modified > prevModified) {
+      changedFiles.add(file)
+      mTimesToCommit.set(file, modified)
+    }
+  }
+  env.DEBUG && console.timeEnd('Finding changed files')
+  return [changedFiles, mTimesToCommit]
+}