Using important: true leads to duplicate rules in output

This issue supersedes #9203 which was a bit of a false start. V3.1.18 Tailwind CLI Node v14.18.1 Chrome Window 10 (No Docker or WSL) Command line : npx tailwindcss --output twout.css --watch -i twbase.css

Reproduction URL: https://github.com/willdean/TwRepro1

Describe your issue

When the important option is set to true, modifications to the source file cause TW to emit duplicate rules into the output for each update.

Repro steps:

1. Start the CLI, using the command line above (or tw.bat on Windows)
2. Observe that the output file twout.css contains just two rules (after the boilerplate):

.ml-2 {
  margin-left: 0.5rem !important
}
.ml-4 {
  margin-left: 1rem !important
}

1. Modify the index.html file so that the ml-4 selector on the second div becomes ml-6 and save the file
2. Verify that the CLI regenerates the output file twout.css

The output file now contains

.ml-2 {
  margin-left: 0.5rem !important
}
.ml-4 {
  margin-left: 1rem !important
}
.ml-2 {
  margin-left: 0.5rem !important
}
.ml-6 {
  margin-left: 1.5rem !important
}

i.e. the .ml-2 rule has been duplicated.

This will happen each time a modification to the source file is made - there will be an additional .ml-2 rule generated.

Some commentary:

I have spent some time trying to understand this, and I think there may be two separate problems, though I’m not a JS developer by trade, and I don’t really understand TW’s architecture, so please forgive me if I’m completely wrong here.

Possible Issue 1 - Each time a file is modified, TW adds duplicates of all the rules related to that specific file to context.stylesheetCache. This is nothing to do with whether the important configuration option is set or not. However, this does not normally cause duplication in the output, because the code which later converts the list of rules into css code elides all the duplicates. This may however be a part of the slow-down/leak problem in #7449.

Possible Issue 2- The code which converts the rules list into CSS (is this Postcss?) is apparently able to elide duplicate rules, and that normally deals with the duplicates which build-up in the cache. However, this elision features partly breaks (not completely - some rules get repeated ‘n’ times, whereas some only see one duplicate) when the important option is set.

If issue 1 is dealt with then issue 2 possibly wouldn’t matter. In #9203 I posted some very crude work-around code which stops the duplicates in the cache.

Edit: This issue doesn’t seem to repro in https://play.tailwindcss.com/

[willdean]

LGTM.

[thecrypticace]

Alright that duplicate issue is taken care of — as well as the memory leak with the ruleCache. It is append-only be design but we shouldn’t be just appending things to it without re-using them. That’s definitely a bug. Whoops. Thanks for the repro and analysis. That’s super helpful!

Could you give the insiders build a test and let us know what you see?