Multiple Deep Object Comparison

Hey everyone, I have a problem I am trying to work through currently. I am trying to find duplicated CSS across multiple CSS files in node. I was able to convert the CSS string into JSON and pushed all of the files in JSON to an array: (combinedStylesFile). The end goal here is to return an object with only properties and values that are common across each object in this array: combinedStylesFile. Below is an example of the array of objects (CSS files):

// [
//   {
 //     '.tester-class': { children: [Object], attributes: [Object] },
 //     '.another': { children: {}, attributes: [Object] },
 //     '@media screen and (min-width: 768px) and (max-width: 1179.9px)': { children: [Object], attributes: {} }
 //   },
 //   {
 //     '.tester-class': { children: [Object], attributes: [Object] },
 //     '.another': { children: {}, attributes: [Object] },
 //     '.uncommon-class': { children: {}, attributes: [Object] },
 //     '@media screen and (min-width: 768px) and (max-width: 1179.9px)': { children: [Object], attributes: {} }
 //   },
 //   {
 //     '.tester-class': { children: [Object], attributes: [Object] },
 //     '.another': { children: {}, attributes: [Object] },
 //     '@media screen and (min-width: 768px) and (max-width: 1179.9px)': { children: [Object], attributes: {} }
 //   }
 // ]

If we dig into combinedStylesFile[0] for example, it will look like the following:

// {
 //   '.tester-class': {
 //     children: { '.tester-child': [Object] },
 //     attributes: { 'background-color': 'black', display: 'block', margin: '20px' }
 //   },
 //   '.another': { children: {}, attributes: { color: 'teal' } },
 //   '@media screen and (min-width: 768px) and (max-width: 1179.9px)': { children: { '.tester-class': [Object] }, attributes: {} }
 // }

So, each property (class) of the object has the potential to have children (sub-classes — which have attributes and also possibly have children, however I don’t believe any of the CSS goes down more than two levels) or attributes (CSS styles).

Perhaps it is because I have been looking at this problem for about a week now and thinking about certain ways to make it work from this point, but I am unsure of the best way to solve it. I considered a helper function using recursion to check for common attributes, then digging into common classes until the script reaches the bottom level. Probably that combined with using Object.entries, .filter for what I need, then Object.fromEntries to turn it back into the object that I need.

…But then after all that thinking, there has to be a way to not use any of what I just mentioned, but simply deep object compare and use reduce returning one object? This object will show me all that is common in each CSS file to then remove from each file, rewrite the file (effectively removing the duplicated CSS), and then rewriting the common CSS file with one block of JSON for each file to pull from.

Would appreciate any help on this or brainstorming. It’s a neat problem I would love to solve.