tailwindcss 0.0.0-insiders.e2d5f21 → 0.0.0-insiders.e302ef1

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,
@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -310,7 +310,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/src/featureFlags.js

@@ -1,8 +1,8 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 import log from './util/log'
 
 let defaults = {
-  optimizeUniversalDefaults: true,
+  optimizeUniversalDefaults: false,
 }
 
 let featureFlags = {
@@ -41,7 +41,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,5 +1,4 @@
 import setupTrackingContext from './lib/setupTrackingContext'
-import setupWatchingContext from './lib/setupWatchingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
 
@@ -14,12 +13,21 @@ module.exports = function tailwindcss(configOrPath) {
           return root
         },
       function (root, result) {
-        let setupContext =
-          env.TAILWIND_MODE === 'watch'
-            ? setupWatchingContext(configOrPath)
-            : setupTrackingContext(configOrPath)
+        let context = setupTrackingContext(configOrPath)
 
-        processTailwindFeatures(setupContext)(root, result)
+        if (root.type === 'document') {
+          let roots = root.nodes.filter((node) => node.type === 'root')
+
+          for (const root of roots) {
+            if (root.type === 'root') {
+              processTailwindFeatures(context)(root, result)
+            }
+          }
+
+          return
+        }
+
+        processTailwindFeatures(context)(root, result)
       },
       env.DEBUG &&
         function (root) {

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)) {
@@ -35,5 +35,20 @@ export default function collapseAdjacentRules() {
         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/defaultExtractor.js

@@ -0,0 +1,50 @@
+const PATTERNS = [
+  /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source, // ['text-lg' -> text-lg
+  /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source, // ["text-lg" -> text-lg
+  /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source, // [`text-lg` -> text-lg
+  /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source, // font-['some_font',sans-serif]
+  /([^<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source, // font-["some_font",sans-serif]
+  /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source, // bg-[url('...')]
+  /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
+  /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
+  /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source, // h-[calc(100%-theme('spacing.1'))]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source, // h-[calc(100%-theme("spacing.1"))]
+  /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
+  /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
+  /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
+  /([^"'`\s]*[^<>"'`\s:\\])/.source, //  `<sm:underline`, `md>:font-bold`
+  /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
+
+  // Arbitrary properties
+  // /([^"\s]*\[[^\s]+?\][^"\s]*)/.source,
+  // /([^'\s]*\[[^\s]+?\][^'\s]*)/.source,
+  // /([^`\s]*\[[^\s]+?\][^`\s]*)/.source,
+].join('|')
+
+const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
+const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+
+/**
+ * @param {string} content
+ */
+export function defaultExtractor(content) {
+  let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP)
+  let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
+  let results = [...broadMatches, ...innerMatches].flat().filter((v) => v !== undefined)
+
+  return results
+}
+
+// Regular utilities
+// {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+
+// Arbitrary values
+// {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+// arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+
+// Arbitrary properties
+// {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/src/lib/evaluateTailwindFunctions.js

@@ -42,7 +42,7 @@ function validatePath(config, path, defaultValue) {
     ? pathToString(path)
     : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
-  const value = dlv(config.theme, pathString, defaultValue)
+  const value = dlv(config.theme, pathSegments, defaultValue)
 
   if (value === undefined) {
     let error = `'${pathString}' does not exist in your theme config.`