The npm package that I published with rollup does not load the CSS global variables

Question

I am creating an npm package that includes my custom components, using Create-react-app, Storybook, and Styled-components.

My project structure

index.css:

:root {
    /* colors variable */
    --primary-color: #6750A4;
    --primary-container-color: #EADDFF;
    --secondary-color: #625B71;
    --secondary-container-color: #E8DEF8;
    --surface-color: #FFFBFE;
    --surface-variant-color: #E7E0EC;
    --background-color: #FFFBFE;
    ...
}

Button.tsx:

import styled from "styled-components";
import clsx from "clsx";
import '../index.css';

export interface ButtonProps {
    variant?: 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal'
    textColor?: string
    background?: string
    rounded?: 'min' | 'mid' | 'max'
}

export const Button = styled.button<ButtonProps>`
    background: ${props => clsx(
        { 'var(--primary-color)': (props.variant === 'filled' || !props.variant) && !props.background },
        { '#FFFFFF': (props.variant === 'outlined' || props.variant === 'text') && !props.background },
        { 'var(--surface-color)': (props.variant === 'elevated') && !props.background },
        { 'var(--secondary-container-color)': (props.variant === 'tonal') && !props.background },
        [ !!props.background && props.background ]
    )};
    ...
`;

It's clear that I'm using css variables in Button.tsx

rollup.config.mjs:

import resolve from "@rollup/plugin-node-resolve";
import css from "rollup-plugin-import-css"
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import packageJson from "./package.json" assert {type: "json"};

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            css(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
        ],
        external: ["react", "react-dom"],
    },
];

Final result is like this

When I want to use it as a package in another project and import the button as a component, my CSS variables are not defined.

1-If I import the CSS file directly, it works correctly, but I want to avoid doing that and instead be able to import components without having to import the CSS file separately.

2-And I also don't want the stories folder to be added to the final result