Typescript and CSS-modules types

Question

I want to use not a dumb mock for CSS modules but real types so I use webpack plugin typings-for-css-modules-loader

for simple css

.foo { color: red; }
.bar { color: green; }

it can generate example.css.d.ts declaration

export interface ILocals {
  'foo': string;
  'bar': string;
}
export interface IExampleCss {
  locals: ILocals;
  'foo': string;
  'bar': string;
}

declare const styles: IExampleCss

export default styles;

so in my code I able to use it like so

import css from './example.css';

const { locals } = css;

<div className={locals.foo}>Red</div>
<div className={css.bar}>Green</div>

and VSCode knows that locals.foo and css.bar members

I try to write a function which is able to get any css definitions in typescript as an input parameter

interface IStringHash {
    [key: string]: string;
}
interface ICSSLocals {
    locals: IStringHash;
    [key: string]: string | IStringHash;
}

interface ISomeInterface {
    renderComponent: (css: ICSSLocals): React.ReactNode
}

const myFunction = (css: IExampleCss) => {
    return (
        <div key="1" className={css.locals.foo}>Red</div>
        <div key="2" className={css.bar}>Green</div>
    )
}

const MyRenderer: ISomeInterface = {
    renderComponent: myFunction
                     ^^^^^^^^^^
};

I get the error:

[ts] Type 'IExampleCss' is not assignable to type 'ICSSLocals'. Type 'IExampleCss' is not assignable to type 'ICSSLocals'. Types of property 'locals' are incompatible. Type 'ILocals' is not assignable to type 'IStringHash'. Index signature is missing in type 'ILocals'.

What is wrong?

I've wrote a relevant sample in typescript playground

// Declaration with generics
interface IStringHash {
    [key: string]: string;
}
interface ICSSModule {
    locals: IStringHash;
    [key: string]: string | IStringHash;
}

interface returnObject {
    a: string,
    b: string
}

interface ISomeInterface {
    renderComponent: (css: ICSSModule) => returnObject
}

// usage with certain realisation
export interface ILocals {
  'foo': string;
  'bar': string;
}
export interface IExampleCss {
  locals: ILocals;
  'foo': string;
  'bar': string;
}

const myFunction = (css: IExampleCss): returnObject => {
    return {
        a: css.locals.foo,
        b: css.bar
    }
}

const MyRenderer: ISomeInterface = {
    renderComponent: myFunction
      ^^^^^^^
};

here is the error:

[ts] Type '(css: IExampleCss) => returnObject' is not assignable to type '(css: ICSSModule) => returnObject'. Types of parameters 'css' and 'css' are incompatible. Type 'ICSSModule' is not assignable to type 'IExampleCss'. Property ''foo'' is missing in type 'ICSSModule'. (property) ISomeInterface.renderComponent: (css: ICSSModule) => returnObject

Can you give more info what are you doing with myFunction ? Taking 'any css declaration' seems not much better than just using any type. — Ski
– Ski, Commented Sep 29, 2018 at 6:15
I'm confused: if myFunction accesses css.locals.foo and css.bar, then it will only work for CSS modules that have classes named foo and bar. So why are you trying to declare myFunction as taking any CSS module? — Matt McCutchen
– Matt McCutchen, Commented Sep 30, 2018 at 2:39
@MattMcCutchen I use some loaders for servrer & browser usage styles - so there it's not so important — Vadim
– Vadim, Commented Oct 1, 2018 at 12:19

Ski · Accepted Answer · 2018-10-02 13:48:28Z

1

Good practice is to only require what you need of the interface and not more. So looks like bar should not be in ILocals and foo should not be in IExampleCss

export interface ILocals {
  'foo': string;   
//  'bar': string; <--
}
export interface IExampleCss {
  locals: ILocals;
  // 'foo': string; <--
  'bar': string;
}

const myFunction = (css: IExampleCss): returnObject => {
    return {
        a: css.locals.foo,
        b: css.bar
    }
}

Sidenote: for simple cases you don't have to declare return type - it will be inferred. And if you need the type of function return value, you can use ReturnType<myFunction>.

edited Oct 2, 2018 at 13:48

answered Oct 1, 2018 at 7:20

Ski

14.5k4 gold badges58 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vadim Over a year ago

css.locals.foo is used for sample to show that any item can be accessed directly or through locals

Ski Over a year ago

Sorry mixed this up, foo should stay, bar should go

user3550446 · Accepted Answer · 2022-08-17 03:20:44Z

0

try out this webpack loader: React-css-components loader

configuration example with nextjs

const nextConfig = {
  webpack: (config, { dev, isServer }) => {
    const rccLoaderRule = {
      test: /\.module\.scss$/,
      use: [
        {
          loader: 'rcc-loader',
          options: {
            enabled: !!dev && isServer,
            exportStyleOnly: true
          }
        }
      ]
    }

    config.module.rules = config.module.rules ?? []
    config.module.rules.push(rccLoaderRule)

    return config
  }
}

answered Aug 17, 2022 at 3:20

user3550446

4653 silver badges10 bronze badges

Collectives™ on Stack Overflow

Typescript and CSS-modules types

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related