tailwindcss 0.0.0-insiders.bd4dddd → 0.0.0-insiders.bda8421

package/src/lib/setupTrackingContext.js

@@ -1,21 +1,17 @@
-import fs from 'fs'
-import path from 'path'
+// @ts-check
 
-import fastGlob from 'fast-glob'
-import LRU from 'quick-lru'
-import normalizePath from 'normalize-path'
+import fs from 'fs'
+import LRU from '@alloc/quick-lru'
 
 import hash from '../util/hashConfig'
-import getModuleDependencies from '../lib/getModuleDependencies'
-
 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'
+import { loadConfig } from '../lib/load-config'
+import getModuleDependencies from './getModuleDependencies'
 
 let configPathCache = new LRU({ maxSize: 100 })
 
@@ -26,9 +22,7 @@ function getCandidateFiles(context, tailwindConfig) {
     return candidateFilesCache.get(context)
   }
 
-  let candidateFiles = tailwindConfig.content.files
-    .filter((item) => typeof item === 'string')
-    .map((contentPath) => normalizePath(contentPath))
+  let candidateFiles = parseCandidateFiles(context, tailwindConfig)
 
   return candidateFilesCache.set(context, candidateFiles).get(context)
 }
@@ -41,7 +35,7 @@ function getTailwindConfig(configOrPath) {
     let [prevConfig, prevConfigHash, prevDeps, prevModified] =
       configPathCache.get(userConfigPath) || []
 
-    let newDeps = getModuleDependencies(userConfigPath).map((dep) => dep.file)
+    let newDeps = getModuleDependencies(userConfigPath)
 
     let modified = false
     let newModified = new Map()
@@ -62,48 +56,18 @@ function getTailwindConfig(configOrPath) {
     for (let file of newDeps) {
       delete require.cache[file]
     }
-    let newConfig = resolveConfig(require(userConfigPath))
+    let newConfig = validateConfig(resolveConfig(loadConfig(userConfigPath)))
     let newHash = hash(newConfig)
     configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified])
     return [newConfig, userConfigPath, newHash, newDeps]
   }
 
   // It's a plain object, not a path
-  let newConfig = resolveConfig(
-    configOrPath.config === undefined ? configOrPath : configOrPath.config
-  )
+  let newConfig = resolveConfig(configOrPath?.config ?? configOrPath ?? {})
 
-  return [newConfig, null, hash(newConfig), []]
-}
-
-function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-  let changedContent = context.tailwindConfig.content.files
-    .filter((item) => typeof item.raw === 'string')
-    .map(({ raw, extension = 'html' }) => ({ 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
@@ -112,7 +76,7 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
 // source path), or set up a new one (including setting up watchers and registering
 // plugins) then return it
 export default function setupTrackingContext(configOrPath) {
-  return ({ tailwindDirectives, registerDependency, applyDirectives }) => {
+  return ({ tailwindDirectives, registerDependency }) => {
     return (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
         getTailwindConfig(configOrPath)
@@ -125,7 +89,7 @@ export default function setupTrackingContext(configOrPath) {
       // 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 || applyDirectives.size > 0) {
+      if (tailwindDirectives.size > 0) {
         // Add current css file as a context dependencies.
         contextDependencies.add(result.opts.from)
 
@@ -137,7 +101,7 @@ export default function setupTrackingContext(configOrPath) {
         }
       }
 
-      let [context] = getContext(
+      let [context, , mTimesToCommit] = getContext(
         root,
         result,
         tailwindConfig,
@@ -146,6 +110,8 @@ export default function setupTrackingContext(configOrPath) {
         contextDependencies
       )
 
+      let fileModifiedMap = getFileModifiedMap(context)
+
       let candidateFiles = getCandidateFiles(context, tailwindConfig)
 
       // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
@@ -153,23 +119,36 @@ export default function setupTrackingContext(configOrPath) {
       // 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 || applyDirectives.size > 0) {
-        let fileModifiedMap = getFileModifiedMap(context)
-
+      if (tailwindDirectives.size > 0) {
         // Add template paths as postcss dependencies.
-        for (let fileOrGlob of candidateFiles) {
-          let dependency = parseDependency(fileOrGlob)
-          if (dependency) {
+        for (let contentPath of candidateFiles) {
+          for (let dependency of parseDependency(contentPath)) {
             registerDependency(dependency)
           }
         }
 
-        for (let changedContent of resolvedChangedContent(
+        let [changedContent, contentMTimesToCommit] = resolvedChangedContent(
           context,
           candidateFiles,
           fileModifiedMap
-        )) {
-          context.changedContent.push(changedContent)
+        )
+
+        for (let content of changedContent) {
+          context.changedContent.push(content)
+        }
+
+        // Add the mtimes of the content files to the commit list
+        // We can overwrite the existing values because unconditionally
+        // This is because:
+        // 1. Most of the files here won't be in the map yet
+        // 2. If they are that means it's a context dependency
+        // and we're reading this after the context. This means
+        // that the mtime we just read is strictly >= the context
+        // mtime. Unless the user / os is doing something weird
+        // in which the mtime would be going backwards. If that
+        // happens there's already going to be problems.
+        for (let [path, mtime] of contentMTimesToCommit.entries()) {
+          mTimesToCommit.set(path, mtime)
         }
       }
 
@@ -177,6 +156,13 @@ export default function setupTrackingContext(configOrPath) {
         registerDependency({ type: 'dependency', file })
       }
 
+      // "commit" the new modified time for all context deps
+      // We do this here because we want content tracking to
+      // read the "old" mtime even when it's a context dependency.
+      for (let [path, mtime] of mTimesToCommit.entries()) {
+        fileModifiedMap.set(path, mtime)
+      }
+
       return context
     }
   }

package/src/lib/sharedState.js

@@ -1,10 +1,21 @@
-export const env = {
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: resolveDebug(process.env.DEBUG),
-}
+export const env =
+  typeof process !== 'undefined'
+    ? {
+        NODE_ENV: process.env.NODE_ENV,
+        DEBUG: resolveDebug(process.env.DEBUG),
+      }
+    : {
+        NODE_ENV: 'production',
+        DEBUG: false,
+      }
+
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+export const sourceHashMap = new Map()
+export const NOT_ON_DEMAND = new String('*')
+
+export const NONE = Symbol('__NONE__')
 
 export function resolveDebug(debug) {
   if (debug === undefined) {

package/src/plugin.js

@@ -0,0 +1,47 @@
+import setupTrackingContext from './lib/setupTrackingContext'
+import processTailwindFeatures from './processTailwindFeatures'
+import { env } from './lib/sharedState'
+import { findAtConfigPath } from './lib/findAtConfigPath'
+
+module.exports = function tailwindcss(configOrPath) {
+  return {
+    postcssPlugin: 'tailwindcss',
+    plugins: [
+      env.DEBUG &&
+        function (root) {
+          console.log('\n')
+          console.time('JIT TOTAL')
+          return root
+        },
+      async function (root, result) {
+        // Use the path for the `@config` directive if it exists, otherwise use the
+        // path for the file being processed
+        configOrPath = findAtConfigPath(root, result) ?? configOrPath
+
+        let context = setupTrackingContext(configOrPath)
+
+        if (root.type === 'document') {
+          let roots = root.nodes.filter((node) => node.type === 'root')
+
+          for (const root of roots) {
+            if (root.type === 'root') {
+              await processTailwindFeatures(context)(root, result)
+            }
+          }
+
+          return
+        }
+
+        await processTailwindFeatures(context)(root, result)
+      },
+      env.DEBUG &&
+        function (root) {
+          console.timeEnd('JIT TOTAL')
+          console.log('\n')
+          return root
+        },
+    ].filter(Boolean),
+  }
+}
+
+module.exports.postcss = true

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

@@ -6,14 +6,18 @@ import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
-import detectNesting from './lib/detectNesting'
+import partitionApplyAtRules from './lib/partitionApplyAtRules'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
-  return function (root, result) {
+  return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
+    // Partition apply rules that are found in the css
+    // itself.
+    partitionApplyAtRules()(root, result)
+
     let context = setupContext({
       tailwindDirectives,
       applyDirectives,
@@ -37,8 +41,11 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    detectNesting(context)(root, result)
-    expandTailwindAtRules(context)(root, result)
+    await 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)

package/src/public/colors.js

@@ -24,6 +24,7 @@ export default {
     700: '#334155',
     800: '#1e293b',
     900: '#0f172a',
+    950: '#020617',
   },
   gray: {
     50: '#f9fafb',
@@ -36,6 +37,7 @@ export default {
     700: '#374151',
     800: '#1f2937',
     900: '#111827',
+    950: '#030712',
   },
   zinc: {
     50: '#fafafa',
@@ -48,6 +50,7 @@ export default {
     700: '#3f3f46',
     800: '#27272a',
     900: '#18181b',
+    950: '#09090b',
   },
   neutral: {
     50: '#fafafa',
@@ -60,6 +63,7 @@ export default {
     700: '#404040',
     800: '#262626',
     900: '#171717',
+    950: '#0a0a0a',
   },
   stone: {
     50: '#fafaf9',
@@ -72,6 +76,7 @@ export default {
     700: '#44403c',
     800: '#292524',
     900: '#1c1917',
+    950: '#0c0a09',
   },
   red: {
     50: '#fef2f2',
@@ -84,6 +89,7 @@ export default {
     700: '#b91c1c',
     800: '#991b1b',
     900: '#7f1d1d',
+    950: '#450a0a',
   },
   orange: {
     50: '#fff7ed',
@@ -96,6 +102,7 @@ export default {
     700: '#c2410c',
     800: '#9a3412',
     900: '#7c2d12',
+    950: '#431407',
   },
   amber: {
     50: '#fffbeb',
@@ -108,6 +115,7 @@ export default {
     700: '#b45309',
     800: '#92400e',
     900: '#78350f',
+    950: '#451a03',
   },
   yellow: {
     50: '#fefce8',
@@ -120,6 +128,7 @@ export default {
     700: '#a16207',
     800: '#854d0e',
     900: '#713f12',
+    950: '#422006',
   },
   lime: {
     50: '#f7fee7',
@@ -132,6 +141,7 @@ export default {
     700: '#4d7c0f',
     800: '#3f6212',
     900: '#365314',
+    950: '#1a2e05',
   },
   green: {
     50: '#f0fdf4',
@@ -144,6 +154,7 @@ export default {
     700: '#15803d',
     800: '#166534',
     900: '#14532d',
+    950: '#052e16',
   },
   emerald: {
     50: '#ecfdf5',
@@ -156,6 +167,7 @@ export default {
     700: '#047857',
     800: '#065f46',
     900: '#064e3b',
+    950: '#022c22',
   },
   teal: {
     50: '#f0fdfa',
@@ -168,6 +180,7 @@ export default {
     700: '#0f766e',
     800: '#115e59',
     900: '#134e4a',
+    950: '#042f2e',
   },
   cyan: {
     50: '#ecfeff',
@@ -180,6 +193,7 @@ export default {
     700: '#0e7490',
     800: '#155e75',
     900: '#164e63',
+    950: '#083344',
   },
   sky: {
     50: '#f0f9ff',
@@ -192,6 +206,7 @@ export default {
     700: '#0369a1',
     800: '#075985',
     900: '#0c4a6e',
+    950: '#082f49',
   },
   blue: {
     50: '#eff6ff',
@@ -204,6 +219,7 @@ export default {
     700: '#1d4ed8',
     800: '#1e40af',
     900: '#1e3a8a',
+    950: '#172554',
   },
   indigo: {
     50: '#eef2ff',
@@ -216,6 +232,7 @@ export default {
     700: '#4338ca',
     800: '#3730a3',
     900: '#312e81',
+    950: '#1e1b4b',
   },
   violet: {
     50: '#f5f3ff',
@@ -228,6 +245,7 @@ export default {
     700: '#6d28d9',
     800: '#5b21b6',
     900: '#4c1d95',
+    950: '#2e1065',
   },
   purple: {
     50: '#faf5ff',
@@ -240,6 +258,7 @@ export default {
     700: '#7e22ce',
     800: '#6b21a8',
     900: '#581c87',
+    950: '#3b0764',
   },
   fuchsia: {
     50: '#fdf4ff',
@@ -252,6 +271,7 @@ export default {
     700: '#a21caf',
     800: '#86198f',
     900: '#701a75',
+    950: '#4a044e',
   },
   pink: {
     50: '#fdf2f8',
@@ -264,6 +284,7 @@ export default {
     700: '#be185d',
     800: '#9d174d',
     900: '#831843',
+    950: '#500724',
   },
   rose: {
     50: '#fff1f2',
@@ -276,6 +297,7 @@ export default {
     700: '#be123c',
     800: '#9f1239',
     900: '#881337',
+    950: '#4c0519',
   },
   get lightBlue() {
     warn({ version: 'v2.2', from: 'lightBlue', to: 'sky' })

package/src/public/default-config.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultConfig from '../../stubs/config.full'
 
 export default cloneDeep(defaultConfig)

package/src/public/default-theme.js

@@ -1,4 +1,4 @@
 import { cloneDeep } from '../util/cloneDeep'
-import defaultConfig from '../../stubs/defaultConfig.stub'
+import defaultFullConfig from '../../stubs/config.full'
 
-export default cloneDeep(defaultConfig.theme)
+export default cloneDeep(defaultFullConfig.theme)

package/src/public/load-config.js

@@ -0,0 +1,2 @@
+import { loadConfig } from '../lib/load-config'
+export default loadConfig

package/src/util/applyImportantSelector.js

@@ -0,0 +1,27 @@
+import parser from 'postcss-selector-parser'
+import { movePseudos } from './pseudoElements'
+
+export function applyImportantSelector(selector, important) {
+  let sel = parser().astSync(selector)
+
+  sel.each((sel) => {
+    // Wrap with :is if it's not already wrapped
+    let isWrapped =
+      sel.nodes[0].type === 'pseudo' &&
+      sel.nodes[0].value === ':is' &&
+      sel.nodes.every((node) => node.type !== 'combinator')
+
+    if (!isWrapped) {
+      sel.nodes = [
+        parser.pseudo({
+          value: ':is',
+          nodes: [sel.clone()],
+        }),
+      ]
+    }
+
+    movePseudos(sel)
+  })
+
+  return `${important} ${sel.toString()}`
+}

package/src/util/buildMediaQuery.js

@@ -2,8 +2,8 @@ export default function buildMediaQuery(screens) {
   screens = Array.isArray(screens) ? screens : [screens]
 
   return screens
-    .map((screen) =>
-      screen.values.map((screen) => {
+    .map((screen) => {
+      let values = screen.values.map((screen) => {
         if (screen.raw !== undefined) {
           return screen.raw
         }
@@ -15,6 +15,8 @@ export default function buildMediaQuery(screens) {
           .filter(Boolean)
           .join(' and ')
       })
-    )
+
+      return screen.not ? `not all and ${values}` : values
+    })
     .join(', ')
 }