Why Cypress could not read my CSS variables?

[alamenai]

I have a Button.tsx component and I want to write a test for it using Cypress framework.

I have Button.module.css which looks like this:

/** previous CSS **/

.primary {
 /**Cypress could not read this variable**/
  background-color: var(--blue-700);
  color: var(--white);

/** other CSS **/
}

My Button.tsx looks like:

import classNames from "classnames"

import styles from "./Button.module.css"
import { ButtonProps } from "./Button.type"

export const Button = (props: ButtonProps) => {
  const { variant, loading, disabled, children, className, ...restProps } = props

  const buttonClasses = classNames(
    styles.button,
    {
      [styles.primary]: variant === "primary",
      [styles.secondary]: variant === "secondary",
      [styles.outline]: variant === "outline",
      [styles.text]: variant === "text",
      [styles.disabled]: disabled,
    },
    className
  )

  return (
    <button className={buttonClasses} {...restProps} cy-data='core-button'>
      {loading ? (
        <span
          className={classNames(styles.loader, {
            [styles["primary-loader"]]: variant === "primary",
            [styles["secondary-loader"]]: variant === "secondary",
            [styles["secondary-loader"]]: variant === "outline",
          })}
        ></span>
      ) : null}
      {children}
    </button>
  )
}

In my test, It's supposed to see a blue button based on styling:

CSS VARIABLES:

This is my test result:

This is my Button.cy.tsx test:

import { Button } from "./Button"

describe("Button Testing", () => {
  it("Should render button with text", () => {
    // I expect to see blue button based on the styling
    cy.mount(<Button variant='primary'>Create</Button>)
    cy.get("[cy-data='core-button']").should("contains.text", "Create")
  })

  it("Should render primary button", () => {
    cy.mount(<Button variant='primary'>Create</Button>)
    cy.get("[cy-data='core-button']").should("have.css", "background-color", "var(--blue-700)")
  })
})

BROWSER INSPECTION

When I use explicit color, it works well:

/** previous CSS **/

.primary {
 /**Cypress works well here**/
  background-color: blue;
  color: var(--white);

/** other CSS **/
}