Find conflicts in two different CSS files

Question

Is there a tool where I can upload/(or add content of files in textboxes) two CSS files and it shows me the conflicting css rules?

Example

foo.css

body { font-size: 1rem; }
...
.nav { background: yellow; }
...
.header { font-size: 12px; }
...

bar.css

body { font-size: 1.4rem; }
...
.nav { background: red; }
...
.header { font-color: black; }
...

conflicts found after tool ran:

foo.css: body { font-size: 1rem; }
bar.css: body { font-size: 1.4rem; }

foo.css: .nav { background: yellow; }
bar.css: .nav { background: red; }

This would help me to identifiy conflicts and find a fix. Otherwise I have to open the developer tools and manually go through each html element on the site and search for conflicts.

fix.css

In fix.css which I am creating manually (or by the tool) I can decide which css of these two files should get loaded:

body { font-size: 1.4rem; }
.nav { background: yellow; }