color_variables.css:

[data-theme='default'] {
  --avatar_bg: #000;
  --avatar_text: #fff;
  --avatar_border: red;
  --button_bg: blue;
  --button_text: #fff;
  --button_border: darkblue;
  --modal_widget_bg: orange;
  --footer_bg: yellow;
  --footer_text: #000; 
}

avatar.css:

.avatar {
  background-color: var(--avatar_bg);
  color: var(--avatar_text);
  border: 1px solid var(--avatar_border);
}

button.css:

.button {
  background-color: var(--button_bg);
  color: var(--button_text);
  border: 1px solid var(--button_border);
}

We have a single color_variables.css file for all components (avatar, button, footer, tab, etc..,). For eg: I have a page that renders only avatar component, it renders avatar.js and avatar.module.css file. So, other unnecessary components will not be rendered in that page.

My question is, Is there any way to pick the used variables from color_variables.css file. I said I have a page that renders avatar component only. So, I want to get the color value of these three variables (--avatar_bg, --avatar_text, --avatar_border) from color_variables.css file. I don't need button color variables and other unnecessary color variables in that page. Is there any way to pick only needed color variables? (I don't wish to split that global variable file)