css-modules-typescript-loader icon indicating copy to clipboard operation
css-modules-typescript-loader copied to clipboard

Definition file generated different in development compared to production mode

Open AmosguataCyberx opened this issue 4 years ago • 0 comments

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?

AmosguataCyberx avatar Sep 06 '21 13:09 AmosguataCyberx