From f2e3e22c6b5bf217a59a7e1c11e389447dd7cfe8 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sun, 16 Aug 2020 14:11:19 +0200
Subject: [PATCH] make the cloning of the rule in the lookup table lazy

We create a big lookup table so that we can lookup the nodes by its
utilityName. This is used inside the recursive `@apply` code.

This big lookup table will clone every single rule and put it in,
however we don't need to clone everything! We are only interested in the
rules that have been actually applied.

This way we make the cloning of the rule lazy and only when we use this
exact rule.

There is an additional performace "issue" though: When we read the same
rule multiple times, it will clone every time you read from that object.
We could add additional memoization stuff, but so far it doesn't seem to
be the bottleneck. Therefore I've added a perf todo just to leave a mark
when this becomes the bottleneck.
---
 src/flagged/applyComplexClasses.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/flagged/applyComplexClasses.js b/src/flagged/applyComplexClasses.js
index 124d91da5..62487a3f3 100644
--- a/src/flagged/applyComplexClasses.js
+++ b/src/flagged/applyComplexClasses.js
@@ -89,7 +89,11 @@ function buildUtilityMap(css) {
         index,
         utilityName,
         classPosition: i,
-        rule: rule.clone({ parent: rule.parent }),
+        get rule() {
+          // TODO: #perf every time we "read" this value we will create a copy.
+          // Is this an issue?
+          return rule.clone({ parent: rule.parent })
+        },
       })
       index++
     })