Importing CSS variables into a Typescript file

Question

We created a theme.css :root file with a number of commonly used variables to use across the various other .css files for our app.

But some of our older code has a similar setup, but in a theme.ts file with some variables. I want to import the variables from our theme.css into our theme.ts so that everything can be manipulated from that single css file.

I've checked out a few links, like this article on medium, and this answer here on stackoverflow, but no dice.

I wanted to see if I could get it working so I did the quick and dirty way of const s = require('./theme.css'), but I wasn't able to correctly assign the variables.

Here's theme.css

:root {
  --primaryColor: #427ee1;
  --secondaryColor: #f2f2f2;
  --chatBackground: #fff;
  --typingAnimationDots: #427ee1;
  --typingAnimationFill: #f2f2f2;
  --userResponseColor: #427ee1;
  --fontType: 'Open Sans';
  --hoverFillColor: #306aca;
  --hoverFontColor: #f2f2f2;
}

And theme.ts with examples of each of my unsuccessful attempts at calling a variable name

const s = require('./theme.css')

const botMessageBackgroud = s.secondaryColor   // returns black like its undefined
const botMessageBorder = s['--primaryColor']   // also returns black
const botMessageColor = s[':root']['--primaryColor']   // cannot read --primaryColor of undefined

So I'm thinking that my method of calling the variables is wrong, or maybe I do need to import an outside dependency? Thanks, and let me know if you need any other information.

edit** Here's something else I've tried that hasn't worked out. I was pretty excited because I thought it worked. But it didn't.

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** Forgot some critical information here. theme.css gets its values 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

So I can probably just import those mobx values in to the TS sheet, right? Or make a view on the model.

edit** still working on this. However I haven't imported an MST into a plain js/ts file before. Only have experience with importing it into components. I've been looking at some various resources but if anyone can point me in the right direction I'd really appreciate it

yuval.bl · Accepted Answer · 2019-10-15 06:40:01Z

0

I suggest using CSSModules.

This package do (among other things) exactly what you described

answered Oct 15, 2019 at 6:40

yuval.bl

5,0843 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

illia chaban · Accepted Answer · 2024-07-17 05:29:05Z

0

Your function to get css var value seems correct. This is implementation I have used in production before:

const getCssVariable = (name: string): string => {
   const bodyStyle = getComputedStyle(document.body)
   return bodyStyle.getPropertyValue(name).trim()
}

Just make sure you call it after the html document has rendered. This won't work for build/compile time solution or server rendered app (unless you call it inside your components after they mounted).

Update: if all you're trying to do it to use your globally defined css vars inside your theme.ts, you should probably be ok with just copying the variable names

const theme = { 
    colors: { secondary: 'var(--hello-world)' } 
}

edited Jul 17, 2024 at 5:29

answered Jul 17, 2024 at 5:26

illia chaban

11 bronze badge

Collectives™ on Stack Overflow

Importing CSS variables into a Typescript file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related