How can we store the css styles into a constant and use them?

[NarendraKuruva]

I've updated few styles and wrote it in .css file.

Now I would like to store them in a variable and use it like how it is being used in Combobox component like below

// Import like this
import textfieldStyles from "@adobe/spectrum-css-temp/components/textfield/vars.css";

// Later in the component
<ProgressCircle
  aria-label={stringFormatter.format("loading")}
  size="S"
  isIndeterminate
  className={`${textfieldStyles} spectrum-Textfield-circleLoader ${styles} spectrum-InputGroup-input-circleLoader`}
/>

Do I need to take any extra steps to be able to use .css files in this way?

Any help would be appreciated. Thanks!

[snowystinger]

This is in the component which you have copied? is it already built? or is it now "source" in your project?
If it's already built, then you will just need to build it again, I suggest logging out what the textfieldStyles object has in it. We use CSS Modules, which means you'll need to have something like this:

`${textfieldStyles['spectrum-Textfield-circleLoader']} ${styles['spectrum-InputGroup-input-circleLoader']}`

a plain string in the classname won't match any classnames declared in the CSS module, all of them must reference the classname on the CSS module object.

If it's part of your source, you'll have to figure out how to use the CSS in the way that makes sense for your project.

[NarendraKuruva]

@snowystinger

The above-mentioned code is already present in the react-spectrum packages.

Getting below error when importing the styles as given

import styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css',

So, I've copied the styles files & imported in my component

But I'm not able to use the styles by importing like above.

My folder structure is like this

---> Combobox
   ---> Combobox.tsx
---> styles
   ---> textfield/vars.css

But when I'm importing like below

import textfieldStyles from '../styles/textfield/vars.css'

I'm getting below error, Even though the styles are defined

Can you tell us if we need to do any extra steps to be able to use the styles as mentioned above

[snowystinger]

Depends on what bundler you're using.
https://stackoverflow.com/questions/64688862/how-to-load-css-files-with-webpack
https://parceljs.org/languages/css/
https://vitejs.dev/guide/features#css-modules

Though if you've copied the CSS, then I suspect you're going to have even more problems because there are a number of plugins we run over the CSS and you won't have those necessarily.
https://github.com/adobe/react-spectrum/blob/main/postcss.config.js

If you can, you may just want to use the component as is, wait to update until RAC has the support you need, or back this conversation up to what changed which prompted the need for this.

We may have other suggestions if we back up to the root of the issue.