Refactor PostCSS plugins to separate files

Author: adamwathan

src/index.js

@@ -0,0 +1,118 @@
+const postcss = require('postcss')
+const generateRules = require('./generateRules')
+const { bigSign, toPostCssNode, isPlainObject } = require('./utils')
+const escape = require('tailwindcss/lib/util/escapeClassName').default
+
+function expandApplyAtRules(context) {
+  return (root) => {
+    let applyCandidates = new Set()
+
+    // Collect all @apply rules and candidates
+    let applies = []
+    root.walkAtRules('apply', (rule) => {
+      for (let util of rule.params.split(/[\s\t\n]+/g)) {
+        applyCandidates.add(util)
+      }
+      applies.push(rule)
+    })
+
+    // Start the @apply process if we have rules with @apply in them
+    if (applies.length > 0) {
+      // Fill up some caches!
+      generateRules(context.tailwindConfig, applyCandidates, context)
+
+      /**
+       * When we have an apply like this:
+       *
+       * .abc {
+       *    @apply hover:font-bold;
+       * }
+       *
+       * What we essentially will do is resolve to this:
+       *
+       * .abc {
+       *    @apply .hover\:font-bold:hover {
+       *      font-weight: 500;
+       *    }
+       * }
+       *
+       * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
+       * 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`
+       */
+      // TODO: Should we use postcss-selector-parser for this instead?
+      function replaceSelector(selector, utilitySelector, candidate) {
+        return selector
+          .split(/\s*,\s*/g)
+          .map((s) => utilitySelector.replace(`.${escape(candidate)}`, s))
+          .join(', ')
+      }
+
+      function updateSelectors(rule, apply, candidate) {
+        return rule.map(([selector, rule]) => {
+          if (!isPlainObject(rule)) {
+            return [selector, updateSelectors(rule, apply, candidate)]
+          }
+          return [replaceSelector(apply.parent.selector, selector, candidate), rule]
+        })
+      }
+
+      for (let apply of applies) {
+        let siblings = []
+        let applyCandidates = apply.params.split(/[\s\t\n]+/g)
+        for (let applyCandidate of applyCandidates) {
+          // TODO: Check for user css rules?
+          if (!context.classCache.has(applyCandidate)) {
+            throw new Error('Utility does not exist!')
+          }
+
+          let [layerName, rules] = context.classCache.get(applyCandidate)
+          for (let [sort, [selector, rule]] of rules) {
+            // Nested rules...
+            if (!isPlainObject(rule)) {
+              siblings.push([
+                sort,
+                toPostCssNode(
+                  [selector, updateSelectors(rule, apply, applyCandidate)],
+                  context.postCssNodeCache
+                ),
+              ])
+            } else {
+              let appliedSelector = replaceSelector(apply.parent.selector, selector, applyCandidate)
+
+              if (appliedSelector !== apply.parent.selector) {
+                siblings.push([
+                  sort,
+                  toPostCssNode([appliedSelector, rule], context.postCssNodeCache),
+                ])
+                continue
+              }
+
+              // Add declarations directly
+              for (let property in rule) {
+                apply.before(postcss.decl({ prop: property, value: rule[property] }))
+              }
+            }
+          }
+        }
+
+        // Inject the rules, sorted, correctly
+        for (let [sort, sibling] of siblings.sort(([a], [z]) => bigSign(z - a))) {
+          // `apply.parent` is refering to the node at `.abc` in: .abc { @apply mt-2 }
+          apply.parent.after(sibling)
+        }
+
+        // If there are left-over declarations, just remove the @apply
+        if (apply.parent.nodes.length > 1) {
+          apply.remove()
+        } else {
+          // The node is empty, drop the full node
+          apply.parent.remove()
+        }
+      }
+    }
+  }
+}
+
+module.exports = expandApplyAtRules

src/lib/expandApplyAtRules.js

@@ -0,0 +1,168 @@
+const { toPostCssNode } = require('./utils')
+
+// Generate match permutations for a class candidate, like:
+// ['ring-offset-blue', '100']
+// ['ring-offset', 'blue-100']
+// ['ring', 'offset-blue-100']
+function* candidatePermutations(prefix, modifier = '') {
+  yield [prefix, modifier]
+
+  let dashIdx = prefix.lastIndexOf('-')
+  if (dashIdx === -1) {
+    return
+  }
+
+  yield* candidatePermutations(
+    prefix.slice(0, dashIdx),
+    [prefix.slice(dashIdx + 1), modifier].filter(Boolean).join('-')
+  )
+}
+
+// Takes a list of rule tuples and applies a variant like `hover`, sm`,
+// whatever to it. We used to do some extra caching here to avoid generating
+// a variant of the same rule more than once, but this was never hit because
+// we cache at the entire selector level further up the tree.
+//
+// Technically you can get a cache hit if you have `hover:focus:text-center`
+// and `focus:hover:text-center` in the same project, but it doesn't feel
+// worth the complexity for that case.
+
+function applyVariant(variant, matches, { variantMap }) {
+  if (matches.length === 0) {
+    return matches
+  }
+
+  if (variantMap.has(variant)) {
+    let [variantSort, applyThisVariant] = variantMap.get(variant)
+    let result = []
+
+    for (let [sort, rule] of matches) {
+      let [, , options = {}] = rule
+
+      if (options.respectVariants === false) {
+        result.push([sort, rule])
+        continue
+      }
+
+      let ruleWithVariant = applyThisVariant(rule)
+
+      if (ruleWithVariant === null) {
+        continue
+      }
+
+      let withOffset = [variantSort | sort, ruleWithVariant]
+      result.push(withOffset)
+    }
+
+    return result
+  }
+
+  return []
+}
+
+function generateRules(tailwindConfig, candidates, context) {
+  let { componentMap, utilityMap, classCache, notClassCache, postCssNodeCache } = context
+
+  let layers = {
+    components: [],
+    utilities: [],
+  }
+
+  for (let candidate of candidates) {
+    if (notClassCache.has(candidate)) {
+      continue
+    }
+
+    if (classCache.has(candidate)) {
+      let [layer, matches] = classCache.get(candidate)
+      layers[layer].push(matches)
+      continue
+    }
+
+    let [classCandidate, ...variants] = candidate.split(':').reverse()
+
+    if (componentMap.has(classCandidate)) {
+      let matches = componentMap.get(classCandidate)
+
+      if (matches.length === 0) {
+        notClassCache.add(candidate)
+        continue
+      }
+
+      for (let variant of variants) {
+        matches = applyVariant(variant, matches, context)
+      }
+
+      classCache.set(candidate, ['components', matches])
+      layers.components.push(matches)
+    } else {
+      let matchedPlugins = null
+
+      if (utilityMap.has(classCandidate)) {
+        matchedPlugins = [utilityMap.get(classCandidate), 'DEFAULT']
+      } else {
+        let candidatePrefix = classCandidate
+        let negative = false
+
+        if (candidatePrefix[0] === '-') {
+          negative = true
+          candidatePrefix = candidatePrefix.slice(1)
+        }
+
+        for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
+          if (utilityMap.has(prefix)) {
+            matchedPlugins = [utilityMap.get(prefix), negative ? `-${modifier}` : modifier]
+            break
+          }
+        }
+      }
+
+      if (matchedPlugins === null) {
+        notClassCache.add(candidate)
+        continue
+      }
+
+      let pluginHelpers = {
+        candidate: classCandidate,
+        theme: tailwindConfig.theme,
+      }
+
+      let matches = []
+      let [plugins, modifier] = matchedPlugins
+
+      for (let [sort, plugin] of plugins) {
+        if (Array.isArray(plugin)) {
+          matches.push([sort, plugin])
+        } else {
+          for (let result of plugin(modifier, pluginHelpers)) {
+            matches.push([sort, result])
+          }
+        }
+      }
+
+      for (let variant of variants) {
+        matches = applyVariant(variant, matches, context)
+      }
+
+      classCache.set(candidate, ['utilities', matches])
+      layers.utilities.push(matches)
+    }
+  }
+
+  return {
+    components: layers.components
+      .flat(1)
+      .map(([sort, rule]) => [
+        sort | context.layerOrder.components,
+        toPostCssNode(rule, postCssNodeCache),
+      ]),
+    utilities: layers.utilities
+      .flat(1)
+      .map(([sort, rule]) => [
+        sort | context.layerOrder.utilities,
+        toPostCssNode(rule, postCssNodeCache),
+      ]),
+  }
+}
+
+module.exports = generateRules

src/lib/generateRules.js

@@ -0,0 +1,9 @@
+function removeLayerAtRules(context) {
+  return (root) => {
+    root.walkAtRules('layer', (rule) => {
+      rule.remove()
+    })
+  }
+}
+
+module.exports = removeLayerAtRules

src/lib/removeLayerAtRules.js

@@ -16,6 +16,8 @@ const resolveConfig = require('tailwindcss/resolveConfig')
 
 const sharedState = require('./sharedState')
 const corePlugins = require('../corePlugins')
+const { isPlainObject } = require('./utils')
+const { isBuffer } = require('util')
 
 let contextMap = sharedState.contextMap
 let env = sharedState.env
@@ -51,16 +53,6 @@ function isObject(value) {
   return typeof value === 'object' && value !== null
 }
 
-function isPlainObject(value) {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    return false
-  }
-
-  const prototype = Object.getPrototypeOf(value)
-  return prototype === null || prototype === Object.prototype
-  // return isObject(value) && !Array.isArray(value)
-}
-
 function isEmpty(obj) {
   return Object.keys(obj).length === 0
 }

src/lib/setupContext.js

@@ -1,10 +1,11 @@
-let env = {
-  TAILWIND_MODE: process.env.TAILWIND_MODE,
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.DEBUG !== undefined,
-}
+const LRU = require('quick-lru')
 
 module.exports = {
-  env,
+  env: {
+    TAILWIND_MODE: process.env.TAILWIND_MODE,
+    NODE_ENV: process.env.NODE_ENV,
+    DEBUG: process.env.DEBUG !== undefined,
+  },
   contextMap: new Map(),
+  contentMatchCache: new LRU({ maxSize: 25000 }),
 }