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)
you can send from the parent component only the CSS variables you need and let it handle "reading" and assigning the variables to the components that need them
you just need to import color_variables.css in your index.js or app.js so all other component detect your css from color_variables.css