make main plugin async

This way we can improve the `fs.readFileSync` to a bunch of
`fs.promises.readFile` in a `Promise.all` instead.

Author: RobinMalfait

src/lib/expandTailwindAtRules.js

@@ -103,7 +103,7 @@ function buildStylesheet(rules, context) {
 }
 
 export default function expandTailwindAtRules(context) {
-  return (root) => {
+  return async (root) => {
     let layerNodes = {
       base: null,
       components: null,
@@ -160,18 +160,22 @@ export default function expandTailwindAtRules(context) {
       }
 
       if (regexParserContent.length > 0) {
-        for (let [{ file, content }, { transformer, extractor }] of regexParserContent) {
-          content = file ? fs.readFileSync(file, 'utf8') : content
-          getClassCandidates(transformer(content), extractor, candidates, seen)
-        }
+        await Promise.all(
+          regexParserContent.map(async ([{ file, content }, { transformer, extractor }]) => {
+            content = file ? await fs.promises.readFile(file, 'utf8') : content
+            getClassCandidates(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)
-      }
+      await Promise.all(
+        context.changedContent.map(async ({ file, content, extension }) => {
+          let transformer = getTransformer(context.tailwindConfig, extension)
+          let extractor = getExtractor(context, extension)
+          content = file ? await fs.promises.readFile(file, 'utf8') : content
+          getClassCandidates(transformer(content), extractor, candidates, seen)
+        })
+      )
     }
 
     env.DEBUG && console.timeEnd('Reading changed files')

src/plugin.js

@@ -23,7 +23,7 @@ module.exports = function tailwindcss(configOrPath) {
           return root
         },
       ...handleImportAtRules(),
-      function (root, result) {
+      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
@@ -42,7 +42,7 @@ module.exports = function tailwindcss(configOrPath) {
           return
         }
 
-        processTailwindFeatures(context)(root, result)
+        await processTailwindFeatures(context)(root, result)
       },
       function lightningCssPlugin(_root, result) {
         let map = result.map ?? result.opts.map

src/processTailwindFeatures.js

@@ -12,7 +12,7 @@ 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)
 
     detectNesting()(root, result)
@@ -44,7 +44,8 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    expandTailwindAtRules(context)(root, result)
+    await expandTailwindAtRules(context)(root, result)
+
     // Partition apply rules that are generated by
     // addComponents, addUtilities and so on.
     partitionApplyAtRules()(root, result)