tailwindcss 0.0.0-insiders.fda68f7 → 0.0.0-oxide.6bf5e56

package/src/lib/setupTrackingContext.js

@@ -1,21 +1,14 @@
 import fs from 'fs'
-import path from 'path'
-
-import fastGlob from 'fast-glob'
 import LRU from 'quick-lru'
-import normalizePath from 'normalize-path'
 
 import hash from '../util/hashConfig'
 import getModuleDependencies from '../lib/getModuleDependencies'
-
-import resolveConfig from '../../resolveConfig'
-
+import resolveConfig from '../public/resolve-config'
 import resolveConfigPath from '../util/resolveConfigPath'
-
-import { env } from './sharedState'
-
 import { getContext, getFileModifiedMap } from './setupContextUtils'
 import parseDependency from '../util/parseDependency'
+import { validateConfig } from '../util/validateConfig.js'
+import { parseCandidateFiles, resolvedChangedContent } from './content.js'
 
 let configPathCache = new LRU({ maxSize: 100 })
 
@@ -26,9 +19,7 @@ function getCandidateFiles(context, tailwindConfig) {
     return candidateFilesCache.get(context)
   }
 
-  let candidateFiles = tailwindConfig.content.content
-    .filter((item) => typeof item === 'string')
-    .map((contentPath) => normalizePath(path.resolve(contentPath)))
+  let candidateFiles = parseCandidateFiles(context, tailwindConfig)
 
   return candidateFilesCache.set(context, candidateFiles).get(context)
 }
@@ -63,6 +54,7 @@ function getTailwindConfig(configOrPath) {
       delete require.cache[file]
     }
     let newConfig = resolveConfig(require(userConfigPath))
+    newConfig = validateConfig(newConfig)
     let newHash = hash(newConfig)
     configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified])
     return [newConfig, userConfigPath, newHash, newDeps]
@@ -73,38 +65,9 @@ function getTailwindConfig(configOrPath) {
     configOrPath.config === undefined ? configOrPath : configOrPath.config
   )
 
-  return [newConfig, null, hash(newConfig), []]
-}
-
-function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-  let changedContent = context.tailwindConfig.content.content
-    .filter((item) => typeof item.raw === 'string')
-    .concat(context.tailwindConfig.content.safelist)
-    .map(({ raw, extension }) => ({ content: raw, extension }))
-
-  for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {
-    let content = fs.readFileSync(changedFile, 'utf8')
-    let extension = path.extname(changedFile).slice(1)
-    changedContent.push({ content, extension })
-  }
-  return changedContent
-}
+  newConfig = validateConfig(newConfig)
 
-function resolveChangedFiles(candidateFiles, fileModifiedMap) {
-  let changedFiles = new Set()
-  env.DEBUG && console.time('Finding changed files')
-  let files = fastGlob.sync(candidateFiles)
-  for (let file of files) {
-    let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity
-    let modified = fs.statSync(file).mtimeMs
-
-    if (modified > prevModified) {
-      changedFiles.add(file)
-      fileModifiedMap.set(file, modified)
-    }
-  }
-  env.DEBUG && console.timeEnd('Finding changed files')
-  return changedFiles
+  return [newConfig, null, hash(newConfig), []]
 }
 
 // DISABLE_TOUCH = TRUE
@@ -120,11 +83,12 @@ export default function setupTrackingContext(configOrPath) {
 
       let contextDependencies = new Set(configDependencies)
 
-      // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-      // to be dependencies of the context. Can reuse the context even if they change.
-      // We may want to think about `@layer` being part of this trigger too, but it's tough
-      // because it's impossible for a layer in one file to end up in the actual @tailwind rule
-      // in another file since independent sources are effectively isolated.
+      // If there are no @tailwind or @apply rules, we don't consider this CSS
+      // file or its dependencies to be dependencies of the context. Can reuse
+      // the context even if they change. We may want to think about `@layer`
+      // being part of this trigger too, but it's tough because it's impossible
+      // for a layer in one file to end up in the actual @tailwind rule in
+      // another file since independent sources are effectively isolated.
       if (tailwindDirectives.size > 0) {
         // Add current css file as a context dependencies.
         contextDependencies.add(result.opts.from)
@@ -138,7 +102,6 @@ export default function setupTrackingContext(configOrPath) {
       }
 
       let [context] = getContext(
-        tailwindDirectives,
         root,
         result,
         tailwindConfig,
@@ -149,8 +112,8 @@ export default function setupTrackingContext(configOrPath) {
 
       let candidateFiles = getCandidateFiles(context, tailwindConfig)
 
-      // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-      // to be dependencies of the context. Can reuse the context even if they change.
+      // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
+      // dependencies to be dependencies of the context. Can reuse the context even if they change.
       // We may want to think about `@layer` being part of this trigger too, but it's tough
       // because it's impossible for a layer in one file to end up in the actual @tailwind rule
       // in another file since independent sources are effectively isolated.
@@ -158,8 +121,10 @@ export default function setupTrackingContext(configOrPath) {
         let fileModifiedMap = getFileModifiedMap(context)
 
         // Add template paths as postcss dependencies.
-        for (let fileOrGlob of candidateFiles) {
-          registerDependency(parseDependency(fileOrGlob))
+        for (let contentPath of candidateFiles) {
+          for (let dependency of parseDependency(contentPath)) {
+            registerDependency(dependency)
+          }
         }
 
         for (let changedContent of resolvedChangedContent(

package/src/lib/sharedState.js

@@ -1,13 +1,51 @@
-import LRU from 'quick-lru'
-
 export const env = {
-  TAILWIND_MODE: process.env.TAILWIND_MODE,
   NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.DEBUG !== undefined,
-  TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
-  TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR,
+  DEBUG: resolveDebug(process.env.DEBUG),
+  OXIDE: process.env.OXIDE,
 }
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
-export const contentMatchCache = new LRU({ maxSize: 25000 })
+export const sourceHashMap = new Map()
+export const NOT_ON_DEMAND = new String('*')
+
+export const NONE = Symbol('__NONE__')
+
+export function resolveDebug(debug) {
+  if (debug === undefined) {
+    return false
+  }
+
+  // Environment variables are strings, so convert to boolean
+  if (debug === 'true' || debug === '1') {
+    return true
+  }
+
+  if (debug === 'false' || debug === '0') {
+    return false
+  }
+
+  // Keep the debug convention into account:
+  // DEBUG=* -> This enables all debug modes
+  // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
+  // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
+  // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
+
+  if (debug === '*') {
+    return true
+  }
+
+  let debuggers = debug.split(',').map((d) => d.split(':')[0])
+
+  // Ignoring tailwindcss
+  if (debuggers.includes('-tailwindcss')) {
+    return false
+  }
+
+  // Including tailwindcss
+  if (debuggers.includes('tailwindcss')) {
+    return true
+  }
+
+  return false
+}

package/src/lib/substituteScreenAtRules.js

@@ -1,16 +1,19 @@
+import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 
 export default function ({ tailwindConfig: { theme } }) {
   return function (css) {
     css.walkAtRules('screen', (atRule) => {
-      const screen = atRule.params
+      let screen = atRule.params
+      let screens = normalizeScreens(theme.screens)
+      let screenDefinition = screens.find(({ name }) => name === screen)
 
-      if (!theme.screens?.hasOwnProperty?.(screen)) {
+      if (!screenDefinition) {
         throw atRule.error(`No \`${screen}\` screen found.`)
       }
 
       atRule.name = 'media'
-      atRule.params = buildMediaQuery(theme.screens[screen])
+      atRule.params = buildMediaQuery(screenDefinition)
     })
   }
 }

package/src/postcss-plugins/nesting/README.md

@@ -0,0 +1,42 @@
+# tailwindcss/nesting
+
+This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`.
+
+Add it to your PostCSS configuration, somewhere before Tailwind itself:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins#css-in-js-syntax).
+
+If you'd rather use [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside:
+
+```shell
+npm install postcss-nesting
+```
+
+Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting')(require('postcss-nesting')),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself.
+

package/src/postcss-plugins/nesting/index.js

@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)

package/src/postcss-plugins/nesting/plugin.js

@@ -0,0 +1,80 @@
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
+
+export function nesting(opts = postcssNested) {
+  return (root, result) => {
+    root.walkAtRules('screen', (rule) => {
+      rule.name = 'media'
+      rule.params = `screen(${rule.params})`
+    })
+
+    root.walkAtRules('apply', (rule) => {
+      rule.before(postcss.decl({ prop: '__apply', value: rule.params, source: rule.source }))
+      rule.remove()
+    })
+
+    let plugin = (() => {
+      if (
+        typeof opts === 'function' ||
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
+      ) {
+        return opts
+      }
+
+      if (typeof opts === 'string') {
+        return require(opts)
+      }
+
+      if (Object.keys(opts).length <= 0) {
+        return postcssNested
+      }
+
+      throw new Error('tailwindcss/nesting should be loaded with a nesting plugin.')
+    })()
+
+    postcss([plugin]).process(root, result.opts).sync()
+
+    root.walkDecls('__apply', (decl) => {
+      decl.before(postcss.atRule({ name: 'apply', params: decl.value, source: decl.source }))
+      decl.remove()
+    })
+
+    /**
+     * Use a private PostCSS API to remove the "clean" flag from the entire AST.
+     * This is done because running process() on the AST will set the "clean"
+     * flag on all nodes, which we don't want.
+     *
+     * This causes downstream plugins using the visitor API to be skipped.
+     *
+     * This is guarded because the PostCSS API is not public
+     * and may change in future versions of PostCSS.
+     *
+     * See https://github.com/postcss/postcss/issues/1712 for more details
+     *
+     * @param {import('postcss').Node} node
+     */
+    function markDirty(node) {
+      if (!('markDirty' in node)) {
+        return
+      }
+
+      // Traverse the tree down to the leaf nodes
+      if (node.nodes) {
+        node.nodes.forEach((n) => markDirty(n))
+      }
+
+      // If it's a leaf node mark it as dirty
+      // We do this here because marking a node as dirty
+      // will walk up the tree and mark all parents as dirty
+      // resulting in a lot of unnecessary work if we did this
+      // for every single node
+      if (!node.nodes) {
+        node.markDirty()
+      }
+    }
+
+    markDirty(root)
+
+    return root
+  }
+}

package/src/processTailwindFeatures.js

@@ -5,14 +5,25 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 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'
 
 export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
-    let tailwindDirectives = normalizeTailwindDirectives(root)
+    let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
+
+    detectNesting()(root, result)
+
+    // Partition apply rules that are found in the css
+    // itself.
+    partitionApplyAtRules()(root, result)
 
     let context = setupContext({
       tailwindDirectives,
+      applyDirectives,
       registerDependency(dependency) {
         result.messages.push({
           plugin: 'tailwindcss',
@@ -21,7 +32,7 @@ export default function processTailwindFeatures(setupContext) {
         })
       },
       createContext(tailwindConfig, changedContent) {
-        return createContext(tailwindConfig, changedContent, tailwindDirectives, root)
+        return createContext(tailwindConfig, changedContent, root)
       },
     })(root, result)
 
@@ -31,11 +42,17 @@ export default function processTailwindFeatures(setupContext) {
       )
     }
 
+    issueFlagNotices(context.tailwindConfig)
+
     expandTailwindAtRules(context)(root, result)
+    // Partition apply rules that are generated by
+    // addComponents, addUtilities and so on.
+    partitionApplyAtRules()(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)
     resolveDefaultsAtRules(context)(root, result)
     collapseAdjacentRules(context)(root, result)
+    collapseDuplicateDeclarations(context)(root, result)
   }
 }