tailwindcss 0.0.0-insiders.fe08e91 → 0.0.0-oxide.956419c

package/src/lib/expandTailwindAtRules.js

@@ -1,10 +1,13 @@
+import fs from 'fs'
 import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
-import bigSign from '../util/bigSign'
+import log from '../util/log'
 import cloneNodes from '../util/cloneNodes'
 import { defaultExtractor } from './defaultExtractor'
 
+import oxide from '@tailwindcss/oxide'
+
 let env = sharedState.env
 
 const builtInExtractors = {
@@ -16,14 +19,14 @@ const builtInTransformers = {
   svelte: (content) => content.replace(/(?:^|\s)class:/g, ' '),
 }
 
-function getExtractor(tailwindConfig, fileExtension) {
-  let extractors = tailwindConfig.content.extract
+function getExtractor(context, fileExtension) {
+  let extractors = context.tailwindConfig.content.extract
 
   return (
     extractors[fileExtension] ||
     extractors.DEFAULT ||
     builtInExtractors[fileExtension] ||
-    builtInExtractors.DEFAULT
+    builtInExtractors.DEFAULT(context)
   )
 }
 
@@ -73,8 +76,13 @@ function getClassCandidates(content, extractor, candidates, seen) {
   }
 }
 
+/**
+ *
+ * @param {[import('./offsets.js').RuleOffset, import('postcss').Node][]} rules
+ * @param {*} context
+ */
 function buildStylesheet(rules, context) {
-  let sortedRules = rules.sort(([a], [z]) => bigSign(a - z))
+  let sortedRules = context.offsets.sort(rules)
 
   let returnValue = {
     base: new Set(),
@@ -82,55 +90,15 @@ function buildStylesheet(rules, context) {
     components: new Set(),
     utilities: new Set(),
     variants: new Set(),
-
-    // All the CSS that is not Tailwind related can be put in this bucket. This
-    // will make it easier to later use this information when we want to
-    // `@apply` for example. The main reason we do this here is because we
-    // still need to make sure the order is correct. Last but not least, we
-    // will make sure to always re-inject this section into the css, even if
-    // certain rules were not used. This means that it will look like a no-op
-    // from the user's perspective, but we gathered all the useful information
-    // we need.
-    user: new Set(),
   }
 
   for (let [sort, rule] of sortedRules) {
-    if (sort >= context.minimumScreen) {
-      returnValue.variants.add(rule)
-      continue
-    }
-
-    if (sort & context.layerOrder.base) {
-      returnValue.base.add(rule)
-      continue
-    }
-
-    if (sort & context.layerOrder.defaults) {
-      returnValue.defaults.add(rule)
-      continue
-    }
-
-    if (sort & context.layerOrder.components) {
-      returnValue.components.add(rule)
-      continue
-    }
-
-    if (sort & context.layerOrder.utilities) {
-      returnValue.utilities.add(rule)
-      continue
-    }
-
-    if (sort & context.layerOrder.user) {
-      returnValue.user.add(rule)
-      continue
-    }
+    returnValue[sort.layer].add(rule)
   }
 
   return returnValue
 }
 
-export const DEFAULTS_LAYER = Symbol('defaults-layer')
-
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -140,8 +108,6 @@ export default function expandTailwindAtRules(context) {
       variants: null,
     }
 
-    // let hasApply = false
-
     root.walkAtRules((rule) => {
       // Make sure this file contains Tailwind directives. If not, we can save
       // a lot of work and bail early. Also we don't have to register our touch
@@ -152,13 +118,6 @@ export default function expandTailwindAtRules(context) {
           layerNodes[rule.params] = rule
         }
       }
-
-      // We also want to check for @apply because the user can
-      // apply classes in an isolated environment like CSS
-      // modules and we still need to inject defaults
-      // if (rule.name === 'apply') {
-      //   hasApply = true
-      // }
     })
 
     if (Object.values(layerNodes).every((n) => n === null)) {
@@ -168,33 +127,62 @@ export default function expandTailwindAtRules(context) {
     // ---
 
     // Find potential rules in changed files
-    let candidates = new Set(['*'])
+    let candidates = new Set([...(context.candidates ?? []), sharedState.NOT_ON_DEMAND])
     let seen = new Set()
 
     env.DEBUG && console.time('Reading changed files')
 
-    for (let { content, extension } of context.changedContent) {
-      let transformer = getTransformer(context.tailwindConfig, extension)
-      let extractor = getExtractor(context.tailwindConfig, extension)
-      getClassCandidates(transformer(content), extractor, candidates, seen)
+    if (env.OXIDE) {
+      // TODO: Pass through or implement `extractor`
+      for (let candidate of oxide.parseCandidateStringsFromFiles(
+        context.changedContent
+        // Object.assign({}, builtInTransformers, context.tailwindConfig.content.transform)
+      )) {
+        candidates.add(candidate)
+      }
+
+      // for (let { file, content, extension } of context.changedContent) {
+      //   let transformer = getTransformer(context.tailwindConfig, extension)
+      //   let extractor = getExtractor(context, extension)
+      //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
+      // }
+    } else {
+      for (let { file, content, extension } of context.changedContent) {
+        let transformer = getTransformer(context.tailwindConfig, extension)
+        let extractor = getExtractor(context, extension)
+        content = file ? fs.readFileSync(file, 'utf8') : content
+        getClassCandidates(transformer(content), extractor, candidates, seen)
+      }
     }
 
+    env.DEBUG && console.timeEnd('Reading changed files')
+
     // ---
 
     // Generate the actual CSS
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    let rules = generateRules(candidates, context)
+    // TODO: Sorting is _probably_ slow, but right now it can guarantee the same order. Eventually
+    // we will be able to get rid of this.
+    env.DEBUG && console.time('Sorting candidates')
+    let sortedCandidates =
+      typeof process !== 'undefined' && process.env.JEST_WORKER_ID
+        ? new Set(
+            [...candidates].sort((a, z) => {
+              if (a === z) return 0
+              if (a < z) return -1
+              return 1
+            })
+          )
+        : candidates
+    env.DEBUG && console.timeEnd('Sorting candidates')
+    generateRules(sortedCandidates, context)
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.
     env.DEBUG && console.time('Build stylesheet')
     if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-      for (let rule of rules) {
-        context.ruleCache.add(rule)
-      }
-
       context.stylesheetCache = buildStylesheet([...context.ruleCache], context)
     }
     env.DEBUG && console.timeEnd('Build stylesheet')
@@ -212,39 +200,72 @@ export default function expandTailwindAtRules(context) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
-    }
-
-    // @defaults rules are unconditionally added first to ensure that
-    // using any utility that relies on defaults will work even when
-    // compiled in an isolated environment like CSS modules
-    if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
-      if (layerNodes.base) {
-        layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
-      } else {
-        root.prepend(cloneNodes([...defaultNodes], root.source))
-      }
-    }
-
-    if (layerNodes.base) {
+      layerNodes.base.before(
+        cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source, {
+          layer: 'base',
+        })
+      )
       layerNodes.base.remove()
     }
 
     if (layerNodes.components) {
-      layerNodes.components.before(cloneNodes([...componentNodes], layerNodes.components.source))
+      layerNodes.components.before(
+        cloneNodes([...componentNodes], layerNodes.components.source, {
+          layer: 'components',
+        })
+      )
       layerNodes.components.remove()
     }
 
     if (layerNodes.utilities) {
-      layerNodes.utilities.before(cloneNodes([...utilityNodes], layerNodes.utilities.source))
+      layerNodes.utilities.before(
+        cloneNodes([...utilityNodes], layerNodes.utilities.source, {
+          layer: 'utilities',
+        })
+      )
       layerNodes.utilities.remove()
     }
 
+    // We do post-filtering to not alter the emitted order of the variants
+    const variantNodes = Array.from(screenNodes).filter((node) => {
+      const parentLayer = node.raws.tailwind?.parentLayer
+
+      if (parentLayer === 'components') {
+        return layerNodes.components !== null
+      }
+
+      if (parentLayer === 'utilities') {
+        return layerNodes.utilities !== null
+      }
+
+      return true
+    })
+
     if (layerNodes.variants) {
-      layerNodes.variants.before(cloneNodes([...screenNodes], layerNodes.variants.source))
+      layerNodes.variants.before(
+        cloneNodes(variantNodes, layerNodes.variants.source, {
+          layer: 'variants',
+        })
+      )
       layerNodes.variants.remove()
-    } else {
-      root.append(cloneNodes([...screenNodes], root.source))
+    } else if (variantNodes.length > 0) {
+      root.append(
+        cloneNodes(variantNodes, root.source, {
+          layer: 'variants',
+        })
+      )
+    }
+
+    // If we've got a utility layer and no utilities are generated there's likely something wrong
+    const hasUtilityVariants = variantNodes.some(
+      (node) => node.raws.tailwind?.parentLayer === 'utilities'
+    )
+
+    if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
+      log.warn('content-problems', [
+        'No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.',
+        'https://tailwindcss.com/docs/content-configuration',
+      ])
     }
 
     // ---

package/src/lib/findAtConfigPath.js

@@ -0,0 +1,48 @@
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * Find the @config at-rule in the given CSS AST and return the relative path to the config file
+ *
+ * @param {import('postcss').Root} root
+ * @param {import('postcss').Result} result
+ */
+export function findAtConfigPath(root, result) {
+  let configPath = null
+  let relativeTo = null
+
+  root.walkAtRules('config', (rule) => {
+    relativeTo = rule.source?.input.file ?? result.opts.from ?? null
+
+    if (relativeTo === null) {
+      throw rule.error(
+        'The `@config` directive cannot be used without setting `from` in your PostCSS config.'
+      )
+    }
+
+    if (configPath) {
+      throw rule.error('Only one `@config` directive is allowed per file.')
+    }
+
+    let matches = rule.params.match(/(['"])(.*?)\1/)
+    if (!matches) {
+      throw rule.error('A path is required when using the `@config` directive.')
+    }
+
+    let inputPath = matches[2]
+    if (path.isAbsolute(inputPath)) {
+      throw rule.error('The `@config` directive cannot be used with an absolute path.')
+    }
+
+    configPath = path.resolve(path.dirname(relativeTo), inputPath)
+    if (!fs.existsSync(configPath)) {
+      throw rule.error(
+        `The config file at "${inputPath}" does not exist. Make sure the path is correct and the file exists.`
+      )
+    }
+
+    rule.remove()
+  })
+
+  return configPath ? configPath : null
+}