tailwindcss 0.0.0-insiders.7c337f2 → 0.0.0-insiders.7d8eb21

package/src/lib/expandApplyAtRules.js

@@ -2,7 +2,6 @@ import postcss from 'postcss'
 import parser from 'postcss-selector-parser'
 
 import { resolveMatches } from './generateRules'
-import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
@@ -34,6 +33,15 @@ function extractClasses(node) {
   return Object.assign(classes, { groups: normalizedGroups })
 }
 
+let selectorExtractor = parser()
+
+/**
+ * @param {string} ruleSelectors
+ */
+function extractSelectors(ruleSelectors) {
+  return selectorExtractor.astSync(ruleSelectors)
+}
+
 function extractBaseCandidates(candidates, separator) {
   let baseClasses = new Set()
 
@@ -140,9 +148,7 @@ function buildLocalApplyCache(root, context) {
   /** @type {ApplyCache} */
   let cache = new Map()
 
-  let highestOffset = context.layerOrder.user >> 4n
-
-  root.walkRules((rule, idx) => {
+  root.walkRules((rule) => {
     // Ignore rules generated by Tailwind
     for (let node of pathToRoot(rule)) {
       if (node.raws.tailwind?.layer !== undefined) {
@@ -152,6 +158,7 @@ function buildLocalApplyCache(root, context) {
 
     // Clone what's required to represent this singular rule in the tree
     let container = nestedClone(rule)
+    let sort = context.offsets.create('user')
 
     for (let className of extractClasses(rule)) {
       let list = cache.get(className) || []
@@ -160,7 +167,7 @@ function buildLocalApplyCache(root, context) {
       list.push([
         {
           layer: 'user',
-          sort: BigInt(idx) + highestOffset,
+          sort,
           important: false,
         },
         container,
@@ -290,31 +297,97 @@ function processApply(root, context, localCache) {
    * What happens in this function is that we prepend a `.` and escape the candidate.
    * This will result in `.hover\:font-bold`
    * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
+   *
+   * @param {string} selector
+   * @param {string} utilitySelectors
+   * @param {string} candidate
    */
-  // TODO: Should we use postcss-selector-parser for this instead?
   function replaceSelector(selector, utilitySelectors, candidate) {
-    let needle = `.${escapeClassName(candidate)}`
-    let needles = [...new Set([needle, needle.replace(/\\2c /g, '\\,')])]
-    let utilitySelectorsList = utilitySelectors.split(/\s*(?<!\\)\,(?![^(]*\))\s*/g)
-
-    return selector
-      .split(/\s*(?<!\\)\,(?![^(]*\))\s*/g)
-      .map((s) => {
-        let replaced = []
-
-        for (let utilitySelector of utilitySelectorsList) {
-          let replacedSelector = utilitySelector
-          for (const needle of needles) {
-            replacedSelector = replacedSelector.replace(needle, s)
+    let selectorList = extractSelectors(selector)
+    let utilitySelectorsList = extractSelectors(utilitySelectors)
+    let candidateList = extractSelectors(`.${escapeClassName(candidate)}`)
+    let candidateClass = candidateList.nodes[0].nodes[0]
+
+    selectorList.each((sel) => {
+      /** @type {Set<import('postcss-selector-parser').Selector>} */
+      let replaced = new Set()
+
+      utilitySelectorsList.each((utilitySelector) => {
+        let hasReplaced = false
+        utilitySelector = utilitySelector.clone()
+
+        utilitySelector.walkClasses((node) => {
+          if (node.value !== candidateClass.value) {
+            return
+          }
+
+          // Don't replace multiple instances of the same class
+          // This is theoretically correct but only partially
+          // We'd need to generate every possible permutation of the replacement
+          // For example with `.foo + .foo { … }` and `section { @apply foo; }`
+          // We'd need to generate all of these:
+          // - `.foo + .foo`
+          // - `.foo + section`
+          // - `section + .foo`
+          // - `section + section`
+          if (hasReplaced) {
+            return
           }
-          if (replacedSelector === utilitySelector) {
-            continue
+
+          // Since you can only `@apply` class names this is sufficient
+          // We want to replace the matched class name with the selector the user is using
+          // Ex: Replace `.text-blue-500` with `.foo.bar:is(.something-cool)`
+          node.replaceWith(...sel.nodes.map((node) => node.clone()))
+
+          // Record that we did something and we want to use this new selector
+          replaced.add(utilitySelector)
+
+          hasReplaced = true
+        })
+      })
+
+      // Sort tag names before class names (but only sort each group (separated by a combinator)
+      // separately and not in total)
+      // This happens when replacing `.bar` in `.foo.bar` with a tag like `section`
+      for (let sel of replaced) {
+        let groups = [[]]
+        for (let node of sel.nodes) {
+          if (node.type === 'combinator') {
+            groups.push(node)
+            groups.push([])
+          } else {
+            let last = groups[groups.length - 1]
+            last.push(node)
           }
-          replaced.push(replacedSelector)
         }
-        return replaced.join(', ')
-      })
-      .join(', ')
+
+        sel.nodes = []
+
+        for (let group of groups) {
+          if (Array.isArray(group)) {
+            group.sort((a, b) => {
+              if (a.type === 'tag' && b.type === 'class') {
+                return -1
+              } else if (a.type === 'class' && b.type === 'tag') {
+                return 1
+              } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
+                return -1
+              } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
+                return 1
+              }
+
+              return 0
+            })
+          }
+
+          sel.nodes = sel.nodes.concat(group)
+        }
+      }
+
+      sel.replaceWith(...replaced)
+    })
+
+    return selectorList.toString()
   }
 
   let perParentApplies = new Map()
@@ -329,7 +402,7 @@ function processApply(root, context, localCache) {
 
     if (apply.parent.type === 'atrule') {
       if (apply.parent.name === 'screen') {
-        const screenType = apply.parent.params
+        let screenType = apply.parent.params
 
         throw apply.error(
           `@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates
@@ -361,7 +434,7 @@ function processApply(root, context, localCache) {
     }
   }
 
-  for (const [parent, [candidates, atApplySource]] of perParentApplies) {
+  for (let [parent, [candidates, atApplySource]] of perParentApplies) {
     let siblings = []
 
     for (let [applyCandidate, important, rules] of candidates) {
@@ -463,7 +536,27 @@ function processApply(root, context, localCache) {
               return
             }
 
-            rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
+            // Strip the important selector from the parent selector if at the beginning
+            let importantSelector =
+              typeof context.tailwindConfig.important === 'string'
+                ? context.tailwindConfig.important
+                : null
+
+            // We only want to move the "important" selector if this is a Tailwind-generated utility
+            // We do *not* want to do this for user CSS that happens to be structured the same
+            let isGenerated = parent.raws.tailwind !== undefined
+
+            let parentSelector =
+              isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0
+                ? parent.selector.slice(importantSelector.length)
+                : parent.selector
+
+            rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
+
+            // And then re-add it if it was removed
+            if (importantSelector && parentSelector !== parent.selector) {
+              rule.selector = `${importantSelector} ${rule.selector}`
+            }
 
             rule.walkDecls((d) => {
               d.important = meta.important || important
@@ -471,17 +564,19 @@ function processApply(root, context, localCache) {
           })
         }
 
+        // It could be that the node we were inserted was removed because the class didn't match
+        // If that was the *only* rule in the parent, then we have nothing add so we skip it
+        if (!root.nodes[0]) {
+          continue
+        }
+
         // Insert it
-        siblings.push([
-          // Ensure that when we are sorting, that we take the layer order into account
-          { ...meta, sort: meta.sort | context.layerOrder[meta.layer] },
-          root.nodes[0],
-        ])
+        siblings.push([meta.sort, root.nodes[0]])
       }
     }
 
     // Inject the rules, sorted, correctly
-    let nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map((s) => s[1])
+    let nodes = context.offsets.sort(siblings).map((s) => s[1])
 
     // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
     parent.after(nodes)

package/src/lib/expandTailwindAtRules.js

@@ -1,7 +1,6 @@
 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'
@@ -17,14 +16,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)
   )
 }
 
@@ -74,8 +73,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(),
@@ -83,48 +87,10 @@ 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
@@ -165,7 +131,7 @@ export default function expandTailwindAtRules(context) {
 
     for (let { content, extension } of context.changedContent) {
       let transformer = getTransformer(context.tailwindConfig, extension)
-      let extractor = getExtractor(context.tailwindConfig, extension)
+      let extractor = getExtractor(context, extension)
       getClassCandidates(transformer(content), extractor, candidates, seen)
     }
 
@@ -177,16 +143,12 @@ export default function expandTailwindAtRules(context) {
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    let rules = generateRules(candidates, context)
+    generateRules(candidates, 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')

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
+}