I'm a newbie developer taking a look at an application and I'm a bit puzzled but want to understand how some css is working. I've done some reading and research but my knowledge around how it's built is limited:

1 - The app contains a file e.g. style1.js which has some code such as

module.exports = {
   primary: 'red'
}

2 - There is then another style file for a component e.g. header.css which has

.header {
   color: var(--primary);
}

With some research I've learned that there is a tool called Postcss which is being used here which lets the primary variable be replaced with the value from the js file. However I don't see the file style1.js being imported in either the component or in this style file, so not sure how it gets access to the 'primary' variable.

3 - When the app is built and run and I inspect the source, I see a few styles for the page and when I inspect the bundle.js file I see in various sections all the other styles in here, they're laid out in this way:

eval("module.exports = ....lots of other code and styles
    primary: 'red'
);

I'd like to know how these styles might be ending up here in this way and then how they're being applied to elements on the page, as they're not in a stylesheet or in the style tags at the top of the page which I know Webpack can do.

Any information to help connect the dots here would be great. The app is being built through Webpack.