I see this style in one of the Next.js SCSS module:

.details[open] .detailsIcon {
  transform-origin: 50% 50%;
  transform: translateY(-50%) rotate(90deg) matrix(-1, 0, 0, 1, 0, 0);
}

It has an open paramter.

Checking here SCSS documentation:

https://sass-lang.com/guide

It says variables can be declared like:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

but it does not say anything, it can be passed from a React component. How does this work?

This is where open is passed:

interface DetailsProps {
  children: React.ReactNode;
  title?: string;
  isOpen?: boolean;
  setOpen?: (isOpen: boolean) => void;
}
const Details: FC<DetailsProps> = ({ children, title, isOpen, setOpen }) => {
  return (
    <details open={isOpen} className={styles.details}>