Skip to content

Definition file generated different in development compared to production mode #46

Open
@AmosguataCyberx

Description

@AmosguataCyberx

I am using this library to build my webpack application and I am even using mode: verify in my CI.
this is my css module written in SASS:

.MDButton {
    &-Container {
         dispaly: flex
    }

    &-Edit {
        > span > i:nth-child(2) {
            display: none;
        }
    }

    &-Command {
        border-color: transparent;
        background: transparent;
    }
}

when I build the application in webpack development mode the output definition file is:

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'MDButton': string;
  'MDButton-Command': string;
  'MDButton-Container': string;
  'MDButton-Edit': string;
  'mdButton': string;
  'mdButtonCommand': string;
  'mdButtonContainer': string;
  'mdButtonEdit': string;
}
export const cssExports: CssExports;
export default cssExports;

when I build the application in webpack production mode the output is:

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'MDButton-Command': string;
  'MDButton-Container': string;
  'MDButton-Edit': string;
  'mdButtonCommand': string;
  'mdButtonContainer': string;
  'mdButtonEdit': string;
}
export const cssExports: CssExports;
export default cssExports;

not only that when I ran my CI process in verify mode (and in webpack production mod) I get the following error:


Module build failed (from ./node_modules/css-modules-typescript-loader/index.js):
Error: Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '/Users/aguata/dev/Azure-IoT-Defender-Core-UI/src/components/button/MDButton.module.scss.d.ts'

   // This file is automatically generated.
   // Please do not change this file!
   interface CssExports {
 -   'MDButton': string;
 -   'MDButton-Command': string;
 -   'MDButton-Container': string;
 -   'MDButton-Edit': string;
 -   'mdButton': string;
 -   'mdButtonCommand': string;
 -   'mdButtonContainer': string;
 -   'mdButtonEdit': string;
 - }
 - export const cssExports: CssExports;
 +   'MDButton-Command': string;
 +   'MDButton-Container': string;
 +   'MDButton-Edit': string;
 +   'mdButtonCommand': string;
 +   'mdButtonContainer': string;
 +   'mdButtonEdit': string;
 + }
 + export const cssExports: CssExports;
 + export default cssExports;

    at getTypeMismatchError (/Users/aguata/dev/Azure-IoT-Defender-Core-UI/node_modules/css-modules-typescript-loader/index.js:19:10)
    at /Users/aguata/dev/Azure-IoT-Defender-Core-UI/node_modules/css-modules-typescript-loader/index.js:117:11
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:73:3)
 @ ./src/components/button/MDButton.module.scss 2:12-238 9:17-24 13:15-22
 @ ./src/components/button/MDButton.tsx
 @ ./src/components/button/index.ts
 @ ./src/index.ts
 @ multi ./src

what am I missing?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions