The CSS-Modules documentation mentions variables here: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

With this you can import variables as so:

@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;

which can be used in your css:

.main {
    background-color: tertiary;
    border-top: 30px solid primary;
}

To make this work postcss-loader and postcss-modules-values need to be added to your webpack config. See below:

        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[name]_[local]_[hash:base64:5]'
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [postcssModulesValues]
                    }
                }
            ]
        }

If its just variables then it won't bloat the output but if your imported files are doing more than that, then it might increase your build output, as per SCSS docs

with @import Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.

I'd suggest using css variables for your globals. Simply declare them once in your main stylesheet that is loaded on entry

:root {
  --var-one: something;
  --var-two: something;
}

and use them anywhere,

  // in stylesheets
  .someclass {
     ...
     font-size: var(--var-one);
   }

   //or even in jsx
   
   <component style={{fontSize: 'var(--var-one)'}} />

This works in both .tsx files and .d.ts files.

The key is to include import 'react' at the top. This turns the file into a module (even if it is a .d.ts file), allowing you to use Module Augmentation to extend the existing React types rather than overwriting them.

The Solution

Place this snippet at the top of your component file (.tsx) or in any definition file (e.g., types.d.ts).

import 'react';

declare module 'react' {
    interface CSSProperties {
        // Allow any CSS variable starting with '--'
        [key: `--${string}`]: string | number
    }
}

Usage

Now you can pass CSS variables to the style prop without TypeScript errors:

<div style={{ "--value": percentage, color: "var(--value)" }} />