In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files.
However, some of our older code follows a similar structure but is stored in a theme.ts file with its own set of variables. The goal is to import the variables from our theme.css file into our theme.ts file so that all manipulations can be centralized within the css file.
After exploring resources like this medium article and this stackoverflow response, I attempted a quick solution by using const s = require('./theme.css'), however, I was unable to correctly assign the variables.
Here's an excerpt from our theme.css file:
:root {
--primaryColor: #427ee1;
--secondaryColor: #f2f2f2;
--chatBackground: #fff;
--typingAnimationDots: #427ee1;
--typingAnimationFill: #f2f2f2;
--userResponseColor: #427ee1;
--fontType: 'Open Sans';
--hoverFillColor: #306aca;
--hoverFontColor: #f2f2f2;
}
And here are unsuccessful attempts at calling variables in our theme.ts file:
const s = require('./theme.css')
const botMessageBackgroud = s.secondaryColor // returns black as if it's undefined
const botMessageBorder = s['--primaryColor'] // also returns black
const botMessageColor = s[':root']['--primaryColor'] // encounters "cannot read --primaryColor of undefined"
This suggests that my approach to accessing the variables may be incorrect or perhaps an external dependency needs to be imported. Any guidance on resolving this issue would be greatly appreciated.
edit** Another method I tried involved utilizing a function:
const s = require('./theme.css')
console.log('s >>> ', s)
const callVar = (varName: string) => {
return getComputedStyle(document.documentElement).getPropertyValue(varName)
}
const botMessageBorder = callVar('--primaryColor')
const botMessageColor = callVar('--primaryColor')
edit** An important detail to note is that values in our theme.css file are derived from our api through a mobx state tree:
export const BotCSS = types.model({
chatBackground: types.optional(types.string, '#fff'),
fontType: types.optional(types.string, 'Open Sans'),
hoverFillColor: types.optional(types.string, '#306aca'),
hoverFontColor: types.optional(types.string, '#f2f2f2'),
primaryColor: types.optional(types.string, '#427ee1'),
secondaryColor: types.optional(types.string, '#fff'),
typingAnimationDots: types.optional(types.string, '#427ee1'),
typingAnimationFill: types.optional(types.string, '#f2f2f2'),
userBoxColor: types.optional(types.string, '427ee1'),
userResponseColor: types.optional(types.string, '#fff'),
widgetShape: types.optional(types.string, '50%')
})
export type IBotCSS = typeof BotCSS.Type
It seems plausible to directly import these mobx values into the TS file or create a view on the model to address this challenge.
edit** I am still investigating solutions. While I have experience importing MST into components, incorporating it into plain js/ts files is unfamiliar territory for me. In light of this, any direction or assistance provided would be highly valued.